CSS3 - is everything we used to do wrong?

CSS3
- is everything
we used to do
wrong ?

re living in
we a
times
exciting

IE 9
Safari 5
Opera 11
Chrome 11
Firefox 5
IE 10

Opera 11:
Best HTML5 forms
support

Opera 11:
Best CSS3
backgrounds support

p { background-repeat: space; }
p { background-repeat: round; }

div { background-origin:
padding-box; }

div { background-clip:
padding-box; }

div { background-size: cover; }
div { background-size: contain;}

p
{
background-position:
left 10px top 15px;
}

Chrome 11:
Slightly ahead of
Safari 5

background-image: Safari 5
-webkit-gradient(linear,
left center, right center,
from(yellow), to(black));

background-image: Safari 5

background-image: Chrome 11
-webkit-linear-gradient
(left, yellow, black);

Preview released:
11 April 2011

are w ork ing w ith
If you
s h o u ld b e p a y in g
CS S3, you
ion to th e latest
attent
n ightly builds?

http://tools.google.com/dlpage/chromesxs

http://www.opera.com/browser/download/

Transforms & transitions
Linear & radial gradients
CSS3 selectors
Border-radius
Box-shadow
Text-shadow
@font-face
And more!

Befo
re w
e ge
t too
exc
ited
…

few th ings to
her e are a
mind
ep in
ke

use CSS3 fo
r the right

re asons

W hile C S S 3 is
exciting,
w e h a ve to b e
c a re fu l
about how an
d
when we us
e it.

r th a t s im p ly u s e
R a th e
because its c o o l,
CSS3
u ld b e lo o k in g a t
we sho
ess rea s o n s fo r
busin
i m p le m e n tin g it.

Web fonts
Less images
Improved UX
Device targeting
Faster page speeds
Efﬁcient site building
Ease of maintenance

