Press key to advance.

CSS3



With slides from:
Estelle Weyl's Selectors: Select This! and HTML5 Rocks

What We'll Cover

  • CSS Recap
  • CSS History
  • Selectors
  • Properties
  • Pre-processors

CSS Recap

 
selector {
  property: value;
  property: value;
}
body {
  color: yellow;
  background-color: black;
}
#container {
  width: 70%;
  padding: 10px;
  margin: auto;
}
.byline {
  font-size: 12px;
  border-bottom: 1px solid #ccc;
}

CSS History

  • 1996: CSS1
  • 1998-2011: CSS2
  • 1999-Now: "CSS3"

All CSS Specs

Selectors

Lots 'o Selectors

  • *
  • E
  • .class
  • #id
  • E F
  • E > F
  • E + F
  • E[attribute]
  • E[attribute=value]
  • E[attribute~=value]
  • E[attribute|=value]
  • :first-child
  • :lang()
  • :before
  • ::before
  • ::selection
  • :after
  • ::after
  • :first-letter
  • ::first-letter
  • :first-line
  • ::first-line
  • E[attribute^=value]
  • E[attribute$=value]
  • E[attribute*=value]
  • E ~ F
  • :root
  • :last-child
  • :only-child
  • :nth-child()
  • :nth-last-child()
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-of-type()
  • :nth-last-of-type()
  • :empty
  • :not()
  • :target
  • :enabled
  • :disabled
  • :checked
  • :indeterminate
  • :default
  • :valid
  • :invalid
  • :in-range
  • :out-of-range
  • :required
  • :optional
  • :read-only
  • :read-write
Webplatform: Selectors

CSS3 Selector Browser Support

Relational selectors

  1. item 1
  2. item 2
  3. item 3
    • item a
    • item b
    • item c
  4. item 4
  5. item 5
  6. item 6
  7. item 7
ul li
descendant selector
matches nested <li>s
ol > li
child selector 
matches <li>s in <ol> but not nested <ul>
li.myClass + li
adjacent sibling 
li.myClass ~ li
general sibling selector
matches later siblings, but not nested.
IE7+
Try it out

Attribute selectors

element[attribute]
Select elements containing the named attribute
img[alt] {}
     <img src="image.jpg" alt="accessible">     
     <img src="image.jpg" title="inaccessible">  
form [type] {} 
     <input type=date>  
     <select>

IE6 sucks 
IE7 support basic non-empty attribute

Older attribute selectors

E[attr]
Element E that has the attribute attr with any value.
E[attr="val"]
Element E that has the attribute attr with the exact, case-sensitive if attribute is case sensitive, value val.
E[attr|=val]
Element E whose attribute attr has a value val or begins with val- ("val" plus "-").
p[lang|="en"]{/*    <p lang="en-us">  <p lang="en-uk"> */ }
E[attr~=val]
Element E whose attribute attr has within its value the space-separated full word val.
a[title~=more] {/* <a title="want more info about this?">}

CSS3 Attribute Selectors

E[attr^=val]
Element E whose attribute attr starts with the value val.
a[href^=mailto] {background-image: url(emailicon.gif);}  
a[href^=http]:after {content: " (" attr(href) ")";}
E[attr$=val]
Element E whose attribute attr ends in val . 
a[href$=pdf] {background-image: url(pdficon.gif);}
a[href$=pdf]:after {content: " (PDF)";}
E[attr*=val]
Element E whose attribute attr matches val anywhere within the attribute. Similar to E[attr~=val] above, except the val can be part of a word.

Note: Multiple attributes work! a[title][href]

Attribute Selectors Recap

input[placeholder] { 
/* matches any input with a placeholder */}
input[type=email] {
/* exact match */}
abbr[title~=unicorn] { 
/* matches unicorn but not unicorns */}
abbr[title|=en] { 
/* matches en-us and en-uk */}
a[href^=mailto] { 
/* starts with */}
a[href$=pdf]{ 
/* ends in */}
abbr[title*=unicorn] { 
/* matches unicorn and unicorns */}
E:[att] 
/* have the attribute at all */
E:[att=val]
/* exact */
E:[att~=val]
/* val is a space separated word */
E:[att|=val]
/* with a dash */
E:[att^=val]
/* begins with val */
E:[att$=val]
/* ends with val */
E:[att*=val]
/* val is anywhere as a substring */
.
@media print{
  abbr[title]:after { 
    content: "(" attr(title) ")";
  }
  a[href^=http]:after { 
    content: "(" attr(href) ")";
  }
}

Using attribute selectors

➚ Pop out

Note: The top line of the example is editable. The CSS will impact the contents on the rest of the page.

UI pseudo-classes

Based on current state of UI

  :enabled
  
  :disabled
  
  :checked
  

Example:

input[type=checkbox]:checked + label {
  color: red;
}

Form related UI pseudo-classes

:valid
:invalid
:required
:optional

:in-range
:out-of-range
:read-only
:read-write

:default

Example:

input:valid { border: 1px solid green;}
input:invalid { border: 1px solid red;}
input:required {border-width: 5px;}
input:optional {border-width: 10px;}
input:out-of-range { background-color: pink;}
input:in-range { background-color:lightgreen;}


UI selectors

➚ Pop out

Test them out for yourselves

Structural selectors

:nth-child() 

:nth-last-child() 

:nth-of-type() 

:nth-last-of-type() 

:first-child*

:last-child 

:first-of-type 

