What is the Difference Between CSS2 and CSS3
The Major Changes to CSS3
The biggest difference between CSS2 and CSS3 is that CSS3 has been split up into different sections, called modules. Each of these modules is making it's way through the W3C in various stages of the recommendation process. CSS2 was submitted as a single document with all the Cascading Style Sheets information within it. Because each of the modules is being worked on individually, we have a much wider range of browser support for CSS3 modules. As with any new specification, be sure to test your CSS3 pages thoroughly in as many browsers and operating systems as you can.
New CSS3 Selectors
CSS3 offers a bunch of new ways you can write CSS rules with new CSS selectors, as well as a new combinator, and some new pseudo-elements.
Three new attribute selectors:
- attribute beginning matches exactly
element[foo^="bar"]The element has an attribute called foo that begins with "bar" e.g.
- attribute ending matches exactly
element[foo$="bar"]The element has an attribute called foo that ends with "bar" e.g.
- attribute contains the match
element[foo*="bar"]The element has an attribute called foo that contains the string "bar" e.g.
16 new pseudo-classes:
The root element of the document. In HTML this is always
use this to match exact child elements or use variables to get alternating matches
match exact child elements counting up from the last one
match sibling elements with the same name before it in the document tree
match sibling elements with the same name counting up from the bottom
match the last child element of the parent
match the first sibling element of that type
match the last sibling element of that type
match the element that is the only child of its parent
match the element that is the only one of its type
match the element that has no children (including text nodes)
match an element that is the target of the referring URI
match the element when it's enabled
match the element when it's disabled
match the element when it's checked (radio button or checkbox)
match when the element does not match the simple selector s
One new combinator:
- elementA ~ elementB
match when elementB follows somewhere after elementA, not necessarily immediately
In CSS3, the box model hasn't changed. But there are a bunch of new style properties that can help you style the backgrounds and borders of your boxes.
Multiple Background images
Using the background-image, background-position, and background-repeat styles you can specify multiple background images to be layered on top of one another in the box. The first image is the layer closest to the user, with the following ones painted behind. If there is a background color, it is painted below all the image layers.
New Background Style Properties
There are also some new background properties in CSS3.
This property defines how the background image should be clipped. The default is the border box, but it can be changed to the padding box or the content box.
This property determines whether the background should be places in the padding box, the border box, or the content box.
This property allows you to indicate the size of the background image. It allows you to stretch smaller images to fit the page.
Changes to Existing Background Style Properties
And there are a few changes to exixting background style properties:
There are two new values for this property: space and round. Space spaces the tiled image evenly within the box without being clipped. Round rescales the background image so that it will tile a whole number of times in the box.
A new value "local" is added so that the background will scroll with the element's content when that element has a scroll bar.
The background shorthand property adds in the size and origin properties.
CSS3 Border Properties
In CSS3 borders can be the styles we're used to (solid, double, dashed, etc.) or they can be an image. Plus, CSS3 brings in the ability to create rounded corners. Border images are interesting because you create an image of all four borders and then tell the CSS how to apply that image to your borders.
New Border Style Properties
There are some new border properties in CSS3:
border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
These properties allow you to create rounded corners on your borders.
Specifies the image source file to be used instead of border styles already defined.
Represents the inward offsets from the border image edges
Defines the value of the width for your border image
Specifies the amount that the border image area extends beyond the border box
Defines how the sides and middle parts of the border image should be tiled or scaled
The shorthand property for all the border image properties
Additional CSS3 Properties Related to Borders and Backgrounds
When a box is broken at a page break, column break for line break (for inline elements) thebox-decoration-break property defines how the new boxes are wrapped with border and padding. Backgrounds can be divided up between multiple broken boxes using this property.
There also is a box-shadow property that can be used to add shadows to box elements.
With CSS3, you can now easily set up a Web page with multiple columns without tables or complicated div tag structures. You simply tell the browser how many columns the body element should have and how wide they should be. Plus you can add borders (rules), background colors that span the height of the column, and your text will flow through all the columns automatically.
CSS3 Columns - Define the Number and Width of the Columns
There are three new properties that allow you to define the number and width of your columns:
Defines the width your columns should be. The browser will then flow the text to fill the space with columns that wide.
Defines the number of columns on the page. The browser will then create columns wide enough to fit in the space, but only the number you specify.
Shorthand property where you can define either the width or number (or both, but that rarely makes sense)
CSS3 Column Gaps and Rules
Gaps and rules are placed between columns in the same multicolumn scenario. Gaps will push apart the columns, but rules do not take up any space. If a column rule is wider than it's gap, it will overlap adjacent columns. there are five new properties for column rules and gaps:
Defines the width of the gaps between the columns
Defines the color of the rule
Defines the style of the rule (solid, dotted, double, etc.)
Defines the width of the rule
A shorthand property defining all three column rule properties at once
CSS3 Column Breaks, Spanning Columns, and Filling Columns
Column breaks use the same CSS2 options used to define breaks in paged content, but with three new properties: break-before, break-after, and break-inside.
Like with tables, you can set elements to span columns with the column-span property. This allows you to create headlines that span multiple columns more like a newspaper.
Filling columns decides how much content will be in each column. Balanced columns try to put the same amount of content in each column while auto just flows the content in until the column is full and then goes to the next one.
There are lots of additional things coming to CSS3 that don't exist in CSS2 including:
- CSS Template layout module and CSS3 Grid positioning module- creating grids with CSS
- CSS3 Text module - outline text and even create drop-shadows with CSS
- CSS3 Color module - with opacity
- Changes to the box model - including a marquee property that acts like the IE tag
- CSS3 User Interface module - giving you new cursors, responses to actions, required fields, and even resizing elements
- Media Queries - allows you more flexibility when defining how a style sheet should be used. For instance, you could define a style sheet that is only for handheld devices that have a viewport larger than 20em.
- CSS3 Ruby module - provides support for languages that use textual ruby to annotate documents
- CSS3 Paged Media module - for even more support for paged media (paper, transparencies, etc)
- Generated content - running headers and footers, footnotes, and other content that is generated programatically, especially for paged media
- CSS3 Speech module - changes to aural CSS