css3 - Broken Links Archive

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.

The Flexible Box Layout module (commonly referred to as FlexBox, for convenience) is implemented in Firefox, Chrome, Safari, and IE10 (Platform Preview, at least). I wrote an article explaining FlexBox in detail in .net magazine last year, but thought it worth following up with a short, practical guide on a few things it’s useful for.

I actually don’t think it’s perfectly suited for complex page layouts, but it does some simple things very well, so that’s what I’ll concentrate on. There are three use cases in this article, none of which are impossible using CSS2.1, but all of which are made easier with FlexBox.

Read the full article

For no particular reason other than idle curiosity, I made a demo of a broken neon sign, using CSS Animations (you’ll need Firefox 5, Safari or Chrome to see it). It doesn’t degrade well at the moment, the root cause of which is down to what I think is a bug in Firefox’s implementation — I’ll need to confirm that.

One quick learning from making this: it would be really useful to have CSS Mixins when using a lot of repetitive keyframes, as I do in this animation. The W3C seem to be quite against them, however.

After more than a year of work, I’m absolutely proud and delighted to introduce my first book: The Book of CSS3. As well as the prosaic title, the subtitle — A Developer’s Guide to the Future of Web Design — should give you some idea of what to expect from it: it’s a book written by a developer, for developers; in other words, by me, for you.

The book doesn’t aim to teach CSS from scratch; it presumes that you’re a working developer with a good knowledge of web technologies, especially CSS, and you want to take your knowledge to the next level. It aims to translate the sometimes complex specification into something that’s easier to understand, and has plenty of code examples and illustrations to aid in achieving that aim.

It’s not a book of step-by-step techniques, it’s for keeping at hand to use as a resource; and as such, I believe it’s the first book of it’s kind on this topic. There are plenty of books available which teach you about the exciting visual elements of CSS3 like animations, border radius, and so on, and while my book certainly covers those areas it also goes deeper into looking at new layout methods and what we can expect to see in the future.

If you’re a regular reader of my blog you should find plenty in the book that you’ll enjoy; many of the more popular posts I’ve written, such as Using Media Queries in the Real World or CSS gradient syntax: comparison of Mozilla and WebKit, have been adapted for the book in one way or another.

If you’d like to read a sample the publisher has made available a PDF of Chapter 6: Text Effects and Typographic Styles.

You can buy The Book of CSS3 direct from the publisher, No Starch Press, as either a print copy with free eBook (PDF, ePub or Mobi), or eBook alone. You can also order the print book from many online retailers including Amazon UK and Amazon USA.

There’s a companion website with examples and resources from the book, which I aim to keep updated so that it becomes a constant online reference guide; with browser implementation of CSS3 changing so quickly it’s inevitable that some references in the print book will become outdated in the long term, so the website should go some way to combating that.

I’m anxiously awaiting the first reviews, although initial feedback has been promising. I hope it’s popular not only because I put a lot of time and effort into it — the sense of achievement I have from writing it has been worth all of that effort on it’s own — but also because I believe it’s a book that will be of great use to many people. (I know, I would say that!)

A lot of the attention paid to HTML5 Forms has been centred around the new input types. email, url, date, and the rest are all very convenient, but for me the really useful feature is the built-in validation. In case you’re not aware of it, the browser will now handle all of the validation that we used to use JavaScript for.

This is great for the future, but although you can start using these functions now (in many browsers), they aren’t without their drawbacks — well, one big drawback really. I’m going to explain briefly the problem, and then propose a solution.

Read the full article

Recently I’ve been working on the new website for my employers, Poke London, which launched last week. One of the things of which I’m proudest is the use of media queries to create a site which is sympathetic to small-screen devices. I learned a lot from developing with media queries, not least of which was the limit of what’s possible with them, so I thought it would be useful to present some of the key lessons learned in this post.

By the way, throughout this post I will refer to the ‘mobile version/site/theme’; I’m aware that’s a loaded term as the site won’t work on many mobile devices, but I’m using it purely as a convenient shorthand for ‘handheld device that supports media queries’.

Read the full article