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
|
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
|
Animations
|
||||||
----------
|
----------
|
||||||
|
|
||||||
### Animtaion
|
### Shorthand
|
||||||
|
|
||||||
animation-direction: normal | reverse | alternate | alternate-reverse
|
|
||||||
animation-iteration-count: infinite | <number>
|
|
||||||
|
|
||||||
animation: <name> <duration> <timing-function> <delay> <count> <direction> <fill-mode>
|
animation: <name> <duration> <timing-function> <delay> <count> <direction> <fill-mode>
|
||||||
|
|
||||||
|
# Example:
|
||||||
|
animation: bounce 300ms linear 0s infinite normal
|
||||||
animation: bounce 300ms linear infinite
|
animation: bounce 300ms linear infinite
|
||||||
|
|
||||||
|
### Other properties
|
||||||
|
|
||||||
|
animation-direction: normal | reverse | alternate | alternate-reverse
|
||||||
|
|
||||||
|
animation-iteration-count: infinite | <number>
|
||||||
|
|
||||||
Webkit extensions
|
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)
|
||||||
48
style.sass
48
style.sass
|
|
@ -125,30 +125,46 @@ pre, code
|
||||||
color: #444
|
color: #444
|
||||||
|
|
||||||
// Blocks!
|
// Blocks!
|
||||||
pre, ul
|
.all >
|
||||||
line-height: 1.6
|
pre, ul
|
||||||
background: (#f7f7f2 * 1.04)
|
line-height: 1.6
|
||||||
padding: 20px
|
background: #f7f7f2
|
||||||
+box-shadow(inset 0 3px 2px -2px rgba(black, 0.1))
|
padding: 20px
|
||||||
|
+box-shadow(inset 0 3px 2px -2px rgba(black, 0.1))
|
||||||
|
|
||||||
text-shadow: 0 1px 0 rgba(white, 0.9)
|
text-shadow: 0 1px 0 rgba(white, 0.9)
|
||||||
|
|
||||||
border-top: solid 1px #eee
|
border-top: solid 1px #ddd
|
||||||
border-bottom: solid 1px #eee
|
border-bottom: solid 1px #ddd
|
||||||
|
|
||||||
overflow-x: auto
|
overflow-x: auto
|
||||||
+scrollbar
|
+scrollbar
|
||||||
|
|
||||||
margin-left: -40px
|
margin-left: -40px
|
||||||
margin-right: -40px
|
margin-right: -40px
|
||||||
padding: 20px 40px
|
padding: 20px 40px
|
||||||
// border: solid 1px #eee
|
// border: solid 1px #eee
|
||||||
// +border-radius(2px)
|
// +border-radius(2px)
|
||||||
|
|
||||||
ul
|
ul, .all > ul
|
||||||
padding-left: 60px
|
padding-left: 60px
|
||||||
list-style-type: circle
|
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
|
// Code block
|
||||||
h2+pre, h3+pre
|
h2+pre, h3+pre
|
||||||
margin-top: -16px
|
margin-top: -16px
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue