CSS 3 Notes
CSS Vendor Prefixes
| Prefix |
Browser Engine Support |
| -apple- |
WebKit aliase |
| -epub- |
WebKit aliase |
| -khtml- |
WebKit aliase |
| -ms- |
Microsoft Internet Explorer |
| -moz- |
Mozilla |
| moz— |
Mozilla in at least 1 case |
| -o- |
Opera |
| -webkit- |
WebKit and Chrome |
Links
Articles
Interactive Properties
User Select
/**
* @see http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select
#/
.sel-none{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;/* none text toggle element elements all */
}
Touch UI
.no-callout{
/* disable callout, image save panel on long press */
-webkit-touch-callout: none;
-khtml-touch-callout: none;
-moz-touch-callout: none;
-ms-touch-callout: none;
-o-touch-callout: none;
touch-callout: none;
}
.no-highlight{
/* "turn off" link highlight, good for custom pressed states */
-webkit-tap-hightlight-color: transparent;
-khtml-tap-hightlight-color: transparent;
-moz-tap-hightlight-color: transparent;
-ms-tap-hightlight-color: transparent;
-o-tap-hightlight-color: transparent;
tap-hightlight-color: transparent;
}
Display Properties
Object Opacity
/**
* @see http://www.quirksmode.org/css/opacity.html
*/
.opacity50{
opacity:0.5; /* W3C Standard for 50%. FF 0.9+, WebKit 125+, Chrome 1+, Safari 1.2+, Opera 9+, IE 9+ */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /* IE 8 */
/* filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);*/ /* IE 5.5+. */
filter:alpha(opacity=50); /* IE 4+ and supported by jQuery */
}
/**
* IE Filters
*
* IE 4 Syntax. Filters are limited by border and perform slower. Should use IE 5.5 filter syntax instead.
* But not supported by jQuery.
*
* filter:alpha(opacity=50);
*
* @see http://msdn.microsoft.com/en-us/library/ms532967%28VS.85%29.aspx
* http://msdn.microsoft.com/en-us/library/ms532847%28v=VS.85%29.aspx#Downlevel_Support
*
*** JavaScript Style ***
* object.style.opacity
* object.filters.alpha.opacity IE
* @see http://www.javascriptkit.com/filters/alpha.shtml
*/
.opacity50-old{
/* For reference only */
-khtml-opacity:0.5; /* Safari < 1.2. Prior to 2004. Konqueror never used it. */
-moz-opacity:0.5; /* Mozilla < 1.7 & Firefox < 0.9. Prior to 2004-11. */
}
Borders (An AMAZING game)
border-radius AKA Rounded Corners
/**
* W3C Spec Support:Chrome & Safari 5+, Opera 10.5+, IE 9+, FF 4+ (Gecko 2.0)
* -moz- Support:FF 1+
* -webkit- Support:Chrome & Safari 3+
*
* @see http://www.css3.info/preview/rounded-border/
*/
.border-radius-10px{
border-radius:10px; /* W3C. FF 4+, Chrome & Safari 5+, Opera 10.5+, IE 9+? */
-moz-border-radius:10px; /* FF 1+ */
-webkit-border-radius:10px; /* Chrome & Safari 3+ */
-khtml-border-radius:10px; /* Linux browsers */
behavior:url(border-radius.htc); /* IE 6-8. 4.77 KB */
/* OR */
behavior:url(ie-css3.htc); /* IE 6-8. 8.88 KB */
}
.borderRadius{
border-radius:10px;
border-top-left-radius:10px 15px;
border-top-right-radius:10% 5%;
border-bottom-left-radius:8%;
border-bottom-right-radius:7em;
}
border-image (simulate 9-slice images)
/**
* W3C Spec Support: Chrom & Safari, FF 3.1+ Opera ?, IE 9+
*
* @syntax border-image: source slice-top slice-right slice-bottom slice-left repeat-y repeat-x
* @param url Standard CSS url() spec.
* @param slice The top, right, bottom and left slice specified as either a percentage or pixels (sans px)
* @param repeat Either stretch, repeat or round. Possibly also space.
* @see http://www.css3.info/preview/border-image/
*/
.slice9style{
-webkit-border-image: url('border.png') 24 24 24 24 stretch stretch;
-moz-border-image: url('border.png') 24 24 24 24 stretch stretch;
border-image: url('border.png') 24 24 24 24 stretch stretch;
}
.repeatingBorder{
border-image-source: url('border.png');
border-image-slice: 12 12 12 12 fill;
border-image-width: auto;
border-image-outset: 0;
border-image-repeat: round;
}
Box Model
Scrollbars and Clipping | overflow
div{
overflow:auto;/* both */
overflow:auto hidden;/* X & Y shorthand */
overflow-x:hidden;
overflow-y:auto;
/*
Support for both: Trident 4.0 (IE 6), Gecko 1.8 (Firefox 1.1), WebKit 525, KHTML 3.5.6, Presto 2.1 (Opera 9.5?), Prince XML 5.0
CSS2 Values: visible | hidden | scroll | auto
CSS3 Values: no-display | no-content
*/
}
Box Sizing | box-sizing
div {
-webkit-box-sizing: border-box;/* Android 2.1+, BB 7, Chrome 4+, iOS Safari 3.2+, Safari 3.1+, etc. */
-moz-box-sizing: border-box;/* FF+ and FF+ for Android */
box-sizing: border-box;/* Android 4+, BB 10+, Chrome 10+, IE 8+, IE Mobile 9+, iOS Safari 5+, Opera 8.5+, Safari 5.1+ */
/* IE 6 Just add an HTML comment before the DOCTYPE declaration to force Quirks Mode. */
}
box-shadow AKA Drop Shadow
.box-shadow{
box-shadow:2px 2px 3px #969696; /* W3C */
-moz-box-shadow:2px 2px 3px #969696; /* for Firefox 3.5+ */
-webkit-box-shadow:2px 2px 3px #969696; /* for Safari and Chrome */
filter:progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3)";
}
Text Shadow | text-shadow
.text-shadow{ /* W3C */
text-shadow:#aaa 1px 1px 1px;
}
/*
jQuery Plugin
$(document).ready(function(){
$(".text-shadow").textShadow();
});
*/
Backgrounds
background-size AKA Background Image Size
/*//////////////////////////////
// https://developer.mozilla.org/en/CSS/background-size
// http://www.w3.org/TR/css3-background/#the-background-size
//////////////////////////////*/
div.bg{
background:transparent url(/assets/img/background.jpg) no-repeat fixed center top;
[if lt Webkit 528]-webkit-background-size:cover;/* Safari 3-, Chrome 1- */
[if Gecko 1.9.2]-moz-background-size:cover;/* Firefox 3.6 */
[if lt Opera 10.53]-o-background-size:cover;/* Opera 9.5 - 10.50 */
[if Konq]-khtml-background-size:cover;/* Konqueror */
[if lt IE 9]background-color:black;/* Transparent kills alpha transparency in IE 8 or less */
[if lt IE 8]filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/img/background.jpg', sizingMethod='scale');/* IE 5.5+ */
[if IE 8]-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/img/background.jpg', sizingMethod='scale')";/* IE 8 */
background-size:cover;/* FF4+, Chrome 4+, Opera 10.53+, Safari 5+, IE9+ */
/*** sizingMethod ***
crop – Clips the image to fit the dimensions of the object.
image – Default. Enlarges or reduces the border of the object to fit the dimensions of the image.
scale – Stretches or shrinks the image to fill the borders of the object.
*/
}
Background Gradients
linear-gradient
/*
top #DED1CB
bottom #8F837D
*/
.gradient{
background-color: #CCC;
background-image: url(../img/ui_button-bg_apply-now.gif) repeat-x left top;/* Image Fallback */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8F837D), to(#DED1CB));/* Safari 4-5, Chrome 1-9 */
background-image: -webkit-linear-gradient(top, #DED1CB, #8F837D);/* Safari 5.1, Chrome 10 */
background-image: -moz-linear-gradient(top, #DED1CB, #8F837D);/* Firefox 3.6 */
background-image: -ms-linear-gradient(top, #DED1CB, #8F837D);/* IE 10 Consumer Preview */
background-image: -o-linear-gradient(top, #DED1CB, #8F837D);/* Opera 11.10 */
background-image: linear-gradient(#DED1CB, #8F837D);/* W3C defaults "to bottom/180deg". W3C, Android 4.4, Chrome (all) 26, FF (all) 16, IE (all) 10, Opera (all) 12.1, Safari 6.1 */
}
.ie9 .gradient,
.ie8 .gradient{
background:#CCC;/* Can't specify an image fallback when using IE filters */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#DED1CB', endColorstr='#8F837D')";/* IE 8 */
}
.ie7 .gradient,
.ie6 .gradient{
background:#CCC;/* Can't specify an image fallback when using IE filters */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#DED1CB', endColorstr='#8F837D');/* IE 5.5 */
}
Transparent Background Colors (RGBA)
#rgba p{
background:rgba(98, 135, 167, .4); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7'); /* IE 5.5+ */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE 8+ */
}
Multiple Backgrounds
#multi-bg{
background: url('images/bg-image-top.gif') center center no-repeat, url('images/bg-image-bottom.gif') top left repeat; /* W3C */
}
.lt-ie9 {
/* IE Multiple BG Hack */
background: transparent url('images/bg-image-bottom.gif') top left repeat;
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-top.gif', sizingMethod='crop')"; /* IE 8+ */
}
.lt-ie8 {
/* IE Multiple BG Hack */
background:transparent url('images/bg-image-bottom.gif') top left repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-top.gif', sizingMethod='crop'); /* IE 5.5+ */
}
Background Origin & Clip
background-origin:border-box; /* border-box, padding-box, content-box */
-webkit-background-origin:border; /* border, padding, content */
-moz-background-origin:border; /* border, padding, content */
background-clip:border-box; /* border-box, padding-box, content-box (?) */
-webkit-background-clip /* ??? border, padding, content */
-moz-background-clip
CSS Tranformations
Element Rotation
#rotate{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE 5.5+. Rotation numbers are 1, 2, 3 or 4 which represents 90, 180, 270 or 360 degrees */
-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /* IE 8+ */
}