Simon Willison’s Weblog

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.

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:

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.

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.

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.

Flamin’ CSS

Dave Winer, in a follow up to his recent CSS problems:

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.

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.

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:

Weblogs table as an ordered list

Dave Winer:

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.

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:

Blockquote citations

Inspired by Adrian Holovaty, I spent an hour this morning getting dirty with the DOM in an effort to replicate his funky CSS blockquote citations effect but with links that you can actually click on. The resulting code is now active on this weblog—check the javascript out here.

OmniWeb CSS hack

The hack we’ve all been waiting for: How to hide CSS from OmniWeb. OmniWeb is a Mac browser which understands the @import rule but horribly mangles CSS layouts beyond all repair. Thanks to this hack CSS sites with a noticeable percentage of OmniWeb users (and anyone else who cares) can give OmniWeb the same treatment normally reserved for Netscape 4.

Partner as a case study

I’ve been helping my partner Natalie Downe recreate her site using CSS and structural markup. She’s new to web design and has been taking to CSS like a duck to water—as a veteran of Microsoft Word globally defined styles come to her naturally and she took very little time to cotton on to the importance of seperating presentation from content. I’ve shown her tables as well but she isn’t really interested as she sees CSS as a much better solution for general presentation. I’m hoping to help run an HTML/XHTML/CSS training course at the University early next year with a heavy emphasis on structural markup, standards compliance and accessibility so it’s great to have a guinea pig to play with :)

Joe Gillespie does CSS

Joe Gillespie has been introducing CSS to the readers of Web Page Design for Designers.

CSS roundup

Jeffrey Zeldman has resolved his niggling CSS bugs, and posted the workarounds for all to see. What’s amazing and unprecedented about CSS layout is that it’s completely abstracted from the data it presents. he muses. Dorothea Salo points out that the publishing industry has been doing this for hundreds of years. Meanwhile, Todd Dominey has overhauled his CSS to get rid of the javascript browser detection and Mark Pilgrim and Scott Andrew have both posted funky Halloween CSS makeovers.