CSS3

Is there ever a time when you wish CSS allowed you to apply style in ways that either are not currently possible, or require hacks and extra markup to make it possible? Well now is the chance to let the working group know exactly what you want. Bruce Lawson is collecting your feedback on the WaSP site. Go there and leave a comment outlining what effects you’d like to achieve. You can also leave feedback on the CSS3 Soapbox.

Remember that the Working Group want examples of what you are trying to achieve, so that they know if current proposals fit that need, or they can think about adding new functionality. Also state why you want to be able to do that, if it isn’t obvious. They are not looking for feedback on syntax, so just leaving a list of new properties you want added won’t be helpful. Also try to check the latest draft modules to see if your proposal is already possible. Things like rounded corners (border-radius) and striped tables (tr:nth-of-type(odd); or nth-child(even); etc.) are already possible. There may be things that you want to be able to do with a property that isn’t possible in the current spec (such as being able to have an inverted rounded corner using border-radius for an example off the top of my head). If this is the case then the suggestion will be very much worthwhile.

Also remember that there is no guarantee that things you suggest will be added to the spec, even if it makes sense, and is technically realistic to achieve.

We at CSS3.info are planning to have a wiki (or similar system) to collate feedback on CSS3 in one place, which can be referenced easier than a mailing list. We will include the most popular suggestions from the WaSP post (with full attribution) when the wiki is in place, and open it up to the public to edit. If suggestions get added to the spec, we can also include the syntax that will achieve that suggestion, and eventually a demo that will produce the same result, once it gets implemented.

Disclaimer: The following post is my personal opinion, and not necessarily those of my employers. My colleague, Chris Mills provided feedback and suggestions for this post.

Since Opera’s antitrust complaint to the EC, some people have used the complaint as a catalyst to promote their agenda against the W3C and the CSS Working Group, with arguments flying on either side. There is no doubt that there are issues there, and action is needed. Transparency is one such issue, with many CSS3 modules not having been publicly updated since 2002. This gives the impression that it is moving at an unacceptably slow pace. There are also accusations that in fighting is delaying progress to suit various parties’ own agendas. I’m not a member of the W3C CSS Working Group, so I can’t comment on how true this is, as I don’t know. I do know however that something has to be done, and the W3C has starting to make progress on remedying this issue. In this post I state where I feel the working group is right now, and propose some changes that I feel will help move things forward.

The current state of proceedings

Lets start with what they have done. They recently started a blog, in which they report on progress and issues. They’ve also created an aggregated feed of blogs and sites to report on CSS3 so that they can hear the voice of people that are discussing CSS3 outside the W3C, ie real world developers. They’ve also started working closely with css3.info. We have a CSS Soap box to let everyone get their issues off their chest, and they have written posts requesting feedback from designers saying what they want from certain properties. Is that far enough? Maybe not, but it is a beginning and I commend the work that Fantasai has done on this outreach.

Transparency of the Working Group

If this is where we are, where do we want to go? Firstly, transparency and accountability have to be greatly improved, so that if anyone is trying to hold up the process or are playing politics this is exposed, whether it is Opera, Microsoft, Mozilla or anyone else. I propose that minutes to meetings and any important documents or drafts are published on the working group blog.

Who should be represented on the Working Group?

Next, there are calls for browser vendors to be removed from the group. This is unworkable (disclaimer: I work for a browser vendor), for many reasons already exposed. I do strongly believe however that a better balance between designers, browser vendors and other parties has to be reached. Gibson or Fender don’t get guitar players to design their guitars – that would be ridiculous, as guitar players can play guitar, but the vast majority of them have very little knowledge of the processes involved in actually building a guitar. They design them themselves, with input from guitar players on what they want. Writing specifications is very difficult, especially when making sure they are implementable in not only a cross platform, device and browser independent way, but also cross culture and language. Test cases are difficult to write. Browser vendors have many of the best people in the business for writing these specs, as they are the kind of people we hire. Ian Hickson is widely regarded as one of the best specification writers of our generation, and he used to work for a browser vendor.

Keeping browser vendors out of the Working Group would also be difficult to police. For example Fantasai works for HP (I believe), but has close ties to Mozilla. Would she be counted as a representative of a browser vendor? Also, would designers be willing to give up what they are passionate about (designing web pages and other media) in order to work full time writing technical specifications? Why also should browser vendors be reduced to an advisory role, for technologies they have to do the hard work in implementing? If this were to happen, we would probably end up with a break away group similar to the WHAT-WG, of browser vendors that don’t want to be told what to do by designers.

