Which modernizr test(s) will target IE8?

Question

I am trying to set up some css selectors, and I need to set up several that I want to be ignored in IE8 (actually any IE < IE9, but that's ok).

Which selector can I safely use knowing that all browsers (including IE9) support the selector but IE8 fails?

In other words, I am looking to do something like

.someselectorthatfailsinie .mystyle { stuff for new browsers }

EDIT: What I am trying to do with CSS is target and style checkboxes and radio buttons. While IE8 supports SOME of this treatment -- the custom box -- it does not support the input[type=checkbox]:checked + label:before necessary for the pseudo checkboxes to work.

Therefore I wanted to "hide" the entire css effort from IE8, and let it show the default unstyled checkboxes.

IE8 will already ignore styles it doesn't support. And, if the `stuff for new browsers` is using particular features, why not select by those? — Jonathan Lonowski, Dec 31 '13 at 21:03
Depending on your specific problem, you might find this article useful: http://www.impressivewebs.com/browser-support-css3-selectors/ — DLH, Dec 31 '13 at 21:06
If you really want to style by version, "[*Explicitly Target IE versions without hacks using HTML and CSS*](http://stackoverflow.com/a/4349295)." — Jonathan Lonowski, Dec 31 '13 at 21:12

score 6 · Answer 1 · answered Dec 31 '13 at 22:14

There's so many things that ie doesn't handle, I generally do this:

.no-boxshadow .classname {border:1px solid #ddd}

Go to http://caniuse.com/ to see what IE 8 doesn't handle.

The problem with VenomVendor's answer is that .noie .mystyle is relying on javascript to be enabled to use it for the majority of browsers, which are modern. That's a lot of work. Just design your site for modern browsers then use feature detection to address older browsers.

It would be better to add a conditional statement and just target ie8 or ie9, my html looks like this, based on Boilerplate and avoids putting IE in compatibility mode. IE10 and above doesn't recognize conditional comments.

<!--[if IE ]><![endif]-->
<!doctype html>
<!--[if IE 8 ]> <html class="no-js lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>

Then if I want to get ie8, I can do this:

.ie8 .class {styles for ie8}

or IE 8 and under

.lt-ie9 .class {styles for less than ie 9}

score 2 · Answer 2 · answered Dec 31 '13 at 21:03

add noie class for browsers higher than IE8 & other broswers.

<!DOCTYPE html>
<!--[if lt IE 8]><html lang="en" class="no-js dumbie"><![endif]-->
<!--[if (gt IE 8)|!(IE)]><!-->
<html class="no-js noie" lang="en">
<!--<![endif]-->
<head>

.noie .mystyle { stuff for new browsers }

score 0 · Answer 3 · answered Aug 21 '14 at 18:14

To answer the original question, IE8 does not support the canvas element. Modernizr will add the canvas class to the <html> tag for modern browsers, and alternatively, it will add the no-canvas class for IE8 and below. Therefore, you could do this to target modern browsers:

.canvas .my-checkbox-style { /* CSS for modern browsers, but not IE8 or lower */ }

Alternatively, you could do this to target IE8 and lower:

.no-canvas .my-checkbox-style { /* CSS for IE8 or lower */ }

However, there are a couple of things worth further mention here...

Browsers will not honor CSS selectors and properties they do not support.

If the intention is to truly hide your modern browser CSS from IE8 entirely, you need to serve up separate stylesheets altogether via conditional statements, like this:

    <!--[if lt IE 9]>
      <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
    <![endif]-->

    <!--[if gt IE 8]>
      <link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
    <![endif]-->

    <!--[if !IE]><!-->
      <link rel="stylesheet" type="text/css" href="non-ie-browsers.css" />
    <!--<![endif]-->

Architecturally speaking, presuming modern browsers are the 'first class citizens' in your styling objectives, your stylesheets should be written from their modern perspective as a norm. This will make your overall development process easier, as well as uncluttered with classes that unnecessarily target 'modern' browsers. Target IE8 and below with the no-canvas class, and over-ride the modern browser CSS therein, to return the IE8 checkboxes to their default state. You can then easily prune this self-contained over-ride from your CSS codebase when the time comes to drop IE8 support.

I've written a Codepen example to illustrate the use of canvas and no-canvas.

David De Sloovere · Answer 4 · 2016-07-06T15:24:17.417

0

I've found that ES5 array methods work for detecting IE8 and lower. I happened to use the forEach in my code. http://caniuse.com/#search=ECMAScript%205

Using Modernizr you can check .no-es5array or .es5array in CSS and Modernizr.es5array in JS. https://modernizr.com/download?es5array-dontmin-setclasses&q=es5array

edited Jul 06 '16 at 15:24

answered Jul 06 '16 at 15:16

David De Sloovere

3,415
2
24
27

Which modernizr test(s) will target IE8?

4 Answers4