Category: css

How Cas­cad­ing Style Sheets are imple­ment­ed in cur­rent browsers, what we can do with the lan­guage, and what to look for­ward to.

The drawbacks of post-processing

In the last few days I’ve been inves­ti­gat­ing CSS post-pro­cess­ing, the idea behind which – writ­ing stylesheets using par­tial­ly imple­ment­ed or emerg­ing stan­dards, which are then tran­spiled to make files which work in cur­rent browsers — is more pleas­ing to me than the abstrac­tions of pre-proces­sors like Sass. I’ve been exper­i­ment­ing with PostC­SS (or rather, css­next, which is to PostC­SS as (broad­ly) Bour­bon is to Sass); how­ev­er, there are a cou­ple of prob­lems with post-pro­cess­ing, at least in the way that PostC­SS approach­es it, which makes me ques­tion its utitility.

NB I must state clear­ly that these obser­va­tions are based on a very shal­low under­stand­ing from my ini­tial inves­ti­ga­tions of how PostC­SS works, and per­haps they would be clar­i­fied and resolved if I tried to use it on a full project. Update: See also the com­ments below this arti­cle, which clear up some of my misconceptions.

The first is that post-pro­cess­ing uses syn­tax from pro­posed stan­dards which have yet to be rat­i­fied. For exam­ple, the vari­ables syn­tax is based on Cus­tom Prop­er­ties which, athough imple­ment­ed in Fire­fox, are yet to have any firm com­mit­ment from oth­er brows­er ven­dors; the syn­tax could still be changed, or indeed dropped entire­ly. That would mean PostC­SS would have to either retain an out­dat­ed syn­tax for back­wards com­pat­i­bil­i­ty, or change it com­plete­ly to match future deci­sions, mak­ing main­tain­abil­i­ty of old projects hard­er for developers.

The sec­ond prob­lem is that the fea­tures of Sass which are most use­ful (and wide­ly used) are those which great­ly extend the core CSS syn­tax – notably, nest­ing and mix­ins. While there are PostC­SS plu­g­ins that add exten­sions to match pre-pro­cess­ing fea­tures, using them means that your source stylesheet is no longer ‘prop­er’ CSS — which is the main attrac­tion of a post-proces­sor to me. If your source stylesheet is large­ly invalid, you might as well use a pre-processor.

Per­haps, as Lyza Dan­ger Gard­ner con­clud­ed, using post-proces­sors means giv­ing up cer­tain features:

Tak­ing a path paved with lean, mod­u­lar post-pro­cess­ing plu­g­ins involves sac­ri­fices. No more nest­ing. Instead of an end­less hori­zon of mix­in pos­si­bil­i­ties, you may be bound to CSS spec real­i­ties, like calc or CSS variables.

I still like the idea of post-pro­cess­ing, but per­haps I need a longer peri­od of accli­ma­ti­sa­tion before it ful­ly makes sense to me.


CSS Blending — a Five-minute Introduction

With the release of ver­sion 30, Fire­fox becomes the lat­est brows­er to sup­port CSS Blend Modes (Chrome has had them for a few months, and sup­port is on the way in Safari 8). But what are blend modes? What is blend­ing, for that matter?

If you’ve ever used image edit­ing tools like Pho­to­shop, Sketch or GIMP, you’ll prob­a­bly already be famil­iar with blend modes. For every­one else, they are meth­ods of mix­ing two visu­al lay­ers so that the two are com­bined. This could be an image lay­er with a colour lay­er, or two image layers.

Read the full article

Cross-browser filters with CSS and SVG

For some time now, since Safari 6 and Chrome 18 were released, we’ve been able to use the -webkit-filter CSS prop­er­ty to apply graph­i­cal fil­ters to HTML con­tent. But it seems that many peo­ple aren’t aware that you can also do this in Fire­fox and — with­in a very lim­it­ed set of para­me­ters — IE9 and above.

The rea­son for this is that all of these browsers sup­port SVG fil­ter effects, and CSS fil­ter effects are basi­cal­ly short­hand func­tions that apply pre­de­fined con­fig­u­ra­tions of SVG filters.

Read the full article

Video of some recent talks I’ve given

I’ve had a real­ly busy year for pub­lic speak­ing, hav­ing had the plea­sure of being invit­ed to speak at ten events so far, from local grass­roots meet­ings to pro­fes­sion­al con­fer­ences (with more to come). Not all of the talks are record­ed but many are, so below I’ve select­ed a few videos from the last few months in the vain hope that you may find them interesting.

Read the full article

Web platform technologies in Safari 6.1 and 7

At the recent unveil­ing of OSX Mav­er­icks Apple also announced Safari 7, with great­ly improved web stan­dards sup­port. It was left a lit­tle unclear as to which ver­sions of OSX it would run on, but brows­ing through their devel­op­er area this week I found a down­load­able pre-release of Safari 6.1, which I think clears that up: it seems Safari 7 will be exclu­sive to Mav­er­icks, while 6.1 will run on Lion and Moun­tain Lion, with all of the web stan­dards sup­port of Safari 7, but only a lim­it­ed set of new features.

As both ver­sions are a major update for the brows­er, bring­ing almost a year’s worth of WebKit updates, I thought it would be use­ful to take a look through the new and updat­ed fea­tures in each, as well as try­ing to iden­ti­fy where they differ.

Read the full article

It’s CSS Day next month!

Next month I’ll have the plea­sure of tak­ing part in CSS Day in Ams­ter­dam, not once, but twice. On Fri­day 14th June I’ll be on stage along­side a tru­ly stel­lar line-up of speak­ers: Eric Mey­er, Bert Bos, Stephen Hay, Divya Man­ian, Tab Atkins, Daniel Glaz­man and Lea Ver­ou. Each of us will be look­ing in detail at a spe­cif­ic mod­ule (or mod­ules) of the CSS spec; my talk will be on the Ani­ma­tions and Tran­si­tions mod­ules. If you’re into CSS in a big way, this day is one you won’t want to miss.

On the pre­vi­ous day, Thurs­day 13th June, I’ll be giv­ing a one-day Respon­sive Web Design work­shop, where I’ll be teach­ing the full process of cre­at­ing a respon­sive web­site: plan­ning and strat­e­gy, pro­to­typ­ing, tools, design deliv­er­ables, and, of course, cod­ing. Alter­na­tive­ly, if your CSS is not quite up to scratch and you need a refresh­er before the con­fer­ence, Eric Mey­er will be giv­ing a work­shop which will teach you all you need to know.

Each work­shop costs €300, and the con­fer­ence day costs €250 (Dutch VAT of 21% will be added to both). Full details, pro­gramme and tick­ets are all on, along with a nice lit­tle East­er egg I found out about today: click on a speak­ers name on the Pro­gramme page to see some live exam­ples of their cho­sen subject!

Oh, and as if my con­fer­ence and some fan­tas­tic talks weren’t enough, as a bonus you get to spend a few days in beau­ti­ful Ams­ter­dam. I’m real­ly excit­ed to be a part of this, and hope to see you there!



I’ve updat­ed my Speak­ing page to include more con­fer­ences, more videos, and a lit­tle on my speak­ing require­ments and pref­er­ences. I’m plan­ning to cut down on the num­ber of talks I give in 2014 (twelve is too many), but am always open to inter­est­ing offers and oppor­tu­ni­ties, so please get in touch if you’re organ­is­ing an event.

[#] 1 Comment