A power struggle isn’t what is needed – instead, we need a balance between vendors and designers. The specs should be left to the people that are good at writing specs, and enjoy it, the designers should be there to comment on if the proposals are useful in the real world, and the browser vendors should be there to comment on their side of things – whether the proposals are realistic to implement in their rendering engines.

The designers included could be part of an advisory panel of respected designers (CSS11 for example), adding more invited experts that are willing to spend their time on this and/or having a place where designers can post and discuss mock ups of what they want to be able to do with CSS3. CSS3.info for example could create a wiki where screenshots of desired effects for CSS3 properties could be added by designers, and the merits debated. New proposals could also be added. The WG could then refer to that site for ideas and to solicit feedback. I personally think that the HTML5 working group has far too many invited experts, so limiting the group to a select number, but allowing anyone to leave feedback would be more ideal. It is important that feedback is gained from multiple sources however – the needs of a Japanese designer is probably very different to the needs of a British designer, for example.

Speed of CSS3 development and relevancy of proposals

Furthermore, the speed of development of CSS3 must improve. Making the process more open to inspection will help this by making it harder to use stalling tactics. Action needs to be taken here – I’ve tried to get designers to send me feedback on what standards features they’d like to see in Opera first, but this is difficult, and I received little response. What we need to do is set clear priorities of CSS3. First we need to get the ’07 snapshot finalised (it is currently in Working Draft) and get browser vendors to implement those modules. This is going fairly well at present in three out of the four major browsers. It could also be going well in IE8, but we’ll have to wait to find this out.

In parallel we need to get a list of what properties designers most want to be able to use. Gather the most talented spec writers in the group to work full time, or as much as their employers allow, to mature those specs. It can be finer grained than a whole module, if other parts of that module have issues and are not related to the core properties that are needed. At each iteration, designers should review the progress to see if is moving in the right direction, and the feedback solicited from the working group if there are questions. Properties that have reached proposed final form should be marked as such, even if the rest of the module isn’t ready. These should then be given to the vendors to implement with the dash vendor prefix. Test cases should be built in parallel. Vendors should submit all that they have, while designers should help with this process if possible. The more test cases, the more likely it will be interoperable and the standard will be finalised sooner. These properties or modules should then be added to the CSS snapshot for the current or next year.

One question will be definitely be asked – which modules should be made a priority? Vendors will have an opinion on this, as it depends on the aim of the browser. Apple and Opera will care more about Media Queries than a vendor without a mobile browser, for example, but largely I think this should be down to the design community. If we had a public wiki to discuss this on, I’d suggest the modules or properties with the most active suggestions would be up there, while ones with no activity would be pushed to the bottom. Through the feedback I have collated, designers preferences seem to be borders & backgrounds, selectors, multi-column layout and web fonts, and there has also been interest in the grid layout (although this seems to be the furthest back in terms of both spec and implementations).

Another issue is who will work on these. That isn’t a question I can answer, but if we can somehow get the existing working group to be able to spend more time on it that will help. I’m willing to help out if desired. It should be easier for big companies such as Yahoo! to supply people to represent designers as they have the resources. The problem is that many of the most highly regarded and vocal designers are freelancers that can’t afford to give their time for free. We need to find a solution for this, be it through sponsorship or other means.

Can browser vendors work together?

The other concern that has been raised is that, in light of Opera’s complaint against Microsoft, the browser vendors wont be able to work together. I don’t believe this to be the case. Håkon has stated he has no problems with Microsoft employees, and I’ve personally heard him say he has great respect for the likes of Chris Wilson. I’ve also heard the same coming from Chris. I know or have worked with the likes of Chris, Markus Mielke and Joshua Allen for a while now, and I very much hope that continues. I’m sure they’ll also agree.

Conclusions and the way forward

What we need most of all is action and not talk. I propose the following:

