css — Broken Links Archive

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


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!


Removing the whitespace from inline block elements

There are two common methods of building a horizontal component, such as navigation: using floats; or setting the display property to inline-block. This latter approach makes child elements run in to the same horizontal line in the document flow but preserves their block behaviour, and is pretty effective because you don’t have to worry about clearing floats as you would in the alternative technique. It does, however, have a drawback.

Read the full article


Speaking at CSS Day, and a FoWD reminder

I’m extremely happy to announce that I’ve been asked to speak at CSS Day, a one-day event in June that explores CSS in advanced detail, in the company of an array of amazing speakers: Lea Verou, Eric Meyer, Bert Bos, Tab Atkins, Divya Manian, Stephen Hay, and Daniel Glazman. Wow.

I’ll be discussing the intricacies and secrets of the Animations and Transitions modules, while each of the other speakers will also cover a single topic in great detail. It promises to be a really good day. Tickets cost €250 (plus 21 percent tax).

The day before CSS Day there are also two workshops: Eric Meyer will explain the basics of each of the modules to be explained the following day, in case you’re worried about not being able to follow some of the talks, while I’ll be teaching Responsive Web Design techniques and approaches. Tickets for each workshop cost €300 (plus tax).

And just a reminder that I’ll be speaking at Future of Web Design in London in May, where I’ll also be giving a one-day workshop on CSS3 the day before. If you book now you get the workshop plus two days of conference for only £595 (plus tax).


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 . More Asides.