CSS3 Features Playtest

This page demonstrates CSS3 multi-columns, rounded corners, text & box shadows, HSL/HSLA and RGB/RGBA colour selection, nth-* selectors, multiple backgrounds and CSS gradients, along with CSS2.1 opacity, positioned generated content, ::first-letter and ::first-line. PNG alpha-transparency is also demonstrated.

Note that some CSS3 features are still in Working Draft or experimental status (particularly border-radius, shadowing and gradients). Also, no selector exists for affecting individual columns or their contents, so there's no way to remove the right border from articles in the last column.

Browser results

UPDATE ME

Firefox 2 doesn't clip content to border-radius, support text-shadow, box-shadow, nth-* selectors or multiple backgrounds. Generated content cannot be floated or positioned. Occasionally column lengths are calculated incorrectly during reflow.

Generated content is great for quotes.

Firefox 3 doesn't support text-shadow (Bug 10713), box-shadow (Bug 212633), nth-* selectors (Bug 73575) or multiple backgrounds (Bug 322475). Generated content cannot be floated or positioned (Bug 238072). Column text flow is much improved and border-radius is now antialiased.

Safari 3.1 on Windows at the default text size/zoom level displays the page correctly with only a few exceptions. Relatively positioned elements inside a column layout (such as the floated quote boxes) reserve space in the correct column but draw in the first (Bug 14691). Zooming can trigger that bug on inline positioned elements. Images break across columns (to spec?). Box-shadows are clipped to a column's boundary (Bug 14137). Sometimes the bottom margin of an element in the previous column is applied to the top of the current column (Bug 17887).

Opera 9.22 Windows doesn't support multi-columns, text-shadow, box-shadow, HSL colour selection, border radius or multiple backgrounds.

Opera 9.5 Release Build 10063 doesn't support multi-columns, box-shadow, HSLA colour selection, border radius or multiple backgrounds, but does support text-shadow and HSL colour selection. Default glyphs used for generated open- and close-quote are different from Gecko and Webkit. Left and right borders disappear until the page is scrolled near the bottom.

Internet Explorer 6 SP1 doesn't support any of the CSS2 or CSS3 specifically tested. Lack of support for position:fixed and PNG alpha transparency renders the header and footer as opaque bars. Heading text is invisible (no HSL support).

Aliquam gravida

Aliquam gravida massa non velit. Donec et mauris eu felis lobortis ullamcorper. Maecenas in lectus. Aliquam eu neque. Pellentesque sagittis, tellus at pellentesque aliquam, nibh odio lobortis sapien, ut tempus diam mi id diam. Vivamus tristique risus in ligula. Mauris facilisis. Nunc elit.

Beklager, jeg snakker ikke norsk.

Nam sit amet neque. In vitae libero non magna cursus laoreet. Curabitur tempor justo vel libero. Nam nibh. Aliquam erat volutpat. Ut sed mi. Vivamus iaculis justo eu neque mattis tincidunt. Aenean a dui. Mauris tortor diam, consectetuer at, tincidunt nec, semper eu, nulla. Cras purus. Etiam nunc. Nam sit amet neque. In vitae libero non magna cursus laoreet. Andrew