What’s New in CSS 3

An abundance of exciting new properties can be found in CSS 3, more complex, more efficient, allowing lighter reuse of images, or even no images, less bandwidth, more layout flexibility, content display control, less Javascript, more colors, more color value declarations.

Although not all new CSS 3 properties are supported by all browsers and certainly not without prefixes, there’s enough to discover and learn, here we’re making a start with, not all are listed here, new background and border properties …

New Background & Border Properties in CSS 3

Border -image, -radius, and box-shadow

With the new selection of border properties you are now able to create rounded borders without having to use images, use image slices to create customized image borders, add drop and inner shadows on around and inside the borders of boxes:

Property Description
border-image This shorthand property allows the definition of a border image
border-radius This shorthand property allows the definition of corner radii
box-shadow A shorthand property to define shadow offsets, spread, blur, color and position

Backgrounds

Multiple background images, background clip, background origin and background size, with the new multiple background properties where saying a “tearful?” goodbye to the use of nested DIVs needed when assigning multiple background images:

Property Description
background A shorthand property to define one or more sets of background properties of an element
background-clip The background-clip property defines the paint area for the specified background image(s)
background-origin The background-origin property defines the positioning area for the specified background image(s)
background-size The background-size property defines the size of the specified background image(s)

CSS 3 Text formatting and Custom Fonts

CSS 3 Text Effects

CSS 3 properties for decorating & emphasizing text, include text line decoration, text emphasis & outlines, transform. Some of these techniques are already being put into practice live, and they’re looking pretty good:

Property Description
text-decoration Extends to a shorthand property that allows the definition of text-decoration-style, text-decoration-line, text-decoration-color in a single declaration, each separated by a space.
text-shadow This shorthand property allows the definition of shadow properties for an element
text-outline A shorthand property for defining the color, thickness and blur radius of the text of an element.
text-emphasis A Shorthand property for setting values for text-emphasis-style and text-emphasis-color in a single declaration
text-transform Extended to include property values fullwidth and large-kana

CSS 3 Properties for Formatting Text

Many of the already existing text formatting properties are being extended to include alignment, spacing, wrap and breaks:

Property Description
text-justify Defines the justification method for elements on which text-align property value is justify
text-align-last Defines a justify value for a trailing end row of text on which text-align property value is justify
text-align Extended to include property values of start,end, match-parent
punctuation-trim A kerning property for controlling full width punctuation that is at the start or end of a line or next to another full width punctuation character
hanging-punctuation Controls the positioning of punctuation at either end of a full line of text
text-indent Extended to include the keyword values: each-line and hanging
text-autospace Adds extra spacing around specific inline characters
text-overflow Defines the behavior of block containers when text overflows
text-wrap Used to define how text should wrap
word-wrap Defines if word breaks are allowed
line-break Defines a set of line breaking rules for an element (CJK Scripts)
word-break Defines the line breaking rules for an element (non CJK Scripts)
white-space-collapsing(ud) Defines how the white space of an element is collapsed

CSS 3 @font-face Rule

The @font-face rule is a long awaited property from designers, developers and clients alike. The need to choose standard browser fonts will no longer need to be the forerunner and corporate identity can now be brought to the Internet without the need for image replacement headers:

Property Description
@font-face Defines descriptors for local or download font file sources
font-stretch Selects a relative stretched or condensed face of a font family
font-size-adjust Defines relative sizing adjustment of the x-height of fallback fonts (second or third etc. choices), based on the first font choice, to preserve readability

CSS 3 Hyperlinks

Hyperlink properties for window control will be making it possible to create popup windows without the use of Javascript, an interesting advance:

Property Description
target A shorthand property for defining the set of target properties:target-name, target-new and target-position

CSS 3 – Getting Playful – Transit, Transform, Animate

Apply 2D and 3D transform properties, transitions and animation to add dynamic to the elements of HTML, if they really replace Flash and Silverlight as some predict, time will tell:

CSS 3 2D and 3D Transforms

Property Description
transform Defines 2D or 3D transform function(s) to add translation, rotation, scaling and perspective to objects
transform-origin Defines the X Y origin of transforms for an element
transform-style Defines rendering of nested objects in 3D space
perspective Defines transforms to positioned or transformed children of the element
perspective-origin Defines the X Y origin for the defined perspective property
backface-visibility Defines the visibility of the back of a transformed element

