[NOTES] The Book of CSS3

Book source.markdown

The Book of CSS3

by Peter Gasston

Chapter 1.markdown

Chapter 1: Introducing CSS3

CSS3 is modular in design to enable faster specification of the popular and necessary features, while allowing challenging and esoteric features to be developed more slowly.

box-sizing: "can set from which part of the box model -- the content itself or the border -- the width of the elemtn is calculated."

E { box-sizing: [border-box | content-box*]; }
border-box :: measurement of the box model without margin
content-box :: measurement of the internal content

Browser Prefixes

{
	-moz- /* Firefox */
	-webkit- /* Webkit */
	-ms- /* IE */
	-o- /* Opera */
}

Created for our (developers') own good, because these specifications are in a volatile stage of being specified/implemented. Better to prefix the code, than to have the newer implementation brick your code.

Chapter 2.markdown

#Chapter 2: Media Queries#

"Media Queries extend the media types by providing a query syntax that lets you server styles far more specifically to your user's device, allowing a tailored experience."

##Syntax##

1. external stylsheet w/e link

    <link href='file' rel='stylesheet' media='logic media and (expression'>
   

2. external stylesheet w/ @import

    @import url('file') logic media and (expression);
   

3. extended @media rule

    @media logic media and (expression) {
    	rules
    }
   

Rules:

media: [screen | projection | etc]
logic: [only | not]
expression: [ Media Features parameters ]

Media Features

"Media Features are information about the device that's being used to display the web page: its dimensions, resolution, and so on."

@media logic media and [(feature) | (feature:value)] {
	rules
}

Features: Width & Height

[min- | max-] width: length :: the width of the viewpoint (e.g. browser window)
[min- | max-] height: length :: the height of the viewpoint
[min- | max-] device-width: length :: the width of the physical screen
[min- | max-] device-height: length :: the height of the physical screen

Note: Developers should consider building a stylesheet (and html) for smaller display devices first, then use Media Features to expand to larger displays. This avoids unnecessary element loading.

<link href='basic.css' rel='stylesheet' media='screen'>
<link href='desktop.css' rel='stylesheet' media='screen and (min-device-width: 480px)'>
<!--[if lt IE 9]>
	<link href='desktop.css' rel='stylesheet' media='screen'>
<![endif]-->

Features: Orientation, Aspect Ratio, Pixel Ratio

Orientation:

orientation: [landscape | portrait] :: the orientation of the viewing device

Aspect Ratio:

aspect-ratio: horizontal/vertical :: the aspect ratio of the screen
device-aspect-ratio: horizontal/vertical :: the aspect ratio of the device

Pixel Ratio:

[-webkit-][max- | min-] device-pixel-ratio: pixel density :: the pixel density (how many screen pixels per CSS pixel) of the viewing device
[max- | min-][moz] device-pixel-ratio: pixel density

Features: Mozilla-Specific Media Features

Features proprietary to Gecko

-moz-touch-enabled {
	rules
}	

Multiple Media Features

@media logic media and (expression) and (expression), logic media and (expression) ... {
	rules
}

Chapter 3.markdown

Chapter 3: Selectors

There are two types of selectors, the DOM selectors, which are selectors that directly act on the element on the page, and the pseudo-selectors that act on the elements or information that 'sites outside of the document tree. The chapter focuses on the DOM selectors.

Attribute Selectors

CSS2 Selectors:

E[attr] {} /* Simply attribute selector */
E[attr='value'] {} /* Exact attribute selector */
E[attr~='value'] {} /* Partial attribute selector */
E[attr|='value'] {} /* Language attribute selector (based on element's lang attribute */

CSS3 Selectors

E[attr^='value'] {} /* Beginning Selector - Attribute begins with 'value' */
E[attr$='value'] {} /* Ending Selector - Attribute ends with 'value' */
E[attr*='value'] {} /* Arbitrary Selector - Attribute contains 'value' anywhere */
E[selector][selector] {} /* Combine multiple attributes together */

The arbitrary selector is similar to the partial selector in CSS2, but arbitrary selector matches partial strings, while the partial selector only matches whole, space-delimited strings.

CSS3 Combinator

E + F {} /* Adjacent Sibling Combinator */
E ~ F {} /* General Sibling Combinator */

Chapter 4.markdown

Chapter 4. Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are 'selectors that act upon information about elements that extends the document tree, such as the state of a link or the first letter of a text node.'

Pseudo-classes 'differentiates among an element's different states or types.' :hover, :visited, :active, etc

Pseudo-elements 'provides access to an element's subparts.' :first-line, :first-letter

The ultimate goal of introducing more pseudo-classes and pseudo-elements is to separate the content and presentation of the document, as the intended goal of CSS.

Structural Pseudo-classes

'used to select elements that are not accessible using simple selectors in the DOM tree.

The nth-*

select element using a count value

E:nth-*(n) {} /* Select every element of E */
E:nth-*(2n) {} /* Select every other E element */
E:nth-*(3n) {} /* Select ever third E element */
...
E:nth-*(2n+1) {} /* Select every 1, 3, 5, etc. E element */
E:nth-*(3n-1) {} /* Select every 2, 5, 8, etc. E element */
...
E:nth-*(even) {}
E:nth-*(odd) {} /* Self-explanatory */

The nth-child and nth-of-type

select element using a count value based on position related to parent and of type

E:nth-child(2n) {} /* Selects all elements of type E from a count that includes all its siblings but only where those elements are even-numbered */
E:nth-of-type(2n) {} /* Selects all even-numbered elements of type E from a count that includes only those elements */

Example:

p:nth-child(2n) { font-weight: bolder; }
p:nth-of-type(2n) { font-weight: bolder; }

<section>
    (1) <h2>The Picture of Dorian Gray</h2>
    (2) [1] <p> The artist is the creator...</p>
    (3) [2] <p> To reveal art and conceal the artist ... </p>
    (4) [3] <p> the critic is he who can translate ... </p>
</section>

p:nth-child(2n) is based on the numbering denoted by () (bold (2), (4)). p:nth-of-type is based on the number denoted by [] (bold [2]).

E:nth-last-child(n) and E:nth-last-of-type(n) takes the same argument as the selectors above, but counts in reverse from the last element

first-child, first-of-type, last-child, and last-of-type

E:first-child applies to the first child of type E of any parent element E:first-of-type applies only to the element that is the first child of the named type of its parent. last-child, last-of-type are complementary.

only-child and only-of-type

pretty self-explanatory.

Other Pseudo-classes

select elements based on other criteria than just structural attributes

target

E:target /* Select element of type E that was the target of a href link */

empty

E:empty /* Select element of type E that's without any children */

root

html:root /* Select first element of the document tree, which is always html.  Used for a tighter binding */

not

E :not(F) {} /* Selects all elements of type E except those would be selected by F */

F must be a simple selector, not combinators or pseudo-elements.

UI Element States

selects UI element based on it state. Currently only form elements can have UI states.

:checked {}
:disabled {}
:enabled {}

Pseudo-elements

'allows you to apply styles to elements that don't exist in the tree at all'.

CSS2 syntax:

:first-line {}
:first-letter {}
:after {}
:before {}

New CSS3 syntax

::first-line {}
::first-letter {}
::after {}
::before {}