.jpg)
CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. This first tutorial will give you a very basic introduction to the new possibilities created by the standard.
CSS1 (Version 1.0) incorporated innumerable layout settings suitable for downloadable HTML pages. CSS2 (Version 2.0) provides additional XML support, downloadable fonts and audio presentations for visually impaired users. CSS3 (Version 3.0) continues in development and its improved highlights include: vertical text, extensive backgrounds and borders, speech recognition and user interaction.
CSS3 promises to include some very cool features that will make styling much easier for advanced layouts. Unfortunately, there is only some browser support for some of these features at the time of this post. I’ve seen some support for these in Firefox, so you can at least begin to play around with some of the features. However, I would hold off on using these exclusively for your layouts until there is more cross browser support.
The biggest change that is currently planned with CSS level 3 is the introduction of modules. The advantage to modules is that it (supposedly) allows the specification to be completed and approved more quickly, because segments are completed and approved in chunks. This also allows browser and user-agent manufacturers to support sections of the specification but keep their code bloat to a minimum by only supporting those modules that make sense. For example, a text reader wouldn’t need to include modules that only define how an element is going to display visually. But even if it only included the aural modules, it would still be a standards complaint CSS 3 tool.
Backgrounds and Borders
border-radius -- allows for rounded borders
border-break -- can close the border of a box that has been stopped at a break point (page break, column break, line break)
border-image -- instead of using a border style, it sets an image as the border
box-shadow -- adds a shadow to an element
Multi-column Layout
The multi-column layout adds a new kind of container -- column box. The content of multi-column elements flows from column to column. The column box is encapsulated within the main div container of the content.
Advanced Layout
The goal is to keep the content and the layout order separate. The module attempts to simplify laying out elements on complex Web pages and forms. Two methods proposed are Template Based Positioning and Tabbed Displays. Template Based Positioning lets you create a grid layout and place elements within slots on the grid. The Tabbed Display method piles up elements like tabbed cards, displaying only one at a time.
Grid Positioning
· Explicit grid -- generated with grid-columns and grid-rows
· Natural grid -- generated automatically, for instance multi-column elements -- the edges on both sides of the column make grid lines
· Default grid -- elements that do not fit into the two grid categories above are regarded as having a single-cell grid
Selectors
· E:only-of-type -- refers to an element which is the only sibling of its type
· E:not(s) -- selects any element that doesn't match the simple selector s
· E ~ F -- selects an F element that comes after an E element
· E:nth-child(n) -- selects an element which is the nth child of its parent element
· E:nth-last-child(n) -- same as the previous selector, but counting from the last one
· E:nth-of-type(n) -- selects an element which is the nth sibling of its type
Media Queries
The aim is to extend the functionality of media types by adding expressions. Some of the media features that can be used in these expressions are width, height and colour. This allows pages to be customised for different devices without changing the content.
CSS Marquee
Marquee contains the properties that control the speed and direction of the “marquee” effect. Marquees are a scrolling mechanism that needs no user intervention: overflowing content moves into and out of view by itself. Marquee is mostly used on mobile phones.
User Interface
· Box-Sizing- let’s you change the behavior of the browser in calculating the width of an element.
· Resize- It allows you to specify if a box is resizable.
· Outline- allows the offset to be rendered away from the edge of the specified element.
Speech
CSS2 added support for the Aural media type which is used for “styling” speech synthesis in aural user agents (e.g. screen readers). The specification added several properties to this new media type. The current Working Draft of CSS2.1 reserves
media="speech", but explicitly does not define which properties apply to it. Also, the aural media type has been deprecated. The CSS 3 Speech module removes some of the old properties and adds new ones. All of them are now assigned to the speech media type.Ruby
CSS will now support the ability to add small annotations on top or next to words, most often used in Chinese and Japanese. They are generally used to give the pronunciation or meaning of difficult ideograms.
Hopefully, in a mainly positive way CSS3 will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work – web browsers will always continue to support CSS2. The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and achieve current design features in a much easier way (e.g. using columns). Once it's fully adopted as a standard and Web browsers and user-agents begin using it, CSS 3 will be a powerful tool for Web designers. The new features listed above are only a small sub-set of all the additions and changes to the specification.
