Posts Tagged ‘css3’

Graceful Degradation With CSS3

August 17th, 2010

Graceful Degradation With CSS3

With IE9 in development and Opera 10.5 released, CSS3 is a few steps away from being supported by all modern browsers. But users may take a while to upgrade, and responsible developers will support legacy browsers for years to come.

For some, cross-browser development means making websites that look exactly the same in all browsers. But if developers continue to cater websites to inadequate browsers such as IE6, then they’re just holding back modern browsers from performing to their potential.

Graceful degradation is not about allowing websites to look bad in older browsers, but about making them look great in modern ones. It means taking advantage of CSS3’s useful features to progressively enhance web pages for the vast majority of users.

Tags: , , , , , , , , ,
Posted in CSS | 14 Comments

CSS Summit: The Good Parts

July 29th, 2010

CSS Summit: The Good Parts

Yesterday’s CSS Summit featured some the best CSS minds presenting on cutting edge CSS issues. There was a ton of great information presented across the 8 sessions, but here’s a wrap up of the single best piece of information from each presenter:

Denise Jacobs – Advanced CSS Troubleshooting

The highlight of Denise’s talk was some specific coding tips about clearing floated content.

She started with the standard overflow: hidden method, which falls short with support for borders & margins and also doesn’t allow scrollbars if they’re needed. Denise suggested instead using overflow: auto; width: 100%; which avoids these issues. You don’t have to use the exact values above, you just have to set some type of overflow and width / height value.

Denise went on to discuss a .clearfix:after method, see the gist.

Denise likes this clearing method since it doesn’t include any extra, non-semantic markup (as … Read more…

Tags: , , , , , , , ,
Posted in CSS | 1 Comment

Great Examples of Drawing With CSS

March 30th, 2010

Great Examples of Drawing With CSS

I’ve always been a fan of drawing page components with pure CSS rather than using image support. Although rendering the page with CSS can sometimes be a pain, the rewards of fewer HTTP requests & less download time make it well worthwhile.

Until recently, most web designers and developers couldn’t design using CSS alone, because there simply wasn’t enough cross-browser support for all the wonderful CSS3 attributes.

However, with IE9 just around the corner and Opera 10.5 already released, we are extremely close to the point where we can render web pages in CSS3 across all modern browsers (IE, Firefox, Chrome, Safari, Opera). Legacy browsers won’t get left out, since our CSS3 pages can degrade gracefully to square corners, flat-color backgrounds, etc. Additionally, we can use browser-specific stylesheets that include plain old image support for key design elements that shouldn’t degrade.

CSS3 makes drawing elements with CSS a … Read more…

Tags: , , , , , , ,
Posted in CSS | 14 Comments

CSS Rounded Corners In All Browsers (With No Images)

February 4th, 2010

CSS Rounded Corners In All Browsers (With No Images)

In the past two years, increased browser support has transformed CSS3 from a fringe activity for Safari geeks to a viable option for enterprise level websites.

While cross-browser support is often too weak for CSS3 to hold up a site’s main design, front-end developers commonly look to CSS3 solutions for progressive enhancement in their sites. For instance, a developer might add a drop-shadow in Firefox, Safari and Chrome using -moz-box-shadow and -webkit-box-shadow, and then be comfortable with this design enhancement falling off for IE users.

But wouldn’t it be great if IE users could see the better version of the page? Fortunately there are cross-browser hacks for the more common CSS3 attributes. These hacks not only allow CSS3 attributes to work in all browsers, but in turn allow designers and developers to use CSS3 in the central styling of their sites.

In this article we’ll walk through getting rounded … Read more…

Tags: , , , , , , , ,
Posted in CSS | 211 Comments