Articles in the ‘CSS3’ Category

CSS Matrix Layouts: Another Way?

Today, Jonathan Snook posted about CSS Matrix Layouts, a proposal for a third way for creating advanced layouts in CSS3, with Advanced Layouts and Grid Layouts being the others. His ideas are around creating a grid and defining sections (be it divs or natural HTML5 elements) that are effectively laid out like a table. Each section can span like a table can span rows and columns, with all those values being stored in CSS. Take a look at the post for an example, it’s quite simple once you get your head around it.

I raised some concerns about generated columns, and how the grid might not know how to react, and also that adding columns is a bit of a headache in complex layouts, but is relatively minor compared to the benefits that it would bring. In general, there’s a lot of support for the module. Hopefully we’ll see a draft on www-style very soon.

Of course, this is just all new stuff and unlikely to be fast-tracked to CR status any time soon. However, this module is similar to the CSS Grid Layout module, and some of Snook’s work could be very useful in that module. I’m going to investigate the working draft and if it looks like I can improve it, I might even have a go.

Don’t just complain about CSS3, do something!

A colleague of mine and I were discussing the current state of the internet, CSS3 and IE being behind the rest of the browsers in terms of standards adoption. He argued that IE was “rubbish because it doesn’t support CSS3 selectors/borders etc”. My reply to this was, “well, do something about it”.

IE doesn’t support any non-candidate recommendation CSS3 modules so they can’t be accused of not supporting standards. If you want this to change, we have to get CSS3 finished (at least one module!). To do that, the W3C needs help.

The CSS Working Group is made up of invited experts and representatives of the major web companies (Microsoft, Mozilla, Apple, Google, Opera and Adobe). It’s unlikely that you’ll get to go to one of their meetings any time soon, but everything that they talk about is discussed openly on their mailing list. I’ve been subscribing to this list for around 6 months and haven’t contributed a lot, but anyone can. They currently want people to comment on working drafts and come up with suggestions on how things should work and any problems you have day to day that you think can be solved with CSS.

So seriously, if you want to help, don’t just complain, do something.

Easy Semantic Forms with CSS

In the early days of the Internet, web sites were for gathering and displaying information. In its 20 year history, this hasn’t changed much! At some point on a site you have to enter your details or what information you’re searching for. So, it makes sense that the thing I spend most of my time doing is creating forms!

Most of the time you see a form, the label is on the left and the field is on the right, with validation or help after the input field. There are lots of ways this can be laid out, but the simplest and most semantically correct method is hardly ever used. What I’m going to show you is how to lay out a form properly with standards-compliant CSS.

Read more…