Skip Navigation

CSS3 Properties to Wait For

February 10th, 2008 | Posted in CSS, Web |

CSS3 have more new features and functions than the list below. These are just a few that I would love to see implemented in browsers as soon as possible.

Attribute Selectors

Three additional attribute selectors are provided for matching substrings in the value of an attribute:
[att^=val] /* begins with “val” */
[att$=val] /* ends with “val” */
[att*=val] /* contains at least one instance of “val” */

background-position

The background-position property sets the starting position of a background image. It uses 2 values that can be either percentage, length or keywords.

border-radius

The border-radius allows you to create round corners on box-items.
border-radius: [length / length]; /* to define the shape of the corner */

opacity or rgba

background: rgb(255, 255, 255); opacity: 0.5;
background: rgba(255, 255, 255, 0.5);

What is the difference between Opacity and RGBA?
Opacity sets the opacity value for an element and all of its children;
 RGBA sets the opacity value only for a single declaration.

:target Pseudo Selector

The :target pseudo selector is similar to the :hover selector and styles will be applied as the name suggested to the target element.

Drop Shadows

text-shadow: [shadow-color] [shadow-offset] [blur-radius];
box-shadow: [shadow-color] [shadow-offset] [blur-radius];

Multi-column Layout

This module introduces CSS-based multi-columns layout functionality and offers the following rules:

column-width: [length / auto];
column-count: [integer /auto];
column-gap: [length / normal]; /* gutter width */
column-rule: [width] [style] [color]; /* just like border */
column-break-before: [auto / always / avoid];
column-break-after: [auto / always / avoid];
column-fill: [auto / balance];
column-span: [1 / all];

Further Reading

Leave a Reply