Progressive Enhancement Techniques 2: the CSS

Key Takeaways

• Progressive Enhancement in CSS starts with a simple, functional website and adds more complex functionalities for advanced browsers or devices, making sure the content is accessible to all users, including those with disabilities and search engine bots.
• CSS should be kept simple and functional without JavaScript, and any JavaScript-dependent styling changes should be implemented by adding a class to appropriate DOM nodes after the page has loaded. This ensures that the CSS is only activated if the script runs successfully.
• When styling a tabbed box using CSS, the tabs can be floated to the left with a 10px margin, and the tab colors and borders specified. The active tab can be highlighted using JavaScript-enabled CSS, and the content area can be styled to ensure it remains functional without JavaScript.

In my previous article we built a tab control using Plain Old Semantic HTML (POSH). It worked in all browsers, but wouldn’t win any design awards. This is the second of a three-part series that illustrates how to build a simple tabbed box using progressive enhancement techniques.

The Luscious Layer

CSS is the web page layer that adds the layout, styling and background graphics to your page. Although CSS properties are well-documented and (mostly) logical, devices will have their own ideas about rendering. The browsers that will cause the most grief are IE6 and, to a lesser extent, IE7 — both are old compared to the competition but a large proportion of people continue to use them. It is possible to overcome most issues, but please remember:

Pixel-perfection is a myth!

If you need an accurately-designed layout you should forget the web — distribute your masterpiece on paper or as a PDF instead! IT systems vary immensely: people use different operating systems, screen sizes, DPI settings, font typefaces, color depths and browsers. CSS can only suggest a layout — it is up to the browser to interpret your code and it may not always do what you expect. Users will rarely notice a widget being a few pixels out of position, but they will complain if the functionality is broken.

Unobtrusive CSS

Our tab control HTML has been coded to work in any browser. We will use CSS to style and improve the layout so it looks like a tabbed box, but we must be careful not to damage our accessibility efforts.

Always be wary about implementing any CSS that depends on scripting. For example, inactive content in our tab box could be hidden using the CSS display: none; property. However, that content would never appear if JavaScript were disabled. In general:

1. Keep your CSS simple.
2. Ensure your CSS works without JavaScript.
3. If your JavaScript implements styling changes, use that script to add a class to appropriate DOM nodes after the page has loaded. Therefore, JavaScript-dependent CSS is only activated if the script runs successfully.

   For example, your script could add a class of “jsenabled” to the body tag which triggers CSS styling changes:

   
   p { ... styles applied always ... }
   body.jsenabled p { ... styles applied when JS executes ... }
   

Note that it is possible to disable CSS and enable JavaScript. It’s less likely, but we must not make assumptions about our users!

Styling the Tabbed Box

The tabs can be styled using the following CSS:

/* tab control CSS: the tabs */
.tabs
{
	position: relative;
	bottom: -1px;
	height: 20px;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.tabs li
{
	display: inline;
	float: left;
	padding: 0;
	margin: 0 0 0 10px;
}

.tabs a
{
	display: block;
	width: 5em;
	height: 18px;
	line-height: 18px;
	text-align: center;
	text-decoration: none;
	color: #555;
	background-color: #ccc;
	border: 1px solid #999;
	outline: 0 none;
}

.tabs a.active, .tabs a:hover, .tabs a:focus, .tabs a:active
{
	color: #222;
	background-color: #fff;
	border-bottom-color: #fff;
}

The code floats the list elements to the left with a 10px margin. The a link selectors specify the tab colors and borders. The ul tag is positioned 1px down so the tabs are rendered on top of the border that is applied around the content.

The .tabs a.active selector is an example of JavaScript-enabled CSS. In this case, the styles will be applied when JavaScript assigns a class of “active” to a tab.

The tab content area is styled using the following CSS:

.tabcontent
{
	width: 26em;
	height: 10em;
	margin: 0 0 2em 0;
	border: 1px solid #999;
	overflow: auto;
}

.tabcontent div
{
	height: 10em;
	margin: 0 10px;
}

.tabcontent div h2
{
	padding-top: 10px;
	margin-top: 0;
}

The outer div (class of “tabcontent”) is set to 10em in height and has overflow set to auto so scrollbars appear when required. Our content blocks (the inner div elements) are also set to a height of 10em.

The result is a tabbed box with a scrolling inner area. The user can access content using the scrollbars or by clicking the tabs to jump to the correct place.

The CSS has made the content easier to view and it remains functional without JavaScript. However, it’s not perfect: the active tab is not highlighted and scrollbars are a little clunky for a slick web application.

In the next post, we create a reusable JavaScript module that adds the final enhancements.

Resource links:

• View the HTML and CSS-only tab control
• View the CSS file, pe.css
• View the HTML-only tab control

Other parts in this series:

• Progressive Enhancement Techniques 1: the HTML
• Progressive Enhancement Techniques 2: the CSS
• Progressive Enhancement Techniques 3: the JavaScript

Related reading:

• Progressive Enhancement and Graceful Degradation: an Overview
• Progressive Enhancement and Graceful Degradation: Making a Choice
• 5 Reasons Why You Should Not Publish Supported Browser Lists
• Microsoft Office Online: a Case Against Supported Browser Lists
• Who’s Using ARIA?

Frequently Asked Questions (FAQs) on Progressive Enhancement in CSS