CSS3

CSS3 now has a new proposal for laying out websites, with the release of the first working draft of the grid positioning module. The new module makes it easier to define layouts using typographic grids (see Khoi Vinh’s website for a good introduction).

Used in conjunction with the multi-column layout module, you can use the new gr measurement unit to define objects that span multiple columns:

body { columns:3; column-gap:0.5in; } 
img { float:page top right; width:3gr; }

Or, using the new grid-columns and grid-rows declarations, you could quickly divide up a page for layout purposes:

body { grid-columns: * * (0.5in * *)[2];
grid-rows: 20% *;
columns:3; column-gap:0.5in; }

I’ve only had the chance for a cursory look at this so far, but it strikes me that it’s not quite as intuitive as it could be, although I need to have a proper look before I can put my finger on exactly why. However, it’s a nice attempt by the W3 to solve the problem of print-style layouts, and after further revision I’m sure it will be a welcome addition.

Here’s the concluding part of our interview with Håkon (you can read the first part here).

6. Name the top five CSS3 features you’d like all major browsers to support in their next major release.

   Here’s some of my favorites:

   • Backgrounds and borders
   • Media queries
   • Multi-column layout
   • Selectors
   • Paged media

   Also, we must not forget Generated content, and tables from CSS2.1. These are great features that still can’t be used due to lack of support from one browser.

7. Do you think there should be a Acid3 that focuses on CSS3 features that designs want supported as soon as possible?

   Yes, I think it’s time for another Acid test — all major browsers but one (guess which one!) support Acid2 by now. I believe Acid3 should test CSS3 features that a critical mass of browsers can agree to implement. Also, it should probably test features from the upcoming HTML5 and the DOM.

8. Do you have a favourite designer who you admire their work, either from a design or technical respect?

   I can’t give you one name. I often show designs from the CSS Zen garden when I give talks; I like many of them.

   I can name two favorite fonts designers, though: Ray Larabie and Dieter Steffmann.

9. How do you think designers can get more involved with the CSS3 progress, to make sure features designed by designers themselves are added to the spec, instead of the features the spec writers might think are important? Is there a way this can be done without designers (many who don’t have much free time to spare) having to read through long mailing list histories and understanding a lot of very technical implementation details (I’m thinking such as having a appointed advisory board of designers for example that advise what features they want, and gather feedback from others, then the implementers can discuss this and come back with issues or start to draft specs for those features)?

   We’ve always encouraged designers to be part of the CSS Working Group, and there has always been strong designer presence in www-style. Many of the choices we’ve made along the way are based on input from designers. For example, you wouldn’t find Backgrounds and borders on top of my list if it hadn’t been for designers. The idea of an advisory board may be a good one.

10. How do you feel about being nicknamed “the father of css”?

    I often refer to CSS as my baby, and I’m fine with being called the father :-) It must be emphasized, though, that the child was shaped by a community. Bert Bos was the first to join the efforts, he came with a proposal of his own that we worked into CSS. Thomas Reardon and Chris Wilson of Microsoft were also influential in the time before the CSS WG and and the www-style mailing list was started.

11. What do you think of the Brazilian band CSS?

    Wow. Right. Change of mindset. Music, right? When it comes to music, I prefer Opera!

We’ve had some great interviews with luminaries of CSS-based design here on CSS3.info already, but this one is my personal favourite! Håkon Wium Lie, ‘the father of CSS’*, spared us some time to answer a few questions about the evolution of web design and the future of CSS. I’m so excited by this, I’ve almost forgiven our friends at Opera for not letting us have an early preview of Opera 9.5!

1. Is the use of web fonts the next big step in web design?

   Yes! Web fonts will be the next big thing if browsers start supporting them. Fonts are one of the core ingredients of design, along with space and colors. CSS is pretty good with space, colors, and fonts, but in the case of fonts the raw materials — the font files — are in short supply. Interestingly, there are lots of freely available TrueType font that authors allow us to use for free. So, I’m trying to connect the dots between web pages and the available fonts. I’ve written more about this in an article in Alistapart and you can play with web fonts in Prince.

