Style Sheets
  Home arrow Style Sheets arrow Double Vision – Give the Browsers CSS They...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Double Vision – Give the Browsers CSS They Can Digest
By: Chris Heilmann
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 12
    2005-02-22

    Table of Contents:
  • Double Vision – Give the Browsers CSS They Can Digest
  • The way of the dark side – code forking
  • The way of confusion – browser hacks
  • The way into the future – progressive enhancement
  • The child selector
  • Enhancing with the child selector
  • The screen display style sheet
  • The print style sheet

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Double Vision – Give the Browsers CSS They Can Digest


    (Page 1 of 8 )

    Some but not all browsers support CSS2. You can deliberately code your website so that users of either kind of browser will see pages that are appropriate for what their browser can handle. Older browsers won't gag, but you will still be able to take advantage of what you can do with CSS2 in the newer browsers. Read on to find out how.

    When surfing the Web, one might encounter websites that look completely different in Microsoft Internet Explorer and Firefox/Opera. We don’t mean websites with bugs, or ones that were developed for MSIE only. We’re talking about websites deliberately showing a different style in the two of them. One example would be this CSSZengarden submission: (http://www.csszengarden.com/?cssfile=http://icant.co.uk/zen/sample.css).

     

    The reason for these websites is to show how much more a browser that properly supports CSS2 can offer. This technique is called progressive enhancement (http://css-discuss.incutio.com/?page=ProgressiveEnhancement), or graceful degredation (http://www.anybrowser.org/campaign/
    abdesign.html#degradability
    ) - depending on which way you look at it – from newer to older or older to newer browser.

     

    It is nothing new - clever Web developers have done to same to send a basic style sheet to older browsers like Netscape 4, and a different one to more advanced browsers:

     

    <link rel="StyleSheet" href="basic.css" type="text/css">

    <style type=”text/css”>@import “advanced.css”;</style>

    Netscape 4 does not grasp the @import directive and applies basic.css exclusively. More modern browsers also read advanced.css and overwrite or re-use what has been defined in basic.css. The same can be done today for yet a newer breed of browser. This can be achieved in several ways. 

    More Style Sheets Articles
    More By Chris Heilmann


       · Some browsers understand both imports but don't display CSS2 properly - so this will...
       · which ones? The only one that comes to mind is Opera < 7.
     

    STYLE SHEETS ARTICLES

    - Image Replacement CSS Techniques
    - Using BlueTrip`s Success, Notice and Error C...
    - More Uses for the Thin and Caps CSS Classes ...
    - Styling Definition Lists with the BlueTrip C...
    - Styling Unordered and Ordered HTML Lists wit...
    - Using the BlueTrip CSS Framework`s Thin and ...
    - Adding Borders to Web Page Columns with Blue...
    - Introducing the BlueTrip CSS Framework
    - Using a Background Grid to Assist Web Page L...
    - Extending the Rule Of Thirds for Web Page La...
    - A Two-Column Web Page Layout Based on the Ru...
    - Using the Rule Of Thirds for Web Page Layout
    - Swapping Columns Using the Divine Ratio for ...
    - Using the Golden Ratio in Liquid Web Page De...
    - Fundamental Design Principles for Web Page L...







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 1 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek