Traditionally, site visitors predominantly used the browser supplied with their computer's operating system. For Windows users this has always been Internet Explorer. Apple users used Safari (the default for about the last decade, there were several predecessors). The world isn't that simple anymore.
While independent standards have existed for quite some time, some software vendors, Microsoft in particular, tended to interpret HTML ( Hyper Text Markup Language, the "language of the Internet") "their way." Other vendors tended to be pretty good at interpreting the standards as designed.
CSS (Cascading Style Sheets) provides a facility to "style" content. For example, we can make text bold, italic, underlined, or put it in a colored box. Now, to be honest, I used HTML to style the preceding text, but CSS is used throughout this site to style things like the headings in this post or the tag links below.
There have been periods when the standards organization lagged behind the industry in implementing new standards. All of the browser makers have developed their own "extensions" to the standards to allow them to do special things, like put a gradient in a background without using an image. Browsers have a normal reaction when they encounter HTML or CSS that they don't understand; they ignore it. This works surprisingly well!
Fortunately, all of today’s popular browsers (Internet Explorer Version 10 and above, Google Chrome, FireFox, Opera, Safari, and others) are pretty compliant in supporting the features of HTML5 and CSS3. This means that if we use software that generates standards compliant code (HTML5 and CSS3) then the result will be very similar regardless of the browser doing the rendering.
There are a few cases when two browsers may produce slightly different results even though they’re both standards compliant. Generally, these differences are insignificant and can be easily overlooked and accepted.
Internet Explorer Version 10 (and later) provides good support for HTML5 and CSS3. Unfortunately, IE 10 cannot be used with either Windows XP or Windows Vista. While there are still some users of these old operating systems, their numbers are not significant enough to justify writing special (sometimes very difficult and convoluted) code specifically to support the older versions of IE.
Is there an acceptable solution to this conundrum? We want to support these users but we don’t want to incur the cost to do it with their old browsers.
I think there is. Here’s what I’m doing on this site and what I’ve done on some client sites. I’ve created a “Browser Alert” block. The block contains special HTML that is only recognized by IE; other browsers see it as HTML comments, which should be simply ignored*. Effectively, it asks the browser: Are you IE at any version less than 10? If the answer is yes, then the block is generated and the user sees the Browser Alert block shown here.
This isn’t quite “perfect.” The styling of the block is just a little different than that of other blocks. It isn’t quite as wide (you can see the standard block border from another block at the top of the image here). Some of the differences are intentional, e.g., the background color behind the title and the background color behind the text. Nevertheless, the results are quite acceptable.
* Note: We've heard one report of a smartphone's default browser that didn't properly ignore the HTML comments designed to be processed by Internet Explorer. In that case, the browser alert was incorrectly displayed. Regardless, the website still worked well on that device. That phone was Android based. We have been unable to reproduce this on our own Android devices, e.g., smartphones and tablet.