WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) •...
Transcript of WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) •...
![Page 1: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/1.jpg)
WRITE BETTER HTML BYWRITING BETTER CSS
![Page 2: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/2.jpg)
THE ROYAL WEChris Coyier @chriscoyier
![Page 3: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/3.jpg)
BETTER?1 Less of it2 More Semantic3 More Accessible4 Futureproof
// Speed// Maintainability// SEO// Happy People
![Page 4: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/4.jpg)
123
![Page 5: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/5.jpg)
HOW WUFOO DOES CSS1
![Page 6: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/6.jpg)
• 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.css?time=xxx)
• No inline styles or <style> blocks
• Reuse everything (e.g. table.css)
•Work in chunks (e.g. print.css)
“RULES”
![Page 7: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/7.jpg)
SIMPLIFIED SITE STRUCTURE
![Page 8: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/8.jpg)
GLOBAL CSS
![Page 9: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/9.jpg)
GLOBAL CSS
![Page 10: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/10.jpg)
SITE SECTION CSS
![Page 11: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/11.jpg)
SITE SECTION CSS
![Page 12: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/12.jpg)
![Page 13: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/13.jpg)
<!DOCTYPE html>
<head>
{autoVersion}/css/global/dynamic.css{/autoVersion} {autoVersion}/css/landing/dynamic.css{/autoVersion}
Smarty function (could be any server side language)
![Page 14: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/14.jpg)
AddHandler application/x-httpd-php .php .html .xml .css .js
.htaccess
![Page 15: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/15.jpg)
<?phprequire_once($GLOBALS['root'].'/library/services/AutoVersion.php');
$fileArray = array( '/css/global/structure.css', '/css/global/buttons.css', '/css/global/lightbox.css', '/css/global/form.css');
$av = new AutoVersion();$av->fly($dynamicURL,$fileArray);?>
/css/global/dynamic.css
![Page 16: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/16.jpg)
<?phprequire_once($GLOBALS['root'].'/library/services/AutoVersion.php');
$fileArray = array( '/css/landing/structure.css', '/css/landing/table.css', '/css/landing/else.css', '/css/landing/signup.css', '/css/landing/tour.css');
$av = new AutoVersion();$av->fly($dynamicURL,$fileArray);?>
/css/landing/dynamic.css
![Page 17: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/17.jpg)
1) Fetches all files
2) Combines together
3) Minifies
4) Adds version number
AutoVersion function
![Page 18: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/18.jpg)
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="/css/global/dynamic.1234.css"> <link rel="stylesheet" href="/css/landing/dynamic.1234.css">
![Page 19: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/19.jpg)
global/dynamic.css
• Loaded on every page of site
• Put as much as practical in here. User only loads this file once, so maximizes use of browser cache.
• Common design patterns are in here(buttons.css, lightbox.css, forms.css)
![Page 20: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/20.jpg)
area/dynamic.css
• Loaded in specific area of site
• Less common design patterns in here(graph.css, calendar.css, table.css)
![Page 21: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/21.jpg)
global/css/global/structure.css/css/global/buttons.css/css/global/lightbox.css/css/global/form.css
area/css/admin/manager.css
![Page 22: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/22.jpg)
global/css/global/structure.css/css/global/buttons.css/css/global/lightbox.css/css/global/form.css
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
![Page 23: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/23.jpg)
global/css/global/structure.css/css/global/buttons.css/css/global/lightbox.css/css/global/form.css
area/css/docs/docs.css/css/global/table.css
![Page 24: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/24.jpg)
ALLCSS
is in /css/
organized by site section
![Page 25: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/25.jpg)
DON’T OVERTHINK IT2
![Page 26: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/26.jpg)
• 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
![Page 27: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/27.jpg)
that’s what
GLOBAL.CSSis for
![Page 28: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/28.jpg)
NEED TO DEVIATE?Really? Do you?
BYSECTION
![Page 29: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/29.jpg)
STYLEONLY
NEED TO DEVIATE?Really? Do you?
![Page 30: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/30.jpg)
TOTALLYUNIQUE
NEED TO DEVIATE?Really? Do you?
![Page 31: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/31.jpg)
DON’T OVERTHINK IT
![Page 32: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/32.jpg)
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/
![Page 33: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/33.jpg)
:before:after
![Page 34: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/34.jpg)
<div>In</div>
div:before { content: "Robots "; }
HTML
CSS
In
![Page 35: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/35.jpg)
<div>In</div>
div:before { content: "Robots "; }
In
div:after { content: " Disguise"; }
Robots Disguise
HTML
CSS
![Page 36: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/36.jpg)
![Page 37: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/37.jpg)
So what’s with the different name?
Pseudo selectors select elements that already exist (perhaps in different states).
Pseudo elements create new content that doesn’t exist (yet).
![Page 38: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/38.jpg)
::before::after
::first-line ::first-letter
![Page 39: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/39.jpg)
:before:after
:first-line :first-letter
![Page 40: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/40.jpg)
<div>In</div>
div:before { content: "Robots "; }
In
div:after { content: " Disguise"; }
Robots Disguise
HTML
CSS
![Page 41: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/41.jpg)
<div> In</div>
ResultingHTML
(sorta)
![Page 42: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/42.jpg)
Robots<div> In</div>Disguise
Not “before/after the element”...
ResultingHTML
(sorta)
![Page 43: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/43.jpg)
<div> Robots In Disguise</div>
It’s before/after the content inside.
ResultingHTML
(sorta)
![Page 44: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/44.jpg)
<div> <h1>Blah blah blah</h1> <p>More stuff</p> Nothing to see here.</div>
ResultingHTML
(sorta)
![Page 45: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/45.jpg)
<div> Robots <h1>Blah blah blah</h1> <p>More stuff</p> Nothing to see here. Disguise</div>
ResultingHTML
(sorta)
![Page 46: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/46.jpg)
It’s only a model... (Not really in DOM)
CAMELOT!CAMELOT!
CAMELOT!
![Page 47: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/47.jpg)
<img src=”robot.jpg” alt=”Robot”>
<input type=”email” name=”email” />
<br>
Not for “no content” elements
• Allows but shouldn’t• Styles as if was inside
• Checkboxes• Radio Buttons
![Page 48: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/48.jpg)
CSS
.button { /* Awesome gradients and stuff */}.button img { /* Probably some margin and stuff */}
HTML
<a class=”button” href=”http://wufoo.com/gallery/”> <img src=”/images/icon_gallery.png” alt=””> Visit Our Form Gallery</a>
![Page 49: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/49.jpg)
alt=""equals
That’s not important. Screen readers don’t need to see that.
![Page 50: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/50.jpg)
alt=""equals
Then get that mothersuckerout of your HTML
![Page 51: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/51.jpg)
HTML
CSS
.button { /* Awesome gradients and stuff */}.button-gallery:before { content: url(/images/icon_gallery.png);}
<a class=”button button-gallery” href=”http://wufoo.com/gallery/”> Visit Our Form Gallery</a>
![Page 52: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/52.jpg)
x200<a class=”button” href=”http://wufoo.com/gallery/”> <img src=”/images/icon_gallery.png” alt=””> Visit Our Form Gallery</a>
200 extra lines of HTML200 places you aren’t being semantic200 places you need to change one-by-one200 opportunities to be more efficient
![Page 53: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/53.jpg)
![Page 54: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/54.jpg)
<html style=”background: yellow;”>
That’s a website. It’s abstract. Deal with it.
![Page 55: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/55.jpg)
![Page 56: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/56.jpg)
CSS
![Page 57: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/57.jpg)
CSShtml { background: red;}
![Page 58: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/58.jpg)
![Page 59: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/59.jpg)
![Page 60: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/60.jpg)
Efficiency!
![Page 61: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/61.jpg)
![Page 62: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/62.jpg)
<a class=”button button-gallery” href=”http://wufoo.com/gallery/”> Visit Our Form Gallery</a> x200
.button-gallery:before { content: url(/images/icon_gallery.png); content: “”; display: inline-block; width: 16px; height: 16px; background-image: url(/images/sprite.png); background-position: -32px -32px;}
![Page 63: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/63.jpg)
spritecow.com
![Page 64: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/64.jpg)
spriteme.org
![Page 65: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/65.jpg)
RABBLE RABBLE RABBLE!
![Page 66: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/66.jpg)
<h1></h1><h2></h2>
h1:before {content: “Wufoo”;
}h2:before {
content: “Making forms easy + fast + fun”;}
HTML
CSS
![Page 67: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/67.jpg)
Bad for accessibilityBad semantically
Bad for SEO
![Page 68: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/68.jpg)
SCREEN READERSNVDA doesn’t read
Jaws doesn’t read
Window Eyes doesn’t read
VoiceOver (OS X) does read
Testing (mostly) by Lucica Ibanescuhttp://cssgallery.info/testing-the-accessibility-of-the-css-generated-content/
![Page 69: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/69.jpg)
.thing:before { content: ?}
What can content be?
![Page 70: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/70.jpg)
TEXT / STRINGcontent: “$”;
content: “\0022”;
![Page 71: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/71.jpg)
IMAGEcontent: url(i/icon-smile.png);
content: -webkit-linear-gradient(...);
Behaves like an <img>
Needs dimensions
![Page 72: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/72.jpg)
ATTRIBUTEcontent: attr(href);
content: attr(data-city);
![Page 73: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/73.jpg)
COUNTERcontent: counter(li);
counter-increment: li;counter-reset: li;
On list
On list items
![Page 74: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/74.jpg)
NOTHINGcontent: “”;
![Page 75: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/75.jpg)
HTMLcontent: “<h1>Nope</h1>”;
![Page 76: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/76.jpg)
[lang=‘cn’] .price:before, .price[lang=‘cn’]:before { content: ‘\00a5’;}
<div class="price">30</div><div class="price" lang="cn">100</div>
TEXT / STRING
![Page 77: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/77.jpg)
http://www.456bereastreet.com/lab/styling-ordered-list-numbers/
COUNTERol { counter-reset: li;}ol > li:before { content: counter(li); counter-increment: li;}
![Page 78: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/78.jpg)
ATTRIBUTE<a href=”#” data-tooltip=”is hot.”> Your mom</a>
a[data-tooltip] { position: relative;}a[data-tooltip]:after { content: attr(data-tooltip); position: absolute; /* Fancy styles */ opacity: 0;}a[data-tooltip]:hover:after { opacity: 1;}
![Page 79: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/79.jpg)
COMBINING WITH MEDIA QUERIES
![Page 80: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/80.jpg)
http://css-tricks.com/css-media-queries/
mobile portrait
mobile landscape
tablet
small monitor
large monitor
![Page 81: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/81.jpg)
Nicolas “Dr. Pseudo Element”
Gallagherhttp://nicolasgallagher.com/
@necolas
You can’t talk about Pseudo Elementswithout talking about...
![Page 82: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/82.jpg)
![Page 83: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/83.jpg)
Shapes!These are easy.
These are less easy.
![Page 84: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/84.jpg)
.star { 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;}
![Page 85: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/85.jpg)
http://css-tricks.com/examples/ShapesOfCSS/
![Page 86: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/86.jpg)
http://nicolasgallagher.com/pure-css-gui-icons/demo/
![Page 87: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/87.jpg)
Browser Support
3.5+3.0- positioning issues
6+ 9+8 :: / :hover / z-index7-
1+
1.3+
http://css-tricks.com/browser-support-pseudo-elements/
Remember, CSS TWO not THREE
85%CSS-Tricks97%
Other tech92%
![Page 88: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/88.jpg)
MORE
http://css-tricks.com/9516-pseudo-element-roundup/
![Page 89: WRITE BETTER HTML BY WRITING BETTER CSS...• Only 2 CSS files per page (Global + Site Section) • These 2 are made from combined smaller files (like design patterns or site sub sections)](https://reader034.fdocuments.net/reader034/viewer/2022050516/5faf76fb63121025f54d971c/html5/thumbnails/89.jpg)
Linkshttp://necolas.github.com/normalize.css/
http://snook.ca/archives/html_and_css/font-size-with-remhttp://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 RoundedTUNGSTEN
Whitney