9:32 pm
Mood: geeky

phpIntroduction
The one basic problem with Web design is that each and every browser is different. The way they render HTML or parse CSS differ depending on both browser, browser version, and all the other things "under the hood." I don't know the number of times I've had something looking really fantastic and then one browser decides it isn't going to play nice. That browser could be Internet Explorer, Opera, Firefox, Chrome, or any of the others.

At this point you have several options. In this article, I cover basic browser detection using a simple PHP script. Browser detection isn't always a good idea, mainly because it isn't foolproof and can be seen as a lazy way out of the problem. However, I have had requests to help people with browser detection.

So let's start with what we need: We need a way to tell what browsers our visitors are using and display specific content based on what they're using.

One really nice thing is most browsers declare themselves to the Web sites they visit. We only have to ask for the information and it will usually be supplied. I say "usually" because there are some caveats, of course. As I said above, this isn't foolproof.

To use this method, you must have a Web host that supports PHP. This probably won't work on a free hosting service like Yahoo! Geocities, Quizilla, or Tripod.

 

Step 1: Preparing the file
To begin, open a new text file and put this at the top. This tells the server this is a PHP script.

PHP:
  1. <?php

At the bottom, close that off with

PHP:
  1. ?>

Save your file as browser_detection.php

 

Step 2: The Code
Next, we have to write the conditional. A conditional is a statement that tells the script to do something or not do something until certain conditions are found. For this script, an "If/Else" structure would probably work the best. In this type of conditional you're saying: "If this condition is found, do this. Otherwise, do this."

PHP:
  1. if (conditions) {
  2. // Write the actions you want taken here
  3. }

 

Now, we have to tell it what conditions we want to search for inside the two curved brackets.

For the sake of example, we'll look for visitors using Internet Explorer:

PHP:
  1. eregi("Internet Explorer",getenv("HTTP_USER_AGENT"))

Breaking it down:

  • eregi tells the script that we want to conduct a search and it's case insensitive.
  • getenv tells the script we want it to get environment information.
  • HTTP_USER_AGENT returns the browser.

To explain: The script is checking the user's environment information to see what browser is being used and is specifically looking for anything that matches "Internet Explorer." However, we have to count on the fact that it might find "IE" or "MSIE" instead of "Internet Explorer."

In this case, we have to specify that we want it to check to see if the browser says it is "Internet Explorer", "MSIE", or "IE." So, we'll use two "pipe" (the | character, which should be directly above the enter key on most keyboards) operators, which is used in PHP to indicate OR.

PHP:
  1. eregi("Internet Explorer",getenv("HTTP_USER_AGENT")) || eregi("MSIE",getenv("HTTP_USER_AGENT")) || eregi("IE",getenv("HTTP_USER_AGENT"))

 

Now that we have it looking for Internet Explorer, it's time to tell it what to do when it finds it. Inside the curved brackets, we put a variable that will store the HTML code we want displayed if it finds any version of Internet Explorer.

For the sake of simplicity, we'll name it html. We have to put a $ sign in front of that, which tells the script this is a variable. Next, put a space, then a period (.), an equals sign (=), then two quotation marks ("), and then a semi-colon (;). Anything between the quotation marks will be displayed.

We'll keep it simple and simply have it say "This is Internet Explorer." in nice, big letters.

PHP:
  1. $html .= "<h1>This is Internet Explorer.</h1>";

 

Next, we have to tell it what to do if it doesn't find Internet Explorer. We don't have to give any conditions for it to look for, since this is the "otherwise" part of the script. That is, if it doesn't find IE, it will jump down to this section.

After the closing } bracket, make a new line and write "else", then a { bracket, two more blank lines, and then a closing } bracket.

We'll reuse $html to make less work for ourselves. Between the two brackets, write:

PHP:
  1. $html .= "<h1>This is NOT Internet Explorer.</h1>";

 

Finally, it won't display the code unless we tell it to. Move down to the end of the file, but above the closing ?>. We do that with the "echo" command, which will show anything we specify. Since we stored the HTML code in the variable named $html, we can simply specify we want that variable printed.

PHP:
  1. echo $html;

Your code should now look something like this now.

Save and upload the file to your Web hosting account and then visit the file using your browser. If everything is working, you should get something that looks like this.

 

Step 3: Inserting the file
To insert the results, the page calling the file must be a PHP file too. You can simply rename a HTML file to PHP and not see any real differences. If you're using this in a template, such as for PHPBB or Wordpress, you might wish to consult their manuals to see if there's any specific way they want it called.

In this guide, we'll just use a simple PHP include.

Put this where you want the code to appear.

PHP:
  1. <?php include 'the/path/to/browser_detect.php'; ?>

Change the path to where you have browser_detect stored on your server. Be sure to leave in the single quotation marks!

As one final note, many scripts have disabled PHP includes due to security concerns. (e.g. I can use PHP includes in my Wordpress layouts, but not in my posts.) You may need to turn it on in your settings or use a special method to insert the code into your layout. If you're having trouble inserting your PHP code, you'll need to consult your user manual or contact your script's support for information.

 

Taking it Further
If you're reading this, you're probably looking to make this do a bit more than display a message that declares the visitor's is IE or another browser.

You might be looking to display a different header, different CSS file, or other content based on the user's browser choice.

As I said above, you can really put anything in there. Here's an example with a stylesheet:

PHP:
  1. $html .="<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" />";

Notice how any HTML that requires quotation marks has a backslash (\) in front of it. This is called an "escape" character. Basically, we have to tell the PHP to ignore these quotation marks. If you leave them unescaped, you'll get an error.

You can also do the same thing with plain CSS:

PHP:
  1. $html .="#myDiv {left:35px; top:0; padding:20px 0 12px 1px; height:100px; width:100px; background-image:url(mybackground.png);}";

Even pictures!

PHP:
  1. $html .="<img src=\"mypicture.gif\" border=\"0\" alt=\"My Picture\" height=\"100\" width=\"100\" />";

 

Other Browsers
In my example, I have the code searching for only Internet Explorer. You can easily tell it to search for other browsers too.

Here's some of the other search terms you can use:

  • Firefox: Firefox, FF
  • Opera: Opera
  • Chrome: Chrome
  • Safari: Safari
  • Internet Explorer: Internet Explorer, IE, MSIE

Additionally, many browsers use the same "layout engine" to display the Web pages. Google Chrome and Safari both are AppleWebKit. Firefox, Flock, Camino, and Epiphany are all Gecko. Opera is Presto. You could potentially just have your code search for the layout engine and skip having to write a long list of browsers. Just keep in mind that not all browsers declare their layout engines, such as Internet Explorer. (IE is Trident, in case you're wondering.)

Enjoy!

Both comments and pings are currently closed.

Comments are closed.