Entries in notes (1)


CSS: a programmable language?

Yesterday I attended the London Web meetup organised by Nathan O'Hanlon. The evening before a long bank holiday weekend and with a number of other web related things happening in town there was a good turn out to hear Peter Gasston talk, The CSS3 Of Tomorrow.

Peter began his talk comparing most CSS3 presentations to the story of Superman as portrayed in many comics – they all start off with the origin, where CSS came from, the basic features, some of the "new" stuff that has really been around for years. The stuff you already know. Peter promised his talk would be different and in All Star Superman comic style it'd fly past the things we already know about (stuff even I'm familiar with) and then dive into the truly new stuff.

True to his word Peter flew through the syntax of border-radius, box and text shadow, backgrounds and borders, selectors, opacity, web fonts and media queries. In this section there were a few nuggets of information that I took away – in particular hearing about using hsla (hue, saturation, lightness, alpha/opacity) to provide a greater level of flexibility in defining colours.

p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: hsla(30, 100%, 50%, 0.1) } /* very transparent solid orange */

Also mentioned was the ability to target web pages being viewed on iOS4 and utilising the higher resolution display. Using the media query (webkit-pixel-ratio:2) you're able to call a separate set of CSS rules which contain higher resolution images specifically for that device.

Next Peter moved onto some of the newer things such as linear and radial gradients making reference to Lea Verou's CSS3 patterns. Before covering transitions, transformations (2D and 3D) as well as animations. Some great examples where shown, many have been doing the rounds on the internet but in case you've missed them take a look at:

So far the talk was pretty good. It had clarified a few things I'd been uncertain of, introduced some new concepts and provided some great reference material to take away.

Before going into the final section of the upcoming CSS3 features Peter gave a short intermission where he described some of the practises he uses when writing CSS. There were some useful tips around performance such as listing your mobile specific CSS first and using media queries to ensure that the heavier stuff isn't loaded when it's not being used. Peter also spoke highly of Modernizr to help detect browser support for CSS features.

To close the talk Peter described some of the new features coming into the CSS3 specification as well as some which are in the very early stages of being worked on right now. There was a strong focus on layout with things like being able to define multiple columns, flexible box layouts, grid positioning and template layouts. Something being lead on by Adobe is CSS Regions. This if successful will allow you to have flows of content around a page, these flows could be in simple column layouts or extremely complicated shape layouts. There are some examples of what can be done here.

Finally Peter talked about the ability to declare variables and mixins in CSS. The simple example that Peter gave was being able to declare a colour at the start of the CSS which could then be referenced throughout making it easy to change the colour in a single place without having to trawl through all the CSS:

@var $myColor #f00;
h1 {color: $myColor;}

The introduction of things like variables, mixins, animations and transformations raised the question, is CSS becoming a programmable language? The answered seemed to be yes and this left another question, where do you draw the line between what should be done in CSS and when should you use JavaScript?