The CSS 3 news never really gets too quiet out there, I think that more coders and designers than ever have their heads down and hands dirty in CSS 3. How do I know? Well more tutorials and examples are being made all the time and more and more mentions are popping up on the various design and development blogs. Are your hands dirty enough? I know mine weren’t so I set out to see what’s new in for this summer as it draws to a close.
Firefox 3.6 Alpha 1, codenamed Namoroka (after the Namoroka National Park in Madagascar), was released as a nightly download yesterday on the 7th August 2009.
This latest developer test version of the popular browser, based on the Gecko 1.9.2 platform, offers increased support for CSS3, most notably background-size, CSS gradients, multiple background images along with support for the rem unit from the CSS3 values and units module.
The W3C have released an updated working draft of the CSSOM View Module, edited by Anne van Kesteren.
Many of the features defined in the CSSOM View Module have been supported by most browsers for a long period of time, with many tracing their routes back to Microsoft’s Internet Explorer. The goal of this specification is therefore not to reinvent the wheel, but rather to define these features in such a way that they can be implemented by all browsers in an identical way.
Earlier this year we asked if you still want more out of CSS 3 and we found that you did. Of late, we are seeing the dialogue rekindled time and again with great posts being written on other major blogs. Smashing Magazine contributor Inayaili de Leon provides code samples and insight on: using browser-specific properties, selectors, RBGA and opacity, multi-column layouts, multiple backgrounds, word wrap, text shadow. @font-face attribute, border radius, border image, box shadow and more. Definitely great work by de Leon, that also earned a mention from ajaxian. So check out the post and enjoy! Well done Inayaili!
I haven’t had the opportunity to try it out yet, so let me know how you get on.
So, the CSS Working Group is trying to wrap up the CSS3 Backgrounds and Borders Module and prepare it for Last Call. However, there are still some open issues we’d would like to get comments on.
Most of the open issues revolve around
border-image. Brad Kemper knocked down several with his proposal and the CSS Working Group has adopted it in principle. (You can find it drafted into the latest unofficial Editor’s Draft on the W3C site.) We’re still ironing out the details on that, but there are a few others still open on
First Issue: Several people have commented that they would like a way to clip out the center part of the image. There are two options for this: A) Keep the middle part by default (current behavior). Add an
emptykeyword that clips out the middle part. B) Make the middle part clip out by default. Add a
fillkeyword that keeps it. (It’s needed for stretch-tiling things like aqua buttons.) Of course we might also just keep the current solution, C) have authors make that part of the image transparent. Comments? What would you use?
Second Issue: The syntax is particularly arcane. One commenter suggested breaking up
border-imageinto multiple properties, leaving
border-imageitself as a shorthand. For example,
border-image: url(...) 20% 40% / 10% 4em 20% / 0 1em;
would be equivalent to
border-image-source: url(...); border-image-slice: 20% 40%; border-image-widths: 10% 4em 20%; border-image-outset: 0 1em;
This would also allow the values to cascade independently, making it easy to e.g. swap just the image. There’s an overhead cost to more properties, however, so if we do this there needs to be a significant and useful advantage. Thoughts on this idea, or any other ideas for making border-image easier to understand?
Third Issue: There’s still an open question of how
border-imageshould interact with
box-shadow. The two proposals on the table are: 1.) Ignore
border-imageis in effect. (The author can draw the shadow directly in the border-image.) 2.) Use the border-image as a mask to draw a shadow, but only draw the shadow where it appears outside the padding edge (inner border edge). Comments? Preferences?
Fourth Issue: The next topic is fallback colors: the current draft has a feature that lets you specify a background color to use only if the bottommost background image fails to load. The WG wants to know, is this feature something authors really want? Several WG members have posted comments saying that it’s too hard to understand, that it’s not useful, and that the proposed syntax doesn’t make sense. What do you think?
Fifth Issue: The last issue is, the current draft specifies a
background-clip: no-clipfeature that lets a background image spill out of the border box. Implementors are concerned that it’s tricky to implement, and aren’t convinced that it would be useful. If this is something you want, show off a realistic example or two that demonstrates why it is needed.
Off-topic Issue: While I’m here, the WG wanted me to ask what people thought of renaming the
block-directionand whether either was more understandable (or if anyone had better ideas). The property changes the direction of block layout, and the values are
tb(horizontal lines stacked top-to-bottom, like English text),
rl(vertical lines stacked right-to-left, like traditional Chinese text), and
lr(vertical lines stacked left-to-right). This is for vertical text layout, btw; it’s different from graphical rotation. See pages 2-5 of UTN 22 (PDF/HTML+SVG) for a definition.
P.S. Could someone please fix the css3.info style sheet so it doesn’t effectively eat list markup? Thanks.