3 JINA BOLTON
http://creatingsexystylesheets.com/

The Art & Science of css
by Cameron Adams
Jina Bolton
David Johnson
Steve Smith
Jonathan Snook
Published by SitePoint

3
css

“css 3
A Giant Serving
of FAIL!
— a lex rus se l l
http://alex.dojotoolkit.org/?p=625

“css 3
quot;Third Time Lucky#!
— andy cla rke

1996
css 1

1997
css 2

css 2.1
candidate recommendation

css 3 modul!

Sele$ors
Backgrounds
& Borders
Multi%column
Layout
Media Advanced
Layout
Queries
Grid
Positioning

Backgrounds
& Borders
Style any box&s borders and background
including attach multiple background%
images to a single element.

Backgrounds & Borders
% border-radius
% border-break
% border-image
% box-shadow

<div class=quot;vcardquot;>
<div class=quot;addr-blquot;>
<div class=quot;addr-trquot;>
…
</div>
</div>
</div>

.vcard {
background:
#000
url(a-grad.gif)
repeat-x;
}
.addr-bl {
background:
url(a-bl.gif)
100% 0
no-repeat;
}
.addr-tr {
background:
url(a-tr.gif)
100% 0
no-repeat;
}

<div class=quot;vcardquot;>…</div>

.vcard {
background-color: #000;
background-image:
url(a-grad.gif),
url(a-bl.gif),
url(a-tr.gif);
background-repeat:
repeat-x,
no-repeat,
no-repeat;
background-position:
0 0,
100% 0,
0 100%;
}

Multi%column
Layout
Making it simpler to create column layouts
without additional markup by using
column widths, counts, gaps and rules.

<div class=quot;entry-contentquot;>
<div class=quot;col firstquot;>
…
</div>
<div class=quot;colquot;>
…
</div>
</div>

.entry-content .col {
float: left;
width: 467px;
margin-left: 30px;
}
.entry-content .first {
margin-left: 0;
}
/* .entry-content
clear-fix rules */

<div class=quot;entry-contentquot;>
…
</div>
.entry-content {
column-count: 2;
column-gap: 30px;
}

<div class=quot;entry-contentquot;>
…
</div>
.entry-content {
column-width: 270px;
column-gap: 30px;
}

<div class=quot;vcardquot;>…</div>
.vcard {
border-image:
url(quot;border.pngquot;)
30 30 30 30
stretch;
border:
double green 1em;
}

Advanced
Layout
Aims to fully separate visual layout order
from a document&s content by de'ning
(slots! in a grid in which content can )ow
or be placed, or that remain empty * all
without additional markup.

a b c d
e h
f g
i j k l

a a c d
e g
e g
i j k l

@ @ . .
e h
@ @
. j j l

Grid
Positioning
Gives the ability to add invisible grid rules
to create grid layouts quot;like in books and
newspapers#, and uses sizing and new )oat
properties for placing content.

<div class=quot;entry-contentquot;>
…
</div>
.entry-content {
column-count: 4;
column-gap: 30px;
}

.entry-content {
grid-columns:
(30px * *)[4];
column-count: 4;
column-gap: 30px;
}

.entry-content {
grid-columns:
(30px * *)[4];
grid-rows:
9em 33.3% *;
column-count: 4;
column-gap: 30px;
}

<div class=quot;entry-contentquot;>
…
<img src=quot;sushi.jpgquot;
class=quot;photoquot;
alt=quot;quot; />
…
</div>

.entry-content img.photo {
float: page bottom left;
float-offset: 4gr 1gr;
}

<div class=quot;entry-contentquot;>
<h2>What is Sushi?</h2>
…
<img src=quot;sushi.jpgquot;
class=quot;photoquot;
alt=quot;quot; />
</div>

.entry-content h2 {
float: page top left;
width: 6gr;
height: 1gr;
margin-left: -30px;
ic }
.entry-content img.photo {
float: page bottom left;
float-offset: 4gr 1gr;
}

Sele$ors
Re'ned sele$ors to target an element
based on an attribute or position in the
document )ow plus new pseudo%classes
and pseudo%elements.

Sele$ors
% E:only-of-type
an element which is the only sibling of its type
% E:not(s)
an element that d+s not match simple sele$ors
%E ~ F
an F element preceded by an E element

Sele$ors
E:nth-child(n)
an element which is the
n%th child of its parent

<tr class=quot;altquot;></tr>
<tr></tr>
tr.alt td {
background: #ecffd9;
}

<tr></tr>
tr:nth-child(odd) td {
background: #ecffd9;
}

<tr class=quot;high-rankquot;>…</tr>
<tr class=quot;high-rankquot;>…</tr>
<tr class=quot;high-rankquot;>…</tr>
<tr>…</tr>
tr.high-rank td {
background: #ecffd9;
}

<tr>…</tr>
tr:nth-child(-n+3) td {
background: #ecffd9;
}

Sele$ors
E:nth-last-child(n)
an element which is the
n%th child of its parent,
counting from the la,
one

<tr>…</tr>
<tr class=quot;low-rankquot;>…</tr>
<tr class=quot;low-rankquot;>…</tr>
<tr class=quot;low-rankquot;>…</tr>
tr.low-rank td {
opacity: .75;
}

<tr>…</tr>
tr:nth-last-child(-n+2) td {
opacity: .75;
}

Sele$ors
E:nth-of-type(n)
an element which is the
n%th sibling of its type

<p class=quot;introquot;>…</p>
<p>…</p>
p.intro {
background: #fafcf5;
font-size: 1.3em;
color: #060;
}

<p>…</p>
p:first-of-type {
background: #fafcf5;
font-size: 1.3em;
color: #030;
}

Media Queries
Extending the usefulness of media types in
combination with window widths, heights
and aspe$ ratio.

Resources

CSS ELEVEN IS AN INTERNATIONAL GROUP OF VISUAL WEB
DESIGNERS AND DEVELOPERS WHO ARE COMMITTED TO
HELPING THE W3C'S CSS WORKING GROUP TO BETTER DELIVER
THE TOOLS THAT ARE NEEDED TO DESIGN TOMORROW'S WEB.

Resources
% w3c Introdu$ion to css 3
w3.org/TR/css3-roadmap
% css Working Group Blog
w3.org/blog/CSS
%456 Berea Street
456bereastreet.com
% css3.info

Resources
% A Li, Apart
alistapart.com
% Transcending css Support
transcendingcss.com/support/

creatingsexy,ylesheets.com

Q&A