Hardcore CSS

56
Eric Redmond @coderoshi HARDCORE CSS PDX Web & Design

Transcript of Hardcore CSS

Page 1: Hardcore CSS

Eric Redmond@coderoshi

HARDCORE CSSPDX Web & Design

Page 2: Hardcore CSS

Hardcore CSS

A SHORT HISTORY OF CSS

Page 3: Hardcore 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

Page 4: Hardcore CSS

Cascading HTML style sheets – a proposalOct 10, 1994Håkon W Lie (CERN) proposes

A SHORT HISTORY OF CSS

Page 5: Hardcore CSS

Cascading HTML style sheets – a proposalOct 10, 1994Håkon W Lie (CERN) proposes

A SHORT HISTORY OF CSS

Page 6: Hardcore 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

Page 7: Hardcore 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

Page 8: Hardcore CSS

Hardcore CSSSELECTORS

Page 9: Hardcore CSS

UniversalElementsClassesIDsAttributesPseudo classesPseudo elements

SELECTORS

Page 10: Hardcore CSS

<em>I’m Arial too!</em>

* { font-family: Arial;}

Universal

SELECTORS

Page 11: Hardcore CSS

<strong> hulk smash</strong>

strong { color: green; text-transform:uppercase;}

Elements

SELECTORS

Page 12: Hardcore CSS

<span class=superhero> Iron Man</span>

.superhero { font-family: 'International Super

Hero';}

Classes

SELECTORS

Page 13: Hardcore CSS

<div id=main> My main content.</div>

#main { border:1px solid green; padding:1em;}

IDs

SELECTORS

Page 14: Hardcore CSS

<article role=main> My main content.</article>

[role=main] { border:1px solid green; padding:1em;}

IDs

SELECTORS

Page 15: Hardcore CSS

<ul> <li>Item 1</li> <li>Item 2</li></ul>

li:first-child { color:red;}

Pseudo Classes

SELECTORS

Page 16: Hardcore CSS

<h1> Excelsior</h1>

h1:after { content: '!';}

Pseudo Elements

SELECTORS

Page 17: Hardcore CSS

<h1>Page Title<h1><section> <h1>Section Title</h1></section>

section h1 { color:blue;}

Nesting

SELECTORS

Page 18: Hardcore CSS

<h1>Page Title<h1><section> <h1>Section Title</h1></section>

section h1 { color:blue;}

Nesting

SELECTORS

Page 19: Hardcore CSS

Hardcore CSSSPECIFICITY

Page 20: Hardcore CSS

<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

SELECTOR SPECIFICITY

Page 22: Hardcore CSS

…What?SELECTOR SPECIFICITY

Page 23: Hardcore CSS

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

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

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

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

Hardcore CSS

ADVANCED(ISH) DETAILS

Page 28: Hardcore CSS

The Box Model

THE BOX MODEL

Page 29: Hardcore CSS

More Box Model

THE BOX MODEL

Page 30: Hardcore CSS

[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

: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

Hardcore CSSCSS3 FUN THINGS

Page 33: Hardcore CSS

FontsTypekitGoogle FontsFontSquirrel

Baby TypographyTracking (not Kerning)Leading

Shadows

Page 34: Hardcore CSS

BoxesBorder typesBorder RadiusOutlineBox Shadow

box-shadow: 6px 6px 6px 6px #666; [right] [down] [blur] [width] #[color];

Page 35: Hardcore CSS

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

TransformsMost browsers require a prefix

-o-transform: …;-ms-transform: …;-moz-transform: …;-webkit-transform: …;

Page 37: Hardcore CSS

Rotatetransform: rotate(20deg);

Scaletransform: scale(2, 2);

Page 38: Hardcore CSS

TransitionsBest in reaction to something!

TimingEasing

Page 39: Hardcore CSS

Hardcore CSSMEDIA

Page 40: Hardcore CSS

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

External Media Attribute<link rel="stylesheet” media="print" href="printer.css" />

Inline Media Rule@media print { body { color:black; }}

MEDIA

Page 42: Hardcore CSS

Hardcore CSS (BEST?) PRACTICES

Page 43: Hardcore CSS

Problem:Browsers still have different default behaviors

Solution:Reset CSS

BEST PRACTICES

Page 44: Hardcore CSS

* { 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

yui.yahooapis.com/3.5.1/build/cssreset/cssreset.css

Page 46: Hardcore CSS

Problem:Some Browsers (*cough*IE*cough*) do not recognize HTML5 elements

Solution:Modernizr

(Best?) Practices

BEST PRACTICES

Page 47: Hardcore CSS

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

Problem:EMs are inconsistent

Solution:Set font size to 10px

html, body { font-size:10px;}

(Best?) Practices

BEST PRACTICES

Page 49: Hardcore CSS

Hardcore CSSLAYOUTS

Page 50: Hardcore CSS

Classic floatsOne True Layout

positioniseverything.net/articles/onetruelayout

The Holy Grailalistapart.com/articles/holygrail

Floats

LAYOUTS

Page 51: Hardcore CSS

Multicolumns

CSS3 Mult icolumns

LAYOUTS

Page 52: Hardcore CSS

Display Box

CSS3 Display Box

LAYOUTS

Page 53: Hardcore CSS

Elastic

Elastic

LAYOUTS

Page 54: Hardcore CSS

Fluid

Fluid

LAYOUTS

Page 55: Hardcore CSS

ResponsiveJust change layout using media queries

@media only screen and (max-device-width: 480px) { body { font-size:10px; }}

Responsive

LAYOUTS

Page 56: Hardcore CSS

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)