Simon Willison’s Weblog

110 items tagged “css”

CSS element() function (via) Vincent De Oliveira explores the CSS element function (2 years ago), which sadly is still only supported by Firefox. It lets you render any HTML element as a CSS background image, enabling folding effects, animated backgrounds, live previews and more. # 13th November 2017, 2:34 pm

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)

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

Visualizing WebKit’s hardware acceleration. Command line flags for launching Safari (and the iOS simulator) in a way that highlights areas of the screen that are being hardware accelerated—particularly useful if you are using the “-webkit-transform: translate3d(0,0,0)” trick. # 27th June 2011, 10:31 am

Qwery—The Tiny Selector Engine. A quarter of the size of Sizzle (1K gzipped and minified) due to only supporting ID, class and attribute selectors. Could be useful for things like embeddable widgets and badges, where depending on a larger library is impolite. # 2nd April 2011, 8:27 am

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

Plugging the CSS History Leak (via) Firefox is fixing the nefarious CSS visited link colour history leak flaw, which currently affects all browsers and allows a malicious site to determine if you have visited a specific site by checking getComputedStyle against a link to that page. It’s an obtrusive but necessary fix—visited link styles will be restricted to colour and border styles (no background images and hence no more checkbox effects since the image request could leak information) and those colours will not be reported via getComputedStyle. I hope other browser vendors follow suit. # 31st March 2010, 8:01 pm

Going Nuts with CSS Transitions. Nat’s article for this year’s 24ways—adding special effects to images using CSS rotation, box shadows and the magical -webkit-transition property. # 14th December 2009, 1:16 pm

jQSlickWrap. Clever jQuery plugin which allows text to wrap around irregularly shaped images, by processing the image with canvas and rewriting it as a sequence of floated horizontal bars of different widths. It’s a a modern variant of the the ragged float trick first introduced by Eric Meyer. # 23rd November 2009, 7:44 am

How to Make a US County Thematic Map Using Free Tools. This is the trick I’ve been using to generate choropleths at the Guardian for the past year: figure out the preferred colours for a set of data in a Python script and then rewrite an SVG file to colour in the areas. I use ElementTree rather than BeautifulSoup but the technique is exactly the same. The best thing about SVG is that our graphics department can export them directly out of Illustrator, with named layers and paths automatically becoming SVG ID attributes. Bonus tip: sometimes you don’t have to rewrite the SVG XML at all, instead you can generate CSS to colour areas by ID selector and inject it in to the top of the file. # 12th November 2009, 10:49 am

It’s interesting to me how much [Closure] feels like a more advanced version of Dojo in many ways. There’s a familiar package system, the widgets are significantly more mature, and Julie and Ojan’s Editor component rocks. The APIs will feel familiar (if verbose) to Dojo users, the class hierarchies seem natural, and Closure even uses Acme, the Dojo CSS selector engine.

Alex Russell # 6th November 2009, 7:35 am

CSS 3: Progress! Alex Russell on the new exciting stuff going in to CSS 3 based on real-world implementations in the modern set of browsers. Of particular interest is the new Flexible Box specification, which specifies new layout primitives hbox and vbox (as seen in XUL) and is already supported by both WebKit and Gecko. # 22nd August 2009, 11:52 am

Modernizr (via) Neat idea and an unobtrusive implementation: a JavaScript library that runs feature tests for various HTML5 features (canvas, box shadow, CSS transforms and so on) and adds classes to the HTML body element, allowing you to write CSS selectors that only apply if a feature is present. Detected features are exposed to JavaScript as boolean properties, e.g. Modernizer.multiplebgs. # 2nd July 2009, 10:56 am

To Sprite Or Not To Sprite. CSS sprite images are decompressed to full bitmaps by browsers before they are rendered, so sprite files with large numbers of pixels will dramatically increase the memory footprint of your site. # 24th June 2009, 10:33 am

Styling buttons to look like links. Nat has a neat trick for styling submit buttons to look like regular links—so there’s absolutely no excuse for using a “delete” link when you should be using a POST request. # 10th June 2009, 2:11 am

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

10 Cool Things We’ll Be Able To Do Once IE6 Is Dead. Highlights include child and attribute selectors, 24bit PNGs and max-width and min-width. Simple pleasures, but I can hardly wait. # 15th April 2009, 2:17 pm

Practical, maintainable CSS (via) Nat’s posted slides and a video from her latest talk at last week’s Brighton Girl Geeks evening. # 12th March 2009, 12:46 am

I think you overstate the usefulness of the [jQuery Rules] plugin. Using this plugin, users are now limited by what selectors that can use (they can only use what the browsers provide—and are at the mercy of the cross-browser bugs that are there) which is a huge problem. Not to mention that it encourages the un-separation of markup/css/js.

John Resig # 22nd February 2009, 11:11 pm

jQuery.Rule (via) jQuery plugin for manipulating stylesheet rules. For me, this is the single most important piece of functionality currently missing from the core jQuery API. The ability to add new CSS rules makes an excellent complement to the .live() method added in jQuery 1.3. # 22nd February 2009, 5:53 pm

FireScope. Neat little Firefox / Firebug extension which adds a “Reference” tab showing documentation for the selected element from the comprehensive SitePoint Reference site. # 5th February 2009, 10:51 pm

Recreating the button. Fascinating article from Doug Bowman on the work that went in to creating custom CSS buttons for use across Google’s different applications, avoiding images to improve performance ensure they could be easily styled using just CSS. I’d love to see the Google Code team turn this in to a full open source release—the more sites using these buttons the more familiar they will become to users at large. # 5th February 2009, 9:50 pm

Quickchoice—a Speed Dial clone (via) Lovely demonstration of the CSS transform property, as supported by modern browsers. The magic is all in the “iframe { transform: scale(0.25, 0.25) translate(-1200px, -900px) }”. # 23rd December 2008, 12:49 pm

Extending jQuery’s selector capabilities. I already knew this was possible, but the examples James Padolsey provides are eye-opening—I especially like his clever :data selector extension which lets you write CSS selectors that query against jQuery’s custom “data” DOM element storage in a manner similar to CSS2 attribute selectors. # 12th December 2008, 6:05 pm