css - 3/12 - Broken Links Archive

On Opera’s Implementation of WebKit Aliases

As I’m sure you’re aware, Opera recently released a preview build of their browser Mobile Emulator which is notable largely because they’ve aliased a group of -webkit- prefixed properties, effectively supporting another vendors supposedly proprietary code in their own.

Read the full article

DRY vs Media Queries — a use case for Mixins

CSS pre-processors like Sass and LESS extend CSS in many useful ways, not least by allowing you to use variables in your code either as single values or blocks of multiple property/value pairs, called Mixins. So useful are these that developer Tab Atkins proposed to the W3C that they be adopted into CSS itself, but they were rejected as no suitable use cases were seen.

I think I’ve found a scenario in which, while the use of Mixins aren’t vital, they’re certainly very useful, and it’s because of one of the core principles of coding: DRY (Don’t Repeat Yourself).

Read the full article

The new (and hopefully final) linear gradient syntax

The latest Working Draft of the CSS3 Image Values and Replaced Content module was released last month, and contains some changes to the gradient syntaxes — for what you’d hope would be the last time. The updated syntaxes are a little more logical, but offer the same flexibility.

Firefox 10, which is due for release in a few weeks, will see an implementation of the updated linear-gradient and repeating-linear-gradient functions, so in this article I’ll take a look at those, and write a follow-up when the radial gradient updates are available for use. Update: Here’s the companion article on radial gradients.

Read the full article

My Happy New Year

One more post about things I’ve written elsewhere, then I’ll be back to writing original content here again…

Another pair of articles by me got published today; they’re both introduction-level:

Adventures In The Third Dimension, on Smashing Magazine, is a beginners guide to CSS 3D Transforms, explaining the syntax with a few demos; and for Ubelly I wrote The Five-Minute Guide to CSS Animations, which does the same job for CSS Animations.

I’ve an article coming up for .net Magazine soon; it’s called 10 CSS Techniques for 2012, it’ll be the cover article, and I’m very excited about as I wrote it in collaboration with Andreas Johansson, Harry Roberts, Lea Verou, Nicolas Gallagher, and Paul Adam Davis, all of whom do great work.

After that I have two more articles to write, should be tech editing a book on CSS3, then probably starting work on my own second book. 2012 is going to be a very busy year.

Things I’ve Written Elsewhere

I’ve been writing some articles for different websites in the latter half of this year, and it strikes me that I haven’t done a very good job of promoting them on here. So please allow me to correct that, with this brief rundown in reverse chronological order.

I’ve put together my list of the 20 Best CSS Sites of 2011 for .net Magazine. Choosing only 20 turned out to be really difficult, as I wanted to get a broad range of approaches. I’m sure there are plenty I missed out, including any that aren’t in the English language.

For The Sass Way I wrote about How Sass Can Shape The Future of CSS, showing how many of the features contained in the pre-processed CSS extension are under discussion for inclusion in future versions of CSS.

Webdesigntuts+ interviewed me about my book and my opinions on CSS3, including what I’m excited about for the future, and things to beware of when using cutting-edge properties.

And again for .net Magazine I discussed The Future of CSS Layouts, a subject I’m really excited about at the moment, which led to an article that was very popular with .net’s readership.

I currently have two more articles waiting for technical review and proofreading, which I hope will see the light of day shortly, and have promised to write another two as soon as I get time (as well as one for a dead tree publication). I’m very happy to be writing about my craft, and appreciate feedback or further requests for articles from other sources — although, I won’t be able to write quite as much next year as I’m planning to start my second book.

Opera’s CSS Pagination Build

Opera recently released a Labs build of their browser with support for CSS pagination; that is, removing the scrollbar from documents and adding page controls instead (this is ideal for non-desktop devices, especially TV, where scrolling can be onerous). The syntax (as described in the Generated Content for Paged Media module) is very simple; you first use a media query with the paged media type (prefixed in Opera) like so:

@media -o-paged {}

Then use new values for the overflow property on the scrollable element to control whether the pagination moves horizontally or vertically, and whether or not on-screen controls are shown, like so:

@media -o-paged {
  html {
    height: 100%;
    overflow: -o-paged-x-controls;

This paginates the whole document horizontally, and adds controls. To see this working, you’ll need to download a copy of the Labs build (available for Mac, Windows, Linux and Android), then you can visit this example page from Dive Into HTML5 I quickly set up. Navigate by dragging/swiping, cursor keys, or the native controls.

I really like this; it’s still early days, but the syntax seems clear and logical and works well in the demos I’ve seen, and I think it’s going to be really useful as the web migrates away from the desktop and onto other connected devices. More information and examples are in the ‘Paging the Web’ article on Håkon Wium Lie’s website, and I’ll definitely be delving further into this.

Newer | Older


I’ve updated my Speaking page to include more conferences, more videos, and a little on my speaking requirements and preferences. I’m planning to cut down on the number of talks I give in 2014 (twelve is too many), but am always open to interesting offers and opportunities, so please get in touch if you’re organising an event.

[#] 1 Comment . More Asides.