Designer / Developer / Photographer
672pqakb6ow-beatriz-perez-moya.jpg

Journal

Short-form writing for the times I genuinely have something to say about a place, subject, or thing.

On CSS3: ‘Graceful Degradation’ or ‘Progressive Enhancement’

Now, to be clear, what I am describing in this article is a very simple type of graceful degradation… or, maybe it’s not. But, it certainly isn’t complicated yesteryear browser sniffing nonsense. As far as Progressive Enhancement goes, people much smarter than me have written on the subject. Read Understanding Progressive Enhancement in A List Apart No. 269 — it’s a great read for understanding the difference between these two coding methods.

I’ve used a few really nice new CSS3 modules in coding this site: text-shadow, transition, box-radius and box-shadow. In this article, I’ll show a few examples with screenshots and such, and share some CSS code with you.

The First Example: Round Corners on a Navigation Bar

For web designers that like rounded corners on a container here and there (me), actually making them round represents a whole slew of challenges. More than I’m willing to write about right now—it just shouldn’t have to be that hard.

Truly a Godsend, border-radius is one of my favorite new CSS3 modules, you just specify a few simple selectors & keep movin’. If the browser can’t render them, it ‘gracefully degrades’ to a sharp square corner. Simple.

A very simple little snippet of CSS creates a rounded corner container — and if the browser doesn’t support it, a standard square corner is rendered. Now, if you have a style sheet for IE, you can go through the trouble of creating those rounded corners the hard way, or let them be square. On my site, I chose to let them be square. I also used some transitions on the hover action… mmm… transitions. Here is some sample code for border-radius and transitions:

.navBar {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.navBar li a {
  width: auto;
  -webkit-transition-property: color, background-color;
  -webkit-transition-duration: 1s, .75s;
}
.navBar li a:hover {
  -webkit-box-shadow: 0 1px 6px #2A2A2A;
  padding: 35px 0px 13px 0px;
  text-decoration: none;
}

Next: Text Shadow on Headings

Another welcome module of the CSS3 standard is text-shadow. The act of adding a simple shadow to text can really have a big impact on the overall presentation of a web page.

For example, with a dark, soft shadow beneath some text, it literally lifts up off the page. The inverse being a tight dark shadow above and a light one below ‘presses’ text into the page.

For now, only a few browsers support text-shadow. Nothing bad happens when the browser can’t render the effect - it just doesn’t show. Here is the painfully simple CSS code that renders the example above:

h1, h2, h3, h4 {
  text-shadow: 1px 1px 2px #FFF;
}

Finally: Multi-Column Layout

Multi Column Layout is going to allow designers to create web pages that look like your favorite magazines, newspapers, album inserts and other printed media… even books.

Here is a the kicker though - no more wrappers and containers and multiple divs and floats and positio—aaahhhhh! Just a few CSS selectors and columns are begotten.

And here’s some code for column-count, column-gap & column-rule:

.columnContainer {
  -webkit-column-count: 3;
  -webkit-column-gap: 1.5em;
  -webkit-column-rule: 1px solid #FFF;
}

In conclusion, keep your designs and layouts liquid - in the sense that you can offer elements on a page that look either this way, or that way. I’m not suggesting you must embrace Graceful Degradation, Progressive Enhancement, or some other technical standard — but, perhaps engage in some ‘Selective Coolnessivity.’