Mark Best

The CSS Working Group just published a Last Call for Comments Working Draft of CSS Backgrounds and Borders Level 3. Please review the draft and send your feedback. We’ll be accepting comments through 17 November 2009. (Note that feature requests are likely to be deferred to CSS4.) The best place for feedback is the CSSWG’s official mailing list www-style@w3.org, but we’ll also look at any comments posted (or linked to) here on CSS3.info.

There are a couple issues we’re specifically looking for feedback on:

Rounding vs. Scaling Down

The round option for background-repeat and border-image-repeat resizes images to fit the nearest whole number of tiles, rather than always scaling up or always scaling down. Rounding keeps closer to the intended size and, in the case where one dimension is fixed (e.g. in ‘border-image’), keeps the image closer to the intended aspect ratio. This is almost certainly the best solution for vector images and high-resolution raster images. However, if the given image is a low-resolution raster image, it will require interpolating pixels, which can look bad. See Rounding Extremes for illustrations.

The workaround is to specify a higher-resolution image (e.g. by shrinking from the original with background-size or border-image-width). Possible spec solutions include introducing a separate keyword that always scales down, and changing the algorithm so that we force scaling down whenever interpolation would be required for scaling up. So the options here are

1. Leave the spec as-is (always round to nearest): the workaround is good enough for me.
2. Trigger forced downscaling when interpolation is needed: avoiding interpolation is important to me and I don’t mind that the exact number of tiles is unpredictable and the resulting aspect ratio might skewed a little extra.
3. Default to rounding for round, but I want an extra keyword to force downscaling in all cases (including vector images) because [...].
4. Something else?

Please comment on what you prefer and why. (The more specific you can be “for example, this image that I would want to use [...]“, the easier it will be for us to understand your point.)

box-break naming

The previous draft included two properties for controlling behavior at box breaks (line breaks / column breaks / page breaks): border-break for controlling whether the border is drawn at the break, and background-break for controlling whether the background is drawn for each box individually or for the whole element as if it were broken after painting.

Hyatt suggested merging the two, so the current draft has a single box-break property instead. The two values mean, basically, “render backgrounds and borders for this box, and then slice it up” and “break the box and then render backgrounds and borders for each box individually”. The value names aren’t particularly clear, however, so we were wondering if anyone has better ideas.

Conclusion

So take a look at the new draft and send us your comments! This is your last chance to give feedback on this module: if all goes well, we’ll be publishing the Candidate Recommendation in time for Christmas, and given the state of experimental implementations right now, I expect things to move rapidly from there.

One of the requests that came in during the WASP feedback discussions was for image “sprites”: for the ability to take a slice of an image and use it, e.g., as a background image. This would allow lots of decorative graphics to be placed in the same file. Image slices like this are actually on the CSS Working Group’s radar; the idea’s been floating around for quite awhile, and we’ve added a placeholder for them in the new CSS3 Image Values draft.

So I wanted to gather some feedback on what syntax would be most useful to you. The restriction is: the syntax must be usable as a value for any property that takes images. That is, you can’t suggest new properties. It has to be something that can be used as the value for any of background-image, list-style-image, content, border-image, etc. Bonus points for explaining why your proposed syntax is more convenient than any others.

A few ideas to start (feel free to add your opinion on these):

• image-slice("image.png", X, Y, W, H) Advantage: dead simple.
• url("image.png#xywh=X,Y,W,H") Advantage: can be used other places like <img src="...">, browser address bar, etc.

One aspect of CSS3 that hasn’t received a lot of attention so far is the Flexible Box Layout module. Already implemented in the Gecko and WebKit engines, in this alternative box model:

“… the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of ‘flex’ to the children that should expand.”

It’s probably easier if I show you how this works. NB: you’ll need to be using Firefox, Safari or Chrome (or a variant thereof) to see the demos; and if you’re reading this in a feed reader, you’ll need to visit the original post to see them.

Update: It’s been pointed out in the comments that Gecko & WebKit display these demos differently. I’ll look into why that’s happening, but the demos still correctly illustrate the examples I’m providing.

First of all, here’s a containing div with two children laid out in the standard model (I’ve added a background image on the container for clarity):

Using the flexible box model it’s easy to distribute those two children equally inside the container:

And here’s the code I used for that:

.container {     display: box;     box-align: stretch; 	box-orient: vertical; } .container div { box-flex: 1; }

NB: In fact I need -moz- and -webkit- prefixes for all of these, but I’ve left them out for clarity.

So what I’ve done here is set the display to the new box value, told it to stretch vertically—that is, to the top and bottom—inside the container, and set the box-flex value to 1 to indicate that it should be flexible (0 means no flexibility, but higher values are also possible; more on that shortly).

