Category: css

How Cascading Style Sheets are implemented in current browsers, what we can do with the language, and what to look forward to.

The drawbacks of post-processing

In the last few days I’ve been investigating CSS post-processing, the idea behind which – writing stylesheets using partially implemented or emerging standards, which are then transpiled to make files which work in current browsers — is more pleasing to me than the abstractions of pre-processors like Sass. I’ve been experimenting with PostCSS (or rather, cssnext, which is to PostCSS as (broadly) Bourbon is to Sass); however, there are a couple of problems with post-processing, at least in the way that PostCSS approaches it, which makes me question its utitility.

NB I must state clearly that these observations are based on a very shallow understanding from my initial investigations of how PostCSS works, and perhaps they would be clarified and resolved if I tried to use it on a full project. Update: See also the comments below this article, which clear up some of my misconceptions.

The first is that post-processing uses syntax from proposed standards which have yet to be ratified. For example, the variables syntax is based on Custom Properties which, athough implemented in Firefox, are yet to have any firm commitment from other browser vendors; the syntax could still be changed, or indeed dropped entirely. That would mean PostCSS would have to either retain an outdated syntax for backwards compatibility, or change it completely to match future decisions, making maintainability of old projects harder for developers.

The second problem is that the features of Sass which are most useful (and widely used) are those which greatly extend the core CSS syntax – notably, nesting and mixins. While there are PostCSS plugins that add extensions to match pre-processing features, using them means that your source stylesheet is no longer ‘proper’ CSS – which is the main attraction of a post-processor to me. If your source stylesheet is largely invalid, you might as well use a pre-processor.

Perhaps, as Lyza Danger Gardner concluded, using post-processors means giving up certain features:

Taking a path paved with lean, modular post-processing plugins involves sacrifices. No more nesting. Instead of an endless horizon of mixin possibilities, you may be bound to CSS spec realities, like calc or CSS variables.

I still like the idea of post-processing, but perhaps I need a longer period of acclimatisation before it fully makes sense to me.

 


CSS Blending – a Five-minute Introduction

With the release of version 30, Firefox becomes the latest browser to support CSS Blend Modes (Chrome has had them for a few months, and support is on the way in Safari 8). But what are blend modes? What is blending, for that matter?

If you’ve ever used image editing tools like Photoshop, Sketch or GIMP, you’ll probably already be familiar with blend modes. For everyone else, they are methods of mixing two visual layers so that the two are combined. This could be an image layer with a colour layer, 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 property to apply graphical filters to HTML content. But it seems that many people aren’t aware that you can also do this in Firefox and – within a very limited set of parameters – IE9 and above.

The reason for this is that all of these browsers support SVG filter effects, and CSS filter effects are basically shorthand functions that apply predefined configurations of SVG filters.

Read the full article


Video of some recent talks I’ve given

I’ve had a really busy year for public speaking, having had the pleasure of being invited to speak at ten events so far, from local grassroots meetings to professional conferences (with more to come). Not all of the talks are recorded but many are, so below I’ve selected 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 unveiling of OSX Mavericks Apple also announced Safari 7, with greatly improved web standards support. It was left a little unclear as to which versions of OSX it would run on, but browsing through their developer area this week I found a downloadable pre-release of Safari 6.1, which I think clears that up: it seems Safari 7 will be exclusive to Mavericks, while 6.1 will run on Lion and Mountain Lion, with all of the web standards support of Safari 7, but only a limited set of new features.

As both versions are a major update for the browser, bringing almost a year’s worth of WebKit updates, I thought it would be useful to take a look through the new and updated features in each, as well as trying to identify where they differ.

Read the full article


It’s CSS Day next month!

Next month I’ll have the pleasure of taking part in CSS Day in Amsterdam, not once, but twice. On Friday 14th June I’ll be on stage alongside a truly stellar line-up of speakers: Eric Meyer, Bert Bos, Stephen Hay, Divya Manian, Tab Atkins, Daniel Glazman and Lea Verou. Each of us will be looking in detail at a specific module (or modules) of the CSS spec; my talk will be on the Animations and Transitions modules. If you’re into CSS in a big way, this day is one you won’t want to miss.

On the previous day, Thursday 13th June, I’ll be giving a one-day Responsive Web Design workshop, where I’ll be teaching the full process of creating a responsive website: planning and strategy, prototyping, tools, design deliverables, and, of course, coding. Alternatively, if your CSS is not quite up to scratch and you need a refresher before the conference, Eric Meyer will be giving a workshop which will teach you all you need to know.

Each workshop costs €300, and the conference day costs €250 (Dutch VAT of 21% will be added to both). Full details, programme and tickets are all on CSSDay.nl, along with a nice little Easter egg I found out about today: click on a speakers name on the Programme page to see some live examples of their chosen subject!

Oh, and as if my conference and some fantastic talks weren’t enough, as a bonus you get to spend a few days in beautiful Amsterdam. I’m really excited to be a part of this, and hope to see you there!


Older

Aside

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