better html & css tutorial

8/12/2019 Better HTML & CSS Tutorial

1/101

WRITINGBETTER HTML & CSS


2/101

[email protected]

@chriscoyier

CHRISCOYIER


3/101


4/101

BETTER?1 Less of it2 More Semantic

3 More Accessible

4 Futureproof

// Speed

// Maintainability

// SEO

// Happy People


5/101

231


6/101

HOW WUFOODOES CSS1


7/101

No inline styles or blocks

Only 2 CSS files per page (Global + Site Section)

These 2 are made from combined smaller files(like design patterns or site sub sections)

Versioned in production (dynamic.13432.css)Timestamped in development (dynamic.TIMESTAMP.css)

Reuse everything (e.g. table.css)

Work in chunks (e.g. print.css)

RULES


8/101

SIMPLIFIED SITE STRUCTURE


9/101


10/101

GLOBAL CSS


11/101

SITE SECTION CSS


12/101

SITE SECTION CSS


13/101


14/101

{autoVersion}/css/global/dynamic.css{/autoVersion}

{autoVersion}/css/landing/dynamic.css{/autoVersion}

Smarty function (could be any server side language)


15/101

AddHandlerapplication/x-httpd-php .php .html .xml .css .js

.htaccess


16/101

/css/global/dynamic.css


17/101

/css/landing/dynamic.css


18/101

1) Fetches all files

2) Minifies*

3) Combines Together*

4) Adds version number

AutoVersion function:


19/101


20/101

global/dynamic.css

Loaded on every page of site

Put as much as practical in here. User only loads thisfile once, so maximizes use of browser cache.

Common design patterns are in here(buttons.css, lightbox.css, forms.css)


21/101

area/dynamic.css

Loaded in specific area of site

Less common design patterns in here(graph.css, calendar.css, table.css)


22/101

global/css/global/structure.css/css/global/buttons.css/css/global/lightbox.css

/css/global/form.css

area/css/admin/manager.css


23/101

area/css/widgets/datagrid.css/css/global/filter.css/css/global/calendar.css/css/global/quicksearch.css/css/entries/structure.css

/css/entries/print.css

global/css/global/structure.css/css/global/buttons.css/css/global/lightbox.css/css/global/form.css


24/101

area/css/docs/docs.css/css/global/table.css

global/css/global/structure.css/css/global/buttons.css/css/global/lightbox.css

/css/global/form.css


25/101

ALLCSS

is in /css/

organized by

site section


26/101

2


27/101

Primary color #BADA55 / Secondary color #F00

Headers should be 20px from navigation and

15px from following content

Logo should have 30px of padding around it Links should have 1px dotted bottom borders

BIG FANCY STYLE GUIDE

Good thinking Well intentioned


28/101

thats what

GLOBAL.CSSis for


29/101

NEED TO DEVIATE?Really? Do you?

BYSECTION


30/101

STYLEONLY



31/101

TOTALLYUNIQUE



32/101

DONTOVERTHINKIT

/* Good thing we specified this link is a

descendant of html, so none of those

crazy outsider links get this style */

htmlbody#page-wrap.innerulliullia{

font-size:0.8em;

}

lililili{

font-size:1.0em;

/* Erm, use REM */

}

a{ text-decoration:none;

}

/* Killing a fly with a jackhammer */

#page-wrapa{

text-decoration:underline;

}

/* Thus begins a nasty cycle */

asidea{

text-decoration:none!important;

}


33/101

CHALLENGE:Dont use IDs in your

CSS whatsoever forone small project.

Just try it


34/101


35/101

PSEUDOELEMENTS3:visited :hover :active :link

:first-child :last-child :nth-child() :nth-of-type():enabled :disabled :checked :indeterminate

:focus :target :root :lang()

pseudo classselectors

http://css-tricks.com/pseudo-class-selectors/


36/101

:before:after


37/101

In

div:before {content: "Robots ";

}

HTML

CSS

In


38/101

In


}

In

div:after {

content: " Disguise";}

Robots Disguise

HTML

CSS


39/101


40/101

So whats withthe different name?

Pseudo selectorsselect elements thatalready exist(perhaps in different states).

Pseudo elementscreate new content thatdoesnt exist (yet).


41/101

::before::after

::first-line ::first-letter


42/101

:before:after

:first-line :first-letter


43/101

In


}

In

div:after {

content: " Disguise";}

Robots Disguise

HTML

CSS


44/101

In

Resulting

HTML

(sorta)


45/101

Robots InDisguise

Notbefore/after the element...

Resulting

HTML

(sorta)


46/101


47/101

Blah blah blah

More stuff
Nothing to see here.
Resulting

HTML

(sorta)


48/101

ELOT!


49/101

CAMELO

T!

CAMELO

T!

CAMELO

