Browser Detection and Appropriate CSS Generation Page 3

By Tim Perdue

on August 20, 2000

There, now we can start using that library to determine font sizes.

Internet Explorer on Wintel has the biggest default font by a long shot. If you don’t
specify a font size, Wintel users will get huge fonts and they’ll yell to no end, even
though it’s caused by their own browser settings.

Beyond IE on Windows, other browsers like Netscape also have big fonts. Macs for some
reason buck this trend and render fonts very small, so you need to set the font up
a couple steps or they’ll be angry.

The “other” platforms, like linux, unix, etc, come last. I generally set the fonts about the
same as I do for Netscape on Windows and I haven’t seen too many complaints.

Here’s the library. Notice that the CSS sheet itself is generic, but the font-size:
on that sheet is a variable which is set at the top of the code.


<?php 
function css_site() {
    //determine font for this platform


    if (browser_is_windows() && browser_is_ie()) {
        //ie needs smaller fonts than anyone else


        $font_size='x-small';


        $font_smaller='xx-small';


        $font_smallest='7pt';
    } else if (browser_is_windows()) {
        //netscape or "other" on wintel


        $font_size='small';


               $font_smaller='x-small';


        $font_smallest='x-small';
    } else if (browser_is_mac()){
        //mac users need bigger fonts


        $font_size='medium';


        $font_smaller='small';


        $font_smallest='x-small';
    } else {
        //linux and other users


        $font_size='small';


        $font_smaller='x-small';


        $font_smallest='x-small';
    }
    $site_fonts='verdana, arial, helvetica, sans-serif';
    ?>


    <style type="text/css">


    <!--


    BODY, TH, TD, OL, UL, LI { font-family: verdana, arial, helvetica, sans-serif; font-size: <?php echo $font_size; ?>; }


    H1 { font-size: 175%; font-family: <?php echo $site_fonts; ?>; }


    H2 { font-size: 150%; font-family: <?php echo $site_fonts; ?>; } 


    H3 { font-size: 125%; font-family: <?php echo $site_fonts; ?>; }


    H4 { font-size: 100%; font-family: <?php echo $site_fonts; ?>; } 


    H5 { font-size: 75%; font-family: <?php echo $site_fonts; ?>; }


    H6 { font-size: 50%; font-family: <?php echo $site_fonts; ?>; }


    PRE, TT, CODE { font-family: courier, sans-serif; font-size: <?php echo $font_size; ?>; }


    A:hover { text-decoration: none; color: #FF6666; font-size: <?php echo $font_size; ?>; }


    A.menus { color: #FF6666; text-decoration: none; font-size: <?php echo $font_smaller; ?>; }


    A.menus:visited { color: #FF6666; text-decoration: none; font-size: <?php echo $font_smaller; ?>; }


    A.menus:hover { text-decoration: none; color: #FF6666; background: #ffa; font-size: <?php echo $font_smaller; ?>; }


    A.menussel { color: #FF6666; text-decoration: none; background: #ffa; font-size: <?php echo $font_smaller; ?>; }


    A.menussel:visited { color: #FF6666; text-decoration: none; background: #ffa; font-size: <?php echo $font_smaller; ?>; }


    A.menussel:hover { text-decoration: none; color: #FF6666; background: #ffa; font-size: <?php echo $font_smaller; ?>; }


    A.menusxxs { color: #FF6666; text-decoration: none; font-size: <?php echo $font_smallest; ?>; }


    A.menusxxs:visited { color: #FF6666; text-decoration: none; font-size: <?php echo $font_smallest; ?>; }


    A.menusxxs:hover { text-decoration: none; color: #FF6666; background: #ffa; font-size: <?php echo $font_smallest; ?>; }


    -->


    </style>


    <?php


}

?>

« Previous Page

Related Results via Envato Market

Related Content