RSS

Category Archives: Web Development

Clean CSS with Server-Side Browser Detection (1/2)

Why?!

We all know that browser detection is bad, but let us look at some situations in which it may actually make sense; consider the following use cases:

  1. A specific (old?) browser needs special CSS styles to make things look/work acceptably.
    For example, Firefox 3.0 needs a negative margin on an INPUT field, to correct a bug.
  2. Certain content should be highlighted to give a visual clue that this content appears most appropriate for the visitor’s context, like browser and OS.
    For example, on a download page, you want to highlight a download for Mac OS X 10.6, because that is what the visitor appears to use.

Alternative Solutions

Typical solutions for these problems are:

  1. Use CSS hacks.
    Downsides: Unreliable, cumbersome and very hard to maintain.
  2. Use conditional comments.
    Downside: IE-only.
  3. Use feature detection. Various client-side frameworks support this, e.g., Modernizr or jQuery’s $.support.
    Downsides: Only works when JavaScript is enabled, only on more recent, capable browsers and may impact performance negatively on less capable devices.
  4. Use client-side browser detection. This has the advantage of being able to use more than only agent string; using navigator.vendor gives more reliable results.
    Downside: Works only when JavaScript is enabled and impacts client-side performance.

The Case for a Different Path

Excluding the first one, the mentioned solutions have their applications in modern web development. However, they certainly do not cover all ground. An alternative solution for the specified use cases would be welcome if it would comply with all or most of the following requirements:

  1. Reliable, e.g. should automatically pick up new browser versions.
  2. Easy to apply.
  3. Easy to maintain, i.e., no hacks like html>/**/body {}.
  4. Generally applicable, i.e., not specific to IE.
  5. Supports Progressive Enhancement, i.e., does not require JavaScript.
  6. Supports older and less capable browsers as well as more recent and capable ones.
  7. High performance, no time lost detecting features client-side on a limited CPU.

Server-Side Detection

An alternative solution is to have a server-side algorithm add some CSS classes to an element on the HTML document. For example, an iPad agent string could result in the following BODY tag being generated:

<BODY class="Device-Tablet Browser-Safari BrowserEngine-WebKit BrowserOS-iOS">

Let’s look at what such an approach has to bring to the table in terms of requirements coverage:

  1. Reliability: Fair, but not very good, since it relies on the agent string which is easy to spoof. On the other hand, newer browser versions are typically picked up either automatically or with a small update of the detection algorithm.
  2. Easy to apply: Yes, definitely: BODY.BrowserOS-MacOS .MacDownload {border: 1px solid green;}
  3. Easy to maintain: Yes, you only deal with (readable!) CSS.
  4. Generally applicable: Yes, only limited by what user agents offer (of course) and what the algorithm detects; but the algorithm can be extended.
  5. Supports Progressive Enhancement: Yes, perfectly. Works without a single line of JavaScript.
  6. Supports older and less capable browsers: Yes, the detection is done server-side, independent of the browser.
  7. High performance: Yes, server-side algorithm should take (way) less than 10 ms.

What’s Next?

Does it sound like there is a valid use case for server-side browser detection? Let me know in the comments! In a followup article, I will give some code samples.

Advertisements
 
Leave a comment

Posted by on 12 May 2011 in Web Development

 

A More Useful 404 (Not Found) Page

>There’s an interesting article over at the A List Apart site:

Definitely worth a read for web developers. It discusses some techniques to guess why somebody got to a 404 page and then takes action and displays info to the visitor based on that knowledge.

 
Leave a comment

Posted by on 18 November 2008 in 404, error, error page, not found, web, Web Development, webdev

 

>Use HTML 4 instead of XHTML

>Here are some simple reasons for using HTML 4.01 with a strict doctype instead of using XHTML:

 

>Firebug 1.2 beta 2 for Firefox 3.0

>
On the Firebug blog, an announcement is posted about the release of Firebug 1.2 beta 2. It’s compatible with Firefox 3.0 RC, but not with Firefox 2.0.

For the uninitiated, Firebug is a Firefox extension that provides a host of web development tools, such as various inspectors, a JavaScript debugger, etc.

 

>Improve website performance with Yslow

>
A while ago I blogged about Firebug, a great Firefox extension for analyzing web pages (including CSS and JavaScript) and the interactivity between a browser and web servers.

Yahoo! have built on Firebug to produce a tool that goes even further. They call it: YSlow for Firebug.

Based on “Thirteen Simple Rules for Speeding Up Your Web Site” YSlow analyzes a web page, produces some reports (with a score card) and gives advice on improvements. This can be a great help in improving your website’s performance and reduce it’s bandwidth usage.

Also see this blog entry:

 

>CSS: Combining text replacement with mouse hover underlining [updated]

>
In website-design, the CSS text-replacement technique is well-known (see for example the article on the subject at Stopdesign).

What I have not seen elsewhere, though, is a technique to make sure the text is not only replaced, but also shows an underline when the mouse is hovered over it, for a typical hyperlink-effect.

Consider the situation where you want to show a header in a special font (which visitor probably won’t have). and you want this header to be clickable. You want the header text to become underlined when hovered over with the mouse, to clearly indicate this is a hyperlink.

The solution is very simple:

  1. make sure your replacement images are placed on a background that has a plain color;
  2. paint the background in your images with the same background color;
  3. in the image, make all pixels transparent that should show up as the underline;
  4. in the CSS, set the background of the images to match the background color;
  5. in the CSS, add a :hover rule that changes the background color for the images to match the text color (instead of the background color).

For a working example, check out this site:

Update (July 23, 2007): Note that in order for this hack to work with PNG images under MSIE 6, you will need to save the backgroud color in the image and use an indexed PNG.

 

>Firebug is great!

>Any webdeveloper trying to debug CSS, JavaScript or AJAX should use a good tool like Firebug, a Firefox extension. It works for sure under Firefox 2.0.

One screencast says more than a thousand words:

 
Leave a comment

Posted by on 23 March 2007 in ajax, css, firebug, firefox, javascript, Web Development