By changing the box-orient value, I can easily make them flex and stretch horizontally:

.container { box-orient: horizontal; }

Giving both of the children the same box-flex value means that the unused space will be distributed evenly between them; however, you can also provide different values to create a distribution ratio:

In this example I gave the first child a value of 2 and the second a value of 1, meaning the unused space was distributed 2:1 in favour of the first child:

.child-one { box-flex: 2; } .child-two { box-flex: 1; }

You can also distribute elements evenly both horizontally and—finally!—vertically, by nesting horizontal and vertical containers, and using the box-align and box-pack properties:

.container { box-pack: center; } .container .container { box-align: center; } .container div { box-flex: 0; }

The module has many more properties for even more flexibility – this article is only a brief introduction.

The spec is currently only a working draft, but it looks as if the implementations are already pretty stable so I hope that it moves swiftly to become a recommendation.

I owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to me.

Read more articles like this on my blog, Broken Links.

After many man-hours of work, Opera has unleashed Opera 10. This release contains the Opera Presto 2.2 rendering engine. The two main features in regards to CSS3 are Web Fonts and full support for the CSS 3 Color specification.

Web Fonts

Many followers of this blog will know all about Web Fonts by now. For those of you who are new, Web Fonts allow the author of a Web page to link to a font file on a server, rather than just the users local machine. This vastly increases the options available to designers. Opera and Safari supports linking to OpenType, TrueType and SVG fonts, Firefox support OpenType and TrueType fonts, and IE supports EOT fonts. One thing to bear in mind is that although any font can be technically used if the format is supported, the font’s EULA must explicitly allow embedding via @font-face, or be an open licensed font. Examples of high quality fonts that can be used can be found on The League of Moveable Type and WebFonts.info sites.

Web Fonts can be specified using the @font-face At-rule, along with the source of the font and the font name, at the top of the CSS file:

@font-face {
	font-family: "Alef Caps A";
	src: url(../fonts/AlefCapsA.otf) format("opentype");
}

The font can then be referenced as if was a regular font using font-family:

p:first-of-type::first-letter {
	 font-family: "Alef Caps A";
}

I have prepared an example file showcasing the existing fonts that are fairly safe to use today, and a selection of high quality Web Font safe fonts. This will work in Opera, Safari and Firefox. You will need to generate EOT files for the fonts to also work in IE. This demo shows the name of the font and a sample repertoire.

For the Opera 10 launch I prepared a number of other showcases for the article The Opera 10 experience. The first showcase is a mock up Newspaper adapted from a Web Fonts showcase I wrote for this site that was never published. This uses two black letter Web Fonts and a serif web font, and should work in Opera, Safari and Firefox. The next showcase is a type specimen featuring the Junction font implemented using SVG. This requires Opera 10, as it uses SMIL animation which is not fully supported in Firefox or Safari.

I have a currently in progress Web Fonts demo using a pixel font designed for drop caps, of which you can have a sneak peak. This currently only works on Opera for Mac as I have not yet found a suitable free cursive font. Safari unfortunately does not display the Web Font as a :first-letter drop cap. Firefox has inconsistent spacing below the drop cap (which I believe is line height) which makes the text overlap the drop cap when removing the space in Safari and Opera. I hope to fix these issues before publishing the final example here.

Transparency

Opera 10 now supports the full CSS 3 Color spec, meaning that it has full support for all At-rules, selectors and properties in the CSS 2007 snapshot spec. This includes the modules that are considered stable. The only property/value pair missing is visibility: collapse; which has already been implemented in the Opera Presto 2.4 engine.

Opera supports the transparent value in the CSS 3 context, such as color, but this is not too exciting. The main action is in the HSLA and RGBA colour models. I will not cover these here as they have been covered on this site previously. For the Opera 10 launch, I updated my mock-up interface using CSS3 Colour example from CSS3.info to a new OS User Interface example (Requires Opera 10 due to use of SVG background-images). This adds more detail via SVG, such as gradients and buttons, and the windows can now be dragged around the screen. This makes liberal use of HSLA and RGBA, as well as the SVG CSS properties fill-opacity and stop-opacity. It is an example of what can now be done with the power of HTML5, CSS 3, SVG and JavaScript. We are not far away from being able to make native OS quality effects using humble web technology.

