Alright, this one’s for the fellow web developers. I’d like to talk a bit about CSS3. But first, a bit of review:

CSS, short for Cascading Style Sheets, is a method to add formatting and styling to any markup language. It’s most commonly used in web pages programmed in HTML and XHTML but it can be used in XML documents as well. It includes elements such as color, fonts, page layout, backgrounds, borders, and MUCH more.

The most current release of CSS is CSS3. It’s currently in development, but some browsers are already implementing certain elements for use in web pages. However, since not all browsers support CSS3 and it’s not guaranteed that everyone will be running one of the latest supported browsers, it’s STRONGLY recommended that you don’t use many of the elements to design major portions of your web page. But that’s a real shame, because CSS3 has some really cool new features. Some of which, easily allow web developers to create some stylish and functional web page elements.

These are just a few of the cool new features that CSS3 is offering:

Web Fonts

This feature allows developers to embed fonts in their web pages, rather than relying on the same old boring “web safe” serif or sans-serif fonts. This feature was included in CSS2, but only in Internet Explorer and it only supported fonts that were Embedded Open Type (.oet) format. However, in CSS3, you can use any licensed TrueType (.ttf) or OpenType (.otf) font in your page. Below is an example of the code needed to import custom fonts into a web page:

@font-face {
    font-family: Delicious;
    src: url('Delicious-Roman.otf');
}

After importing it, you can call it using font-family:

h2 { font-family: Delicious, sans-serif; }

Of course, before using any fonts in your page, much like images and other media, you MUST check the licensing.

Rounded Corners (on borders)

The border-radius function is one of my personal favourites. It simply allows the coder to add nicely rounded corners of any radius to any border. It works the same as the existing border element, in that it can be applied to all four corners with the generic statement, or can be corner-specific by adding, you guessed it: topleft, topright, bottomleft or bottomright. This simple little piece of code can be seen in the example below:

.box {
    background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
    padding: 10px;
}

Multiple Backgrounds

In CSS2, you were restricted to use one background image per element. This made it a bit tricky to apply multiple backgrounds, in that you needed to layer divs and play around with all that nonsense. However, in CSS3, it’s as simple as separating multiple backgrounds with commas:

body {
    background: url(body-top.gif) top left no-repeat,
    url(body-bottom.gif) bottom left no-repeat,
    url(body-middle.gif) left repeat-y;
}

These three are among the MANY new features in CSS3. If you’re interested in reading more about the new features in CSS, and view some examples, you can visit the CSS3 homepage.

Your beloved Scapegoat,

Mike Schumann, Owner/Operator

This entry was posted on Wednesday, September 9th, 2009 at 9:29 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.