diff --git a/css.md b/css.md index 86b0bdfd4..2d767485b 100644 --- a/css.md +++ b/css.md @@ -1,18 +1,46 @@ title: CSS --- +Background +---------- + +### Shorthand + + background: + + # 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 | +### Shorthand animation: + # 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 | + Webkit extensions ----------------- diff --git a/ie.md b/ie.md new file mode 100644 index 000000000..c2742a719 --- /dev/null +++ b/ie.md @@ -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 `` 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: + + - `` + - `` + - `` + +## Only in IE10+ + +CSS features: + + - `-ms-animation` + - `transition` + - `linear-gradient()` + +Features: + + - `` + - `` + +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 + + + + + + + +### IE conditionals + + + Not IE + +### 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/ diff --git a/ie_bugs.md b/ie_bugs.md new file mode 100644 index 000000000..a9eeb60cc --- /dev/null +++ b/ie_bugs.md @@ -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) diff --git a/style.sass b/style.sass index fa3f66f88..9614db0fa 100644 --- a/style.sass +++ b/style.sass @@ -125,30 +125,46 @@ pre, code color: #444 // Blocks! -pre, ul - line-height: 1.6 - background: (#f7f7f2 * 1.04) - padding: 20px - +box-shadow(inset 0 3px 2px -2px rgba(black, 0.1)) +.all > + pre, ul + line-height: 1.6 + background: #f7f7f2 + 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-bottom: solid 1px #eee + border-top: solid 1px #ddd + border-bottom: solid 1px #ddd - overflow-x: auto - +scrollbar + overflow-x: auto + +scrollbar - margin-left: -40px - margin-right: -40px - padding: 20px 40px - // border: solid 1px #eee - // +border-radius(2px) + margin-left: -40px + margin-right: -40px + padding: 20px 40px + // 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