ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
cheatsheets/ie.md

3.3 KiB
Raw Blame History

title: Internet Explorer

Only available in IE7+

Selectors:

  • > (descendant)
  • [attr] (attribute)
  • .class1.class2 (multiple classes)
  • ~ (sibling)

CSS properties:

  • max-width
  • position: fixed

Only available in IE8+

Selectors/pseudos: (polyfill: selectivizr)

  • + (adjacent)
  • :first-child 1
  • :focus
  • :before, :after (single colon only)

CSS properties:

  • outline
  • display: inline-block 2
  • display: table
  • border-collapse, border-spacing, table-layout, ...
  • whitespace: pre-wrap
  • whitespace: pre-line
  • box-sizing

Features:

  • PNG alpha transparency
  • data: URI

JS features:

  • JSON parsing
  • Cross-origin resource sharing

Only available in IE9+

Selectors/pseudos: (polyfill: selectivizr)

  • :first-of-type, :last-of-type
  • :last-child
  • :empty
  • :enabled, :disabled, :checked
  • :not()
  • :nth-child(), :nth-last-child(),
  • :nth-of-type(), :nth-last-of-type(), :only-of-type()
  • :only-child()
  • :target
  • ::selection

CSS properties:

  • background-clip
  • background-origin
  • background-size
  • background: x, y, z (multiple backgrounds)
  • opacity
  • border-radius
  • box-shadow
  • rgba()
  • transform

CSS features:

HTML5 features:

  • <canvas>
  • <svg>
  • <img src='image.svg'>

Only available in IE10+

CSS features:

  • animation
  • transition
  • linear-gradient()

Features:

  • <input placeholder='..'>
  • <input type='range'>

HTML5 features:

  • Web sockets

Not in IE10 (or below) at all

CSS properties:

Polyfills

Always install these in almost every project:

You may also need these:

  • modernizr for feature detection and new HTML tags

for CSS3 decorations:

Also see:

Misc

IE Conditional comment HTML

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

IE conditionals

<!--[if IE]>      I'm IE      <![endif]-->
<!--[if !IE]> --> Not IE <!-- <![endif]-->

Footnotes

  • (1) = doesn't work for elements inserted via JS
  • (2) = IE6/7 can only support inline-block for elements that are naturally inline, like span