T!


50/101


51/101

BUTTONSWITHICONS


52/101

CSS

.button { /* Awesome gradients and stuff */}

.button img { /* Probably some margin and stuff */}

HTML

Visit Our Form Gallery


53/101

alt=""equals

Thats not important.Screen readers dont need to see that.


54/101

alt=""equals

Then get that mothersuckeroutof yourHTML

l b b ll h f h // f / ll /


55/101

HTML

CSS

.button { /* Awesome gradients and stuff */}

.button-gallery:before{ content:url(/images/icon_gallery.png);}



56/101

x200


200 extralines of HTML

200 places you arent being semantic

200 places you need to change one-by-one200 opportunities to be more efficient


57/101


58/101

Thats a website Its abstract Deal with it


59/101


60/101


61/101

CSS

html {

background: red;}


62/101


63/101


64/101

EFFICIENCY!


65/101


66/101


67/101


68/101

spritecow.com


69/101


70/101

UNFORTUNATENAME


71/101

h1:before {content: Wufoo;

}

h2:before {

content: Making forms easy + fast + fun;}

HTML

CSS


72/101


73/101

SCREEN READERS

NVDA doesnt read

Jaws doesnt read

Window Eyes doesnt read

VoiceOver (OS X) does read

Testing (mostly) by Lucica Ibanescuhttp://cssgallery.info/testing-the-accessibility-of-the-css-generated-content/


74/101

Bad for accessibilityBad semantically

Bad for SEO


75/101

content: ?

What can content be?


76/101

TEXT / STRINGcontent: $;content: \0022;


77/101

IMAGEcontent: url(i/icon-smile.png);content: -webkit-linear-gradient(...);

Behaves like an

Needs dimensions


78/101

ATTRIBUTEcontent: attr(href);content: attr(data-city);


79/101

COUNTERcontent: counter(li);

On li t

On list items


80/101

NOTHINGcontent: ;


81/101

HTMLcontent: Nope;


82/101

.price:before { content: $;}

[lang=cn] .price:before,.price[lang=cn]:before { content: \00a5;}

30100


83/101

http://www.456bereastreet.com/lab/styling-ordered-list-numbers/

ol { counter-reset: li; list-style: none;}ol > li:before { content: counter(li); counter-increment: li;

background: #666; color: white; padding: 10px;}

COMBINING WITH MEDIA QUERIES


84/101

COMBINING WITH MEDIA QUERIES

mobile portrait

CSS @media(min-width: 1001px){

aside li a:after {


85/101

aside li a:after {

content: " (" attr(data-email) ")";

font-size: 11px;

font-style: italic;

color: #666; }

}

@media(max-width: 1000px) and (min-width: 700px){

aside li a:before {

content: "Email: "; font-style: italic;

color: #666; }

}

@media(max-width: 699px) and (min-width: 520px),

(min-width: 1151px){

aside li a {

padding-left: 21px;

background: url(i/email.png) left center no-repeat; }

}

S lf!


86/101

Self!

You know whatwould be neat?

You fade inpseudo elements

on hover.

TOTAL


87/101

TOTALEPIC

FRICKINGDISASTER


88/101

You cant animate

or transitionpseudo elements.


89/101


90/101

a {

position: relative;}a:after { content: attr(data-tooltip); position: absolute; bottom: 100%;

left: 20px; background: yellow; opacity: 0;}a:hover:after { opacity: 1;

}a:before { /* triangle action */}


91/101

Nicolas

Dr. Pseudo ElementGallagher

http://nicolasgallagher.com/

@necolas

You cant talk about Pseudo Elements

without talking about...


92/101


93/101

Multiple Backgrounds Multiple Borders

Background Opacity

Clear Floats

Responsive Data Tables

http://css-tricks.com/9516-pseudo-element-roundup/

Sh !


94/101

Shapes!Theseare

easy.

Thesearelesseasy.

.star {


95/101

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;

}


96/101

http://css-tricks.com/examples/ShapesOfCSS/
http://css-tricks.com/examples/ShapesOfCSS/http://css-tricks.com/examples/ShapesOfCSS/http://css-tricks.com/examples/ShapesOfCSS/


97/101

http://nicolasgallagher.com/pure-css-gui-icons/demo/


98/101


99/101

231

Links


100/101

Linkshttp://necolas.github.com/normalize.css/

http://snook.ca/archives/html_and_css/font-size-with-rem

http://particletree.com/notebook/automatically-version-your-css-and-javascript-files/http://css-tricks.com/855-specifics-on-css-specificity/

Photoshttp://www.flickr.com/photos/webel/347801397/

TypeGotham Condensed

Gotham Rounded

TUNGSTENWhitney


101/101

Thanks!bit.ly/fowa-better-css

better html & css tutorial

Documents