Simon Willison’s Weblog

Entries tagged css

Filters: Type: entry × css ×


What are some ways that brought your proficiency of CSS to another level?

An exercise I found useful when I first learned CSS was to implement CSS versions of the designs of popular sites. This was back when most sites still used tables for layout.

[... 76 words]

Wrapping block elements in anchor tags? I know this wasn’t valid markup in HTML4 but has this changed or is the only option through JS?

This is a new thing in HTML5: “Block-level” links in HTML5

[... 43 words]

Is there an alternative to media queries for responsive design?

Yes: use percentage measurements for your layout components. That way you can build a website that works on a much larger range of screen sizes. You can combine this approach with media queries—for example, you could specify that your site has a 25% wide navigation menu and a 75% wide content area on devices that are wider than 400px, but any smaller than that and it collapses to a single column layout with the menu hidden and accessible only through a menu bar icon.

[... 102 words]

Why weren’t the features of Sass originally built into CSS?

This is not a straight-forward issue: CSS has a very long, complicated history. A good starting point for understanding the reluctance of the CSS working group to add variables/constants etc to CSS is this essay by Bert Bos of the W3C (entitled Why “variables” in CSS are harmful) http://www.w3.org/People/Bos/CSS...

[... 66 words]

How do you know the real size of a web page?

The Google Chrome developer tools can do this, on the Network tab. Take a look at the bottom blue bar (which says “5 requests | 29.49KB transferred”)

[... 51 words]

Maintainability, a.k.a. the CSS elephant

Now that even Slashdot has made the move to CSS it’s safe to say that the CSS advocacy battle is slowly being won. It’s time to talk about the elephant in the corner of the room: stylesheet maintainability.

[... 317 words]

Firefox 1.5 developer highlights

Firefox 1.5 Beta 1 is out, and is the most exciting browser release in a very long time. It comes with the Gecko 1.8 rendering engine, which includes a ton of interesting new features. New in this version (unless you’ve been tinkering with the Deer Park series):

[... 719 words]

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]

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.

[... 2979 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.

[... 1178 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.

[... 1276 words]

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.

[... 56 words]

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]

Flamin’ CSS

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

[... 807 words]

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:

[... 172 words]

Weblogs table as an ordered list

Dave Winer:

[... 259 words]

Girlfriend as a case study

I’ve been helping my girlfriend 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 :)

[... 201 words]