IE.
This commit is contained in:
Rico Sta. Cruz
parent
a8d9f4a818
commit
5924622c37
36
css.md
36
css.md
|
|
@ -1,18 +1,46 @@
|
|||
title: CSS
|
||||
---
|
||||
|
||||
Background
|
||||
----------
|
||||
|
||||
### Shorthand
|
||||
|
||||
background: <color> <image> <position> <size> <repeat> <attachment> <clip>
|
||||
|
||||
# Example:
|
||||
background: #ff0 url(bg.jpg) center top no-repeat fixed
|
||||
|
||||
### Other properties
|
||||
|
||||
background-clip: border-box | padding-box | content-box [, ...]*
|
||||
|
||||
background-repeat: no-repeat | repeat-x | repeat-y
|
||||
|
||||
background-attachment: scroll | fixed | local
|
||||
|
||||
### Compatibility
|
||||
|
||||
- background-clip: IE9+
|
||||
- Multiple backgrounds: IE9+
|
||||
|
||||
Animations
|
||||
----------
|
||||
|
||||
### Animtaion
|
||||
|
||||
animation-direction: normal | reverse | alternate | alternate-reverse
|
||||
animation-iteration-count: infinite | <number>
|
||||
### Shorthand
|
||||
|
||||
animation: <name> <duration> <timing-function> <delay> <count> <direction> <fill-mode>
|
||||
|
||||
# Example:
|
||||
animation: bounce 300ms linear 0s infinite normal
|
||||
animation: bounce 300ms linear infinite
|
||||
|
||||
### Other properties
|
||||
|
||||
animation-direction: normal | reverse | alternate | alternate-reverse
|
||||
|
||||
animation-iteration-count: infinite | <number>
|
||||
|
||||
Webkit extensions
|
||||
-----------------
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,157 @@
|
|||
title: Internet Explorer
|
||||
---
|
||||
|
||||
## Only in IE7+
|
||||
|
||||
Selectors:
|
||||
|
||||
- `>` _(descendant)_
|
||||
- `[attr]` _(attribute)_
|
||||
- `.class1.class2` _(multiple classes)_
|
||||
- `~` _(sibling)_
|
||||
|
||||
CSS properties:
|
||||
|
||||
- `max-width`
|
||||
- `position: fixed`
|
||||
|
||||
## Only in IE8+
|
||||
|
||||
Selectors/pseudos: ([polyfill][selectivizr])
|
||||
|
||||
- `+` _(adjacent)_
|
||||
- `:first-child` _(unless for static elements)_
|
||||
- `:focus`
|
||||
- `:before`, `:after` _(single colon only)_
|
||||
|
||||
CSS properties:
|
||||
|
||||
- `outline`
|
||||
- `display: inline-block` _(only for `<span>` and inlines)_
|
||||
- `display: table`
|
||||
- `whitespace: pre-wrap`
|
||||
- `whitespace: pre-line`
|
||||
- `border-collapse`, `border-spacing`, `table-layout`, ...
|
||||
- `box-sizing`
|
||||
|
||||
Features:
|
||||
|
||||
- PNG alpha transparency
|
||||
- `data:` URI
|
||||
|
||||
JS features:
|
||||
|
||||
- JSON parsing
|
||||
- Cross-origin resource sharing
|
||||
|
||||
## Only 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:
|
||||
|
||||
- `@media` queries
|
||||
|
||||
HTML5 features:
|
||||
|
||||
- `<canvas>`
|
||||
- `<svg>`
|
||||
- `<img src='image.svg'>`
|
||||
|
||||
## Only in IE10+
|
||||
|
||||
CSS features:
|
||||
|
||||
- `-ms-animation`
|
||||
- `transition`
|
||||
- `linear-gradient()`
|
||||
|
||||
Features:
|
||||
|
||||
- `<input placeholder='..'>`
|
||||
- `<input type='range'>`
|
||||
|
||||
HTML5 features:
|
||||
|
||||
- Web sockets
|
||||
|
||||
## Not in IE10 (or below) at all
|
||||
|
||||
CSS properties:
|
||||
|
||||
- `text-shadow` ([polyfill][text-shadow])
|
||||
|
||||
## Polyfills
|
||||
|
||||
Always install these in almost every project:
|
||||
|
||||
- [selectivizr] for selectors
|
||||
- [html5shiv] for new HTML tags
|
||||
- [json2] for JSON parsing (IE7 below)
|
||||
|
||||
You may also need these:
|
||||
|
||||
- [modernizr] for feature detection
|
||||
|
||||
for CSS3 decorations:
|
||||
|
||||
- [css3pie]
|
||||
- [cssSandpaper]
|
||||
- [ecsstender]
|
||||
|
||||
Also see:
|
||||
|
||||
- [Cross-browser polyfills list][fills]
|
||||
|
||||
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]-->
|
||||
|
||||
### iPhone viewport
|
||||
|
||||
* "Static" = doesn't work for elements inserted via JS
|
||||
|
||||
[text-shadow]: https://github.com/heygrady/textshadow
|
||||
[ie7.js]: http://ie7-js.googlecode.com/svn/test/index.html
|
||||
[selectivizr]: http://selectivizr.com/
|
||||
[css3pie]: http://css3pie.com/
|
||||
[cssSandpaper]: https://github.com/zoltan-dulac/cssSandpaper
|
||||
[html5shiv]: https://code.google.com/p/html5shiv/
|
||||
[fills]: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
|
||||
[json2]: https://github.com/douglascrockford/JSON-js
|
||||
[eccstender]: http://ecsstender.org/
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
title: IE bug compenduum
|
||||
----
|
||||
|
||||
### IE8: 'change' event doesn't always fire
|
||||
|
||||
Not for checkboxes, radios, multi-select lists. Use the `click` handler instead.
|
||||
|
||||
* [(1)](http://stackoverflow.com/questions/8005442/checkbox-change-event-works-when-click-the-label-in-ie8-ie7)
|
||||
|
||||
### IE8: clicking label with input inside doesn't focus the input
|
||||
|
||||
* [(1)](http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/LabelForWithImage.html)
|
||||
|
||||
### IE8: an element's 'opacity' value isn't propogated to its positioned descendants
|
||||
|
||||
* [test case](http://jhop.me/tests/bugs/ie8/opacity_positioned.html)
|
||||
|
||||
### Lnks
|
||||
|
||||
* [jhop.me](http://jhop.me/ie8-bugs)
|
||||
* [charlescooke.me.uk](http://www.charlescooke.me.uk/web/lab_notes/bugs/index.html)
|
||||
24
style.sass
24
style.sass
|
|
@ -125,16 +125,17 @@ pre, code
|
|||
color: #444
|
||||
|
||||
// Blocks!
|
||||
.all >
|
||||
pre, ul
|
||||
line-height: 1.6
|
||||
background: (#f7f7f2 * 1.04)
|
||||
background: #f7f7f2
|
||||
padding: 20px
|
||||
+box-shadow(inset 0 3px 2px -2px rgba(black, 0.1))
|
||||
|
||||
text-shadow: 0 1px 0 rgba(white, 0.9)
|
||||
|
||||
border-top: solid 1px #eee
|
||||
border-bottom: solid 1px #eee
|
||||
border-top: solid 1px #ddd
|
||||
border-bottom: solid 1px #ddd
|
||||
|
||||
overflow-x: auto
|
||||
+scrollbar
|
||||
|
|
@ -145,10 +146,25 @@ pre, ul
|
|||
// border: solid 1px #eee
|
||||
// +border-radius(2px)
|
||||
|
||||
ul
|
||||
ul, .all > ul
|
||||
padding-left: 60px
|
||||
list-style-type: circle
|
||||
|
||||
h2
|
||||
font-size: 1.6em
|
||||
border-top: dotted 3px mix(#37d, white, 20%)
|
||||
padding: 40px 40px 0 40px
|
||||
margin-left: -40px
|
||||
margin-right: -40px
|
||||
|
||||
h1 + h2
|
||||
border-top: 0
|
||||
padding-top: 0
|
||||
|
||||
em
|
||||
opacity: 0.7
|
||||
font-size: 0.9em
|
||||
|
||||
// Code block
|
||||
h2+pre, h3+pre
|
||||
margin-top: -16px
|
||||
|
|
|
|||
Loading…
Reference in New Issue