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 layout
Internet Explorer default

IE7+ only

  • Selectors:
    • > (descendant)
    • [attr] (attribute)
    • .class1.class2 (multiple classes)
    • ~ (sibling)
  • CSS properties:
    • max-width
    • position: fixed

IE8+ only

  • 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

IE9+ only

  • 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'>

IE10+ only

  • CSS features:
    • animation
    • transition
    • linear-gradient()
  • HTML features:
    • <input placeholder='..'>
    • <input type='range'>
  • JS features:
    • Web sockets

Not in IE10 (or below) at all

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