Rewrite IE cheatsheet
This commit is contained in:
Rico Sta. Cruz
parent
871a4ba4f8
commit
853b1b01e3
|
|
@ -93,3 +93,17 @@
|
||||||
margin-top: 3em;
|
margin-top: 3em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.greycode code {
|
||||||
|
background: #f3f3f3;
|
||||||
|
padding: 5px 5px 4px 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greycode code + em {
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greycode a {
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
|
||||||
168
ie.md
168
ie.md
|
|
@ -3,84 +3,90 @@ title: Internet Explorer
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
### IE7+ only
|
## CSS Selectors
|
||||||
|
|
||||||
* Selectors:
|
| Feature | IE6 | 7 | 8 | 9 | 10 |
|
||||||
- `>` _(descendant)_
|
| ---------------------------------------------------------- | - | - | - | - | -- |
|
||||||
- `[attr]` _(attribute)_
|
| `>` _(descendant)_ | | 7 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `.class1.class2` _(multiple classes)_
|
| `[attr]` _(attribute)_ | | 7 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `~` _(sibling)_
|
| `.class1.class2` _(multiple classes)_ | | 7 ✓ | ✓ | ✓ | ✓ |
|
||||||
* CSS properties:
|
| `~` _(sibling)_ | | 7 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `max-width`
|
| `+` _(adjacent)_ | | 7 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `position: fixed`
|
| ---------------------------------------------------------- | - | - | - | - | -- |
|
||||||
|
| `:first-child` <sup>1</sup> | | | 8 ✓ | ✓ | ✓ |
|
||||||
|
| `:focus` | | | 8 ✓ | ✓ | ✓ |
|
||||||
|
| `:before` `:after` _(single colon only)_ | | | 8 ✓ | ✓ | ✓ |
|
||||||
|
| `:lang` | | | 8 ✓ | ✓ | ✓ |
|
||||||
|
| ---------------------------------------------------------- | - | - | - | - | -- |
|
||||||
|
| `:first-of-type`, `:last-of-type` | | | | 9 ✓ | ✓ |
|
||||||
|
| `:last-child` | | | | 9 ✓ | ✓ |
|
||||||
|
| `:empty` | | | | 9 ✓ | ✓ |
|
||||||
|
| `:enabled` `:disabled` `:checked` | | | | 9 ✓ | ✓ |
|
||||||
|
| `:not()` | | | | 9 ✓ | ✓ |
|
||||||
|
| `:nth-child()` `:nth-last-child()` | | | | 9 ✓ | ✓ |
|
||||||
|
| `:nth-of-type()` `:nth-last-of-type()` `:only-of-type()` | | | | 9 ✓ | ✓ |
|
||||||
|
| `:only-child()` | | | | 9 ✓ | ✓ |
|
||||||
|
| `:target` | | | | 9 ✓ | ✓ |
|
||||||
|
| `::selection` | | | | 9 ✓ | ✓ |
|
||||||
|
| `:root` | | | | 9 ✓ | ✓ |
|
||||||
|
{:.wide.greycode}
|
||||||
|
|
||||||
### IE8+ only
|
## CSS properties
|
||||||
|
|
||||||
* Selectors/pseudos: ([polyfill: selectivizr][selectivizr])
|
| Feature | IE6 | 7 | 8 | 9 | 10 | 11 |
|
||||||
- `+` _(adjacent)_
|
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
|
||||||
- `:first-child` <sup>1</sup>
|
| `max-width` | | 7 ✓ | ✓ | ✓ | ✓ | ✓ |
|
||||||
- `:focus`
|
| `position: fixed` | | 7 ✓ | ✓ | ✓ | ✓ | ✓ |
|
||||||
- `:before`, `:after` _(single colon only)_
|
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
|
||||||
* CSS properties:
|
| `outline` | | | 8 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `outline`
|
| `display: inline-block` <sup>2</sup> | | | 8 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `display: inline-block` <sup>2</sup>
|
| `display: table` | | | 8 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `display: table`
|
| `border-collapse`, `border-spacing`, `table-layout`, ... | | | 8 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `border-collapse`, `border-spacing`, `table-layout`, ...
|
| `whitespace: pre-wrap` | | | 8 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `whitespace: pre-wrap`
|
| `whitespace: pre-line` | | | 8 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `whitespace: pre-line`
|
| `box-sizing` | | | 8 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `box-sizing`
|
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
|
||||||
* Features:
|
| `background-clip` | | | | 9 ✓ | ✓ | ✓ |
|
||||||
- PNG alpha transparency
|
| `background-origin` | | | | 9 ✓ | ✓ | ✓ |
|
||||||
- `data:` URI
|
| `background-size` | | | | 9 ✓ | ✓ | ✓ |
|
||||||
* JS features:
|
| `background: x, y, z` _(multiple backgrounds)_ | | | | 9 ✓ | ✓ | ✓ |
|
||||||
- JSON parsing
|
| `opacity` | | | | 9 ✓ | ✓ | ✓ |
|
||||||
- Cross-origin resource sharing
|
| `border-radius` | | | | 9 ✓ | ✓ | ✓ |
|
||||||
|
| `box-shadow` | | | | 9 ✓ | ✓ | ✓ |
|
||||||
|
| `rgba()` | | | | 9 ✓ | ✓ | ✓ |
|
||||||
|
| `transform` | | | | 9 ✓ | ✓ | ✓ |
|
||||||
|
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
|
||||||
|
| `animation` | | | | | 10 ✓ | ✓ |
|
||||||
|
| `transition` | | | | | 10 ✓ | ✓ |
|
||||||
|
| `linear-gradient()` | | | | | 10 ✓ | ✓ |
|
||||||
|
| `text-shadow` — [polyfill][text-shadow] | | | | | 10 ✓ | ✓ |
|
||||||
|
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
|
||||||
|
| `border-image` | | | | | | 11 ✓ |
|
||||||
|
{:.wide.greycode}
|
||||||
|
|
||||||
## IE9+ only
|
## Features
|
||||||
|
|
||||||
* Selectors/pseudos: ([polyfill: selectivizr][selectivizr])
|
| Feature | IE6 | 7 | 8 | 9 | 10 | 11 |
|
||||||
- `:first-of-type`, `:last-of-type`
|
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
|
||||||
- `:last-child`
|
| PNG alpha transparency | | 7 ✓ | ✓ | ✓ | ✓ | ✓ |
|
||||||
- `:empty`
|
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
|
||||||
- `:enabled`, `:disabled`, `:checked`
|
| data URI [⊙][datauri] | | | 8 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `:not()`
|
| JS: JSON parsing [⊙][json] | | | 8 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `:nth-child()`, `:nth-last-child()`,
|
| JS: Cross-origin resource sharing [⊙][cors] | | | 8 ✓ | ✓ | ✓ | ✓ |
|
||||||
- `:nth-of-type()`, `:nth-last-of-type()`, `:only-of-type()`
|
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
|
||||||
- `:only-child()`
|
| CSS: `@media` queries — [polyfill][respond] | | | | 9 ✓ | ✓ | ✓ |
|
||||||
- `:target`
|
| HTML: `<canvas>` | | | | 9 ✓ | ✓ | ✓ |
|
||||||
- `::selection`
|
| HTML: `<svg>` | | | | 9 ✓ | ✓ | ✓ |
|
||||||
* CSS properties:
|
| HTML: `<img src='image.svg'>` | | | | 9 ✓ | ✓ | ✓ |
|
||||||
- `background-clip`
|
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
|
||||||
- `background-origin`
|
| CSS: flexbox [⊙][flexbox] <sup>3</sup> | | | | | 10 ✓ | ✓ |
|
||||||
- `background-size`
|
| HTML: `<input placeholder='..'>` [⊙][placeholder] | | | | | 10 ✓ | ✓ |
|
||||||
- `background: x, y, z` _(multiple backgrounds)_
|
| HTML: `<input type='range'>` | | | | | 10 ✓ | ✓ |
|
||||||
- `opacity`
|
| HTML: `<input required>` [⊙][validation] | | | | | 10 ✓ | ✓ |
|
||||||
- `border-radius`
|
| JS: Web sockets | | | | | 10 ✓ | ✓ |
|
||||||
- `box-shadow`
|
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
|
||||||
- `rgba()`
|
| JS: Fullscreen mode | | | | | | 11 ✓ |
|
||||||
- `transform`
|
{:.wide.greycode}
|
||||||
* CSS features:
|
|
||||||
- `@media` queries ([polyfill: respond.js][respond])
|
|
||||||
* 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
|
|
||||||
|
|
||||||
- `text-shadow` ([polyfill][text-shadow])
|
|
||||||
|
|
||||||
## Polyfills
|
## Polyfills
|
||||||
|
|
||||||
|
|
@ -110,23 +116,27 @@ Misc
|
||||||
|
|
||||||
### IE Conditional comment HTML
|
### IE Conditional comment HTML
|
||||||
|
|
||||||
|
```html
|
||||||
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
|
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
|
||||||
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
|
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
|
||||||
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
|
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
|
||||||
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
|
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
|
||||||
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
|
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
|
||||||
|
```
|
||||||
|
|
||||||
### IE conditionals
|
### IE conditionals
|
||||||
|
|
||||||
|
```html
|
||||||
<!--[if IE]> I'm IE <![endif]-->
|
<!--[if IE]> I'm IE <![endif]-->
|
||||||
<!--[if !IE]> --> Not IE <!-- <![endif]-->
|
<!--[if !IE]> --> Not IE <!-- <![endif]-->
|
||||||
|
```
|
||||||
|
|
||||||
Footnotes
|
Footnotes
|
||||||
---------
|
---------
|
||||||
|
|
||||||
* (1) = doesn't work for elements inserted via JS
|
* (1) = first-child: doesn't work for elements inserted via JS
|
||||||
* (2) = IE6/7 can only support inline-block for elements that are naturally
|
* (2) = inline-block: IE6/7 can only support inline-block for elements that are naturally inline, like span
|
||||||
inline, like span
|
* (3) = CSS flexbox: IE10 only supports the 2012 syntax with `-ms-` prefix
|
||||||
|
|
||||||
[text-shadow]: https://github.com/heygrady/textshadow
|
[text-shadow]: https://github.com/heygrady/textshadow
|
||||||
[ie7.js]: http://ie7-js.googlecode.com/svn/test/index.html
|
[ie7.js]: http://ie7-js.googlecode.com/svn/test/index.html
|
||||||
|
|
@ -139,3 +149,9 @@ Footnotes
|
||||||
[modernizr]: https://modernizr.com
|
[modernizr]: https://modernizr.com
|
||||||
[ecsstender]: http://ecsstender.org/
|
[ecsstender]: http://ecsstender.org/
|
||||||
[respond]: https://github.com/scottjehl/Respond
|
[respond]: https://github.com/scottjehl/Respond
|
||||||
|
[flexbox]: http://caniuse.com/#feat=flexbox
|
||||||
|
[cors]: http://caniuse.com/#feat=cors
|
||||||
|
[json]: http://caniuse.com/#feat=json
|
||||||
|
[datauri]: http://caniuse.com/#feat=datauri
|
||||||
|
[validation]: http://caniuse.com/#search=validation
|
||||||
|
[placeholder]: http://caniuse.com/#feat=input-placeholder
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue