Friday, 20 December 2013
Differences Between CSS2 and CSS3
Difference between CSS2 and CSS3:
New Attribute Selectors:
^=, $=, *=
16 New Pseudo Classes:
:root, :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :target, :enabled, :disabled, :checked, :not(s)
elementA ~ elementB (Match when elementB follows somewhere after elementA, not necessarily immediately)
New Background Style Properties:
background-clip: 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.
background-origin: This property determines whether the background should be places in the padding box, the border box, or the content box.
background-size: 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:
background-repeat: 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.
background-attachment: A new value "local" is added so that the background will scroll with the element's content when that element has a scroll bar.
background: The background shorthand property adds in the size and origin properties.
New Border Style Properties:
border-radius: 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.
border-image-source: Specifies the image source file to be used instead of border styles already defined.
border-image-slice: Represents the inward offsets from the border image edges
border-image-width: Defines the value of the width for your border image
border-image-outset: Specifies the amount that the border image area extends beyond the border box
border-image-stretch: Defines how the sides and middle parts of the border image should be tiled or scaled
border-image: The shorthand property for all the border image properties
CSS3 Columns - Define the Number and Width of the Columns:
column-width: Defines the width your columns should be. The browser will then flow the text to fill the space with columns that wide.
column-count: 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.
columns: Shorthand property where you can define either the width or number (or both, but that rarely makes sense)
CSS3 Column Gaps and Rules:
column-gap: Defines the width of the gaps between the columns
column-rule-colo: Defines the color of the rule
column-rule-style: Defines the style of the rule (solid, dotted, double, etc.)
column-rule-width: Defines the width of the rule
column-rule: A shorthand property defining all three column rule properties at once