Peter Gasston is a developer, accomplished speaker, nonogram addict, and is the brains behind The Book of CSS3. You’ll probably know him from his contributions to www.css3.info and his blog www.broken-links.com. Having reviewed his book, I thought I’d fire a few questions in his direction (if you’re interested in CSS3, I suggest you read what he had to say)…
“Hi Peter, great to have you on Webdesigntuts+!
The pleasure’s all mine, I’m a reader of yours!
QCommitting the ever-changing landscape of CSS3 to print must have been intimidating to say the least – what was the biggest challenge when writing The Book of CSS3?
I’d say that communicating some quite complex information in a way that’s easy to understand was probably the biggest challenge. The CSS3 specifications are aimed at the people who implement them in browsers, and because of that can use quite dense language and concepts – the 3D transformation matrix being a prime example of that. I hope that I succeeded in interpreting them for the reader; if I did, I must thank my editor for helping me with that.
Keeping up to date with browser implementation and changes in the spec was also a challenge; I was making changes until the last possible moment before publication, but still had to make guesses about what would be in the final release version of IE9, for example.
QMany web designers are cautious about incorporating CSS3 in their every day work. What would you (being an advocate of pursuing modern techniques) say is the commonest misconception about CSS3?
The one I see the most is “it’s a shame we can’t use it because it’s not in every browser”. If you wait until CSS3 has broad support across every major browser you’ll be waiting for another five years, I’d imagine. With good planning, and coding using progressive enhancement techniques, there’s a *lot* of CSS3 that’s available for you to use right now; I’d say you can use almost everything I cover in Chapters 1 to 13 with only a little extra effort, which means that people who do use good browsers don’t get a second class experience.
QWhich elements of CSS3 usage should designers genuinely be most wary of?
What I’d be most wary of is using unprefixed properties before the spec. is finalised. I know there’s a school of thought that you should do this to future-proof your sites, but it can actually be counterproductive. I’ll give you an example: in the gradients syntax currently implemented by all of the major browsers (using prefixes, as they should), you can use a degree value to set the direction of the gradient; 0deg goes from left to right, 90deg from bottom to top. But this value has updated in the latest version of the spec so that 0deg now goes bottom to top, 90deg left to right. If you’ve included the non-prefixed version in your stylesheets, the gradient will change to be completely different to how you’d planned it.
So if you’re considering using CSS3 properties, you should make sure you know how stable and well implemented they are before making your decision.
QWhich aspects of CSS3 do you find most exciting?
Some of the most exciting things in my opinion are the new layout modules like Grids and Positioned Floats (or whatever they eventually end up being called); these will give real flexibility to the way we approach web design, freeing us from the tyranny of the three-column layout (I hope).
Further down the line, feature and device detection in CSS will be really important as the internet continues it’s migration away from the desktop. Also there are noises about adding Sass or LESS-like features such as variables and mixins – although I understand these face some opposition from within the W3C.
QCSS3 media queries, columns, flexible boxes, grids, and the template layout module appear to completely reshape the way we’ll be approaching our layouts. How far down the line are we looking?
IE10 is driving the new layout methods because Windows 8 apps can be written using web technologies. And the WebKit team are also busy implementing new ways to float content around defined shapes which allows for more flexible, magazine-like layouts. As these are both tablet-friendly browsers I’d imagine we’ll be using new CSS3 layouts for tablet apps by the end of next year, and in the broader web in the few years that follow as we wait for the desktop browser implementation level to rise.
Check out Peter’s The future of CSS layouts at .net Magazine
QBrowser developers continually push the envelope with CSS implementation, and to a large degree it’s them we have to thank for getting the spec to where it is today. They often tackle similar challenges differently – do you prefer the approach of any particular vendor?
I have to say, not really. I’m just glad that there’s a lot of communication between all of the browser makers and that everything is approached in a standards-first way. I’m really happy with Microsoft’s approach: they’ve become a lot more ready to try out experimental features in their alpha and beta releases, but remain cautious about implementing those features in their release versions if they feel that they haven’t been fully tested. This is crucial because they have a very slow upgrade cycle so buggy implementations would plague us for years.
QYou get to put a lot of your theory into action at Top10, are you working on anything ‘bleeding edge’ at the moment?
We’re frantically working on a new design at the moment which uses animations, gradients, web fonts and border-radius, but nothing too bleeding edge in terms of layout. After launch, however, we’re planning to look at implementing more device-responsive elements into the design and even possibly a completely smartphone-optimised version; this will allow us to be more experimental and hopefully push the envelope a little.
QWhat on earth is a nonogram?!
Nonograms are puzzles where you have to fill in cells in a grid to create a picture, when you’re told only how many cells are filled in each column or row. You may know them as Picross. There’s a great online version called Armor Logic but I have an Android version called LogicPic which keeps me up at night.