HTML5 & CSS3 Flag

HTML5 & CSS3 Flag Christopher Schmitt ChristopherSchmitt.com http://twitter.com/@teleject

Christopher Schmitt ChristopherSchmitt.com http://twitter.com/@teleject

how do we go about ? solving our problems

we solve problems by realizing The Limitations

and we realize that Our Experience limits our thinking

It’s Always a Plumbing Problem

Test limitations to gain new experience

91 http://www.w3.org/TR/html4/index/elements.html

<h1><a href="http:// www.usa.gov/">United States of America</ a></h1> <ol> <li><a href="http://www.alabama.gov/"> <strong>State of Alabama</strong><i></i> </a></li> <li><a href="http://www.ct.gov/"> <em><strong>State of Connecticut</ strong></em><i></i> </a></li> ... </ol>

HTML 4.01 Transitional DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> XHTML 1.0 Transitional DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>DOWNTOWN ORLANDO RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html>

EXERCISE • Go to HTML validator at http://validator.w3.org/ #validate_by_input • Then type the following HTML (below) and hit validate: <!DOCTYPE html> <title>Small HTML5</title> <p>Hello world</p>

Relearning Syntax • Attribute quotes “not really” required • UPPERCASE and lowercase HTML elements allowed • So is CaMeLcAse typing. • No more need to do self-closing tags like <IMG /> or <BR /> • Also, no more minimalization. So, this is okay: <dl compact> • Basically, everything that was bad from HTML4 in XHTML5 is good again. • Full circle, baby!

DIV ID=”header” DIV ID=”nav” DIV ID=”section” DIV ID=”sidecolumn” DIV ID=”article” DIV ID=”footer”

ARTICLE vs ASIDE vs SECTION • Marc Grabsanki says: • Article is unique content to that document • Section is a thematic grouping of content, typically with a heading - pretty generic • Aside is content that is tangentially related, like a sidebar div has no meaning whatsoever, so there is nothing semantic about divs

ArtiCLE vs ASIDE VS SECTION • Bruce Lawson says: • Aside is for something tangentially related to its parent element. Or, if a sibling to the main content, it can be used to make sidebars of navigation, recent comments, colophons, author bios etc. • Article is a discrete piece of content that could be syndicated - a blog post, a news item, a comment, a widget • Section can also contain articles. for example, you could have a page with a <section> full of entertainment articles, and a section of political news etc.

ArtiCLE vs ASIDE VS SECTION • Molly Holzschlag says: • <section> clariﬁes <div> • <article> 'replaces' <div id="content"> • <aside> 'replaces' <div id="sidebar"> • Chris Mills plays it safe: http://boblet.tumblr.com/post/130610820/ html5-structure1

What about the DIVs? • Marc: • “div has no meaning whatsoever, so there is nothing semantic about divs” • Bruce says: • “Like all semantic questions, it depends on the context. If your only reason for wanting an element is to group stuff for styling, it's a div.”

<body> <header> <h1>Heading </h1> </header> <nav> <h3>Site Navigation</h3> <ul>...</ul> </nav> <section> <article> <h3>Weblog Entry</h3> </article> </section> <aside> <p>You are reading "Chocolate Rain", an entry posted on <time datetime="2009-03-05">5 March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <a href="#">this collection</a>.</p> </aside> <footer> <p>...</p> </footer> </body>

<header class="no"> <hgroup> <h1>HTML5 & CSS Flag</h1> <h2>by <a href="http://christopherschmitt.com/">Christopher Schmitt</a></h2> </hgroup> </header> <article> <h3><a href="http://usa.gov">United States of America</a></h3> <ol> <li> <div id="hcard-Jack-Markell" class="vcard"> <a class="url fn" href="http://delaware.gov/">Jack Markell</a> <div class="org no" data-colony="1">Delaware</div> <div class="adr no"> <div class="street-address">Tatnall Building, William Penn Street, 2nd Fl.</div> <span class="locality">Dover</span>, <span class="region">DE</span>, <span class="postal-code">19901</span> </div> <div class="tel no">(302) 744-4101</div> </div> </li>

Some Common HTML Errors • <p> </p> • <p> ... <br><br><br> ... <br><br><br>... • <h2>Subject Matter<br></h2> • <p><h2>Subject Matter</h2></p> • <p><img ></p>

“CSS Reset” • http://developer.yahoo.com/yui/reset/ • http://meyerweb.com/eric/thoughts/ 2007/04/12/reset-styles/ • http://meyerweb.com/eric/tools/css/reset/ index.html

<article> <h3><a href="http://usa.gov">United States of America</a></h3> <ol> <li> <div id="hcard-Jack-Markell" class="vcard">

* { margin: 0; padding: 0; } body { margin: 5%; font-size: 67.5%; } article { display: block; width: 955px; margin: 0 auto; position: relative; height: 650px; }

.no { display: none; } ol { list-style: none; margin: 0; padding: 0; }

