CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-8modernizr
Steve
Steve

Reputation: 14912

Which modernizr test(s) will target IE8?

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.

Upvotes: 1

Views: 10520

Answers (4)

David De Sloovere
David De Sloovere

Reputation: 3435

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

Upvotes: 0

jacefarm
jacefarm

Reputation: 7431

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.

Upvotes: 0

Christina
Christina

Reputation: 34652

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}

Upvotes: 6

VenomVendor
VenomVendor

Reputation: 15392

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 }

Upvotes: 2

Related Questions