PHPBuilder - Browser Detection and Appropriate CSS Generation Page 3



RSS Twitter
Articles Html

Browser Detection and Appropriate CSS Generation - Page 3

by: Tim Perdue
|
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
1
|
2
|
3
|
4
Next Page »

Comment and Contribute

Your comment has been submitted and is pending approval.

Author:
Tim Perdue

Comment:



Comment:

(Maximum characters: 1200). You have characters left.