<ol> <li> <div id="hcard-Jack-Markell" class="vcard"> <a class="url fn" href="http:// delaware.gov/">Jack Markell</a> <div class="org no" data- colony="1">Delaware</div> <div class="adr no"> ... </div> <div class="tel no">(302) 744-4101</ div> </div> </li>

Normal Flow • While normal ﬂow is the default method of rendering a page, the placement of the elements can be altered • Floats • CSS position property • Values: absolute, relative, ﬁxed or static

Absolute Positioning • When an element is absolutely positioned, it is taken out of normal ﬂow and positioned relative to the edges of its containing box, according to its offset properties. • Absolutely positioned elements are ignored by other elements within normal ﬂow.

Relative Positioning • When an element is relatively positioned, it is initially placed within normal ﬂow, and then adjusted according to its offset properties. • #positioned { position: relative; top: 50px; right: 30px; background-color: #eee; }

Relative Positioning • The browser lays out the paragraphs according to normal ﬂow, then offsets the positioned paragraph 50 pixels from the top, and 30 pixels from the right of its default position. • And like absolute positioning, relatively positioned elements can overlap other elements. • Note that if you don’t specify any offset properties for a relatively positioned element, it is placed according to normal ﬂow.

article { display: block; width: 955px; margin: 0 auto; position: relative; height: 650px; } div[data-colony] { width: 955px; height: 50px; display: block; background: #BF0A30; position: absolute; top: 0; left: 0; z-index: 1; text-indent: -9999em; }

Attribute Selectors • a[title] { /* rules */ } a[href] { /* rules */ } • p[id] { /* rules */ } p[class] { /* rules */ } • img[alt] { /* rules */ } img[src] { /* rules */ } • blockquote[cite] { /* rules */ }

Previous Solution a[href="http://delaware.gov/"] em { background: white; top: 50px; left: 0; } a[href="http://www.georgia.gov/"] em { top: 100px; left: 0; } ...

New Solution div[data-colony="2"] { top: 50px; left: 0; background: #fff; } div[data-colony="3"] { top: 100px; left: 0; }

HTML5 Data Attributes • Add custom “data” attributes to elements • Embed information that can be scraped by third parties or by your own JavaScript • More information: http://ejohn.org/blog/html-5-data-attributes/ • Example: http://sxswcss3.com/

<li class="vevent" id="Party14"> ... <h4 class="summary">Music Fest Welcome Dinner</ h4> <span class="location vcard"><span class="fn org">Four Seasons Hotel Ballroom</span>, <span class="adr" data-longitude="-84.260799" data-latitude="30.456100"> <span class="street-address">98 San Jacinto</ span> <span class="locality">Austin</span> <span class="region">TX</span></span></span></ a> </li>

Why Encode Data? • If we did our homework ahead of time, we can save processing time. • With SXSWCSS3.com, store the longitude and latitude to with data attributes: • Keep from using the Google API saving processes and time. • With CSS Flag, store which state was a colony and the order it was admitted to the union.

Why Encode Data? • With CSS Flag, store which state was a colony and the order it was admitted to the union. • Plus, we get additional “HTML hooks” for our CSS selectors • Ergo, stripes!

Subtle Gradients • But I need some serious CSS3 to keep my boss interested and my friends from laughing at me. • No worries! • Let’s look into subtle gradients.

div[data-colony="2"], div[data-colony="4"], div[data-colony="6"], div[data-colony="8"], div[data-colony="10"], div[data-colony="12"] { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(0.69, rgb(227,227,227)) ); background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 0%, rgb(227,227,227) 69% ); }

div[data-colony="1"], div[data-colony="3"], div[data-colony="5"], div[data-colony="7"], div[data-colony="9"], div[data-colony="11"], div[data-colony="13"] { border-bottom: 1px solid rgba(255,00,102,.5); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(191,10,48)), color-stop(0.69, rgb(174,19,45)) ); background-image: -moz-linear-gradient( center bottom, rgb(191,10,48) 0%, rgb(174,19,45) 69% ); }

CSS3 Gradient Picker • http://gradients.glrzad.com/ • http://www.westciv.com/tools/gradients/ • Crossbrowser for IE8 and below? • http://msdn.microsoft.com/en-us/library/ ms532997(VS.85).aspx

h3 a { position: absolute; width: 440px; height: 350px; background: #002868; text-indent: -9999em; margin: 0; padding: 0; z-index: 20; }

Getting Rid of Text • sIFR (Scalable Inman Flash Replacement): http://wiki.novemberborn.net/sifr3 • Image Replacement Rundown: http://mezzoblue.com/tests/revised-image- replacement/ • Text-indent method “Google-safe” • Or is it?

Subtle Gradients h3 a { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,40,104)), color-stop(0.5, rgb(3,27,64)) ); background-image: -moz-linear-gradient( center bottom, rgb(0,40,104) 0%, rgb(3,27,64) 50% ); }

Previous Solution a[href="http://www.alabama.gov/"] i { background-image: url(stars.gif); display: block; position: absolute; top: 13px; left: 13px; z-index: 50; width: 24px; height: 23px; }

Previous Solution • Insert nested presentational element (albeit small) • Change it’s display to block • Set width and height • Place star graphic in the background • Then position stars in the correct space

