I’ve posted about using JavaScript to detect specific browsers, but that script seems to have its limitations.  I’ve become infinitely more comfortable with PHP in recent years and find that the following is an acceptable option for detecting a browser.  Better yet, you can write code that will change depending on your visitor’s browser.  In this case, I use it to switch CSS files.  Here is the code:

<? // check for UA, convert UA string to lower case
$navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';

// Check browser and select CSS file
if (stristr($navigator_user_agent, "msie 6"))
echo '<link href="css/alternate.css" rel="stylesheet" type="text/css" />';

echo "<link href='css/style.css' rel='stylesheet' type='text/css' />";

If all went well you should now have a script that selects an alternate CSS file for your IE6 visitors. You can use else-if statements if you would like to add more contingencies. Another upside to this is if you’re using non-valid CSS (like *html for IE) you can shuffle it all away in another file that the W3C validator will never see. Devious!

Make sure you find your user agent string! Some of these are similar and will contain the names of other browsers, so be specific when you use a keyword to search the UA string.

Modify the Document Type Definition (DTD)

Many of the best AJAX apps activate by using custom triggers that do not qualify as valid HTML. I used to think that all was lost, and that there was a mandatory trade between functionality and usability. This is not so: doctype information may be appended to include your triggers.

For instance, I use a modal window system called LightWindow that has “author” and “caption” triggers to relate data to the script when a user clicks on an image. Neither of these triggers will validate under the XHTML 1.0 DTD. Here’s the code to fix it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"


This is how it breaks down:

<!ATTLIST element attribute dataType #IMPLIED or #REQUIRED>

Since my elements relate to linked files e.g.(<a href=) that I want to open with LightWindow, I use the element ‘a’ for link. The attribute is what you are using to communicate with your app and is also what is causing your document to not validate. The dataType can likely just be left as CDATA as it handles any kind of data. It is also likely best to leave the type defenition as #IMPLIED or optional for these purposes. A more in-depth article can be found at A List Apart.

Fix invalid symbols by changing them to HTML

If you are using a script in your document that is called using symbols such as the ampersand ‘&’ or equals ‘=’ these will cause the validator to choke. Consider using their HTML forms amp; and #61; (with ampersands in front) respectively. A complete list of symbols and HTML translations is available at the Web Design Group’s site.

For example, a line on my site used to look like this:

<link rel="stylesheet" type="text/css" href="combine.php?type=css&files=dlinn.css,lightWindow.css" />

But now looks like this:

Valid HTML

Still having problems with CSS?

Yeah, me too. We’ll just have to hang in there until the newer standards (that have existed for years) are adopted or hell freezes over.