Although Opera 10 has just been released, the Opera Core team has not been sitting idly while the Desktop team were at work. The next version of the rendering engine; Opera Presto 2.3 is already finished (including the likes of border-radius, box-shadow (including the spread value and inset keyword), and friends, and Opera Presto 2.4 is under heavy development. It already is and will be an exciting time for CSS 3.

Over the past few weeks I’ve received a number of emails from visitors to CSS3.info regarding CSS3 validation errors when using vendor specific extentions, for example -moz, -webkit, to implement CSS3 in their websites.

This certainly isn’t a new topic, and in fact Joost de Valke first raised the issue on this website back in January 2007, however a glance over the W3C mailing-list archive highlights that this debate is still going strong, with a number of interesting ideas raised, and I thought it would make an interesting discussion point for the CSS3.info community.

The problem is that, at present, none of the CSS3 modules have yet receached the status of becoming an official W3C Recommendation, as such any of these specifications could in theory be changed at time, particularly those that are still in the early stage of development.

Obviously browser vendors (with the exception of course of our beloved friend Microsoft) are keen to support these up and coming CSS3 specifications, however as they are still at an “experimental” stage of development it is necessary for the various css3 properties to be implemented using vendor specific extensions in order to avoid any possible conflicts with current or future css specifications.

Web designers are equally keen to implement these latest CSS3 techniques in their projects as browser support, along with interest from the wider community, continues to grow – a quick search around the blogosphere shows countless new CSS3 tutorials being added to the web on a weekly basis, and sites such as CSS3Gallery.net showcasing web designers putting CSS3 to great use in their projects. However many are facing a catch 22 situation, weighing up the pros and cons between utilising the latest that CSS3 has to offer against the fact that their creations won’t pass the W3C Validator, with some web designers even going so far as to question the importance of validation.

When Joost De Valk brought this concern before the W3C back in January 2007, he was met with a somewhat muted response, however the debate has continued to intesify and a number of interesting suggestions have been put to the W3C:

- That the CSS3 Validator could offer the option to ignore vendor specific extensions,

- That the CSS3 Validator could highlight vendor specific extentions with a warning, rather than an error,

- Or my own personal favourite, that the validator could mark such code as ‘experimental’ rather than error, or warning

Either or these methods would allow web designers to continue to validate their pages, an important process for spotting any errors in your code, as despite some designers questioning the importance of validation, personally I think it’s a necessary and important tool.

In the meantime, several web designers have suggested their own personal ways of overcoming the problem, with many commenting out CSS3 code until they have validated their pages, so that at least they can check the accuracy of their CSS2.1 code.

In conclusion I’d like to say that, in my opinion, both sides of the argument present some valid points – obviously the W3c can’t be expected to validate what isn’t technically valid CSS, however perhaps the word ‘error’ is too strong, and marking vendor specific code with a ‘warning’ or ‘experimental’ status would be a happy medium between the needs of the W3C and designers eager to implement CSS3.

At the same time, I have to question whether or not the time has yet come for designers to be implementing CSS3 in their client projects. I think CSS3 is perfectly acceptable to be used in a designer’s own projects, and quite essential to promote the growth of CSS3, but is it really acceptable to sell a client experimental code that could cease to function at any time if the W3C ammends a specification, or browser vendors change the syntax with which a property is implemented?

Once again I turn the debate over to you, CSS3.info’s readers, how to you feel about this issue, and what’s the best solution from your point of view?

Microsoft announced on Tuesday that network managers can now upgrade any Windows PC’s on their networks to the latest version of Internet Explorer 8 via their Windows Server Update Services platform, clearly representing a significant time saver for managers of large networks.

Does this easier to upgrade option mean that large organisations, businesses, schools, universities, colleges, etc., IE6’s last remaining stronghold,  will now finally be encouraged to make the move away from IE6?

And could this finally mean an end to Web Designers spending hours ensuring that their latest creations are backward compatible with this last remaining relic of a time long forgotten?

Here’s looking to a brighter, happier and more standards compliant IE6-less future, fingers crossed!

My hat off to all CSS3.info readers.

My name is Mikolaj Sitek , but everybody knows me as Jalokim, (its just so much simpler isn’t it?). Some folks may know me, especially those from forumotion.com, cheers all . I am a young (20 yo)  freelance web designer and somewhat of a developer from Poland. Web design  became my new passion 3 years ago , earlier I was just a graphics artist and fiddling about in HTML and CSS.

The tools of my trade are as follows: For my graphics the one and only photoshop. I design sites with notepad and dreamweaver. I know CSS2 inside and out now I’m broadening my perspectives with CSS3. I picked up some javascript along the way and I am almost fluent in jquery

I am glad to help CSS3.info . I plan to bring some ,down to earth, CSS3 tutorials in a aesthetic and web 2,0 way. I’ll show how to use shadows without over doing them, I’ll show how to make buttons without actually using any image creating software. I hope to improve on tutorials already made, show alternatives and cooler, newer tricks.

Thank you for reading I’ll leave you with 2 vital links.
My newly opened site
Catch me on twitter

Hope to see more of you guys soon
Cordially
Jalokim of JalokimGraphics

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 alpha release also completed our CSS3 selectors test with no problems, passing 578 out of 578 tests, and faired better than it’s predecessor in the Acid 3 test, scoring 94/100 (compared to 91/100 for Firefox 3.5.2).

You can download Firefox 3.6 Alpha 1 from the following link:

http://releases.mozilla.org/pub/mozilla.org/firefox/releases/namoroka/alpha1/

or the latest nightly build from here:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Update: Peter Gasston has put together a demo of some of these new features on his blog.

Hiya to all CSS3.info readers

I’d like to introduce myself in this time of CSS3 excitement and changes here at CSS3.info. Some of you may already know me under the nom de plume of SuzyUK from the CSS Forum at WebmasterWorld. My ‘name ‘has always confused people as I registered on t’internet in the days ‘ASL’ pests and my previous nicknames never even gave away my gender.

To make it easy, my name is Claire ‘Suzy’ Campbell, Suzy really is my middle name. In my real life I answer to both Claire or Suzy, and on the Web I answer to both too though mostly it’s Suzy. To try and make it easy I’m also a recent twitter convert so I combined them both – you can find me on @ClaireSuzy . I’m Scottish, from the Doric Speaking region so sometimes native ‘wee’ words might crop up in my speech.

I have loved CSS since the minute I first came across it circa 1997. My personal site tanfa has always ever been a WIP,  (like the cobbler’s children that never have shoes!), though it has some early doors demos on it, and boasts one of the first (very plain) Pure CSS drop ‘n’ pop menu tutorials. It also has a very early, but more pertinent today, CSS Sprite Demo Europe Map Sprite – The old site has been archived and is the process of changing to a somewhat more personal, light-hearted view of CSS, Design, jQuery, SVG, Photoshop you name it I might chat about it.

Small claim to fame – 15mins in internet years must be about 30seconds? – is that I ‘helped’ (a lot of cleverer people than I) figure out hasLayout (look there’s a wee link at the bottom) and innately understand IE6 if that’s even possible!

I am so looking forward to chatting about, and using, CSS3 without the “but it doesn’t work in…” comments just letting the imagination run and going with the flow sounds like great fun. The ways in which we can use it already are really exciting. I’m loving seeing what the perseverance of early adopters has done for CSS in general and think it’s about take off in an unprecedented manner. To wit I am excited to part of the CSS3.info author team.  I’m particularly excited about the layout modules as it’s high time CSS took responsibility for presenting the whole page.

Favourite Browser: Firefox, was a silent NN user before that, am gradually turning to Safari for Development. I use Chrome only for opening my mail, Opera is there or there abouts but I’m a little disappointed in how far they fell behind as they were so far ahead at one point, as far as CSS in concerned anyway, though they have my undying love and support. IE only gets opened when needed. All on Windows as that is my ‘bread an’ butter’ OS

I hope you like what I might bring to this great site and if you would like me to cover some of the pretty, enhancement stuff, please do let me know, it’s so hard to keep up with all the CSS3 goodness going on at the minute and while I work on “normal” CSS usage daily I like to keep up with the new stuff too. CSS has always been my hobby as well as my extra job too

thanks, and I look forward to meeting you all

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.

The entire web development community is on board with HTML 5 and for good reason. Modernizr is a great tool to help you stay cutting edge without alienating your visitors who aren’t running the latest and greatest browser releases. Currently friendly with Safari 4, Firefox 3.5, Operate 10b1 and IE 8, this JS library is definitely handy.

The simplicity and elegance with which many common interface elements can be handled with CSS 3 is part of the attraction to the new standard. Border-radius, border-image etc in particular as well as a handful of other styling options are at the heart of a very practical interface technique that doesn’t need any imagery. Sprites were a quite practical way to improve page load response time, feel of an interface and simplify maintenance, but if you can remove the need for images altogether for parts of your interface (a dream come true), now you’re on your way to interfaces that are easier to support and give you more leverage. Sean Martell (Much ado about pixels) has a great practical example worth checking out.

The ever prolific John Resig weighed (as did Eric Meyer) in the past on the CSS 3 specification and the template layout issues that many have with the proposal. Anyway, the topic was rekindled by Alexis Deveria discussing the jQuery plugin that eventually arose from the topic.

Do you feel this kind of approach is practical? What about libraries like Modernizr? I personally spoke to John about things like this early last year and am excited to see them appearing. Let us know in the comments if you’d rather see CSS focused on elegant (and native) implementation of practical features, or if you appreciate the value JavaScript can contribute.