FileNav

online
online: /HTML & CSS/CSS_Notes.md

CSS Notes

Principles

CSS Selectors

Vendor-prefixed CSS Properties

Dashes vs. Underscores

Stack Overflow Matt Cutts

In IE and other browsers elements with an ID get converted to JavaScript objects with the ID name. JavaScript objects may not contain hyphens. CSS classes do not suffer such restrictions though.

<div id="main_content" class="clear-fix"> ... </div>

Faking a Background Image

Stack Overflow: http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite

<div class="sprite-image" style="width:20px; height:20px; overflow:hidden; position:relative">
    <!-- set width/height proportionally, to scale the sprite image -->
    <img src="sprite.png" alt="icon" width="20" height="80" style="position:absolute; top:-20px; left:0;" />
</div>

Images

http://www.w3.org/TR/css3-images/

Units of Measure

CSS3

Length Unit Type Description Support
cm absolute centimeters All browsers
in absolute inches All browsers
mm absolute millimeters All browsers
pc absolute picas; 1pc equals 12pt All browsers
pt absolute points; 1pt equals 1/72nd of 1in All browsers
px absolute pixels; 1px equals 1/96th of 1in or 0.26mm All browsers
ch relative width of the number zero in the element’s font All browsers
em relative font size of the element All browsers
ex relative x-height of the element’s font All browsers
rem relative font size of the root elements Android 2.1, BB 7.0, Chrome 21, FF 14, IE 9, Opera 12.0, Safari 5.1, iOS Safari 4.0
vh relative viewport height Chrome 21.0, FF 19, IE 9, Safari (OS X & iOS) 6.0, BB 10.0
vw relative viewport width Chrome 21.0, FF 19, IE 9, Safari (OS X & iOS) 6.0, BB 10.0
vmax relative viewport maximum of height or width ?
vmin relative viewport minimum of height or width BB 10.0, Chrome 21.0, FF 19, IE 10, Safari (OS X & iOS) 6.0
vm relative viewport smaller of height or width IE 9
dpi resolution dots per inch ?
dpcm resolution dots per cm ?
dppx resolution dots per pixel; 1dppx equals 96dpi ?
Special Unit Type Description Support
calc() relative Basic math calculation with disperate
units of measure		 Chrome 26.0, FF 16.0, IE 9.0, IE Mobile 10.0, Safari (OS X & iOS) 7.0
-webkit-calc() relative 〃 BB 10.0, FF FA 15.0, WebKit 536.3 / Chrome 19 / Safari (OS X & iOS) 6.0
-moz-calc() relative 〃 FF 4.0 / Gecko 2.0
deg angle degrees; 360deg in a full circle ?
grad angle gradians, AKA gons or grades.
There are 400grad in a full circle		 ?
rad angle 2π radians (6.28rad) in a full circle ?
turn angle 1turn in a full circle ?
s time seconds; 60s in one minute ?
ms time milliseconds; 1000ms in a second ?

Anchor Utilization

/**
 * Setting anchor links with common attributes. The order is important!
 * It is likely that you only need to specify color in the plain a and a:visited blocks.
 * I've not verified this in all browsers.
 * @author RuneImp <runeimp@gmail.com>
 */
a{ color:inherit; outline:0; text-decoration:none; }
a:link{ color:inherit; }
a:visited{ color:inherit; }
a:hover{ color:blue; text-decoration:underline; }
a:active{ color:blue; outline:0; }
a:focus{
    color:blue;
    outline:0;/* Remove the focus (click) outline from FF 3 */
    -moz-outline-style:none;/* FF 1.5 and lower. Prior to 2005-11-29 */
}

/* Style external links */
a[href^="http"]:after{
    content:url(/assets/img/icon-external.png);
}

/* Style pdf links */
a[href$=".pdf"]:before{
    content:url(/assets/img/icon-pdf.png);
}

Gecko Notes

Targeting Gecko/Mozilla

@-moz-document url-prefix(){
    elm#selectorId.className.etc{
        background-color:#666;
    }
}

Links

CSS Reset Mozilla CSS Extensions