The Flexible Box Layout module (commonly referred to as Flexbox, for convenience) is implemented in Firefox, Chrome, Safari, and IE10. 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

Today Adobe released a preview of their new WYSIWYG website creator, Muse. Shortly after, I had a good old moan about it on Twitter. Not, as you may think, because I feel threatened by website creation being made easy – it’s been easy for ages, but ‘easy’ doesn’t always mean ‘good’ – but because it gets a few fundamental things badly wrong.

My code purist side rejected it because the markup it outputs is horrendous; if you don’t believe me, take a look at the code for one of their example sites, ‘Lucid Synergy‘. My educator side rejected it because it teaches you nothing about how a web page is made; I learned to code by using Microsoft FrontPage many (many) years ago, and understood HTML by editing the source of the document and tweaking it until I got it the way I wanted – but Muse has no code view, so this is made very difficult.

But the real problem with Adobe Muse is deeper than that: it’s that all semantic sense is completely removed from the page. There are no headings, no lists, all text is in p elements, inline styles are applied with span rather than em/i/b, etc; this gives no structure, no meaning, no aboutness to your page, which at the very least means penalties for SEO.

And worse still is that there’s no document flow; all the elements you add to the page are positioned relatively to their parent and follow no particular order, which is pretty bad for search engine spiders (and hence your SEO), but absolutely terrible for visitors using assistive technology.

It’s the product of a company that cares only about appearance, and nothing for content. As @paulrobertlloyd said on Twitter:

It’s not that the code Adobe Muse generates is ugly, it’s that it’s meaningless.

The issue with the lack of semantic elements is not insurmountable, it just needs some work by Adobe before the final release. The lack of document flow and content order is more serious, however, and will need a complete rethink; I hope that this happens.

I recently wrote a feature for .net Magazine, The Future of CSS Layouts, which took a look at several proposed CSS modules intended to provide more flexibility for laying out websites. One of those modules, Grid Layout, has been experimentally implemented in IE10 Platform Preview, and it prompted Mark Boulton to propose an alternative approach in his article Rethinking CSS Grids.

While I think the alternative syntax is pretty robust, I did detect a couple of flaws in it which I promised Mark I would write about, and that’s what I’ll do in this article. Before I get to that, I just want to quickly address one of the key points from his proposal.

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.

Back in March I wrote about HTML5 Form validation and the problem with the appearance of error messages. I proposed a syntax for styling the error messages, and shortly after I published the post, I submitted the proposal to the W3C via the www-style mailing list.

I’ll discuss quickly the result of that submission, but first I should mention that I’ve since found out that the Google Chrome developers have already implemented their own syntax, and it’s not too far removed from what I proposed. Before I get to that, however, allow me to gripe.

Read the full article

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