The document discusses the benefits and potential issues of using CSS3 and preprocessors. It recommends learning CSS2.1 fundamentals first before jumping into CSS3. Object-oriented CSS, resets, frameworks and preprocessors can make development more efficient and flexible by reducing repetitive code and improving maintenance. However, they also have drawbacks like additional classes and changing mindsets.

1. CSS3
- is everything
we used to do
wrong ?

2. re living in
we a
times
exciting

3. better
browsers

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

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

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

7. Opera 11:
Best HTML5 forms
support

8. <input type="color">
<input type="date">
<input type="number">
<input type="range">

9. Opera 11:
Best CSS3
backgrounds support

10. 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;}

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

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

13. Chrome 11:
Slightly ahead of
Safari 5

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

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

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

17. 21 June 2011??

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

19. Preview released:
11 April 2011

20. Release:
early 2012?

21. 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?

22. http://nightly.webkit.org/

23. http://nightly.mozilla.org/

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

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

26. cool
CS S 3
stuff

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

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

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

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

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

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

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

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

35. Befo
re w
e ge
t too
exc
ited
…
few th ings to
her e are a
mind
ep in
ke

36. use CSS3 fo
r the right
re asons

37. 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.

38. 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.

39. Web fonts
Less images
Improved UX
Device targeting
Faster page speeds
Efficient site building
Ease of maintenance

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

41. Web fonts
Less images
Improved UX
Device targeting
Faster page speeds
Efficient site building
Ease of maintenance

42. Web fonts
Less images
Improved UX
Device targeting
Faster page speeds
Efficient site building
Ease of maintenance

43. section:target
{ background: lime; }
#section1:target
{ background: lightgreen; }
::selection
{
color: #fff;
background: #000;
}

44. Web fonts
Less images
Improved UX
Device targeting
Faster page speeds
Efficient site building
Ease of maintenance

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

46. Web fonts
Less images
Improved UX
Device targeting
Faster page speeds
Efficient site building
Ease of maintenance

48. Web fonts
Less images
Improved UX
Device targeting
Faster page speeds
Efficient site building
Ease of maintenance

49. Web fonts
Less images
Improved UX
Device targeting
Faster page speeds
Efficient site building
Ease of maintenance

50. be aware of
potential
issues

51. Browser support
Vendor extensions
Changing syntax
Unstable Structural

53. Browser support
Vendor extensions
Changing syntax
Unstable Structural

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

55. Vendor-specific value
div
{
background-image:
-moz-linear-gradient
(left, yellow, black);
}

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

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

58. Browser support
Vendor extensions
Changing syntax
Unstable Structural

59. background-image:
-webkit-gradient(linear,
left center, right center,
from(yellow), to(black));
background-image:
-moz-linear-gradient
(left, yellow, black);

60. Browser support
Vendor extensions
Changing syntax
Unstable Structural selectors

61. :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) { }

62. 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

63. 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

64. learn the ba
sics
f irst

65. 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

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

67. 22
CSS2.1 selectors

68. 36
CSS3 selectors

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

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

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

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

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

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

75. 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]

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

77. .intro
{ overflow: hidden; }
.intro
{ float: left; }
.intro
{ display: inline-block; }

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

79. .intro
{ position: relative; }
.intro
{ zoom: 1; }

80. fo c us
on the bigge
r issues

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

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

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

84. more efficien
t
CS S

85. CSS resets

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

87. 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;
}

88. Strengths:
Efficient development

89. Strengths:
Efficient development

90. Strengths:
Efficient development
Consistency for teams

91. Strengths:
Efficient development
Consistency for teams
Weaknesses:
Applied without thought
lots of additional rewriting

92. Strengths:
Efficient development
Consistency for teams
Weaknesses:
lots of additional rewriting

93. CSS frameworks

94. 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.

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

96. .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-17, .span-18, .span-19,
.span-20, .span-21, .span-22,
.span-23, .span-24
{float:left;margin-right:10px;}

97. Strength
Efficient development
Lean,

98. Strength
Efficient development
Lean,

99. Strength
Efficient development
Lean, abstracted CSS

100. Strength
Efficient development
Lean, abstracted CSS
Weaknesses
Designs that don’t fit
Bloated frameworks
Presentational class names

101. Strength
Efficient development
Lean, abstracted CSS
Weaknesses
Designs that don’t fit
Bloated frameworks
Presentational class names

102. Strength
Efficient development
Lean, abstracted CSS
Weaknesses
Designs that don’t fit
Bloated frameworks
Presentational class names

103. Strength
Efficient development
Lean, abstracted CSS
Weaknesses
Designs that don’t fit
Bloated frameworks
Presentational class names

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

105. smarter
CSS

106. Object-oriented CSS

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

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

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

110. Do you ever find
yourself styling
using Firebug?

111. 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”

112. How?

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

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

115. Strengths
lean, robust CSS

116. Strengths
lean, robust CSS

117. Strengths
lean, robust CSS
easier site maintenance

118. Strengths
lean, robust CSS
easier site maintenance
avoid repetitive CSS

119. Strengths
lean, robust CSS
easier site maintenance
avoid repetitive CSS
avoid specificity wars

120. Strengths
lean, robust CSS
easier site maintenance
avoid repetitive CSS
avoid specificity wars
Weaknesses
additional HTML classes
new mindset

121. Strengths
lean, robust CSS
easier site maintenance
avoid repetitive CSS
avoid specificity wars
Weaknesses
additional HTML classes
new mindset

122. Strengths
lean, robust CSS
easier site maintenance
avoid repetitive CSS
avoid specificity wars
Weaknesses
additional HTML classes
new mindset

123. more powerf
ul
development

124. Pre-processors

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

126. LESS
SASS
Turbine
Switch CSS
DtCSS
CSS Crush

127. Variables

128. @color1: red;
@color2: green;
@color3: blue;
@color4: orange;
@color5: brown;
#a { background: @color1; }

129. Minification

130. 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-

131. Mixins

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

133. Packing
Gzipping
Compiling

134. Strength

135. Strength
faster development

136. Strength
faster development
variables!

137. Strength
faster development
variables!
Weaknesses

138. Strength
faster development
variables!
Weaknesses
deep nesting

139. #nav
{
background: @color1;
li
{
list-style: none
a { color: green; }
}
}

140. Strength
faster development
variables!
Weaknesses
deep nesting
inefficient CSS

141. Strength
faster development
variables!
Weaknesses
deep nesting
inefficient CSS
entirely new syntax

142. more respon
sive
d es ign

143. What is
Responsive design?

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

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

146. Problem 1:
solving screen size

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

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

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

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

151. Problem 2:
solving bandwidth
issues

152. But what abo
ut
images and
other media?

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

154. 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)

155. Problem 3:
content and context

156. 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

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

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

159. 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

160. wrap
up

161. hell am I
what the
So,
ng?
sayi

162. be aware of th
e
potential iss
ues

163. learn the b asics
fore divin g in
be

164. focus on the
bigger issue
s

165. W rite e fficie ntly

166. D esign
responsively

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