2. With the current battles over copyright infringement with music and video on the web, can you imagine something similar occurring over the misuse of rights-protected fonts?

   Almost all the content on the web is copyrighted. It’s still available because copyright holders want it to be available. Sure, there are cases when the copyright holder has not given permission. But I don’t think anyone would argue that we should remove all images, video or music from the web for this reason? There are plenty of freely available fonts out there and no need to use fonts with resistant owners. Also, plenty of new font will be created open-source style if browsers start supporting web fonts.

3. Has web design turned out more or less the way you imagined when you wrote the CSS spec so many years ago?

   CSS was partly about design, and partly about markup. We — Bert Bos and I in the beginning, soon others — wanted to improve web design, but also to keep markup clean. I think the first part has succeeded quite well; I continue to be amazed by the things people are able to do with CSS. I’m less certain about the markup. But you didn’t ask me about markup, so I don’t have to answer for it :-)

4. Outside of web fonts, which part of css needs most work in your opinion? And why?

   Lots of work has gone into the CSS specifications. That will continue, but it’s not where work is most needed. What we need now are implementations — interoperable implementations. In order to get them, we need tests and testers. Lots of them. People who are interested in this subject should join the CSS testsuite mailing list.

5. If you could start all over again, what would you do differently in CSS?

   I’ve written a long PhD thesis, in part on that subject. That’s the long answer. The short answer is that we should have published a test suite earlier. We worked hard to get the CSS1 specification right, but implementors don’t really like to read specifications. They will work long hours, however, for so that their code passes a well-designed test. Eric Meyer came to our rescue and made sure CSS1 got a the test suite.

Part two of this interview, where Håkon discusses CSS3 and web design, will be available shortly.

* Maybe we should have asked him what he thinks of that nickname!

Since the move away from tables to CSS-based layouts, lists have become more important in producing semantic markup; in Andy Clarke’s Transcending CSS, he seems at times to be on the verge of saying all content can be marked up with lists!

Yet the basic list itself is let down by the range of markers available; for unordered lists you have disc, circle or square, or images which are implemented so differently across browsers that it’s better not to use them. Perhaps most annoying of all, you can’t have the glyph be a different colour from the content without extra markup:

<li><span>Lorem ipsum</span></li>

That could be set to change with the proposed new lists module which allows a much wider range of glyphs, markers and counters and, more notably, the ability to style them with the ::marker pseudo-element. In a nutshell, this allows you to treat the list-style-type as a separate entity and style it accordingly.

The working draft doesn’t specify exactly what declarations you’ll be able to apply, although it does mention borders, margin, and padding so it’s not a great stretch to imagine that you could add colour and font styles to that also – meaning lists could be set to become a lot more decorative:

li::marker {
background-color: #fff;
border: 2px dotted #f00;
color: #f00;
font-size: 2em;
height: 4em;
text-align: center;
width: 4em;
}

Do I have to include the usual disclaimer? This is still only a working draft of a proposal (and a low priority one at that), and browser support currently stands at nil.

The CSS Advanced Layout module (explanation here) has been updated. After a quick read through, I’ve found only a few changes.

The first is the introduction of the ::slot() pseudo element, which allows (limited) styling of – obviously – a slot. That is, if you had your layout set up like this:

body { display: "ab" "cc"; }
div#div1 { position: a }
div#div2 { position: b }
div#div3 { position: c }

You could style #div2 either with its id, or with:

body::slot(b) {}

This pseudo-element is still at an early stage of definition, and may be changed – or dropped altogether.

Another, more minor change is that the way to define templates, which was previously undecided between display-model or display, seems to have been decided in the favour of the latter. I’d agree with this, as it uses an existing declaration.

Something else I noticed, which is not a change as it was in the original draft, I just overlooked it, is that vertical-align can now be used to position a block-level element inside a slot; that’s right, like inside a table. Rejoice! No more workarounds!

The Advanced Layout module has been described by the W3C as a concept album – that is, an explorative spec; therefore, don’t expect to be seeing it implemented any time soon. You can, however, download a cross-platform Javascript emulator, written by César Acebal, if you want to try it out for yourself.