@font-face
{
font-family: 'fontName';
src:
url('font.eot?')
format('eot'
url('font.woff')
format('woff'),
url('font.ttf')
format('truetype');
}

section:target
{ background: lime; }

#section1:target
{ background: lightgreen; }

::selection
{
color: #fff;
background: #000;
}

@media all and
(max-device-width: 480px)
{
}

@media all and
(min-device-width: 481px) and
(max-device-width: 1024px) and
(orientation:portrait)
{
}

be aware of
potential

issues

Browser support
Vendor extensions
Changing syntax
Unstable Structural

Vendor-specific property
div
{
-webkit-border-radius: 10px;
}

Vendor-specific value
div
{
background-image:
-moz-linear-gradient
}

Vendor-specific property & value
div
{
-webkit-transition:
-webkit-transform 1s;
}

Different vendor extensions
div
{
-o-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

background-image:

background-image:
-moz-linear-gradient

Browser support
Vendor extensions
Changing syntax
Unstable Structural selectors

:last-child { }
:only-child { }
:first-of-type { }
:last-of-type { }
:only-of-type { }
:empty { }
:nth-child(n) { }
:nth-last-child(n) { }
:nth-of-type(n) { }
:nth-last-of-type(n) { }

rtin g a n y p ro je c t,
B e fo re s ta
d to k n o w w h ic h
you n e e
ers and devices
brows
o be sup ported
need t

This will help y
ou determine
progressive e if
nhancement o
other solution r
s are needed
f o r y ou r p roj
e ct

learn the ba
sics

f irst

ig n e rs ju m p in to
M any des
out k n o w ing the
C S S 3 w ith
b asics of CSS2.1

M a n y a s p e c ts
of CSS3
build on top
of CSS2.1

Older IE issues like haslayout
The block formatting context
Complex CSS2.1 selector
Initial values & shorthand
The various box-models
Inheritance & cascade
Float basics

p {
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
}

E:lang(c)
E:first-child
E:first-line
E:first-letter
E:before
E:after
E[att]
E[att=val]
E[att~=val]
E[att|=val]

.intro
{ overflow: hidden; }

.intro
{ float: left; }

.intro
{ display: inline-block; }

.intro
{ position: relative; }

.intro
{ zoom: 1; }

fo c us
on the bigge
r issues

ality is th at CSS3
The re
ne aspe ct of the
is j u s t o
de veloper toolkit

W e should be
exploring
how we can m
ake our desig
and developm n
ent practices
m ore e fficie
nt & flexible

how
do we b
ecom
more e
efficie
nt
more flex
ible

more efficien
t

CS S

CSS resets ai
m to remove a
browser-spec ll
iﬁc styles, and
build CSS up then
again from sc
so that each e ratch -
lement will ap
the same in pear
all browsers

html,body,div,span,applet,object,iframe,h1,h2,
h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,img,ins,kbd,q,
s,samp,small,strike,strong,sub,sup,tt,var,b,u,
i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,table,caption,tbody,tfoot,thead,tr,th,
td,article,aside,canvas,details,embed,figure,
figcaption,footer,header,hgroup,menu,nav,
output,ruby,section,summary,time,mark,audio,
video
{
margin:0;
padding:0;
border:0;
font-size:100%;
font: inherit;
vertical-align: baseline;
}

Strengths:
Efﬁcient development

Strengths:
Consistency for teams

Strengths:

Weaknesses:
Applied without thought
lots of additional rewriting

Strengths:

Weaknesses:
lots of additional rewriting

CSS framewo
rks are pre-pr
libraries that a epared
re meant to al
easier, stand low for
ards-compli
styling of web ant
pages.

rameworks focus on
Many f velopers
lay out grids, allowing de
ll in library classes to
to pu
ld comple x layouts
bui

.column, .span-1, .span-2, .span-
3, .span-4, .span-5, .span-6,
.span-7, .span-8, .span-9, .span-
10, .span-11, .span-12, .span-13,
.span-14, .span-15, .span-16,
.span-23, .span-24
{float:left;margin-right:10px;}

Strength
Lean,

Strength
Lean, abstracted CSS

Strength
Lean, abstracted CSS

Weaknesses
Designs that don’t ﬁt
Bloated frameworks
Presentational class names

Keep in mind
you can alway
roll you r ow s
n fram e w ork

Object-oriente
d CSS styles
“objects” or “m HTML
odules” with
cleaner, mor
e efficient C
SS

For all the har
dcore develop
yes, it’s not re ers…
ally object-orie
It’s just a na nted.
me!

How many times
does your CSS file
mention H2 or
“float: left”?

Do you ever find
yourself styling
using Firebug?

There is a stro
ng chance tha
you may be “d t
oing it wrong”
or could at lea ,
st be
“doing it bet
ter”

e starting your CSS,
Befor
k at your layouts and
loo
try to find patterns

Are there asp
ects of the
layout that co
uld be
abstracted i
nto library it
ems?

Strengths
lean, robust CSS
easier site maintenance

Strengths
lean, robust CSS
avoid repetitive CSS

Strengths
lean, robust CSS
avoid speciﬁcity wars

Strengths
lean, robust CSS
avoid speciﬁcity wars

Weaknesses
additional HTML classes
new mindset

more powerf
ul
development

Pre-processo
rs allow us to
variables in use
CSS files and
parse them to then
regular stylesh
eets.

LESS
SASS
Turbine
Switch CSS
DtCSS
CSS Crush

@color1: red;
@color2: green;
@color3: blue;
@color4: orange;
@color5: brown;

#a { background: @color1; }

div{width:200px;height:200px;-
webkit-border-radius:10px;-
moz-border-radius:10px;border-
radius:10px;}
#one{background:red;-webkit-
border-radius:20px;-moz-
border-radius:20px;border-
radius:20px;}#one
a{color:green;}
#two{background:green;-webkit-
border-radius:30px;-moz-

.border-radius(@radius: 5px)
{
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

div { .border-radius(); }

Strength
faster development
variables!

Strength
faster development
variables!

Weaknesses

Strength
faster development
variables!

Weaknesses
deep nesting

#nav
{
background: @color1;
li
{
list-style: none

a { color: green; }
}
}

Strength
faster development
variables!

Weaknesses
deep nesting
inefﬁcient CSS

Strength
faster development
variables!

Weaknesses
deep nesting
inefﬁcient CSS
entirely new syntax

more respon
sive

d es ign

Until recently,
people built si
for desktop tes
and/or mobi
le only

Responsive design is
ut creating sites that
abo
ad apt to an y device

Problem 1:
solving screen size

Ideally, we wa
nt to start with
single linear la a
yout that can
viewed by a be
ny device

we gradua lly build a
Then
ries of adva nced ﬂuid
se
n top, con trolled by
layouts o aScript
m edia que ries or Jav

@media only screen and
(min-width: 800px) and
(max-width: 999px)
{
}

@media only screen and
(min-width: 1000px)
{
}

This means w
e can deliver
entirely differe
nt layouts
based on the
viewport

Problem 2:
solving bandwidth
issues

But what abo
ut
images and
other media?

lly, we sho uld deliver
Idea
images and media
low end
as the default

Then we deliv
er larger, riche
for those dev r media
ices that can
(or at least tho cope
se devices wit
suitable band h the
width)

Problem 3:
content and context

Another probl
em we face is
determining w
hat types of
content shoul
d be delivered
devices, and i to
n what contex
people are u t are
sing the site

simple as delivering
It is not as
ed back c ontent for
stripp
mobile d evices and
ntent for desktops
rich co

The reality is t
hat these last
problems are two
not solved yet
But a chang .
e is coming

re at a tipp ing point.
I think we a going to
y soon, a m ajor site is
Ver lems and
c rack these three prob
way we b uild sites
ch ange the

hell am I
what the
So,
ng?
sayi

be aware of th
e
potential iss
ues

learn the b asics
fore divin g in
be

focus on the
bigger issue
s

thank you
Russ Weakley
@russmaxdesign
www.maxdesign.com.au

CSS3 - is everything we used to do wrong?

More Related Content

What's hot

Viewers also liked

Similar to CSS3 - is everything we used to do wrong?

More from Russ Weakley

Recently uploaded

CSS3 - is everything we used to do wrong?