Post on 25-May-2015
Eric Redmond@coderoshi
HARDCORE CSSPDX Web & Design
Hardcore CSS
A SHORT HISTORY OF CSS
CSSCascading Style SheetsSeparates style from substance (separate from HTML)
Stylesheets non-standardIn 1990 TBL separated docs from layout
Each browser decided doc style
A SHORT HISTORY OF CSS
Cascading HTML style sheets – a proposalOct 10, 1994Håkon W Lie (CERN) proposes
A SHORT HISTORY OF CSS
Cascading HTML style sheets – a proposalOct 10, 1994Håkon W Lie (CERN) proposes
A SHORT HISTORY OF CSS
Cascading HTML style sheets – a proposalOct 10, 1994Håkon Lie (CERN)Bert Bos was first adoptor
Cascading?An ordered list of stylesheets, that start with the first, and values are added/overridden by later SS
1995-1996Netscape, IE and others added support
CSS Level I emerged from W3C draft in Dec 1996
A SHORT HISTORY OF CSS
CSS21998 Level 2 was proposedAdoption was relatively fast
CSS3First draft published in 1999
Divided into 50 modulesStill being fucking writtenSllloooowwww adoption…
CSS4Started in 2009Not support at all
A SHORT HISTORY OF CSS
Hardcore CSSSELECTORS
UniversalElementsClassesIDsAttributesPseudo classesPseudo elements
SELECTORS
<em>I’m Arial too!</em>
* { font-family: Arial;}
Universal
SELECTORS
<strong> hulk smash</strong>
strong { color: green; text-transform:uppercase;}
Elements
SELECTORS
<span class=superhero> Iron Man</span>
.superhero { font-family: 'International Super
Hero';}
Classes
SELECTORS
<div id=main> My main content.</div>
#main { border:1px solid green; padding:1em;}
IDs
SELECTORS
<article role=main> My main content.</article>
[role=main] { border:1px solid green; padding:1em;}
IDs
SELECTORS
<ul> <li>Item 1</li> <li>Item 2</li></ul>
li:first-child { color:red;}
Pseudo Classes
SELECTORS
<h1> Excelsior</h1>
h1:after { content: '!';}
Pseudo Elements
SELECTORS
<h1>Page Title<h1><section> <h1>Section Title</h1></section>
section h1 { color:blue;}
Nesting
SELECTORS
<h1>Page Title<h1><section> <h1>Section Title</h1></section>
section h1 { color:blue;}
Nesting
SELECTORS
Hardcore CSSSPECIFICITY
<section id=person> <div id=name>Joe</div> <div>A nice guy</div></section>
#person div { color:red;}#name { color:blue;}
What wins?
SELECTOR SPECIFICITY
SELECTOR SPECIFICITY
…What?SELECTOR SPECIFICITY
www.w3.org/TR/css3-selectors/#specificity
Calculating a selector's specificity count the number of ID selectors in the selector (= a) count the number of class selectors, attributes
selectors, and pseudo-classes in the selector (= b) count the number of type selectors and pseudo-
elements in the selector (= c) ignore the universal selector
SELECTOR SPECIFICITY
CALCULATION
Selector a b c Specificity
* 0 0 0 0
li 0 0 1 1
ul li 0 0 2 2
ul li:after 0 0 3 3
h1 *[rel=up] 0 1 1 11
ul li span.red 0 1 3 13
li.red.level 0 2 1 21
#name 1 0 0 100
#person div 1 0 1 101
I.C.A.T. IDs > Classes/Attributes > TypesPseudos are of their kind
Pseudo-classes are classes Pseudo-elements are elements (types)
EASIER WAY
1. Compare the count of IDsdiv#content *[role=main] section#person = 2section#person div#name .superhero:last = 2
2. Compare the count of Classes+Attributesdiv#content *[role=main] section#person = 1section#person div#name .superhero:last = 1
3. Compare the count of Typesdiv#content *[role=main] section#person = 2section#person div#name .superhero:last = 3
EASIER WAY
Hardcore CSS
ADVANCED(ISH) DETAILS
The Box Model
THE BOX MODEL
More Box Model
THE BOX MODEL
[attr] – attr exists[attr=val] – value equals[attr~=val] – exists in whitespace set
[attr|=val] – value followed by a dash
[attr^=val] – value begins with
[attr$=val] – value ends with
[attr*=val] – value contains
ATTRIBUTE MATCHING
:nth-child(N):nth-last-child(N):nth-of-type(N):first-child:last-child:empty:target:enabled:disabled:not(S)
PSEUDO CLASSES
Hardcore CSSCSS3 FUN THINGS
FontsTypekitGoogle FontsFontSquirrel
Baby TypographyTracking (not Kerning)Leading
Shadows
BoxesBorder typesBorder RadiusOutlineBox Shadow
box-shadow: 6px 6px 6px 6px #666; [right] [down] [blur] [width] #[color];
BackgroundsGradients
lea.verou.me/demos/cssgradientsplease
Patterns lea.verou.me/css3patterns
background-image: -webkit-linear-gradient( bottom, rgb(4,4,133) 15%, rgb(40,66,171) 58% );
TransformsMost browsers require a prefix
-o-transform: …;-ms-transform: …;-moz-transform: …;-webkit-transform: …;
Rotatetransform: rotate(20deg);
Scaletransform: scale(2, 2);
TransitionsBest in reaction to something!
TimingEasing
Hardcore CSSMEDIA
MEDIA TYPES
Media Type
Description
all All media type devices
aural Speech and sound synthesizers
braille Braille tactile feedback devices
embosses Paged braille printers
handheld Small or handheld devices
print Printers
projection Projected presentations, like slides
screen Computer screens (and mobile screens)
tty Media using a fixed-pitch character grid, like terminals
tv Television-type devices
External Media Attribute<link rel="stylesheet” media="print" href="printer.css" />
Inline Media Rule@media print { body { color:black; }}
MEDIA
Hardcore CSS (BEST?) PRACTICES
Problem:Browsers still have different default behaviors
Solution:Reset CSS
BEST PRACTICES
* { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0;}
BEST PRACTICES
yui.yahooapis.com/3.5.1/build/cssreset/cssreset.css
Problem:Some Browsers (*cough*IE*cough*) do not recognize HTML5 elements
Solution:Modernizr
(Best?) Practices
BEST PRACTICES
Problem:Some browsers pre implemented CSS3
Solution:Know the prefixes
-o- = Opera -moz- = Mozilla (Firefox) -webkit- = Webkit (Chrome, Safari, iOS)
(Best?) Practices
BEST PRACTICES
Problem:EMs are inconsistent
Solution:Set font size to 10px
html, body { font-size:10px;}
(Best?) Practices
BEST PRACTICES
Hardcore CSSLAYOUTS
Classic floatsOne True Layout
positioniseverything.net/articles/onetruelayout
The Holy Grailalistapart.com/articles/holygrail
Floats
LAYOUTS
Multicolumns
CSS3 Mult icolumns
LAYOUTS
Display Box
CSS3 Display Box
LAYOUTS
Elastic
Elastic
LAYOUTS
Fluid
Fluid
LAYOUTS
ResponsiveJust change layout using media queries
@media only screen and (max-device-width: 480px) { body { font-size:10px; }}
Responsive
LAYOUTS
PD
X W
&D
UP
CO
MIN
GSummer Social & Lightning Talks
Thursday, Aug 9Webtrends (that would be here)
Rails Girls PDXSeptember 7-8Signup at RailsGirls.com (ladies only)