I recently posted a preview of the CSS3 colour module on my own blog, but avoided using any actual examples. This was because of the things that have been implemented, the true power isn’t really seen using a simple example. With opacity and the HSLA/RGBA colour models, any elements that have been coloured just look like they fade to a lighter tint if there is only a white background behind it. Support for SVG colour keywords has also existed for a long time, just without being accepted by the validator.

To show the true flexibility of CSS3 colour, I had to build a more complex example with overlapping elements. I also added a number of other CSS3 properties to show case them while I was at it (Why not?). Due to using a lot of transparency, there are a number of issues with Minefield, where it crawls to a hault then eventually stops responding. This may only be a issue with the Mac build or my hardware, so your mileage may vary. There shouldn’t be any issues with using webKit, except for a number of bugs that I seem to have uncovered. Most of these were hi-lighted in my previous post.

Without further ado, here is the example for you to try out (warning large background image). It is based on a loose mock-up of a Mac OS X Leopard style interface. I needed a background image, so took a wallpaper from Michael Palin’s great Sahara series. The photo is copyright Basil Pao and is of a mother and her child in Tabelot, Niger.

Because the example was designed to showcase the various colour values, I’ve mixed between using opacity, HSL, HSLA, RGB, RGBA (both hex and percentage) and keywords. In a real production site I’d have avoided this and stuck with the same colour models where appropriate. I tend to use keywords myself as they are easier (for me) to remember. HSL (and by extension HSLA) would be very useful when greater control over the colour is needed, but at the current moment it isn’t supported enough to be used. The correct RGB value would have to be used anyway to act as a fallback colour.

The example showcases the difference between HSLA/RGBA and opacity. If you hover over the File or Go menus, I’ve added a sub menu that has opacity applied too it. When hovering over a menu item that is displayed over the white title bar behind it, you’ll notice the text is more white than the text with the mud background behind. This is because opacity is set on the foreground and well as the background. for elements that have been styled using HSLA or RGBA on the background colour, such as the faux-window title bars, contents area and menu bar, retain fully opaque text. While the difference isn’t too great with this example, there can be cases where the difference is quite obvious. It also allows things like just the shadows to have transparency.

I’ve included quite a lot of other CSS3 into the mix. There is liberal use of box-shadow to give the allusion of depth on the windows and title bar. Rounded corners have been added to windows. There is an issue with rounded corners, where if overflow is set (which adds scroll bars) then the corner with the scroll bar ignores the radius (or is displayed behind it). I moved the overflow to a div inside the faux-windows to avoid this problem. I’m not sure how browsers can be fixed to avoid this problem without the spec changing to accommodate things like scroll bars. resize was added to both faux-windows, but there is issues with each element inside the window being resizable independently in Safari, and not being able to resize it smaller (the later wasn’t an issue in earlier builds).

One of the big compatibility issues with current browser support is the difference between overflow using multi column layout. In Safari it doesn’t respect the setting of having two columns, by adding extra columns to the right of the visible columns. This seems smart at first as it avoids the issue of having to scroll to the bottom of the first column and back up to the start of the next column, however it is generally harder to scroll horizontally than vertically. You can also imagine if a height was set and overflow wasn’t used then it could push any content to the right of the columns out of view, such as a right hand side bar. Minefield just uses the two specified columns and makes the content as long as needed. This has issues as you get the scrolling problem mentioned previously. This will be a usability annoyance. My only suggestion is that a column height can be set, and when all available space is taken up without scrolling, a column break is inserted and columns of the same width and height are repeated below until the content runs out. There would have to be some way to specify the vertical column gap though. This would solve the readability issue, a one block of columns could be read at one time, and it will stop and important right sided content (or left in rtl layouts) from being pushed off the screen.

