Design by Elle

{ designer; developer; freelance; }

CSS3 Properties to Wait For

Posted on February 10, 2008 / 0 Comments / Permalink

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];

CSS3 Further Reading

  1. Budd Andy, (2008), The Future of CSS Slides in .pdf format (1.3mb). Accessed on Feb 11, 2008.
  2. Budd Andy, (2006), Rounded Corner Boxes the CSS3 Way on 24 ways. Accessed on Feb 11, 2008.
  3. Budd Andy, (2005), The Attribute Selector for Fun and (no ad) Profit on 24 ways. Accessed on Feb 11, 2008.
  4. CSS3.info, CSS3 Preview
  5. CSS3.com
  6. Gasston Peter, (2006), A Brief Introduction to Opacity and RGBA on CSS3.info. Accessed on Feb 11, 2008.
  7. Suda Brian, (2008), Stay On :Target on Vitamin. Accessed on Feb 11, 2008.
  8. W3C, Cascading Style Sheets Home Page
  9. W3C, (2007), CSS3 module: Multi-Column layout. Accessed on Feb 10, 2008.

Sorry, comments are closed for this article