hardcore css
TRANSCRIPT
![Page 1: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/1.jpg)
Eric Redmond@coderoshi
HARDCORE CSSPDX Web & Design
![Page 2: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/2.jpg)
Hardcore CSS
A SHORT HISTORY OF CSS
![Page 3: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/3.jpg)
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
![Page 4: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/4.jpg)
Cascading HTML style sheets – a proposalOct 10, 1994Håkon W Lie (CERN) proposes
A SHORT HISTORY OF CSS
![Page 5: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/5.jpg)
Cascading HTML style sheets – a proposalOct 10, 1994Håkon W Lie (CERN) proposes
A SHORT HISTORY OF CSS
![Page 6: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/6.jpg)
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
![Page 7: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/7.jpg)
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
![Page 8: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/8.jpg)
Hardcore CSSSELECTORS
![Page 9: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/9.jpg)
UniversalElementsClassesIDsAttributesPseudo classesPseudo elements
SELECTORS
![Page 10: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/10.jpg)
<em>I’m Arial too!</em>
* { font-family: Arial;}
Universal
SELECTORS
![Page 11: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/11.jpg)
<strong> hulk smash</strong>
strong { color: green; text-transform:uppercase;}
Elements
SELECTORS
![Page 12: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/12.jpg)
<span class=superhero> Iron Man</span>
.superhero { font-family: 'International Super
Hero';}
Classes
SELECTORS
![Page 13: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/13.jpg)
<div id=main> My main content.</div>
#main { border:1px solid green; padding:1em;}
IDs
SELECTORS
![Page 14: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/14.jpg)
<article role=main> My main content.</article>
[role=main] { border:1px solid green; padding:1em;}
IDs
SELECTORS
![Page 15: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/15.jpg)
<ul> <li>Item 1</li> <li>Item 2</li></ul>
li:first-child { color:red;}
Pseudo Classes
SELECTORS
![Page 16: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/16.jpg)
<h1> Excelsior</h1>
h1:after { content: '!';}
Pseudo Elements
SELECTORS
![Page 17: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/17.jpg)
<h1>Page Title<h1><section> <h1>Section Title</h1></section>
section h1 { color:blue;}
Nesting
SELECTORS
![Page 18: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/18.jpg)
<h1>Page Title<h1><section> <h1>Section Title</h1></section>
section h1 { color:blue;}
Nesting
SELECTORS
![Page 19: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/19.jpg)
Hardcore CSSSPECIFICITY
![Page 20: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/20.jpg)
<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
![Page 21: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/21.jpg)
SELECTOR SPECIFICITY
![Page 22: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/22.jpg)
…What?SELECTOR SPECIFICITY
![Page 23: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/23.jpg)
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
![Page 24: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/24.jpg)
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
![Page 25: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/25.jpg)
I.C.A.T. IDs > Classes/Attributes > TypesPseudos are of their kind
Pseudo-classes are classes Pseudo-elements are elements (types)
EASIER WAY
![Page 26: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/26.jpg)
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
![Page 27: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/27.jpg)
Hardcore CSS
ADVANCED(ISH) DETAILS
![Page 28: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/28.jpg)
The Box Model
THE BOX MODEL
![Page 29: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/29.jpg)
More Box Model
THE BOX MODEL
![Page 30: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/30.jpg)
[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
![Page 31: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/31.jpg)
:nth-child(N):nth-last-child(N):nth-of-type(N):first-child:last-child:empty:target:enabled:disabled:not(S)
PSEUDO CLASSES
![Page 32: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/32.jpg)
Hardcore CSSCSS3 FUN THINGS
![Page 33: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/33.jpg)
FontsTypekitGoogle FontsFontSquirrel
Baby TypographyTracking (not Kerning)Leading
Shadows
![Page 34: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/34.jpg)
BoxesBorder typesBorder RadiusOutlineBox Shadow
box-shadow: 6px 6px 6px 6px #666; [right] [down] [blur] [width] #[color];
![Page 35: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/35.jpg)
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% );
![Page 36: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/36.jpg)
TransformsMost browsers require a prefix
-o-transform: …;-ms-transform: …;-moz-transform: …;-webkit-transform: …;
![Page 37: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/37.jpg)
Rotatetransform: rotate(20deg);
Scaletransform: scale(2, 2);
![Page 38: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/38.jpg)
TransitionsBest in reaction to something!
TimingEasing
![Page 39: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/39.jpg)
Hardcore CSSMEDIA
![Page 40: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/40.jpg)
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
![Page 41: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/41.jpg)
External Media Attribute<link rel="stylesheet” media="print" href="printer.css" />
Inline Media Rule@media print { body { color:black; }}
MEDIA
![Page 42: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/42.jpg)
Hardcore CSS (BEST?) PRACTICES
![Page 43: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/43.jpg)
Problem:Browsers still have different default behaviors
Solution:Reset CSS
BEST PRACTICES
![Page 44: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/44.jpg)
* { 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
![Page 45: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/45.jpg)
yui.yahooapis.com/3.5.1/build/cssreset/cssreset.css
![Page 46: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/46.jpg)
Problem:Some Browsers (*cough*IE*cough*) do not recognize HTML5 elements
Solution:Modernizr
(Best?) Practices
BEST PRACTICES
![Page 47: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/47.jpg)
Problem:Some browsers pre implemented CSS3
Solution:Know the prefixes
-o- = Opera -moz- = Mozilla (Firefox) -webkit- = Webkit (Chrome, Safari, iOS)
(Best?) Practices
BEST PRACTICES
![Page 48: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/48.jpg)
Problem:EMs are inconsistent
Solution:Set font size to 10px
html, body { font-size:10px;}
(Best?) Practices
BEST PRACTICES
![Page 49: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/49.jpg)
Hardcore CSSLAYOUTS
![Page 50: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/50.jpg)
Classic floatsOne True Layout
positioniseverything.net/articles/onetruelayout
The Holy Grailalistapart.com/articles/holygrail
Floats
LAYOUTS
![Page 51: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/51.jpg)
Multicolumns
CSS3 Mult icolumns
LAYOUTS
![Page 52: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/52.jpg)
Display Box
CSS3 Display Box
LAYOUTS
![Page 53: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/53.jpg)
Elastic
Elastic
LAYOUTS
![Page 54: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/54.jpg)
Fluid
Fluid
LAYOUTS
![Page 55: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/55.jpg)
ResponsiveJust change layout using media queries
@media only screen and (max-device-width: 480px) { body { font-size:10px; }}
Responsive
LAYOUTS
![Page 56: Hardcore CSS](https://reader034.vdocuments.site/reader034/viewer/2022042512/5562f6e5d8b42a275f8b46df/html5/thumbnails/56.jpg)
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)