Simon Willison’s Weblog

More CSS trickery

Stu Nicholls dropped me a line earlier to pimp his new CSS demo site, www.s7u.co.uk. He’s got some really nice tricks and the site warrants serious exploration. There’s a good take on the classic 3 column layout with header and footer problem, a bunch of neat menus and a bunch of fun demos that defy categorisation.

The underscore hack

Via Web-Graphics, Petr Pisar’s Underscore Hack provides a new way of targetting CSS rules specifically at Internet Explorer on Windows. As with all such hacks, the pros and cons of using this approach need to be closely examined before deploying it. The hack takes advantage of the fact that adding an underscore to the start of a property name causes that declaration to be ignored by every browser except IE for Windows. However, the hack takes the dangerous step of using one bug to solve another. Peter-Paul Koch explained why this is a risky thing to do in a recent column for Digital Web magazine:

Teaching CSS: there’s a long way to go

This email to the css-discuss mailing list does a great job of describing the confusion and frustration that still confronts traditional web developers who are only just starting out on the road to mastering CSS. When you’ve “got it”, it’s easy to forget how much of a paradigm shift it is away from old school table methods. Here’s an extract:

Sprint PCS goes CSS

The Sprint PCS site has relaunched, using XHTML 1.0 transitional and CSS. It’s another great example of a mostly web standards compliant commerical/corporate; there are a few validation errors thanks to a quarrelsome CMS. France Rupert is the lead developer behind the new site and is promising a detailed writeup of the process and challenges behind the redesign. France hails from Kansas City, so hopefully we’ll be able to get him along to a web meetup in the not too distant future.

CSS border art and other treats

Chris Hester’s 3D Border Demo 2 (via Web Graphics) is an impressive demo of just how much you can achieve with CSS borders. His Tips & Demos collection is worth browsing through as well; I particularly liked this Shadow Demo, although markup purists may be distressed by the number of nested divs. The sooner we can use the CSS3 ::outside pseudo element to achieve effects like this without the surplus divs the better.

Targetting CSS at IE5

Tantek has created/discovered a new CSS hack, the Mid Pass Filter. This filter allows you to write CSS rules that will only be applied by IE 5 and IE 5.5 for Windows. This is great news, as those are the browsers with the broken box model (provided you trigger standards mode in IE 6).

On CSS Remakes

I’m a bit late to the party on this one, but Paul Hammond’s open letter to “tableless” recoders caused quite a stir a few weeks back with its extensive list of reasons that recoding someone else’s site in CSS helps no one and can in fact have a negative affect on the CSS advocacy effort (the response to the article is summarised in his follow up post).

Magazine styles in CSS

Mimicking Magazines (via techno weenie) is a nice set of CSS styled paragraphs inspired by the design of Cosmopolitan. They resize well thanks to intelligent use of ems for sizing instead of pixels.

3 column CSS layouts: Easier than you might think

In a recent issue of the Sitepoint Tech Times newsletter, Kevin Yank explains (in detail, with pictures) the recurring problem in CSS of trying to create a three column layout with columns of equal height and a footer spanning all three. If you don’t yet understand the problem, you will once you’ve read his article. Kevin suggests a javascript fix for the problem, but fails to mention that by using floats instead of absolutely positioned divs for the side columns a three column layout with a full width footer can be achieved without resorting to javascript. Pixy’s 3 columns, no hacks demonstrates this technique in action. In addition, the CSS-Discuss Wiki has a comprehensive list of 3 column layouts that demonstrate a number of other techniques for solving the same problem.

Superb CSS template/tutorial

I’m not sure how I missed this one. Holly Bergevin’s Perched Upon a Lily Pad is a CSS demo that shows off a 3 column layout with a flexible header, full length columns, horizontal navigation bar and complete descriptions of exactly how it all works contained within the page. It’s very educational (I’ve learnt a trick or two just by reading it) and a great example of solid, cross-browser CSS design.

More CSS tips and tricks

• Lachlan Cannon shows off some neat tricks for styling forms with minimal markup on the freshly redesigned illuminosity. I used his CSS for the forms in the comment authentication prototype and it worked a treat.
• Adam Kalsey struts his stuff with techniques for dotted borders in IE and a nice new rounded box corners method.
• Dave Shea reclaims Times New Roman. I’d been avoiding it for so long I’d completely missed the idea of sprucing it up with CSS. Lovely.

CSS drop shadows

Yet another groovy CSS demo: Drop shadow effects using only two nested divs and an alpha-transparent PNG. They look passable in IE as well. Another gem from Paul Hammond’s link blog. Incidentally, Paul has written up some interesting observations on how a previous item from his link blog spread itself around the ’net after I linked to it a few days ago.

Diagonal shapes with CSS

Information on Border Slants (via Paul Hammond). Border slants are the effect whereby diagonal lines can be created using pure CSS, by taking advantage of the fact that thick borders around a box meet at an angle. This article describes the effect in detail and shows how it can be used to achieve a number of interesting shapes, then goes on to show off with an impressive Valentine’s Day Heart. See also Tantek’s awesome pentagon site map and A Study of Regular Polygons.

CSS Roundup

• SitePoint are running a CSS Design Contest, inspired by the Zen Garden.
• CSS/Exp is Mark Schenk’s collection of CSS experiments which show off some pretty advanced CSS, much of which oonly works in Opera due to its full support of generated content.
• CSS Destroy is a similar collection, with an emphasis on pushing CSS to its limits and beyond.

The new RNIB site in CSS

Just to show it can be done, here’s the new RNIB site design (as mentioned earlier) re-done with a CSS layout. It’s something of a first draft—I’ve only tested it in IE6 and Firebird on Windows and it still has a few glitches here and there, but as a proof of concept it works pretty well. Here are a few notes on the implementation:

Gorgeous CSS Rollovers

I’ve been planning a follow-up to my basic link styling tutorial for over a week now, but it’s going to be a lot shorter now thanks to Al Sparber’s excellent Uberlink CSS Rollover tutorial, which covers a lot of useful concepts and ends up with a truly gorgeous looking result. Thoroughly recommended.

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.

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:

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:

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.

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:

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.

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.

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.

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.