The next CSS3 used was background-size. This was set at 100% so that no matter how big or small the browser window is, all the background image is shown (overflow:hidden; had to be added as the very latest versions of WebKit add scroll bars, unlike previous versions). This currently only works in WebKit. While most of this works fine in WebKit (if you ignore the bugs), one thing that only works in Opera and KHTML is the menu separators. Instead of adding mark-up such as a br I used the nth-child selector to select the exact element where the separator should go, and added the appropriate margin, border and padding. Without there being an element to group related list items, I though this was the best way to go about it, plus it was another excuse to show off more CSS3. Finally I used a attribute selector to grey out the print menu option (or any option in the menu with a URL of #). This is a bit of a hack to demonstrate the technique, but you can see how it could be useful in the real world.

The great power I see coming with CSS3 is that this example looks fairly complex and flashy, yet only uses one image (the background image), and the mark-up is very brief. I could have used even less mark-up and ID/Class attributes, but they were added for semantic meaning. The problem is more that the browser has to do much more processing to work out things like the transparencies so there can be performance issues, especially on older hardware. One can expect that performance will be tuned as support for the new properties are included in final releases.

Since the idea of CSS2.2 was raised, there’s been some discussion as to what it should encompass, who should be responsible for the spec, and what it should be called; here’s what I think:

First, it doesn’t matter what it’s called. Whether it’s referred to as CSS2.2, CSS2.1+, CSS3 Interim, or whatever, makes no difference. It doesn’t need to have a name at all; the important thing is that we have it.

Second, it doesn’t need to be an official recommendation from the W3C; in fact, it may be easier if it’s not. The optimal solution would be communication between developers and browser manufacturers, and – crucially – between the browser manufacturers themselves. What’s needed is an agreement as to which features are implemented, and to make sure those features are implemented in the same way; a de facto standard.

Finally, what feature should it include? For me, it has to be the elements which have already been implemented and tested in at least one browser for an amount of time sufficient for developers to have used them.

The most-requested feature is multiple background images; if you’re going to have that, background clip, origin and size would be wanted too. Border images would also be useful, as would an agreement on implementation of border radius.

Opacity, and with it RGBA and HSLA, box shadow, and text shadow would round off the decorative declarations.

Even if those few could be agreed on, a lot of workarounds could be avoided.

I would have said that multi-column layouts were less urgent, but as they are already part of the Gecko engine and about to be introduced in Safari 3, it seems that that should be part of the standard. Media queries would be pretty necessary as we move into the mobile era, too.

Nothing I’ve mentioned above would be unrealistic; most have already been implemented in at least two current or imminent browsers. As they are available, why are we being kept waiting before we can use them? Think of all the extraneous markup we could be freeing ourselves from!

Come on, browser makers: open up lines of communication and get talking to one another; float the ideas on your company blogs, see what your readers have to say. There’s a whole big community of developers who love to download nightly builds and test new features, and are hungry to improve their pages.

While preparing an example of using the colours specified in the CSS3 Colour module, I come across something after Minefield (the nightly builds of Firefox 3) updated itself. It now supports the resize property from the Basic user interface module.

Unfortunately, Minefield loads, then freezes and eventually doesn’t respond when trying to use this. This is unsurprising of a nightly release, and was likely due to the other CSS3 properties I was using on the example. The strange thing however is that the examples on the css3.info resize preview page do not work at all.

I decided to strip out a lot of the extra styles and content that I was using, and have an example where resize works both in WebKit and the latest Gecko builds. As this is part of another example that isn’t quite finished yet, there are a number of bugs, which may or may not be my fault. There are also a number of styles which probably don’t need to be there, but are part of a bigger example, that will be coming soon. I just wanted something quick that would show this in action. Feel free to suggest any improvements.

You can check out the resize example here.

So what are the issues? In the example I wanted to make a faux window, much like a desktop application window. The whole window should be resizable as one block. For this I placed the resize on the app-window div. The main contents of the window had to be scrollable when there is too much contents for the size of the window, but the rest of the contents shouldn’t scroll, such as the title bar (a h2 element). Therefore I put the scroll on the contents div.

In Safari there is a problem where both the h2 title bar and the main contents resize independently of each other. There doesn’t seem to be a way to resize the whole containing div where the resize is set. In Firefox this works correctly (or at least how I expected it to work). In Safari the content also can’t be resized smaller that the initial value of the div. This wasn’t an issue in an earlier build I was using while developing the example.

Minefield can be resized down to the minimum size and width requested, but it only resizes correctly horizontally. The div resizes vertically but the containing content div doesn’t resize at all. This may be a bug of mine as the contents seems to break out of the container slightly at the bottom. I haven’t had time to look into this.

One strange thing about Minefield’s support for resize is that it adds a cross-hair icon that allows one to move the contents around the page. This works correctly, unlike the resize, but I can’t find anywhere in the spec which specifies this should be allowed when using resize and it isn’t expected behaviour, or at least I wasn’t expecting it, and I didn’t specify that the div should be moveable. It would be nice to be able to specify this with a different property however.

Also, as I use a Mac, I expect the content to be only resizable from the resize widget on the bottom right hand corner (for better or worse). Minefield ignores this and has its own controls, which can’t be styled as far as I know. I also can’t remove the resize controls after clicking out of the resizable content. They stay until the page is reloaded. As resize has probably just been implemented, it is expected that their will be a number of bugs like this however, so things should improve as more people test out this and other CSS3 properties. Resize with HSLA/RGBA and overflow: scroll; is particularly buggy for instance.

I’m working on the original example, that I’ll post here at a later date, along with an updated version of the overview of the CSS3 Color Module that I posted on my personal blog recently. I guess I’ll have to report the bugs I’ve found to the appropriate places, unless it turns out I have bugs in my code instead.

I mentioned earlier this year a tutorial which shows how to use CSS 3 selectors to enhance hyperlinks. Of course, you don’t need to limit yourself to just the href attribute; with CSS 3 selectors, you can use the same technique for any tag which has an attribute. I’m going to give a couple of quick examples, which will output the following result (of course, you’ll need a browser better than IE6 to see them!):

• Home
• Download a PDF
• En Français

All icons are from the fantastic collection at famfamfam.com.

The first list item uses the general attribute selector to look for any tags with an accesskey attribute and display an icon to alert users to its presence:

#test_selectors a[accesskey] {
background: url('icon_key.gif') no-repeat 0 50%;
text-indent: 20px;
}

