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 rest of this post


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.

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.


A Year in Web Design

I think it’s been a really exciting year for our industry; the explosion of web browsing away from the desktop, HTML5 beginning to prove itself as the best option for cross-platform development, the newly-resurgent Microsoft making good browsers again… if you make your living from building the web you can’t fail to be heartened by this flourish of new life. There’s been a great appetite for discovery of new browser features, with lots of demos being made using cutting-edge and experimental CSS, HTML and JavaScript, so the curious amongst us have had plenty to satisfy us.

Part of my contribution to tutsplus.com’s experts(!) review of 2011.


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.


Metaphwoar! 2011: What I Do = WTF?

Here’s the video of the talk I gave at Metaphwoar! 2011 last month. The brief is very loose: talk about anything related to the web, but use metaphor (similes are also valid). I chose to talk about what I do, trying to define what it is — but in a very lighthearted way, and in less than 15 minutes.

I enjoyed giving this talk, and the whole event is worth a watch. You can see all the other videos on Vimeo. Bonus: See if you can spot the point where I completely forgot what to say next. It’s quite early on…


An Argument In Favour Of Vendor Prefixes

Henri Sivonen has written a fantastically well-considered post called Vendor Prefixes Are Hurting The Web which I urge you to read in full, as I’m about to discuss it. I think some of his points are absolutely right, but I disagree on the final conclusion. The points that I think he nails are:

  • Demos that work in one browser/engine only and aren’t updated even when other browsers implement the new features, are harmful.
  • Using prefixed features as a way of actively excluding other browsers is lazy and anti-competitive.
  • Including an unprefixed property in anticipation of eventual standardisation works against the principle of using prefixes
  • When browsers have working, largely compatible, implementations of properties (like transform) they should remove the prefix even if the spec hasn’t reached the stage required by the W3C.

However, I still think using prefixed properties is the right approach. If we do as Henri suggests and leave experimental features in experimental builds (an eminently sensible suggestion, I might add), the pace of progress will be much slower. I believe that having these features out there and getting people using them encourages competition (and collaboration) between browser makers, and the benefits of that competition are given to us, the developers, and passed on to the audiences of the sites we build.

That doesn’t mean that the current situation is ideal; far from it. But improving things will involve more effort from us, the developers and writers, the community in general. Chief responsibilities will be:

  • Commit to supporting old demos that we have made.
  • Always make sure we plan our designs and builds in a way that they are not reliant on prefixed features, but degrade gracefully.
  • Don’t use an unprefixed property before standardisation has happened unless we can have reasonable confidence that it is safe.
  • Make sure we stress that the things we use and teach are experimental and subject to change.

As an author and writer I’m guilty of some of the faults that are pointed out in his article, and I promise to do better in the future.

In closing, I want to congratulate Henri on writing this thought-provoking post. I was ready to dismiss it as one of the lazy articles criticising prefixes that occur regularly, but the argument was very well thought and well made, and made me change my mind a few times while I was writing this post.


Archive by category and date