Cascading Style Sheets
Using CSS as part of standards-based web design helps develop sites that are both beautiful and widely accessible. We should strive to keep the styling of our sites as separate from content as possible. CSS should be used as the main basis for the layouts as well as styling of the content. Whenever possible, CSS code should validate.
Naming Conventions
Name the CSS classes according to the function of the element, and not the resulting appearance. Following are the recommended element names for main structural divs:
- Page container: container
- Branding/header section: branding
- Main navigation: nav-main
- Next navigation: nav-sub
- Alternate navigation levels: nav-sub1, nav-sub2
- Main content: content-main
- Columnar content: content-col1, content-col2
- Supplementary content: content-sub (such as related topics, a quote, etc)
- Footer section: footer
- Copyright/legal: legal
- Search: search
- Search results: search-results
General Guidelines
Keep CSS light to minimize download time. To accomplish the goal:
o Group selectors.
o Rely on inheritance.
o Reduce redundancy by using shorthand.
o Name selectors logically. For example, #container, #branding, #footer.
o Define property values using shorthand and optimized values when possible. For example {font:400 12px Lucida Grande, Arial, sans-serif;color:#f09;}.
- Use div layers and CSS to determine layout instead of tables. If tables must be used, avoid "nesting" tables and use a colgroup to define the width of columns. Of course, tables are appropriate for displaying tabular data.
- Do not create new, custom selectors if there are existing selectors in the base style sheet that will suffice.
- Avoid inline formatting, use classes and ids instead.
- Avoid classitis. Use divs containing semantically marked code over creating several classes.
- Avoid specifying font heights in pixels. Give preference to relative sizes and em units, so that layouts scale to fit larger and smaller fonts. Font heights in pixels prevent IE users from resizing the text, which may render your site unusable for many visitors. Test the scalability of the pages with different fonts and sizes.
- Hacks: Use of CSS hacks, such as box model hacks to accommodate IE is acceptable. However, all "hacks" (ie IE5 only code) should be kept separate so it can be easily removed at a later date.
- Ordering Content: When possible, order content in the source by level of importance. This is a great for both accessibility and SEO.
Guidelines to Use Different CSS for Different Browsers
Follow the CSS Standards First
It is far easier to develop the CSS code for a highly standards-compliant browser like Mozilla and Opera first, and then only later add the workarounds to make the code work on IE.
It is also logical to write for a more standards-compliant browser first: sooner or later, Microsoft is bound to issue a newer version of IE that will have the existing CSS bugs fixed. When they do so, all you have to do is to remove the workarounds which you created and you're done. If you write your main style sheet with styles that are coded in a non-standard way to deal with IE bugs first, you will wind up having to rewrite everything when Microsoft fixes the bugs.
Use External Style Sheets and Take Advantage of the "Cascading" Aspect of CSS
Put all the standards-compliant CSS code in a separate (external) style sheet file that is loaded by every browser.
Then, when you find that a specific browser requires a workaround, use the methods listed below to load an additional style sheet designed specifically for that particular browser. The beauty of CSS is that you can redefine a different style for the same selector and have the last-defined style override all preceding definitions.
Placing the main standards-compliant style sheet and the browser-specific style sheets in different external files allow you to simply remove a particular file in the future should that version of the browser cease to be used.
Include or Exclude Style Sheets for different IE Browsers
One of the easiest things to do is to specify that a certain style sheet be loaded only by IE 5, 5.5, 6 (and later versions) and be excluded from those versions of IE.
Microsoft provides a non-standard extension that allows you to detect those versions of IE, and include or exclude code depending on those versions.
To cause a CSS file to be loaded by IE 6 and not other browsers, use the following code in the HEAD section of the web page:
Likewise, for any version of IE 5 (including 5.0, 5.01, 5.5, etc), use the following:
To test for a whole range of versions of IE, you can use the comparison operators "lt" (less than), "lte" (less than or equal), "gt" (greater than), and "gte" (greater than or equal); and “!” (not equal) to exclude a certain style sheet.
Hide CSS from IE 5 and Below for Windows
If you place a comment immediately after a selector in a style sheet, IE 5 and earlier on Windows will ignore that selector.
In the following example, "Large text anyone?" will not be enlarged in IE 5 and earlier.
Hide CSS from Netscape 4
- Using the @import Rule
Use the @import rule to load an external style sheet will cause that style sheet to be ignored in Netscape 4.
For example, "not-netscape4.css" will not be included in the following rule:
- Using the Media Attribute in the Link Tag
If you link to your style sheets with a media attribute other than "screen" using a line like the following, Netscape 4 will not load them.
Using CSS as part of standards-based web design helps develop sites that are both beautiful and widely accessible. We should strive to keep the styling of our sites as separate from content as possible. CSS should be used as the main basis for the layouts as well as styling of the content. Whenever possible, CSS code should validate.
Naming Conventions
Name the CSS classes according to the function of the element, and not the resulting appearance. Following are the recommended element names for main structural divs:
- Page container: container
- Branding/header section: branding
- Main navigation: nav-main
- Next navigation: nav-sub
- Alternate navigation levels: nav-sub1, nav-sub2
- Main content: content-main
- Columnar content: content-col1, content-col2
- Supplementary content: content-sub (such as related topics, a quote, etc)
- Footer section: footer
- Copyright/legal: legal
- Search: search
- Search results: search-results
Example:
#branding
Used for a header or banner to brand the site.
#branding-logo
Used for a site logo
#branding-tagline
Used for a strapline or tagline to define the site's purpose
#nav
Used to contain a navigation device.
#nav-main
Main or primary navigation
#nav-section
Navigation to pages within the current site section
#nav-external
Navigation to pages outside the site
#nav-supp
A supplementary list of links, perhaps in a footer.
#nav-(whatever)
A list of links named at a designer's descretion
#search
Related to search interface and search results.
#search-input
A search form
#search-output
Search results which could include a <div> or other markup including definition lists
#content
Used for content rather than for another purpose such as navigation
#content-main
The main content area
#content-news
News related content
#content-(whatever)
Could include any form of content, including #content-related, #content-quote etc.
#siteinfo
Used for various site related information
#siteinfo-legal
Copyright information etc.
#siteinfo-credits
Designer or other credits
#branding
Used for a header or banner to brand the site.
#branding-logo
Used for a site logo
#branding-tagline
Used for a strapline or tagline to define the site's purpose
#nav
Used to contain a navigation device.
#nav-main
Main or primary navigation
#nav-section
Navigation to pages within the current site section
#nav-external
Navigation to pages outside the site
#nav-supp
A supplementary list of links, perhaps in a footer.
#nav-(whatever)
A list of links named at a designer's descretion
#search
Related to search interface and search results.
#search-input
A search form
#search-output
Search results which could include a <div> or other markup including definition lists
#content
Used for content rather than for another purpose such as navigation
#content-main
The main content area
#content-news
News related content
#content-(whatever)
Could include any form of content, including #content-related, #content-quote etc.
#siteinfo
Used for various site related information
#siteinfo-legal
Copyright information etc.
#siteinfo-credits
Designer or other credits
General Guidelines
Keep CSS light to minimize download time. To accomplish the goal:
o Group selectors.
o Rely on inheritance.
o Reduce redundancy by using shorthand.
o Name selectors logically. For example, #container, #branding, #footer.
o Define property values using shorthand and optimized values when possible. For example {font:400 12px Lucida Grande, Arial, sans-serif;color:#f09;}.
- Use div layers and CSS to determine layout instead of tables. If tables must be used, avoid "nesting" tables and use a colgroup to define the width of columns. Of course, tables are appropriate for displaying tabular data.
- Do not create new, custom selectors if there are existing selectors in the base style sheet that will suffice.
- Avoid inline formatting, use classes and ids instead.
- Avoid classitis. Use divs containing semantically marked code over creating several classes.
Example:
<div id="sidebar">
<h1>News and Events</h1>
<p>Our .org has been <strong>In the News!</strong></p>
<ul>
<li><em>State of the Market Report</em><br />Byte and Switch<br />27 Oct 2005</li>
<li><em>Org Rolls out Specs</em><br />GCN<br />05 Sep 2005</li>
<li><em>Standard in the Works</em><br />Computerworld<br />14 Apr 2005</li>
</ul>
<a href="/more/">Read more</a>
</div>
Instead of
<h1 class="smallblueheader">News and Events</h1>
<p>Our .org has been <strong class="bluebold">In the News!</strong></p>
<ul class="bluebulletlist">
<li><em class="title">State of the Market Report</em><br />Byte and Switch<br />27 Oct 2005</li>
<li><em class="title">Org Rolls out Specs</em><br />GCN<br />05 Sep 2005</li>
<li><em class="title">Standard in the Works</em>><br />Computerworld<br />14 Apr 2005</li>
</ul>
<a class="bluelink" href="/more/">Read more</a>
<div id="sidebar">
<h1>News and Events</h1>
<p>Our .org has been <strong>In the News!</strong></p>
<ul>
<li><em>State of the Market Report</em><br />Byte and Switch<br />27 Oct 2005</li>
<li><em>Org Rolls out Specs</em><br />GCN<br />05 Sep 2005</li>
<li><em>Standard in the Works</em><br />Computerworld<br />14 Apr 2005</li>
</ul>
<a href="/more/">Read more</a>
</div>
Instead of
<h1 class="smallblueheader">News and Events</h1>
<p>Our .org has been <strong class="bluebold">In the News!</strong></p>
<ul class="bluebulletlist">
<li><em class="title">State of the Market Report</em><br />Byte and Switch<br />27 Oct 2005</li>
<li><em class="title">Org Rolls out Specs</em><br />GCN<br />05 Sep 2005</li>
<li><em class="title">Standard in the Works</em>><br />Computerworld<br />14 Apr 2005</li>
</ul>
<a class="bluelink" href="/more/">Read more</a>
- Avoid specifying font heights in pixels. Give preference to relative sizes and em units, so that layouts scale to fit larger and smaller fonts. Font heights in pixels prevent IE users from resizing the text, which may render your site unusable for many visitors. Test the scalability of the pages with different fonts and sizes.
- Hacks: Use of CSS hacks, such as box model hacks to accommodate IE is acceptable. However, all "hacks" (ie IE5 only code) should be kept separate so it can be easily removed at a later date.
- Ordering Content: When possible, order content in the source by level of importance. This is a great for both accessibility and SEO.
Guidelines to Use Different CSS for Different Browsers
Follow the CSS Standards First
It is far easier to develop the CSS code for a highly standards-compliant browser like Mozilla and Opera first, and then only later add the workarounds to make the code work on IE.
It is also logical to write for a more standards-compliant browser first: sooner or later, Microsoft is bound to issue a newer version of IE that will have the existing CSS bugs fixed. When they do so, all you have to do is to remove the workarounds which you created and you're done. If you write your main style sheet with styles that are coded in a non-standard way to deal with IE bugs first, you will wind up having to rewrite everything when Microsoft fixes the bugs.
Use External Style Sheets and Take Advantage of the "Cascading" Aspect of CSS
Put all the standards-compliant CSS code in a separate (external) style sheet file that is loaded by every browser.
Then, when you find that a specific browser requires a workaround, use the methods listed below to load an additional style sheet designed specifically for that particular browser. The beauty of CSS is that you can redefine a different style for the same selector and have the last-defined style override all preceding definitions.
Placing the main standards-compliant style sheet and the browser-specific style sheets in different external files allow you to simply remove a particular file in the future should that version of the browser cease to be used.
Include or Exclude Style Sheets for different IE Browsers
One of the easiest things to do is to specify that a certain style sheet be loaded only by IE 5, 5.5, 6 (and later versions) and be excluded from those versions of IE.
Microsoft provides a non-standard extension that allows you to detect those versions of IE, and include or exclude code depending on those versions.
To cause a CSS file to be loaded by IE 6 and not other browsers, use the following code in the HEAD section of the web page:
Example:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Likewise, for any version of IE 5 (including 5.0, 5.01, 5.5, etc), use the following:
Example:
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
To test for a whole range of versions of IE, you can use the comparison operators "lt" (less than), "lte" (less than or equal), "gt" (greater than), and "gte" (greater than or equal); and “!” (not equal) to exclude a certain style sheet.
Hide CSS from IE 5 and Below for Windows
If you place a comment immediately after a selector in a style sheet, IE 5 and earlier on Windows will ignore that selector.
In the following example, "Large text anyone?" will not be enlarged in IE 5 and earlier.
Example:
<style type="text/css"><!--
p.largetext/* */ { font-size: 200% ; }
--></style>
…
<p class="largetext">
Large text anyone?
</p>
<style type="text/css"><!--
p.largetext/* */ { font-size: 200% ; }
--></style>
…
<p class="largetext">
Large text anyone?
</p>
Hide CSS from Netscape 4
- Using the @import Rule
Use the @import rule to load an external style sheet will cause that style sheet to be ignored in Netscape 4.
For example, "not-netscape4.css" will not be included in the following rule:
Example:
<style type="text/css"><!--
@import url(not-netscape4.css);
--></style>
<style type="text/css"><!--
@import url(not-netscape4.css);
--></style>
- Using the Media Attribute in the Link Tag
If you link to your style sheets with a media attribute other than "screen" using a line like the following, Netscape 4 will not load them.
Example:
<link rel="stylesheet" type="text/css"
href="not-netscape4.css" media="all" />
Even the following line will not work in Netscape 4:
<link rel="stylesheet" type="text/css"
href="not-netscape4.css" media="screen,print" />
<link rel="stylesheet" type="text/css"
href="not-netscape4.css" media="all" />
Even the following line will not work in Netscape 4:
<link rel="stylesheet" type="text/css"
href="not-netscape4.css" media="screen,print" />
1 comment:
Yo.. Aerosmith...
I've got your invitation to LinkedID.. which I am not comfortable to join... So, drop me a line by email to catch up...
km
Post a Comment