The CSS3 Selectors module introduces three new attribute selectors, which are grouped together under the heading “Substring Matching Attribute Selectors”.
These new selectors are as follows:
[att^=val]– the “begins with” selector
[att$=val]– the “ends with” selector
[att*=val]– the “contains” selector
CSS3 Transitions are a presentational effect which allow property changes in CSS values, such as those that may be defined to occur on
:focus, to occur smoothly over a specified duration – rather than happening instantaneously as is the normal behaviour.
Transition effects can be applied to a wide variety of CSS properties, including
opacity, and many more. Keep reading for further details of supported properties.
Another new property introduced by the CSS3 Backgrounds and Borders module is
background-size. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords;
Browser support has grown of late, with the current versions of most popular browsers now supporting
background-size, including Firefox, Safari, Chrome, Internet Explorer and Opera, without the need for vendor prefixes.
CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.
Browser support for multiple backgrounds is now relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.
Google have recently updated their HTML5ROCKS site, originally launched in June this year, with numerous new demos and tutorials for HTML5 and CSS3. The latest update adds, amongst other articles, a tutorial for CSS3 Web Fonts (with @font-face) and a new ‘HTML5 Studio’ – offering a number of live demos for many of the new possibilities offered by HTML5 and CSS3.
Since being updated the site has been causing quite a stir online and if you’ve not come across the site before, it’s an excellent resource for getting to grips with HTML5 & CSS3 and certainly worth a visit.
The page now offers a more comprehensive and easy to follow guide/tutorial, including cross-browser examples, which should enable any designer (whether novice or expert) to get to grips with border-radius in a matter of minutes.
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.
As well as all the new CSS features we mentioned previously, Firefox 3.6* is gaining a brand new property value: image-rect. This allows you to clip an area of a background image to display only part of the whole.
It uses Mozilla’s proprietary prefix, and takes two values: a URI for the image, and the boundaries of the clipped area (as four comma separated values, like the clip property):