Slide 1
Slide 1 text
Dude my dude.
Another talk about CSS?
What’s to know?
CSS is fraggin easy.
Wow that’s so hard.
It’s a red box.
.box {
width: 100px;
height: 100px;
background: red;
}
Slide 2
Slide 2 text
Here’s what some super
smart dude once pontificated
about CSS.
CSS takes a day
to learn but a
lifetime to master.
Slide 3
Slide 3 text
The Royal We
Chris Coyier @chriscoyier
Slide 4
Slide 4 text
Know everything? OK.
Instead of listening to me, here is a...
SUPER CSS SUPER CHALLENGE
Slide 6
Slide 6 text
Grand Canyon of CSS
Pseudo Elements
For fun and profit!
Slide 7
Slide 7 text
Here’s what we
are going to learn:
1) What they are
2) How to use them (syntax)
3) Why they are cool (theoretically)
4) Why they are cool (in practice)
Slide 8
Slide 8 text
You already know
how to use them!
:visited :hover :active :link
:first-child :last-child :nth-child() :nth-of-type()
:enabled :disabled :checked :indeterminate
:focus :target :root :lang()
“Pseudo Class Selectors”
http://css-tricks.com/pseudo-class-selectors/
Slide 9
Slide 9 text
:before
:after
Slide 10
Slide 10 text
In
div:before {
content: "Robots ";
}
http://jsbin.com/pseudo-basic
HTML
CSS
In
Slide 11
Slide 11 text
In
div:before {
content: "Robots ";
}
http://jsbin.com/pseudo-basic
HTML
CSS
In
div:after {
content: " Disguise";
}
Robots Disguise
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
So what’s with the
different name?
Pseudo selectors select elements that
already exist (perhaps in different states).
Pseudo elements create new content that
doesn’t exist (yet).
Slide 14
Slide 14 text
THE OCEAN DOESN’T MAKE
RUINS, IT MAKES NEWONES.
http://www.youtube.com/watch?v=_naLuRykun8
Pseudo Elements
Slide 15
Slide 15 text
::before
::after
::first-line ::first-letter
Slide 16
Slide 16 text
:before
:after
:first-line :first-letter
Slide 17
Slide 17 text
In
div:before {
content: "Robots ";
}
http://jsbin.com/pseudo-basic
HTML
CSS
In
div:after {
content: " Disguise";
}
Robots Disguise
Slide 18
Slide 18 text
In
Resulting
HTML
(sorta)
Slide 19
Slide 19 text
Robots
In
Disguise
Resulting
HTML
(sorta)
Not “before/after
the element”...
Slide 20
Slide 20 text
Robots
In
Disguise
Resulting
HTML
(sorta)
It’s before/after the
content inside.
Slide 21
Slide 21 text
Blah blah blah
More stuff
Nothing to see here.Slide 22
Slide 22 text
Robots
Resulting
HTML
(sorta)
Blah blah blah
More stuff
Nothing to see here. DisguiseSlide 23
Slide 23 text
It’s only a model...
(Not really in DOM)
CAMELOT!
CAMELOT!
CAMELOT!
Slide 24
Slide 24 text
Not for “no content” elements • Allows but shouldn’t • Styles as if was inside • Checkboxes • Radio Buttons
Slide 25
Slide 25 text
HTML
CSS
Graphic design will save the world
right after rock and roll does.
“
”
blockquote:before {
content: "\201C";
}
blockquote:after {
content: "\201D";
}
Graphic design will save the world right after rock and roll does.David Carson
Slide 26
Slide 26 text
RABBLE RABBLE RABBLE!
Slide 27
Slide 27 text
Graphic design will save the world
right after rock and roll does.
blockquote:before {
content: "\201C";
position: absolute;
top: 0; left: -30px;
font-size: 60px; color: #999;
}
http://jsbin.com/pseudo-blockquote/
HTML
CSS
“
Graphic design will save the world right after rock and roll does.
Slide 28
Slide 28 text
blockquote p:first-child:before {
content: "\201C";
}
blockquote p:last-child:after {
content: "\201D";
}
HTML
CSS
Graphic design will save the world right after rock and roll does.
Another example paragraph
Slide 29
Slide 29 text
h1:before {
content: “CSS-Tricks”;
}
h2:before {
content: “A web design community.”;
}
HTML
CSS
Slide 30
Slide 30 text
Bad for accessibility
Bad semantically
Bad for SEO
Slide 31
Slide 31 text
Screen Readers
NVDA don’t read
Jaws don’t read
Window Eyes don’t read
Testing by Lucica Ibanescu
http://cssgallery.info/testing-the-accessibility-of-the-css-generated-content/
Slide 32
Slide 32 text
CSS takes unicode entities (\0026)
... as opposed to ...
named entities (&) or
numeric entities (&)
Hot tip: Need a new line? Use “\A”
content: "\201C";
?
?
?
WTF
Slide 33
Slide 33 text
http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
'➜'.charCodeAt(0).toString(16);
http://rogieking.com/post/9291629610/charcodeat-0-tostring-16-outputs-279c
Slide 34
Slide 34 text
content can be ...
1) Text
div:after {
content: “------------”;
}
3) Attribute
div:after {
content: attr(data-tip);
}
2) Image
div:after {
content: url(smiley.png);
/* or gradient */ }
4) Counter
ol > li:after {
content: counter(li);
}
or, nothing!
content: “”;
but not HTML
content: “
Front End Design!!
”;Slide 35
Slide 35 text
- Chris Coyier
- [email protected]
- @chriscoyier
Slide 36
Slide 36 text
Combining
with media queries
CSS @media (min-width: 1024px) {
li:nth-child(1):before {
content: “Name: “; }
li:nth-child(2):before {
content: “Email: “; }
li:nth-child(3):before {
content: “Twitter: “; }
li:before {
display: inline-block;
width: 100px;
text-align: right; }
}
Slide 37
Slide 37 text
http://css-tricks.com/css-media-queries/
mobile portrait
mobile landscape
tablet
small monitor
large monitor
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Self!
You know what
would be neat?
You fade in
pseudo elements
on hover.
Slide 40
Slide 40 text
TOTAL
EPIC
FRICKING
DISASTER
Slide 41
Slide 41 text
You can’t animate
or transition
pseudo elements.
Slide 42
Slide 42 text
But WAIT!
You totally can
in Firefox 4+
Slide 43
Slide 43 text
Your mom
a:after {
content: attr(data-tooltip);
position: absolute;
bottom: 130%;
left: 20%;
background: #ffcb66;
padding: 5px 15px;
white-space: nowrap;
}
http://jsbin.com/pseudotooltip/4/edit
HTML
CSS
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Your mom
a:after {
content: attr(data-tooltip);
position: absolute;
bottom: 150%;
left: 20%;
background: #ffcb66;
padding: 5px 15px;
white-space: nowrap;
opacity: 0;
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
}
a:hover:after {
opacity: 1;
bottom: 130%;
}
HTML
CSS
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Remember kids,
you get two pseudo
elements for every
element.
Slide 48
Slide 48 text
a {
position: relative;
}
a:after {
content: attr(data-tooltip);
bottom: 130%;
left: 20%;
background: #ffcb66;
padding: 5px 15px;
color: black;
-webkit-border-radius: 10px;
-moz-border-radius : 10px;
border-radius : 10px;
white-space: nowrap;
}
a:after, a:before {
position: absolute;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
-o-transition : all 0.4s ease;
opacity: 0;
}
CSS a:before {
content: "";
width: 0;
height: 0;
border-top: 20px solid #ffcb66;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
left: 30%;
bottom: 90%;
}
a:hover:after {
bottom: 100%;
}
a:hover:before {
bottom: 70%;
}
a:hover:after, a:hover:before {
opacity: 1;
}
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Nicolas
“Dr. Pseudo Element”
Gallagher
http://nicolasgallagher.com/
@necolas
You can’t talk about Pseudo Elements
without talking about...
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
body {
background: url(background.png) -15% 0 repeat-x;
}
body:before {
background: url(midground.png) 35% 0 repeat-x;
}
body:after {
background: url(foreground.png) 65% 0 repeat-x;
}
body:after, body:before {
content: “”;
position: absolute;
top: 0; right: 0; left: 0;
height: 100px;
}
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Fun with Blurred Text
...text and stuff...
Read on! →4/21/2011
13 comments
article:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 10px solid #E6E2DF;
border-left: 10px solid #E6E2DF;
border-bottom: 10px solid #D9D3CF;
border-right: 10px solid #D9D3CF;
}
Slide 55
Slide 55 text
Fun with Blurred Text
...text and stuff...
Read on! →4/21/2011
13 comments
.meta:before {
content: url(images/paperclip.png);
position: absolute;
top: -10px;
left: 80px;
}
Slide 56
Slide 56 text
Shapes!
These are easy.
These are less easy.
Slide 57
Slide 57 text
.star {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
.star:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
Slide 58
Slide 58 text
http://css-tricks.com/examples/ShapesOfCSS/
Slide 59
Slide 59 text
http://nicolasgallagher.com/pure-css-gui-icons/demo/
Slide 60
Slide 60 text
Wouldn’t this
be nice?
div {
background: url(awesome-graphic.jpg) center center no-repeat;
}
div:hover {
background-opacity: 0.5;
}
Slide 61
Slide 61 text
Yay!
div:after {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
content: url(awesome-graphic.jpg);
z-index: -1;
opacity: 0.5;
}
Slide 62
Slide 62 text
What about this?
div:after:after { }
div:before(2) { }
div:outside { }
div:outside(2):after { }
Slide 63
Slide 63 text
The W3C spec’d
that in 2003.
http://www.w3.org/TR/css3-content/
div:after:after { }
div:before(2) { }
div:outside { }
div:outside(2):after { }
Yay! Want!
Reality
http://dev.w3.org/csswg/css3-content/
Slide 64
Slide 64 text
Old Spec New Spec
Slide 65
Slide 65 text
Browser Support
3.5+
3.0- positioning issues
6+
9+
8 :: / :hover / z-index
7-
1+
1.3+
http://css-tricks.com/browser-support-pseudo-elements/
Remember, CSS TWO not THREE
85%
CSS-Tricks
97%
Other tech
92%
Slide 66
Slide 66 text
Here’s what we
learned:
5) The Future?
The CSS3 Spec - We need to use them more - Transitions
1) What they are
2) How to use them (syntax)
3) Why they are cool (theoretically)
4) Why they are cool (in practice)
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
http://jsbin.com/super-css-super-challenge/
Slide 79
Slide 79 text
http://www.flickr.com/photos/wolfgangstaudt/2252688630/
http://www.flickr.com/photos/webel/347801397/
http://web.archive.org/web/20051111095409/http://wrgis.wr.usgs.gov/dds/dds-39/album.html
Photos
Type
Gotham font family by Hoefler & Frere-Jones
Other Excellent Relevant Links
http://www.merttol.com/articles/web/code/introduction-to-css-escape-sequences.html
http://www.viget.com/inspire/css-generated-content/
http://css-tricks.com/video-screencasts/94-intro-to-pseudo-elements/
Slide 80
Slide 80 text
MORE
http://css-tricks.com/9516-pseudo-element-roundup/
Slide 81
Slide 81 text
Thanks!
http://bit.ly/pseudos