Simon Willison’s Weblog

Items tagged css in May

Filters: Month: May × css ×

Paper 5 | Scribd (via) A more impressive example of Scribd’s new HTML/CSS document viewer: a mathematics-heavy LaTeX paper by one of Scribd’s engineers. # 7th May 2010, 12:12 pm

Scribd in HTML5. Outstanding piece of engineering work from Scribd—they can now render documents using HTML, webfonts and a ton of CSS absolute positioning (using ems rather than pixels) instead of Flash. Nothing to do with HTML5 of course, which is rapidly replacing Ajax as the most mis-applied terminology on the Web. That nit-pick feels pretty insignificant compared to their overall achievement though—being able to convert any formatted document (.doc, pdf etc) in to HTML and CSS that displays correctly is a real leap forward. # 7th May 2010, 12:09 pm

Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5. Great demo, though calling -webkit-animation HTML5 (or even CSS3) is a bit of a stretch... # 4th May 2010, 7:27 pm

TiddlyPocketBook. Paul Downey took Nat’s dinky pocketbooks CSS and combined it with TiddlyWiki to create a single page pocketbook editor. # 28th May 2009, 1:24 am

Dinky pocketbooks with WebKit transforms. Nat used 90 degree CSS transform rotations in print stylesheets for WebKit and Safari to create printable cut-out-and-fold pocketbooks from A4 pages. Very neat. # 22nd May 2009, 12:33 am

dojo.query: A CSS Query Engine For Dojo. I incorrectly criticised Dojo for not having a CSS node selection tool in my talk yesterday; not sure how I missed this. # 17th May 2007, 9:40 am

Guardian Unlimited’s new look: Some background on templating. Nik Silver describes some of the challenges involved in building a complex new homepage using CSS and Velocity. # 10th May 2007, 12:26 pm

CSS2.2. Andy Budd points out that CSS hasn’t had an update since 1998, and suggests rolling the most obviously useful parts of CSS 3 in to an incremental CSS 2.2. # 6th May 2007, 10:45 pm

Background Images Security Flaw? Styling :visited links can reveal a user’s browser history. # 24th May 2004, 8:24 pm

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], 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

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