Pet Browser

Adjust CSS by browser without a complicated CSS.

I want to adjust CSS by browser to allow for some browser errors. I not want complicated CSS. The Pet browser component helps me control the CSS in my theme.

Some people try to use CSS to allow for browser errors. CSS is not a programming language which makes CSS useless from control operations. Javascript can perform some tasks but Javascript works in the browser which means Javascript works too late to change the CSS sent to the browser. PHP works at the server and can decide the correct CSS file for a browser.

pet_browser.class looks that the request from the browser and decides which browser is making the request. pet_browser.class also works out a simple integer version number for the browser. The results are stored in the session so that the work is performed just once.

The theme can ask pet_browser for the browser name and number. The theme can then insert the result direct in to the HTML as CSS requests. I am still experimenting with the complexity required to produce good results in all browsers.

So far the only browsers needing special CSS for my site are Internet Explorer 5 and 6. I set up my theme in Firefox 1.0.6 and all the other browser work with that CSS. I have a link statement bringing in the Drupal CSS. In front of the Drupal CSS I have my site CSS. The browser specific CSS is in front of the other two. Most browsers read the CSS from the start and use the first applicable CSS information.

CSS Variations

CSS guides the browser in presenting your Web pages to the viewer. The viewer can set up their own CSS and their CSS overrides your CSS. The viewer can also manually override font sizes to make the page easier to read especially if they have visual problems.

When something obviously does not work you have to make up your own mind to follow the standards or to override the standards. In some cases browsers ignore the standards to fill a niche. There are browsers that ignore graphics so they can work on primitive display devices. There are browsers that ignore font settings to minimise memory usage. There are browsers that misuse and abuse every CSS specification just because they were rushed on to the market too early.

The most common CSS is to change the default serif font to a sans serif font because a sans serif font is less ornate and easier to read on a low resolution screen. The following CSS changes the default font for the body of a Web page. With some browsers you have to repeat the font specification for many HTML element types.

body
	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

Lots of people will give you heaps of advice on what works and what does not work. If in doubt leave it out. There is no point struggling with complicated CSS if you cannot see the result in several browsers. Complicated CSS tricks are usually ignored in many browsers and fail horribly in some common browsers. HTML tables are out of fashion but they work.

You can go to sites that list which parts of CSS work with each setting but they are often overly simple representations of the truth. A browser might work with all the CSS settings you want to use but the browser might not work when those settings are used in the combination you want.

Internet Explorer 5 & 6

Internet Explorer does things differently in some cases because Microsoft made a mistake. There are instances where Microsoft followed the CSS and HTML specifications exactly but the specifications were wrong. Internet Explorer ends up with fonts and headings that are a different size to most other browsers. I use the following CSS to make Internet Explorer work closer to the way other browsers work.

a:active.edge, a:hover.edge, a:link.edge, a:visited.edge, a:visited:active.edge, a:visited:hover.edge
	{
	font-size: 70%;
	}

body
	{
	font-size: 84%;
	}