beautiful web Andy Clarke is a digital designer, speaker, and writer whose designs have helped companies around the world to increase their sales pipeline and revenue, and charities to increase donations. He founded Stuff & Nonsense and has consulted and designed for clients including Disney Store UK, Fairfax Media, Home Office (UK), Greenpeace, ISO, SAP, STV, SunLife, WIPO, and WWF. He works on creative website and digital product designs and provides ongoing creative direction. He coaches agencies and mentors designers on dealing with clients, and delivering creative projects. If you’re looking to design better digital products and websites, develop a design system or style guide, or want to understand how design can help your business, you should talk to him. Stuff & Nonsense Ltd. Eversleigh, Lon Capel, Gwaenysgor, Flintshire, LL18 6EJ, UK For work enquiries go to stuffandnonsense.co.uk or call +44 (0)1745 851848
I V E E N H A N C E M E N T Applying progressive enhancement across technologies: ‐ CSS for visual styling ‐ JavaScript and the DOM for behavior ‐ AJAX and related sets of technologies
I V E E N H A N C E M E N T Applying progressive enhancement across technologies: ‐ CSS for visual styling ‐ JavaScript and the DOM for behavior ‐ AJAX and related sets of technologies
I V E E N H A N C E M E N T Applying progressive enhancement across technologies: ‐ CSS for visual styling ‐ JavaScript and the DOM for behavior ‐ AJAX and related sets of technologies
R O W S E R S U P P O R T “Support does not mean that everybody gets the same thing. Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the web.” NATE KOECHLEY DEVELOPER.YAHOO.COM/YUI/ARTICLES/GBS/GBS.HTML
U L M A R K U P <hx> = heading <p> = paragraph <ul> = unordered list <ol> = ordered list <dl> = definition list (name/value pairs) <blockquote> = block quotation
N H T M L E L E M E N T S <del> = deleted text <ins> = inserted text <kbd> = computer or programming related <q> = inline quotations <cite> = citation URLs
W E B ‐ Semantics for machines first, people second ‐ Access to multiple sources and global sharing of data ‐ RDF (Resource Description Format) ‐ OWL (Web Ontology Language) ‐ Implementations, applications and user agents are years away ‐ Relies on emerging technologies
C A L E N D A R For marking up information about events such as meetings, conferences and concerts H R E V I E W For marking up reviews including products and events W H AT A R E M I C R O F O R M AT S ?
C A L E N D A R For marking up information about events such as meetings, conferences and concerts H R E V I E W For marking up reviews including products and events W H AT A R E M I C R O F O R M AT S ?
C A L E N D A R For marking up information about events such as meetings, conferences and concerts H R E V I E W For marking up reviews including products and events W H AT A R E M I C R O F O R M AT S ?
R S U S I N G M I C R O F O R M AT S C O R K D (corkd.com) Publishes wine reviews using hReview, profiles using hCard and relationships using XFN F L I C K R (flickr.com) Geotagging of photos, publishes profiles using hCard L A S T. F M (last.fm) Publishes concert information using hCalendar U P C O M I N G (upcoming.org) Publishes event information using hCalendar and profiles using hCard
R S U S I N G M I C R O F O R M AT S C O R K D (corkd.com) Publishes wine reviews using hReview, profiles using hCard and relationships using XFN F L I C K R (flickr.com) Geotagging of photos, publishes profiles using hCard L A S T. F M (last.fm) Publishes concert information using hCalendar U P C O M I N G (upcoming.org) Publishes event information using hCalendar and profiles using hCard
R S U S I N G M I C R O F O R M AT S C O R K D (corkd.com) Publishes wine reviews using hReview, profiles using hCard and relationships using XFN F L I C K R (flickr.com) Geotagging of photos, publishes profiles using hCard L A S T. F M (last.fm) Publishes concert information using hCalendar U P C O M I N G (upcoming.org) Publishes event information using hCalendar and profiles using hCard
R S U S I N G M I C R O F O R M AT S C O R K D (corkd.com) Publishes wine reviews using hReview, profiles using hCard and relationships using XFN F L I C K R (flickr.com) Geotagging of photos, publishes profiles using hCard L A S T. F M (last.fm) Publishes concert information using hCalendar U P C O M I N G (upcoming.org) Publishes event information using hCalendar and profiles using hCard
S : H C A R D <p class="vcard"> <span class="fn">Malarkey</span>'s a Modern kinda guy who loves to annoy his neighbours in <span class="locality">Gwaenysgor</span> with his collection of sixties Mod and ska classics. Since signing to <span class="org">Stuff and Nonsense Records</span>, Malarkey can be reached by <a class="email" href="#">email</a> or by phone on <span class="tel">+44 (0)1745 851848</span>. </p>
</span> <a class="tel" href="#">+44 (0)7771 3000</a> <a class="url" href="#">http://www.brixton‐academy.co.uk/</a> </td> </tr> M I C R O F O R M AT S : H C A L E N D A R
S : H R E V I E W <h4 class="summary">Making Ska accessible <abbr title="5" class="rating"><img src="5.png" alt="5" /></abbr> </h4> <h5 class="vevent"> <a class="url" href="#"> <span class="summary">Live at MEN Arena</span> on <abbr class="dtstart" title="20070923">September 23th</abbr></a> </h5> <p>Helpful? <a href="#" rev="vote‐for">Yes</a> | <a href="#" rev="vote‐against">No</a> | <a href="#" rel="self bookmark">Bookmark</a> </p>
S : AT O M Stomping Robots What is ska? Ska combines elements of Caribbean mento and calypso with American jazz and rhythm and blues. It is characterised by a walking bass line, accented guitar, or piano rhythms on the offbeat, and in some cases, jazz‐like horn riffs. Jina Bee
S : AT O M <h1>Stomping Robots</h1> <h2>What is ska?</h2> <p>Ska combines elements of Caribbean mento and calypso with American jazz and rhythm and blues. It is characterised by a walking bass line, accented guitar, or piano rhythms on the offbeat, and in some cases, jazz‐like horn riffs.</p> <p>Jina Bee</p>
S : AT O M <div class="hentry"> <h1>Stomping Robots</h1> <h2 class="entry‐title">What is ska?</h2> <div class="entry‐content"> <p><span class="entry‐summary">Ska combines elements of Caribbean mento and calypso with American jazz and rhythm and blues.</span> It is characterised by a walking bass line, accented guitar, or piano rhythms on the offbeat, and in some cases, jazz‐like horn riffs.</p> </div> <address class="vcard author"> <a href="#" class="fn url">Jina Bee</a> </address> </div>
C T O R S <li> <h3>Live at Wembley Arena</h3> <h4><img src="5.png" alt="5" /></h4> <p>Reviewed on August 1st 2007</p> <h5>Live at Wembley Arena on September 23th</h5> <img src="jeffrey.jpg" alt="" /> <p>The Nonsense Robots did an excellent job of mixing ska with some funky reggae beats.</p> </li> li > img { float : left; }
E L E C T O R S <li> <h3>Live at Wembley Arena</h3> <h4><img src="5.png" alt="5" /></h4> <p>Reviewed on August 1st 2007</p> <blockquote> <h5>Live at Wembley Arena on September 23th</h5> <img src="jeffrey.jpg" alt="" /> <p>The Nonsense Robots did an excellent job of mixing ska with some funky reggae beats.</p> </blockquote> </li> h4 + p { padding‐top : 0; }
S E L E C T O R S Style an element either based on whether an element has an attribute name such as href or based on the attribute value. img[alt] a[title] li[class="vcard"] div[id="content_main"]
S E L E C T O R S Style an element either based on whether an element has an attribute name such as href or based on the attribute value. img[alt] a[title] li[class="vcard"] div[id="content_main"]
E L E C T O R S <div id="siteinfo"> <a href="#thenonsenserobots‐com" rel="self">Back to top</a> </div> #siteinfo a[rel="self"] { display : block; width : 97px; height : 72px; position : absolute; top : ‐1px; right : 15px; background : url(top.png) no‐repeat; text‐indent : ‐9999px; }
S E L E C T O R S Style an element either based on whether an element has an attribute name such as href or based on the attribute value. img[alt] a[title] li[class="vcard"] div[id="content_main"]
S E L E C T O R S Style an element either based on whether an element has an attribute name such as href or based on the attribute value. img[alt] a[title] li[class="vcard"] div[id="content_main"]
S E L E C T O R S Style an element either based on whether an element has an attribute name such as href or based on the attribute value. img[alt] a[title] li[class="vcard"] div[id="content_main"]
S P E C I F I C I T Y Example Style in document (inline style) # of ID selectors # of class selectors # of Element (type) selectors li 0 0 0 1 li.vcard 0 0 1 1 #content li.vcard 0 1 1 1
S U B ‐ S T R I N G S E L E C T O R S E[foo~="bar"] an E element whose "foo" attribute value is a list of space‐separated values, one of which is exactly equal to "bar" E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar"
U B ‐ S T R I N G S E L E C T O R S <li> <h3>Sushi Ska</h3> <h4>The most played album on my iPod</h4> <blockquote> <p>Sushi Ska is a unique collection of Jamaican influenced ska. There are few collections of ska that include a good cross section of the earliest ska classics from Jamaica in the Sixties in the same collection as music of the Great Ska Revival in the United Kingdom in the Eighties.</p> </blockquote> <p><a href="http://www.tantek.com/reviews/">Bookmark</a></p> </li>
U B ‐ S T R I N G S E L E C T O R S <li> <h3>Sushi Ska</h3> <h4>The most played album on my iPod</h4> <blockquote> <p>Sushi Ska is a unique collection of Jamaican influenced ska. There are few collections of ska that include a good cross section of the earliest ska classics from Jamaica in the Sixties in the same collection as music of the Great Ska Revival in the United Kingdom in the Eighties.</p> </blockquote> <p><a href="http://www.tantek.com/reviews/">Bookmark</a></p> </li>
U B ‐ S T R I N G S E L E C T O R S <a href="http://www.tantek.com/reviews/">Bookmark</a> ul > li { position : relative; } li > h3, li > h4, li > blockquote { margin‐left : 100px; } a[href^="http://www.tantek.com"]:before { content : url(tantek.png); position : absolute; top : 0; left : 0; }
U B ‐ S T R I N G S E L E C T O R S <a href="http://www.tantek.com/reviews/">Bookmark</a> ul > li { position : relative; } li > h3, li > h4, li > blockquote { margin‐left : 100px; } a[href^="http://www.tantek.com"]:before { content : url(tantek.png); position : absolute; top : 0; left : 0; }
U B ‐ S T R I N G S E L E C T O R S <a href="http://www.tantek.com/reviews/">Bookmark</a> ul > li { position : relative; } li > h3, li > h4, li > blockquote { margin‐left : 100px; } a[href^="http://www.tantek.com"]:before { content : url(tantek.png); position : absolute; top : 0; left : 0; }
M E N T S #content ul li { display : inline; padding : 0 10px; border‐right : 1px solid #333; } #content ul li:last‐child { padding‐right : 0; border‐right‐width : 0; }
S E L E C T O R S id + child #nav‐main > li { /* rules */ } descendent + class + adjacent .nav ul li + li { /* rules */ } id + descendent + element + pseudo class #nav‐main li:hover { /* rules */ } descendent + id + child + attribute #nav‐main ul > li > a[title] { /* rules */ }
M O D E L ‐ All elements generate a box ‐ Block‐level elements start on a new line and can contain other block level and inline elements ‐ Inline elements appear within content, with no line ‐ Boxes are laid out along the horizontal axis ‐ Create line boxes
M O D E L “The box width is given by the sum of the left and right margins, border, and padding, and the content width. The height is given by the sum of the top and bottom margins, border, and padding, and the content height.” W3.ORG/TR/REC‐CSS2/BOX‐HTML#BOX‐DIMENSIONS
& F I E L D S E T S <fieldset id="form_info"> </fieldset> <fieldset id="form_age"> </fieldset> #form_info { padding : 50px 40px 40px 0; background : url(fieldset_join.png) no‐repeat; } #form_age { padding : 50px 0 40px 40px; background : url(form_join.png) no‐repeat; }
H E A D I N G S U S I N G N E G AT I V E M A R G I N S #form_info h3 { margin : ‐70px 0 0 200px; padding : 0; width : 385px; height : 90px; background : url(h3_form_info.png) no‐repeat; text‐indent : ‐9999px; }
I T I O N I N G T Y P E S Static Position an element in its natural position in the normal flow (default) Relative Offset an element from its natural position in the normal flow using top, bottom, left and right values Absolute Remove an element from the normal flow and position it in relation to either its closest positioned ancestor or the root element using top, bottom, left and right values Fixed Remove an element from the normal flow and position it in relation to the view‐port using top, bottom, left and right values; it does not scroll
I T I O N I N G T Y P E S Static Position an element in its natural position in the normal flow (default) Relative Offset an element from its natural position in the normal flow using top, bottom, left and right values Absolute Remove an element from the normal flow and position it in relation to either its closest positioned ancestor or the root element using top, bottom, left and right values Fixed Remove an element from the normal flow and position it in relation to the view‐port using top, bottom, left and right values; it does not scroll
I T I O N I N G T Y P E S Static Position an element in its natural position in the normal flow (default) Relative Offset an element from its natural position in the normal flow using top, bottom, left and right values Absolute Remove an element from the normal flow and position it in relation to either its closest positioned ancestor or the root element using top, bottom, left and right values Fixed Remove an element from the normal flow and position it in relation to the view‐port using top, bottom, left and right values; it does not scroll
I T I O N I N G T Y P E S Static Position an element in its natural position in the normal flow (default) Relative Offset an element from its natural position in the normal flow using top, bottom, left and right values Absolute Remove an element from the normal flow and position it in relation to either its closest positioned ancestor or the root element using top, bottom, left and right values Fixed Remove an element from the normal flow and position it in relation to the view‐port using top, bottom, left and right values; it does not scroll
<label for="i01"><abbr title="Quantity">Qty:</abbr> <input type="text" id="i01" /></label> <input type="submit" value="Add to cart" /> </fieldset> </form> </li> C O M B I N AT I O N T E C H N I Q U E S
B I N AT I O N ul { position : relative; padding‐top: 360px; } li { float : left; width : 280px; height : 120px; margin‐right : 10px; margin‐bottom : 20px; }
I N AT I O N #a02 h3 { left : 160px; } #a03 h3 { left : 320px; } #a04 h3 { top : 170px; } #a05 h3 { top : 170px; left : 160px; } #a06 h3 { top : 170px; left : 320px; }
C U L AT I N G L I N E H E I G H T Calculate the line‐height in ems by dividing the desired line‐height (18px) by the base font‐size (12px) to give a value of 1.5
L E R F O N T‐ S I Z E L I N E H E I G H T Sidenote: Calculate the font‐size in ems by dividing the desired font‐ size (10px) by the base font‐size (12px) to give a value of 0.8333em. Maintain vertical rhythm by dividing vertical rhythm unit (18px) by the new font‐size (10px to give a value of 1.8em.
TA L L E A D I N G To calculate for 5 lines of text in the sidebar: 72px ÷ 5 = 14.4px #content_sub p { font‐size : 0.8333em; line‐height : 1.44em; /* 14.4px ÷ 10px */ }
U L E S Selectors module Refined selectors to target an element based on an attribute or position in the document flow plus new pseudo‐classes and elements. Backgrounds and borders module Style any box’s borders and background including attach multiple background‐images to one element. Multi‐column layout module Making it simpler to create column layouts without additional markup by using column counts, gaps and rules. Advanced Layout module Aims to fully separate visual layout order from a document’s content. Media Queries module Extending the usefulness of media types in combination with window widths, heights and aspect ratio.
U L E S Selectors module Refined selectors to target an element based on an attribute or position in the document flow plus new pseudo‐classes and elements. Backgrounds and borders module Style any box’s borders and background including attach multiple background‐images to one element. Multi‐column layout module Making it simpler to create column layouts without additional markup by using column counts, gaps and rules. Advanced Layout module Aims to fully separate visual layout order from a document’s content. Media Queries module Extending the usefulness of media types in combination with window widths, heights and aspect ratio.
U L E S Selectors module Refined selectors to target an element based on an attribute or position in the document flow plus new pseudo‐classes and elements. Backgrounds and borders module Style any box’s borders and background including attach multiple background‐images to one element. Multi‐column layout module Making it simpler to create column layouts without additional markup by using column counts, gaps and rules. Advanced Layout module Aims to fully separate visual layout order from a document’s content. Media Queries module Extending the usefulness of media types in combination with window widths, heights and aspect ratio.
U L E S Selectors module Refined selectors to target an element based on an attribute or position in the document flow plus new pseudo‐classes and elements. Backgrounds and borders module Style any box’s borders and background including attach multiple background‐images to one element. Multi‐column layout module Making it simpler to create column layouts without additional markup by using column counts, gaps and rules. Advanced Layout module Aims to fully separate visual layout order from a document’s content. Media Queries module Extending the usefulness of media types in combination with window widths, heights and aspect ratio.
U L E S Selectors module Refined selectors to target an element based on an attribute or position in the document flow plus new pseudo‐classes and elements. Backgrounds and borders module Style any box’s borders and background including attach multiple background‐images to one element. Multi‐column layout module Making it simpler to create column layouts without additional markup by using column counts, gaps and rules. Advanced Layout module Aims to fully separate visual layout order from a document’s content. Media Queries module Extending the usefulness of media types in combination with window widths, heights and aspect ratio.
E C T O R S M O D U L E E:nth‐child(n) an E element, the n‐th child of its parent E:nth‐last‐child(n) an E element, the n‐th child of its parent, counting from the last one E:nth‐of‐type(n) an E element, the n‐th sibling of its type E:only‐of‐type an E element, only sibling of its type E:not(s) an E element that does not match simple selector s E ~ F an F element preceded by an E element
T O R S : N T H ‐ C H I L D <tr> <td class="track">2</td> <td>Train To Skaville</td> <td><a href="#"</a></td> </tr> <tr class="odd"> <td class="track">3</td> <td>Ska Train</td> <td><a href="#">Listen</a></td> </tr>
T O R S : N T H ‐ C H I L D <tr> <td class="track">2</td> <td>Train To Skaville</td> <td><a href="#"</a></td> </tr> <tr class="odd"> <td class="track">3</td> <td>Ska Train</td> <td><a href="#">Listen</a></td> </tr>
T O R S : N T H ‐ C H I L D Every odd row of an HTML table tr:nth‐child(2n+1) { /* rules */ } tr:nth‐child(odd) { /* rules */ } Every even row of an HTML table tr:nth‐child(2n) { /* rules */ } tr:nth‐child(even) { /* rules */ }
T O R S ‐ : N T H ‐ C H I L D The first six rows of an HTML table tr:nth‐child(‐n+6) { /* rules */ } The last two rows of an HTML table tr:nth‐last‐child(‐n+2) { /* rules */ } The 9th, 19th, 29th, etc, row of an HTML table tr::nth‐child(10n‐1) { /* rules */ } tr:nth‐child(10n+9) { /* rules */ }
K G R O U N D S A N D B O R D E R S ‐ Background‐clip ‐ Background‐origin ‐ Background‐size ‐ Background‐break ‐ Border‐radius ‐ Border‐break ‐ Border‐image ‐ Box‐shadow
K G R O U N D S A N D B O R D E R S “13. Layering multiple background images ‐The properties 'background‐image', 'background‐origin', 'background‐clip', 'background‐repeat', 'background‐size', and 'background‐position' may have multiple comma‐separated values. Excepting the case that 'background‐image' is 'none', if the values are specified as follows: ‐backgound‐image: w 1,…wM ‐backgound‐repeat: x 1,…xR ‐backgound‐size: y 1,…yS ‐backgound‐position: s 1,…sP ‐the number of layers is N = max(M, R, S, P).” W3.ORG/TR/CSS‐3‐BACKGROUND/
‐ C O L U M N M O D U L E .entry‐content { column‐width : 200px; column‐gap : 5px; column‐rule : thin solid black; /* For Firefox */ ‐moz‐column‐width : 3; ‐moz‐column‐gap : 5px; }
N C E D L AY O U T M O D U L E Slot letter identifies the slot within the grid for any content that will be positioned within it @ (at symbol) A default slot into which content that has not been situated can flow . (period) A white‐space slot that can have no content inserted into it
N C E D L AY O U T M O D U L E div#s01 { position : ab; } div#s02 { position : c; } div#s03 { position : d; } div#s04 { position : ef; } div#s05 { position : gh; } div#s06 { position : i; } div#s07 { position : j; } div#s08 { position : k; } div#s09 { position : l; }
N C E D L AY O U T M O D U L E Slot letter identifies the slot within the grid for any content that will be positioned within it @ (at symbol) A default slot into which content that has not been situated can flow . (period) A white‐space slot that can have no content inserted into it
malarkey
usagimaru
sms_tech
chiemitaki
yasuhiroyokota
abokadotyann
zakkerooni
akidon0000
otanet
ryokanakai
shuzo
commune
ncdc
bermonpainter
ammeep
trallard
chriscoyier
kevinliebholz
jonyablonski
samanthasiow
lynnandtonic
honnibal
kneath
hannesfritz
eileencodes
![TRANSCENDING CSS FOR A BEAUTIFUL WEB ANDY CLARKE “Some people say I've ruined the Web, and to them it's true. [...] I ruined the Web by mixing chocolate and peanut butter so they could never become unmixed. I committed the hangable offense of mixing structure with presentation.” DAVID SIEGAL XML.COM/PUB/A/W3J/S1.PEOPLE.HTML P](https://files.speakerdeck.com/presentations/96f998c22176422f91fd66f4fd09ce5f/slide_37.jpg){kind=link}
