October 31, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Top 10 Features in CSS 3

  • January 18, 2011
  • By Jason Gilmore
  • Send Email »
  • More Articles »

Cascading Style Sheets 3 and HTML5 are all the buzz these days, and for good reason. Together, they represent what will become another major evolutionary step forward for the World Wide Web, helping developers to create increasingly compelling and attractive Web applications. In fact, CSS3 eventually will become the Web's next standard for stylizing presentational markup.

I've been digging into CSS3 in recent weeks, and I am pretty excited about what's possible. In this article, I highlight 10 new features that you'll undoubtedly see in use around the Web as browser developers continue racing to complete CSS3 support. Keep in mind that some of these features are still in a state of flux, and in several cases you'll see that some are browser-specific, as the property prefixes will indicate.

1. Attribute Selectors

CSS selectors make it easy to apply styles to specific HTML elements. CSS3 introduces several new selectors which make it even easier to target very specific elements according to an attribute value. The following example will apply a bold font styling to any element having a title which ends in highlight:

span[title$="highlight"] {
 font-weight: bold;
}
...
The Zend Framework makes
building websites fun and easy.

Other attribute selectors are also supported, including [attribute^="value"], which will match attributes starting with the value, and [attribute*="value"], which will match attributes containing the value.

 

2. Rounded Corners

Rounded corners have long been something of an obsession within the web design community, having been implemented in countless ways, often using wildly imaginative workarounds. In recognition of their importance, the ability to easily add rounded corners has been implemented within CSS3:

#sidebar {
width: 200px;
padding: 2px;
border:  2px solid #CCC;
/* Mozilla */
-moz-border-radius: 15px;
/* WebKit */
-webkit-border-radius: 15px;
}
...
Home
Tutorials
About

3. Multi-Column Layouts

Speaking from the perspective of somebody who has spent a fair amount of time in the publishing world, I find the prospect of easily integrating multi-column layouts into a page quite exciting. CSS3 offers a very simple way to present a block of text in accordance with a specific number of columns, column spacing, and border decoration, as demonstrated here:

#multi {
/* Mozilla */
-moz-column-count: 4;
-moz-column-gap: 0.5em;
-moz-column-rule: 0px;

/* WebKit */
-webkit-column-count: 4;
-webkit-column-gap: 0.5em;
-webkit-column-rule: 0px;
}
...
Add long block of text here

4. Setting the Opacity

Like the aforementioned rounded corners feature, setting opacity has long been a feature of great interest within the web design community. This feature is now available natively within CSS3. For instance, to set an element's opacity to 30 percent, use the following CSS declaration:

#opacity {
 background: #CCC;
 opacity: 0.3;
}
...
...

5. Font Flexibility

Fonts have long been one area where the Web has long fallen woefully short, with the choice of fonts limited to the browser's default settings. While workarounds and browser-specific implementations have come and gone over the years, the matter is now en route to being definitively resolved thanks CSS3, which allows developers the flexibility of using any OpenType or TrueType font. For instance,

@font-face {
 font-family: "BaroqueScript";
 src: url("BaroqueScript.ttf") format("truetype");
}

h3 {
 font-family: "BaroqueScript";
}
...
Welcome to My Site!

Of course, you'll need to arrange for the licensing of any commercial fonts you use within your website.


Tags: HTML 5, CSS 3

Originally published on http://www.developer.com.

Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel