Home
Web design
Software
Articles
Site Map
> Articles > PHP articles > Fixing browser CSS incompatabilities with dynamic CSS

Fixing browser CSS incompatabilities with dynamic CSS

Nevertheless CSS was introduced to simplify development of the web pages that look similar in different browsers, some even basic styles are rendered differently in browsers.

Here we check how the font-size style acts differently in three most used web browsers. We omit Netscape Navigator 4 because it's CSS support is very poor.

The original html code with font-size style used is at cssfontsize.html.txt and you can see how your browser renders it at cssfontsize.html.

At the following figure you can see how browsers render that html code.
Internet Explorer 6 Opera 6 Mozilla 0.9.7

As you can see, browsers render these font sizes differently. One of the ways to fix that problem is to supply different CSS file to different browsers. Here we describe two ways to do that.

First method
    One can use server side scripting when producing the web pages or when producing the style sheet file and supply different styles depending on the browser that opened the web page. Here are two methods to archieve needed results using scripting.

  • Including different CSS file. PHP example.
        <LINK REL="stylesheet" TYPE="text/css" HREF="http://www.yourdomain.com/<?php
            if (strstr($HTTP_USER_AGENT, 'gecko')) echo "mozilla.css";
        elseif (    strstr($HTTP_USER_AGENT, 'opera')) echo "opera.css";
        elseif (    strstr($HTTP_USER_AGENT, 'msie')) echo "iexplorer.css";
        else echo     "default.css";
            ?>">
             This code will produce a link to CSS file corresponding to the browser that opened the web page.

    Disadvantages: All pages should be processed by the server side scripting engine. You can not use this method with pure .html web page which is not processed by anything.

  • Configure your web server to process your style sheet file. For example, you can configure Apache web server by adding the following line in the httpd.conf file.

    AddType application/x-httpd-php .css

    Then you can use PHP scripts your .css file thus producing different style sheets for different browsers. Also you will have to produce proper headers using header("Content-Type: text/css"); in the very beginning of your .css file.

    Advantages: You can include that style sheet from any HTML document and different browsers still will still get style sheet file with different contents.

    Disadvantages: Sometimes (especially if you are using shared web hosting) you don't have permission to modify web browser configuration.

Disadvantages of using server side scripting to solve this problem:
Many internet providers and organizations use cache servers which store frequently accessed web pages locally reducing external traffic. Some web cache servers will save remote page locally on the first request and then return that page no matter what browser requests it.
Obviously in such a case using server siding scripting won't do anything good, because web cache server will supply same stylesheet (supplied by your server on the first request from the cache server) to different browsers.
Another problem might appear is user will save your web page locally and then open it in another browser.
Also, this method introduces unnecessary server workload if most web pages do not use server side scripting.

Second method
    Another approach is to use the JavaScript at the client side to make web browser request different style sheet file.     <script language="JavaScript">
    document.write('<link rel="stylesheet" href="http://www.yourdomain.com/');
    var agt=navigator.userAgent.toLowerCase();
    if (agt.indexOf('opera') != -1) document.write('opera.css');
    else if (agt.indexOf('gecko') != -1) document.write('mozilla.css');
    else if (agt.indexOf('msie') != -1) document.write('iexplorer.css');
    else document.write('default.css');
    document.write('" type="text/css">');
    </script>

If the JavaScript is disabled in the user's browser, we include the default style sheet file using the <noscript> tag.     <noscript>
        <link type="text/css" rel="stylesheet" href="default.css">
    </noscript>

Now, using that method all we need is to put that code in each web page, or you can put the JavaScript part in the separate file and include it using the html tag
<script type="text/javascript" src="yourscript.js" language="JavaScript">
</script>

Note that in that case you still need the <noscript>part to be in your web page.

Advantages: This method appears to be quite bulletproof. It works fine even if web cache server supplies same page to all the browsers because browser will request different stylesheet. One could say that this method makes the user's browser do the job for your the web server.

Disadvantages: The only problem we encountered is when user saves your web page locally and then opens it in another browser not naving an internet access. In this case browser won't be able to open needed stylesheet file and will render your web page using default settings.

You can see how this method works here jscssmethod.html (html source at jscssmethod.html.txt).



Copyright © Val Samko, DigiWays. Written by Valentin Samko mailto:val@digiways.com