CSS 3 Transition

Property Description
transition Transition is a shorthand property used for defining transition properties in a single declaration
transition-delay Defines the amount of time a transition should wait before starting
transition-timing-function Defines how the transition should be implemented
transition-duration Defines how long the transition of a property should take
transition-property Specifies the name of one or more CSS properties, e.g. color, width, to which transition is applied

CSS 3 Animation

Property Description
animation The shorthand property for defining a set of animation behavior properties for block and inline level elements, including: 

animation-name
animation-duration
animation-timing-function
animation-iteration-count
animation-direction
animation-play-state
animation-delay

@keyframes Rule to define additional animations and timing controls, referenced using the animation-name and animation-timing-function properties

More Flexibility for Layout

Extending Box Model properties in CSS 3:

Property Description
overflow A shorthand property for defining overflow-x and overflow-y in a single declaration.
overflow-x Defines clipping for the content of an element that horizontally extends past the edges (left, right) of the container
overflow-y Defines clipping for the content of an element that vertically extends past the edges of the container (top, bottom)
overflow-style Defines the scrolling method for overflowing content
marquee-style Defines the scrolling style for overflowing content where overflow-style property value is marquee
marquee-loop Defines the number of times the content is looped where overflow-style property value is marquee
marquee-direction Defines the direction in which the content moves where overflow-style property value is marquee
marquee-speed Defines the speed at which the content moves where overflow-style property value is marquee
rotation Defines the angle (0-360deg) to which an element is rotated
rotation-point Defines 2 values to define rotation-point offsets, where default is 50% 50%

CSS 3 Flexible Box Model

The new CSS 3 Flexible Box Model provides advanced layout properties for arranging and distributing child elements. Directional flow and arrangement of box elements for layout.

Property Description
Orientation
box-orient Defines the orientation, (horizontal, vertical, inline or block), in which the child element layout should flow
Oder of Display
box-direction Defines if the direction in which the child elements of boxes are displayed, i.e.horizontal: left to right or right to left,
vertical: top to bottom or bottom to top
box-ordinal-group Defines the order in which the child elements of a box are displayed
Alignment
box-align Defines the alignment and placing of child elements
Flexibility
box-flex Defines if a child element is flexible, and its amount of flexibility in relation to sibling elements, allowing them to shrink or grow together with the containing box to prevent overflow or to use excess space
box-flex-group Allows the grouping of box-flex defined elements, and thereby group priorities for flex
Axis Packing
box-pack Defines how additional box-axis space should be distributed between the elements, i.e. horizontal space distribution on horizontally flowed elements or vertical space on vertically flowed elements
Rows and Columns
box-lines Defines if multiple columns or rows are allowed when the sum of the dimensions of the child elements is greater than that of the box

CSS 3 Multi Columns

CSS 3 Multi Columns allow the content of an element to flow into columns, with defined gutters and custom gutter lines. What until now has to be done with multiple floating DIVs, clear fixes, margin and padding values can now be achieved by assigning columns and gutters to a single element.

Property Description
columns The shorthand property for defining the column-count and column-width properties in a single declaration
Column Areas
column-count Defines the optimal count of columns
column-fill Allows the contents of the columns to be evenly distributed, i.e. balanced, among the available columns. In the case that a height restriction is assigned, the contents will fill each column until the height is used before flowing into the next column.
column-span Allows the definition of column span for an element, allowing it to span across all or a specified number of columns
column-width Defines the optimal width of the columns
Gutters
column-gap Defines the amount of gap (gutter or space) that divides the columns
column-rule The shorthand property for defining all column-rule (separating line) properties in a single declaration. A column rule is positioned in the centre of a gap.
column-rule-color Defines the color of the gap rule
column-rule-style Defines the style of the rule
column-rule-width Defines width of the rule

CSS 3 Grid

The new CSS 3 Grid allows the definition of an explicit grid layout (as opposed to the implicit grid of Multi Column layout) divided into newspaper style grids and columns. Elements are aligned to the grid by defining float and float-offset properties which reference the columns and rows.

Property Description
grid-columns Defines the widths of the columns of a grid, the number of columns being equal to the number of defined widths
grid-rows Defines the heights of the rows of a grid, the number of rows being equal to the number of defined heights

Interesting Sponsors and Related Topics

If you liked this, maybe you'll like this too:


Comments are closed.