The second item looks for links with a type attribute value of ‘application/pdf’ (you do mark up links to documents using the type attribute, right?) using the exact attribute selector, then inserts an icon advising you of the destination document:

#test_selectors a[type='application/pdf'] {
background: url('file_acrobat.gif') no-repeat 0 50%;
text-indent: 20px;
}

Finally, if you have a multi-language site you can link to another version using the lang attribute with the value of that language, then use the language attribute selector to apply that country flag:

#test_selectors a[lang|='fr'] {
background: url('fr.gif') no-repeat 0 50%;
text-indent: 20px;
}

As always there is much more you can do with the selectors; if you use or develop this idea on your site, post links here for us to see.

The Short Answer:

None of it.

The Slightly Longer Answer:

I’m in the process of updating the Preview area at the moment (sneak preview), and what’s immediately apparent is the low level of implementation of the new CSS 3 features across the major browsers. As IE6 is still the most widely-used browser, roughly 50% (and, slowly, falling) of the market has next to no CSS 3 support at all. A sobering thought.

With IE7 introducing support for attribute selectors, roughly 50% of the market can use those. You will still have to provide fall-back support for IE6, however, either with conditional comments or through graceful degradation.

Next most-widely implemented property is opacity; with support in all the key browsers other than IE, perhaps 25% of site visitors will see this effect if you use it. Again, make sure that your designs degrade gracefully if tempted to add this to your code.

After that, you can more or less forget it. The properties in the Backgrounds and Borders module have patchy implementation in browsers, and almost all use browser-specific prefixes, which you probably want to steer away from in a production environment as they are subject to change (see the border-radius conflict as a good example of why they are tricky to implement).

text-shadow should gain support from Safari 3 and Opera 9.5, but even being generous that’s only around 5-10% of the market. Most of the other properties have little or no cross-browser support.

What You Can Do About It:

Get behind Andy Budd’s ‘CSS 2.2’ idea. Think about it. If you have a blog, discuss it there. Write to browser manufacturers and the W3C. We’re putting together a campaign website to promote the idea, so get in touch with us and offer support.

We want – no, need – these new properties, to do away with many of the non-standard or non-semantic solutions we have to use today to provide complex solutions for simple problems. CSS 3 provides many of those solutions, but they won’t be implemented cross-browser until they become standard; that can be via the W3C, or a de facto standard agreed by browser manufacturers. But however that standard is made, it won’t happen unless there’s concerted pressure from the development community.