162 lines
3.6 KiB
Markdown
162 lines
3.6 KiB
Markdown
---
|
|
title: CSS
|
|
layout: default
|
|
---
|
|
|
|
Selectors
|
|
---------
|
|
|
|
= [attr="value"] - exact
|
|
~= [class~="box"] - has word
|
|
|= [class|="icon"] - exact, or prefix (eg, value-)
|
|
$= [href$=".doc"] - ends in
|
|
*= [class*="-is-"] - contains
|
|
|
|
+ adjacent sibling
|
|
~ far sibling
|
|
> direct child
|
|
|
|
:target (h2#foo:target)
|
|
:disabled
|
|
|
|
:nth-child
|
|
:nth-child(3n)
|
|
:nth-child(3n+2)
|
|
:nth-child(-n+4)
|
|
:nth-last-child(...)
|
|
|
|
:first-of-type
|
|
:last-of-type
|
|
:nth-of-type
|
|
:only-of-type - only child of its parent thats like that
|
|
|
|
:only-child
|
|
|
|
|
|
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
|
|
----------
|
|
|
|
### Shorthand
|
|
|
|
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 alternate-reverse
|
|
|
|
### Other properties
|
|
|
|
animation-direction: normal | reverse | alternate | alternate-reverse
|
|
|
|
animation-iteration-count: infinite | <number>
|
|
|
|
Webkit extensions
|
|
-----------------
|
|
|
|
### Font smoothing
|
|
|
|
/* maxvoltar.com/archive/-webkit-font-smoothing */
|
|
* {
|
|
text-rendering: optimizeLegibility !important;
|
|
-webkit-font-smoothing: antialiased !important;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
### Heading kerning pairs and ligature
|
|
|
|
h1, h2, h3 { text-rendering: optimizeLegibility; }
|
|
|
|
### Native-like iOS scrolling
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-y: auto;
|
|
|
|
### Gradient text
|
|
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
### Text stroke
|
|
|
|
/* http://www.webkit.org/blog/85/introducing-text-stroke/ */
|
|
-webkit-text-stroke: 3px black;
|
|
|
|
### iOS Scrolling prevention
|
|
|
|
document.ontouchstart = (e) ->
|
|
$pane = $(e.target).closest('.scrollable>div')
|
|
if $pane.length is 0 or $pane[0].scrollHeight <= $pane.innerHeight()
|
|
e.preventDefault()
|
|
|
|
%ios-scrollable
|
|
&, >div
|
|
-webkit-overflow-scrolling: touch
|
|
overflow: auto
|
|
|
|
>div
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
|
|
### UIWebView optimizations
|
|
|
|
/* http://www.bitsandpix.com/entry/ios-webkit-uiwebview-remove-tapclick-highlightborder-with-css/ */
|
|
/*
|
|
http://www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
|
|
*/
|
|
|
|
* {
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
-webkit-user-select: none; /* disable text select */
|
|
-webkit-touch-callout: none; /* disable callout, image save panel (popup) */
|
|
-webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
|
|
}
|
|
|
|
a:focus {
|
|
outline:0; // Firefox (remove border on link click)
|
|
}
|
|
|
|
Browser hacks
|
|
-------------
|
|
|
|
Not recommended, but here they are if you ever need them. Note that vendor
|
|
prefixes may go away eventually.
|
|
|
|
### Mozilla-only
|
|
|
|
@-moz-document url-prefix() {
|
|
.box { color: blue; }
|
|
}
|
|
|
|
### Webkit-only
|
|
|
|
@media all and (-webkit-min-device-pixel-ratio: 1) {
|
|
}
|