18. MEDIA QUERIES
@media all and (min-device-width:480px)
@media all and (-webkit-pixel-ratio:2)
@media screen not (monochrome)
@media screen and (max-device-width:
640px) and (-moz-touch-enabled: 1)
39. TEMPLATE LAYOUT
a
b a b c
c
.a { position: a; } div {
.b { position: b; } display: 'abc';
.c { position: c; } }
http://www.w3.org/TR/css3-layout/
http://code.google.com/p/css-template-layout/
40. TEMPLATE LAYOUT
a
c
a
b c b
div { div {
display: 'aa' 'bc'; display: 'acc' 'a.b';
} }
41. GRID POSITIONING
a a
b
b c
c
.a { grid-cell: a; } div {
.b { grid-cell: b; } grid-template: 'aa' 'bc';
.c { grid-cell: c; } }
44. REGIONS
a
.a { flow: foo; }
.b { content: from(foo); }
b
b
.b, .c, .d, .e {
e content: from(foo);
c }
d
http://labs.adobe.com/technologies/cssregions/
http://dev.w3.org/csswg/css3-regions/
48. GROUPING SELECTOR
header h1, article h1, aside h1 {};
:any(header,article,aside) h1 {}
ol ul li a, ul ul li a, ul ul ul li
a, ol ul ul li a {};
:any(ol,ul,ul ul,ol ul) ul li a {}
59. LEGAL NOTE
Superman copyright is a contentious issue, but the images I
use here belong to DC Comics and no permission was given. I
hope they fall under fair use doctrines. You should buy a
copy of All Star Superman – it's really good!