Advertisement
Interviews

Interview With CSS3 Guru Peter Gasston

by

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)…


The man: Peter Gasston
The blog: www.broken-links.com
The book: The Book of CSS3
The tweets: @stopsatgreen (clever anagram)


"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.


You can find Peter Gasston at www.broken-links.com, check out his book The Book of CSS3, and follow him at @stopsatgreen.

Related Posts
  • Web Design
    HTML & CSS
    Quick Tip: Solving the Equal Height Column ConundrumFloat columns
    There's one familiar problem in web design which has been around ever since we moved from the days of table-based design into the CSS era, and that is: "How can I have 100% height backgrounds in my flexible multi-column layout?". Today, we'll look at some solutions.Read More…
  • Web Design
    HTML & CSS
    A “Readability First” Approach to Media Queries and LayoutReadability first thumb
    In this article I'll be talking about a methodology that is a mixture of many approaches to Responsive Web Design, with a few extras stirred in. It's both "Content First" and "Device Agnostic", and was originally inspired by the typography focused em based "Goldilocks Approach". I like to think of it as a "Readability First" approach.Read More…
  • Code
    Interviews
    Interview With Peter CooperPeter cooper wide retina preview
    Catch up with software developer, Peter Cooper, just in time for O'Reilly's Fluent Conference.Read More…
  • Code
    Articles
    Interview With Bruce Lawson of OperaBlawsonretina
    There's a perception that being in developer relations for a browser maker is all glamor and glitz involving lots of jet setting and rockstar-like experiences. So far I haven't personally found that to be the case but in looking at the life of Opera evangelist Bruce Lawson, I think he may be fitting that description.Read More…
  • Web Design
    Design Theory
    CSS3, Web Fonts and IconsDsfd webfonts retina
    We’re really lucky to be working in an industry like the web industry. Nowadays, we have so many new tips and techniques and ways of working all of the time. We’re also really lucky that we’re in an age where, as these new technologies are introduced, our browsers can (for the most part) be pretty quick to catch up, so we get to put these new technologies into our designs (and gasp, even into client work!) more than ever before.Read More…
  • Web Design
    General
    Life Beyond 960px: Designing for Large ScreensPreview2
    The premise behind a responsive web isn't purely that websites be built in a mobile-friendly way. It's about setting our content free so that it can be experienced by whatever means necessary - and that includes at large scale. Let's take a look at the design considerations behind the often neglected huge desktop screen.Read More…