1

We are rewritting our website to a responsive design (and maybe RESS in the future). Analytics figures impose us to support some old browsers (ie7 and ie8).

We have 2 CSS:

  1. site.css: full css with media queries (for all agents except ie8 and lower)
  2. old-ie.css: full css without media queries (for ie8 and lower)

We have found this method:

<!--[if (gt IE 8) | (IEMobile)]><!-->
    <link href="site.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
    <link href="old-ie.css" rel="stylesheet" />
<![endif]-->

Is it recommanded? (Google bot, seo, browser compatibility, etc)

Or is it better to make a server side detection of the old browsers (small finite list) and simply change the name of the css to include with? (Plus serving the html with Vary: User-Agent to please Google)

Improve this question

1 Answer 1

Reset to default
1

If you pick server-side detection...

The advantage to server-side detection is that less code in general will be delivered to the end user which makes the web page load slightly faster. Another advantage is that there won't be any CSS commands that could create undesired effects on incompatible browsers.

The drawback to server-side detection is that you have to write code to detect the browser and make it serve content depending on the browser. Also, you'll have to maintain a list of browsers so that the proper code can be downloaded. Depending on how many browsers you plan to support, this list could be long. I think to date there has got to be at least 50 web browsers created ranging from Arachne for DOS to Internet Explorer 3 for Windows 3.x to Netscape, Firefox, chrome, and the list goes on. On top of that, you have to deal with version numbers since older versions of some browsers are not capable of new technologies.

If you don't pick server-side detection and instead use conditional comments...

The advantage here is the coding time may be less, especially if coding knowledge is limited to CSS and HTML, however, conditional comments that you show (according to a stub on webpagetest.org during a web page test) stop internet explorer from executing further code until the stylesheet inside is loaded, thereby making the perceived loading speed slower.

If you're time-pressed, then lump all the CSS code together then test it with the CSS validator at https://jigsaw.w3.org/css-validator/ and try to get it compatible with the lowest CSS level you can. The lower, the higher chance it will work with more browsers.

Also, try powermapper tools (at trypowermapper.com) to see what issues they can find with your site.

But if you just want an answer...

I'd go server-side just for the sake of your internet explorer clients to prevent any blocking from happening.

Proof that using IE conditions isn't the best idea

This tip randomly appeared when testing my page at webpagetest.org.

enter image description here

Improve this answer
4
  • There's absolutely no reason not to interment conditional IF CSS statements and has been widely accepted for many years. Sites attempting to cater for eon old browsers is extremely likely to suck in the user experience department. Conditional Statements are prefect for most websites attempting to cater for IE6 and above. Users using IE6 should and do expect pages to load or be viewed differently.
    – Simon Hayter
    Oct 30, 2015 at 14:14
  • I find they are necessary if there's no other feasable workaround. For example, on my site, I put a closing html base tag inside an ie6 conditional if statement because ie6 expects a base tag to be closed even tho its an improper way to use the base tag in html 4. Other than that, I avoid conditional ifs.
    – Mike -- No longer here
    Oct 30, 2015 at 14:52
  • "conditional comments that you show ... stop internet explorer from executing further code until the stylesheet inside is loaded" - can you explain more / provide a reference? A conditional comment that does not apply to a particular browser should not be "render blocking", otherwise any externally referenced stylesheets are render blocking.
    – MrWhite
    Oct 30, 2015 at 22:59
  • See my attached image.
    – Mike -- No longer here
    Oct 30, 2015 at 23:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.