• Get a priority list of CSS3 modules or properties hammered out for both the W3C and the browser vendors
• Get the modules included in the ’07 CSS snapshot to recommendation stage, and push browser vendors to implement them
• Aim to get these priority modules ready for the next CSS3 snapshot (’08)
• Put a mechanism (such as a Wiki mentioned above) in place to give feedback on the issues the WG come up with
• Promote the said mechanism to developers in multiple countries, such as those that use none-latin scripts, and right to left text
• Re-engage the Web Standards Project (WaSP) to take an active role in the activities
• Get the W3C to open up the private communications of the WG, so there is transparency for all to see. Post communication on the Working Group blog or another suitable medium
• Get an official statement from each of the browser vendors on the working group that they are willing to work together in a co-operative and unhindered manor
• To ensure a fair balance between designers and browser vendors on the working group, build a short list of respected designers or developers who should represent designers on the working group. We can get a respected designer like Molly or Zeldman to propose people, again making sure there is diversity of opinion.
• Find a way to fund these designers, either through W3C funds or corporate sponsorship
• Ensure the chosen designers can commit the required time to the project
• Ensure there is at least one designer assigned to each of the modules that are deemed a priority

Opera’s complaint against MS caused quite a bit of stir in the CSS related parts of the blogosphere. Andy called the CSS WG the CSS un-working group, H&akon updated, complaining that “we didn’t get it”. You know what? I, personally, couldn’t care less about all this nonsense.

What we need, and not just we at css3.info, but all of us, is to get working on making those specs work. That means getting test cases for CSS 2.1, and making sure that complete spec is usable, because there are still parts of it which are found, by browser vendors, not to be usable. Next to that we need to focus on getting CSS3 off the ground. Controversy and this kind of bickering amongst each other is NOT going to get us there.

So what DO we need? As Fantasai put it, we need “a way for average users to run tests and generate reports off the official CSS test suites”. Here’s where I ask you guys and girls to help. We have some input, the system might work something like this system. This system shows people a test and asks whether it failed or passed, and uses that data to generate a report based on the user agent string. Now I know we have some bright readers. Who of you would be willing to help improve this system / build a system like this?

I’m working on the CSS3 Backgrounds and Borders module with Bert Bos, and I’d like to start a new Q&A series because I think we need some help: This time I’ll ask the questions, and you give me answers. Ok? :) Since the CSS Working Group Blog currently doesn’t accept comments, CSS3.info has kindly allowed me to cross-post so you can write back. The first issue is a complicated one, so I’ll start with an easy question. The topic is drop shadows.

In the latest public working draft we have a box-shadow property. The point is, obviously, to be able to draw a drop-shadow for a CSS box. It starts to get complicated once you ask “what happens when there are semi-transparent parts of the box?” At first we figured ‘box-shadow’ should just draw the shadow as if the box was opaque. Then Dave Hyatt, who had started implementing this, started questioning that logic. We’ve got proposals for a ‘border-shadow’ property to shadow just the border and a ‘background-shadow’ property to shadow just the background color (but not the image?), etc. We could also just “shadow everything drawn in this element”. This all sounds rather complicated to me so I want to step back and ask:

What do you, the web designers of the world, want to do with shadows? What’s the end result you want to get?

Show me. Post a few links to stuff from your portfolio that uses anything beyond pure text shadows, even if it’s all done with pure Photoshop(/Painter/GIMP) graphics. Draw (or explain) a picture of what you want to achieve. Then maybe we can figure out how best to make it happen in CSS.

Too many people see the Web a bit like television: who ever heard of incompatible content? If there is an error, it’s because the TV set is broken, or maybe the antenna. On the Web, it is much more likely that the content is invalid, but try to explain that to users who just want to buy their holiday or see their bank account…

A very interesting interview with Bert Bos, on the history and future of CSS.

As we mentioned at the end of last month, the W3C have released a working draft of their first annual snapshot. The snapshots are intended to show which specs are stable enough to be considered part of the current state CSS.

The 2007 snapshot is:

• CSS Level 2 Revision 1
• Selectors Level 3
• CSS Namespaces
• CSS Color Level 3

The browser with the least support for the snapshot is, as you’ve probably already guessed, Internet Explorer. Opera has implemented all of the new selectors, but doesn’t yet have support for RGBA & HSL/A colours, which both the forthcoming Safari 3 (Webkit) and Firefox 3 (Gecko 1.9) have implemented. FF3 doesn’t do well with many of the new selectors, however, which Safari does.

While it would be nice to have included text effects and backgrounds & borders in this snapshot, differing browser implementations means they’re just not ready yet.

Even if this working draft becomes a recommendation shortly, no current or imminent browser fully supports the modules contained within; and with Firefox 3, Safari 3, and Opera 9.5 due for release over the next few months, it’s not impossible that none will do so until the latter half of next year. It could even be the case that IE.Next swoops in to beat the others!

With the CSS Eleven set to provide feedback to the W3C over the next few months, the 2008 snapshot could be a little more adventurous than that of 2007.

