240 posts tagged “css”
2003
More CSS Zen Garden submissions
The CSS Zen Garden is growing at a pretty impressive rate, with another three submissions since I last checked it a few days ago: Friendly Beaches, Calm & Smooth and Viridity. Also added recently is What Lies Beneath, which is unique in being the first horizontally rather than vertically oriented layout. It’s a shame there’s no automated way of tracking the garden (an RSS feed of new submissions for example) as I keep on forgetting to check back for new material.
Using bookmarklets to experiment with CSS
I’m in the middle of a whole bunch of exams at the moment, but here’s a quick tip that should make experimenting with and learning CSS a great deal easier. It involves bookmarklets. If you haven’t seen them before, bookmarklets are bookmarks that embed javascript; when you click the bookmark, the javascript is executed in the context of the currently loaded page. What that means is that in a suitably advanced browser bookmarklets can be used to modify pages, analyse their structure and do a whole host of other useful things.
[... 813 words]From HTML to CSS
Tom Gilder: “I did this in HTML, how do I do it in CSS?”. A collection of tips for replicating visual formatting effects in old-style HTML with their CSS equivalents. A good resource for people just getting started with CSS.
Fun with links
Yesterday we talked about the box model. Today we’re going to put a small part of it to work, by investigating ways of styling links. Before getting stuck in, we need to talk a bit about pseudo-selectors (also known as pseudo classes). The CSS specification defines pseudo classes as “characteristics that cannot be deduced from the document tree”, but in practise the only widely implemented psuedo selectors are those that apply to links. The key psuedo selectors for links are:
[... 810 words]Understanding the Box Model
Today’s tutorial is going to be all theory. The box model is an inevitable part of CSS, and understanding it is critical if you want to do anything remotely interesting. Like most of CSS, it’s a lot simpler than it sounds. Here it is:
[... 626 words]CSS Tutorial: feedback so far
My CSS tutorial series has been getting some fantastic feedback, both in this blog’s comments system and elsewhere. This entry will summarise the most useful feedback, acting as a kind of errata to the previous entries. Thanks to everyone who commented, there are too many to credit individually but you can see most of the points in their original format by browsing the comments attached to each entry.
[... 661 words]Quick tip: Styling blockquotes with CSS
Today’s tutorial is going to be short one, as I’m working on one last piece of coursework. This time I’m going to explain a clever CSS trick borrowed from Nick Boalch. Here’s a screenshot:
[... 475 words]Defeating IE5 CSS bugs with the help of jwz
Today’s CSS case study will be Jamie Zawinski’s LiveJournal. OK, I admit that he’s something of a tempting target after his widely publicised CSS rant last month (which was the main inspiration for this course), but there are a number of sensible reasons his site makes a good case study as well. The theme for today is “bugs in IE5 for Windows”, and jwz’s site offers two classic examples that fit this theme nicely. The first is the fact that the design is centered on the page, and the second is his choice of Verdana, a font which requires some trickery to get working well in IE5. In addition, the design of the entries seems to be a natural fit for a table based layout, so demonstrating how much simpler the code can be in CSS will hopefully turn a few heads.
[... 2,979 words]Scripting.com, with added CSS
One of the aims of this course is to show how relatively simple CSS can be used to make dramatic improvements to existing sites. Today, I’ll show how CSS can be used to reduce the amount of code needed for a small part of the design of Scripting.com.
[... 1,178 words]The anatomy of a stylesheet
To start my series of tutorials, I’m going to go over some of the basics of CSS. This is the boring bit: if you already know the difference between rules, properties and selectors you may want to skip this entry.
[... 1,276 words]The CSS Zen Garden
This is something we’ve needed for a long time. The CSS Zen Garden demonstrates CSS as used by graphic designers, and is a truly beautiful sight to behold. It currently showcases 5 radically different designs all using exactly the same markup, and invites further contributions from other designers. Finally, a proper demonstration that standards compliant, accessible, CSS driven web sites do not have to be boring or ugly.
Delay to the start of my CSS tutorial series
I still plan to go ahead with a CSS tutorial series, as promised. I’m delaying the start, partly to give myself time to work out a good structure for the series, but mainly because I have a shed load of coursework due in a week today that desperately needs my full attention.
Defending Structural Markup
I’ve been somewhat taken by surprise by the latest round of anti-CSS rants (initiated by JWZ, followups all over the place), mainly because I’ve been using CSS for long enough now that I’d started to forget about the legions of web developers out there who haven’t yet realised what they’re missing. Instead of getting stuck in to dissecting other people’s complaints I’m just going to lay down a few of my own core beliefs.
[... 841 words]CSS Headings
Via Craig Saila, Christopher Schmitt’s 50 CSS Headings. Free CSS code snippets is definitely an idea who’s time has come—there are hundreds of copy-and-paste javascript sites out there but hardly any for CSS (discounting the many excellent full layout sites). Mark Newhouse’s extremely popular CSS Design: Taming Lists article does the same thing for lists but other than that this kind of resource is extremely rare. Web developers not interested in moving to CSS completely can still benefit hugely from using it in their current sites in place of nested formatting tables and presentational tags used to give the visual appearance of headings, so the more of this kind of thing out there the better.
CSS Feedback
My rambling post on CSS yesterday has had some excellent feedback, including some insightful comments on the weaknesses of CSS layouts. My call for a new bookmarklet drew responses (and implementations) from both Stuart Langridge and Jesse Ruderman! Both are well worth installing.
CSS Layout Generators
A tool for generating 3 column CSS layouts that appears to use Big John’s Source Ordered Columns technique. CSS generating tools are a thoroughly excellent idea and I’m surprised no one has done one before; the CSS community is at a point now where there are some well understood, solid layout techniques available and some kind of tool that helps generate frameworks for new designers could really help speed up CSS adoption.
[... 134 words]Yahoo Search uses CSS
In all the fuss about Yahoo’s new search interface over the past few days, the extensive use of CSS in the results pages was almost completely overlooked, probably because the page still contains a small layout table for the top and bottom navigation. The results themselves are served up as a styled ordered list, at least for modern browsers (thanks to a server side browser sniffer). More information in this message from Yahoo’s Brian Ghidinelli, who is seeking feedback.
CSS Support Charts
Time to update bookmarks: The Web Review CSS Support Charts, which went offline several weeks ago, are back at a new home on Netscape DevEdge. Despite not having been signiicantly updated since 2001 they still are still an excellent reference to refer to for CSS browser compatibility issues. More information from Eric Meyer.
Three column layouts in CSS
ThreeColumnLayouts in the css-discuss Wiki currently lists 24 freely available three column CSS layout templates.
css-discuss archives back online
After several months spent offline, the css-discuss archives are back and better than ever thanks to the hard work of my colleagues at Incutio. As well as updating the archives with all of the missing posts from the past few months they’ve improved the URL scheme to make things more search engine friendly (hopefully Google will start indexing the archives now).
Glastonbury does CSS
Cool—the new Glastonbury Festival website uses a CSS layout! Unfortunately it completely fails to validate as XHTML Transitional, but comes to within an inch of validating as HTML 4.01 Transitional (they just need to change the doctype, take out a few XHTML specific attributes and clean up a misplaced <b> tag).
Smarter CSS positioning
Daniel Glazman’s proposal for smarter positioning in CSS (see also this blog entry) makes a lot of sense.
getElementsBySelector()
Inspired by Andy, I decided to have a crack at something I’ve been thinking about trying for a long time. document.getElementsBySelector is a javascript function which takes a standard CSS style selector and returns an array of elements objects from the document that match that selector. For example:
Credibility and CSS
James Buckley links to a new report on How people evaluate a web site’s credibility. His comments:
[... 324 words]Browser detection reconsidered
Leonard Lin on The Folly of Depending on CSS Parsing Bugs:
[... 333 words]Work safe CSS
Here’s a novel use of a stylesheet switcher: Providing a “work safe” edition of a weblog.
Better image rollovers
When browsing through other site’s source code, some of the ugliest HTML occurs when the site uses one of the most basic javascript effects: The image rollover. There are a myriad of these scripts available for free on the web, but as far as I can tell every single one of them requires event handling code to be added to the markup of the page.
[... 341 words]Safari conditional comments
The current extended discussion over whether or not Safari should have some kind of specific CSS blocking technique built in (sparked off by Mark Pilgrim) reminds me of a relatively unpublicised feature of Internet Explorer called conditional comments. These specially crafted HTML comments allow web authors to specifically hide code from versions of IE, or alternatively to hide code from any browsers that are not a specified version of IE. Here’s how they work:
[... 198 words]