New Solution • Avoid inserting presentational markup • Avoid adding image • Do something cooler than last year • Everything else? Yeah, pretty much the same, but cool.

Adding Stars a.fn { position: absolute; z-index: 50; display: block; color: #fff; }

Position “Stars” /* First Row */ li:nth-child(1) a.fn { top: 13px; left: 13px; } li:nth-child(2) a.fn { top: 13px; left: 90px; } li:nth-child(3) a.fn { top: 13px; left: 167px; } ...

Adding Stars a.fn:before { font-weight: normal; font-style: normal; line-height: normal; font-family: 'SeeingStarsRegular', sans-serif; content: "W "; font-size: 2em; }

Adding Stars a.fn { width: 2.1em; height: 2.1em; overflow: hidden; position: absolute; z-index: 50; display: block; color: #fff; }

Adding Stars a.fn { width: 2.1em; height: 2.1em; overflow: hidden; position: absolute; z-index: 50; display: block; color: #fff; text-shadow: 0px 2px 1px #000; }

But what about my subtle gradients? a.fn:before { font-weight: normal; font-style: normal; line-height: normal; font-family: 'SeeingStarsRegular', sans- serif; content: "W "; font-size: 2em; -webkit-mask-image: -webkit- gradient(linear, left top, left bottom, from(rgba(0,0,0,1)),to(rgba(0,0,0,.3))); }

Everything Clicks • Previous solution had every pixel of the ﬂag clickable • New solution has only the Union and Stars as clickable • Due to using presentational element inside anchor: <a><i></i></a> • New solution: • Again only one link, but would like to avoid hard coding link

vCard Microformat <div id="hcard-Jack-Markell" class="vcard"> <a class="url fn" href="http:// delaware.gov/">Jack Markell</a> <div class="org no" data- colony="1">Delaware</div> <div class="adr no"> <div class="street-address">Tatnall Building, William Penn Street, 2nd Fl.</ div><span class="locality">Dover</span>, <span class="region">DE</span>, <span class="postal-code">19901</span> </div> <div class="tel no">(302) 744-4101</div> </div>

Enter jQuery <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.4.2/jquery.min.js"></script>

Enter jQuery <script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]"); } ); }); </script>

Enter jQuery <script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]").wrap(); }); </script>

Enter jQuery <script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]").wrap(function() { } ); }); </script>

Enter jQuery <script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]").wrap(function() { return '<a href="' + $(this) + '" />'; } ); }); </script>

Enter jQuery <script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]").wrap(function() { return '<a href="' + $(this) .parent("div").children("a:first") + '" / >'; } ); }); </script>

Enter jQuery <script type="text/javascript"> $(document).ready(function(){ $("div[data-colony]").wrap(function() { return '<a href="' + $(this) .parent("div").children("a:first") .attr("href") + '" />'; } ); }); </script>

Links around Blocks <a href="http://www.state.nj.us"> <div class="org no" data-colony="3">New Jersey</div> </a>

Transform Stars a.fn:hover { font-size: 4em; -webkit-transform: rotate(270deg); z-index: 100; }

Transform Stars a.fn:hover { font-size: 4em; -webkit-transform: rotate(270deg) translate(1em,-1em); z-index: 100; }

Transform Stars a.fn:hover { font-size: 4em; -webkit-transform: rotate(270deg) translate(1em,-1em); z-index: 100; } li:nth-child(2n) a.fn:hover { font-size: 4em; -webkit-transform: rotate(-270deg) translate(-1em,1em); z-index: 100; }

webkit-transform-origin • How does something rotate? • Default is center of the object • but you can set the values like background-position to change the origin point • webkit-transform-origin: 100% 0;

Box-Shadow article { display: block; width: 955px; margin: 0 auto; position: relative; height: 650px; -webkit-box-shadow: 0px .4em .4em black; }

Fireworks • What’s the 4th of July without some ﬁreworks? • Let’s ﬁrst get two images • Colorful image • Firework mask

Multiple Background Images body { margin: 5%; padding: 0; font-size: 67.5%; background-image: url("fireworks.png"), url("bkgd.jpg"); background-position: -40% -20%, center; }

every now and then, testing what we know decreases our limitations and expands our skill set

More Resources • Gradients on text; http://nicewebtype.com/notes/2009/07/24/ pure-css-text-gradient-no-pngs/ • Differences between HTML4 and HTML5: http://www.viget.com/inspire/recapping-the- w3cs-html5-differences-from-html4- document/

More Resources • HTML5 & Accessibility: http://www.slideshare.net/teleject/access- u-2010-html5-accessibility • CSS3 Workshop: http://www.slideshare.net/teleject/ webvisions-2010-css3-workshop-afternoon

THANK YOU! Christopher Schmitt http://twitter.com/@teleject ChristopherSchmitt.com

HTML5 & CSS3 Flag

More Related Content

What's hot

Similar to HTML5 & CSS3 Flag

More from Christopher Schmitt

Recently uploaded

HTML5 & CSS3 Flag