The announcement of the formation of the CSS Eleven has caused quite a stir in the web development community, with a few questions raised over the self-appointed nature of the group and the way the announcement has been presented. One thing that everyone agrees on, however, is that there’s a clear and obvious need for their existence.

We spoke to Andy Clarke, respected designer and author, who announced the group’s formation (and explained it further here), and asked him a few questions about what we can expect from the CSS Eleven.

1. Please could you sum up very briefly for anyone who hasn’t read your introduction what the CSS Eleven is, and what you aim to do.

   One of the biggest challenges that the CSS Working Group faces is engineering solutions that meet the expectations of visual designers and developers. Leaving aside for a moment their other difficult tasks such as internationalization, understanding what designers need is a tough job; particularly as CSS gets more complex in the areas of layout, typography and other design related areas. The members of the working group, largely technical people, need help. They need practical help to understand what designers need, and in detail. This help cannot come simply from reading emails that are sent to them with suggestions. So far, the channels of communication between creative people and the CSS Working Group have been difficult and many people that I speak to feel that a new way needs to be found to get the designer’s voice heard and their needs understood.

   CSS Eleven is an informal group of visual designers and developers who have agreed to give up a little of their time to helping the CSS Working Group to understand what we need from CSS in the future. We will help by making suggestions, but more importantly by providing clear, real-world, visual, graphical examples of the results of the CSS that we need and helping with making test suites; two areas that have proven very time consuming in the past.

   Are we the only group that the Working Group will listen to? I hope not. We’re simply the first of what I hope will many ways that visual designers and developers get together to help make sure that CSS3 is what designers deserve it to be.

2. How will you arrive at the decisions as to which modules are most keenly needed?

   The decision to look at CSS Multi-Columns was purely mine as it is a mature draft with some features already available to test in some browsers. In the future I’m sure that efforts will be focussed on the modules that matter most to us as visual designers (personally, I’m particularly looking forward to seeing what happens with Advanced Layout). I’m sure that we’ll get lots of feedback and suggestions from the industry at large too.

3. Won’t it be hard to make judgements about implementation when there are no browsers available to test the more advanced features on?

   Of course implementation is important, and we would hope that the browser makers on the CSS Working Group will help us all they can by continuing to implement new features. For me as a visual designer, describing the features that I need from CSS visually is one of the most important jobs that I can do to help the development of CSS. We need clear, real-world visual examples from people who also understand CSS from an everyday working perspective. I’m sure that with so many great people volunteering, there will be plenty to work on.

4. What kind of timescale are you looking at for releasing the first batch of recommendations?

   I would think that we will two months working collaboratively on CSS Multi-Columns, after which I expect that we will open the wiki (or some similar facility) to a wider audience for a month before wrapping things up and handing it to the CSS Working group. Of course everybody involved is volunteering some of their valuable time, so time-scales may change.

5. Which aspect of CSS 3 are you personally most looking forward to?

   Grid Positioning and Advanced Layout will help to solve many of the problems that designers face every day using CSS. There has been a little confusion about the role of Grid Positioning and its relationship to Advanced Layout, but both are exciting developments that I am looking forward to seeing.

The CSS Working Group recently met face-to-face in Beijing, and have released a series of notes about some of the issues they discussed regarding the current and future states of CSS.

One interesting possibility that was raised is to allow rotation of page elements; according to the original proposal, these are some of the possible use cases:

1. rotate a block of text 90 degrees as for a tab on left of page
2. rotate an image (or block of text) an arbitrary amount
3. use rotated column headings for narrow table columns

It must be stressed that this exists purely as an idea at the moment, so we won’t be seeing it any time soon. Still, it would create many new possibilities in web design.

Following our discussion of the inherent ambiguity in the border-radius declaration, it has been decided that the simpler syntax used by Mozilla will used for the shorthand; that is, in order to apply elliptical corners on elements, you will have to declare them all separately. I think this is a good decision, and I’m delighted that the CSSWG have listened to the views of the community. A pat on the back for everyone involved!

Finally, the CSSWG are to release an annual(?) snapshot of modules considered stable, in order that browser makers and developers can begin to implement them. The 2007 snapshot will include:

• CSS2.1
• Selectors
• CSS3 Color
• CSS Namespaces

The 2008 version is likely to include Paged Media and Media Queries, and possibly Ruby and Backgrounds and Borders.

So that’s the state of CSS today. Interesting stuff; many thanks to the CSSWG for making it all public.

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!