CSS3 enhancements promise designers a simpler, more powerful toolkit when structuring their layouts. Even though the support is only offered in the newer, better browsers (Chrome, FireFox, and Safari), there is little excuse for not making your site better today.
Columns
Columns can offer divergence and nuance that was otherwise missing from your site. While you could have been doing this with floats and heights, the task was difficult. CSS3 makes it easy.
Implementation
With a single div class and basic CSS markup—that I will outline below—you are free to add columns at will. Design can better form to the content delivering the text in a more natural way.
Benefit
Highly customizable looks are afforded to blogs that have come increasingly under fire for having a repetitious look and feel. The criticism is not without merit, and CSS3 offers hope for better design.
CSS3 Markup for Creating Columns
The implementation of this design enhancement is simple. For this site, I simply wrap the content I want displayed in a three column format in a div class named three-column. I then rely on the CSS that I marked up below:
div.three-column {
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-moz-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
Explaining the Markup
In the working example above -webkit works with Chrome and Safari while -moz is used by Mozilla (FireFox) browsers. As you may have guessed, column-count indicates the number of columns you wish to display and column-gap denotes the width of your gutters (space between the columns).
Lack of Browser Support
The life of a web designer can be challenging. This explains the need to markup the CSS redundantly with -webkit and -moz.Once support is more widespread those prefixes can be dropped and column-count and column-gap will be all that’s required.
Internet Explorer makes things even worse. IE—version any—will not render columns in the manner explained above. For users browsing with IE, you will simply see this post rendered in the traditional single column view that is seen on every post on this site.
Image Credit
Corinthian Columns courtesy of Flickr user eflon published under the CC license.
6 Comments
I can’t wait to try out the new columns. That picture is sweet.
CSS3 is pretty sweet. My favorite feature is the rounded-corner (code below). Microsoft has some catching up to do, however history proves that’s when they do their finest work.
#Rounded_Corner
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #000;
}
That’s what we have been using for our images. Different style but same effect.
As for Microsoft, I honestly think they should just pull out of the business, unless they want to fully open source their browser.
I’m sure they will think of something that most people will question as being morally and ethically sound.
We’ll see Microsoft—the Steve Ballmer edition—has done a pretty good job of avoiding the controversy of the last decade.
There are a few options as well:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Here are some examples in action: Link