:last-of-type 

:only-child 

:only-of-type 

:root

:empty

:not(:empty) 
  • Target elements on the page based on their relationships to other elements in the DOM.
  • Updates dynamically if page updates.
  • Reduced need for extra markup, classes and IDs
* CSS2 / IE8

First, last, & only

 
:first-child

:last-child 

:first-of-type 

:last-of-type 

:only-child 

:only-of-type 

First, last, & only

➚ Pop out

nth pseudo-classes

:nth-child(3n) 

:nth-last-child(odd) 

:nth-of-type(5) 

:nth-last-of-type(3n+1) 

Target element or elements based on argument passed to the selector

  • :nth-of-type(even)
  • :nth-of-type(odd)
  • :nth-of-type(an+b)

Structural Selectors

tr:first-child,
tr:last-child {
  font-weight: bold;
}
tr:first-of-type,
tr:last-of-type{
  text-decoration:line-through;
}
tr:nth-child(even) {
  background-color: #CCC;
}
tr:nth-child(3) {
  color: #CCC;
}
tr:nth-of-type(odd) {
  background-color: #FFF;
}
tr:nth-of-type(4n) {
  color: #C61800;
}
tr:nth-of-type(3n-1) {
  font-style: italic;
}

Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10

Structural Selectors

➚ Pop out

Flag with Structural Selectors

➚ Pop out

Misc. Pseudo Classes

  :link
  :visited
  
  :hover
  :active
  :focus
  :not
  :empty
  :lang
  :target

:not - Negation pseudo-class

➚ Pop out

Pseudo elements

::first-line
::first-letter
::selection (not in specification)
::before
::after
    

Pseudo-classes select elements that already exist.
Pseudo-elements create "faux" elements you can style.

Use single colon because of IE

::first-letter

You can even pretty drop-caps with :first-letter, but make sure to apply it to p:first-of-type so your site not too ugly. ➚ Pop out

p:first-of-type::first-letter {
	position: relative;
	top: 8px;
	float: left;
	font-size: 3em;
	line-height: 1;
	color: #990000;
	padding: 0 4px 2px 0;
	font-weight: bold;	
}
 
➚ Pop out

::after

More bubbles

Properties

Prefixes

selector {
  property: value;
  -webkit-property: value;
  -moz-property: value;
  -ms-property: value;
  -o-property: value;
}
div {
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

Text stroke

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 0.00px; 
}
You Be Strokin'!
caniuse.com: text-stroke

Opacity

  color: rgba(255, 0, 0, 0.75); 
  background: rgba(0, 0, 255, 0.75); 
Independent opacity
caniuse.com: rgba colors

Hue/saturation/luminance color

color: hsla(
  128, 
  74%, 
  33%, 
  1.00 
        
HSL example
caniuse.com: rgba colors

Rounded corners

              face: border-radius: 0px; 
              left eye: border-radius: 0px; 
              right eye: border-radius: 0px; 
              base white: border-radius: 0px; 
              mouth: border-radius: 0px; 
              nose: border-radius: 0px; 
              left black eye: border-radius: 0px; 
              right black eye: border-radius: 0px; 
            
caniuse.com: border-radius

Gradients

background-image: linear-gradient(top, #00abeb 0%, #fff 50%,
                            #66cc00 50%, #fff 100%);

background-image: radial-gradient(center, circle cover, red, #000 40%);
                                                        

caniuse.com: gradients

Shadows

text-shadow: 
  rgba(64, 64, 64, 0.5) 
  0px 
  0px 
  0px; 

box-shadow: rgba(0, 0, 128, 0.25) 0px 0px 0px;
Such a shady div.
caniuse.com: shadows

Webfonts

@font-face {
  font-family: 'LeagueGothicRegular';
  src: url('fonts/leaguegothic/leaguegothic-webfont.eot');
}
.special-header {
  font-family: 'LeagueGothic';
}
Look, I'm in League Gothic font!
How font-face works

Transitions

#box.left {
  margin-left: 0;
}
#box.right {
  margin-left: 1000px;
}

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; 
#box {
  -webkit-transition: margin-left 1s ease-in-out;
}

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; 
caniuse.com: css-transitions

Transforms

Hover over me:

-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)
#threed-example {
  -webkit-transform: rotateZ(5deg);

  -webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
  -webkit-transform: rotateZ(-5deg);
}
caniuse.com: transforms

Animations

@-webkit-keyframes pulse {
from {
 opacity: 0.0;
 font-size: 100%;
}
to {
 opacity: 1.0;
 font-size: 200%;
}
}

div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}
Pulse!
caniuse.com: animations

Pre-Processors

Without a Pre-processor

#header {
  width: 500px;
}

#header .logo {
  color: #F5D867;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}

#header .logo a {
  color: #FFD980;
}

#header .logo a span {
  background-color: #F5D867;
}
   

...Not the optimal syntax.

With a Pre-processor

styles.sass:

@mainColor: #99cc00;

#header {
  .logo {
    color: lighten(@mainColor, 20%);
   @include border-radius (3px);
  }
}

➜ styles.css:

#header .logo {
  color: #F5D867;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

Common features

  • variables
  • nesting
  • mix-ins
  • inheritance
  • color functions
  • vendor prefixes.

Popular Pre-processors

  • SaSS with Compass
    Biggest community of users
  • Less
    Basis for Twitter Bootstrap
    Can be run in the browser
  • Stylus
    Punctuation free

Pre-processors comparison