html5 & css overview
DESCRIPTION
This is a quick presentation I did forTRANSCRIPT
HTML5 & CSSAN OVERVIEW
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5 // Cleaning redundancy
HTML5 // Cleaning redundancy
<!doctype html>BAM!
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<?xml version="1.0" encoding="UTF-8"?><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5 // Cleaning redundancy
HTML 4.01
XHTML 1.0
Double BAM!!
HTML5 // Cleaning redundancy
<meta charset=”utf-8”>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src=”jquery.js” type=”text/javascript”></script>
HTML5 // Cleaning redundancy
<link rel="stylesheet" href="styles.css" type=”text/css” />
<script src=”jquery.js” type=”text/javascript”></script>
HTML5 // Cleaning redundancy
...looks much prettier!
<link rel="stylesheet" href="styles.css” />
<script src=”jquery.js”></script>
HTML5 // Cleaning redundancy
HTML5 // New elements
<header>
<nav>
<section>
<article>
<aside>
<video>
<figure>
<footer>
<time>
<datalist>
To check all elements: http://joshduck.com/periodic-table.html
<body> <div class=”header”> <h1>Company logo</h1> <p>Tagline</p> </div> <div class=”nav”> <ul> <li>link1</li> <li>link2</li> </ul> </div> <div class=”section”> <div class=”article”> <div class=”header”> <h1>...</h1> </div> <div class=”section”> ... </div> </div>
<div class=”article”> <h1>Article head</h1> <p>Article paragraph</p> <div class=”aside”> <p>pointer for article</p> </div></div><div class=”figure”> <img src=”...”> <div class=”figcaption”>text</div></div><footer> © <time datetime=”2012-11-08”> 2012</time></footer></body>
HTML5 // Common structure
<body> <header> <h1>Company logo</h1> <p>Tagline</p> </header> <nav> <ul> <li>link1</li> <li>link2</li> </ul> </nav> <section> <article> <header> <h1>...</h1> </header> <section> ... </section> </article>
<article> <h1>Article head</h1> <p>Article paragraph</p> <aside> <p>pointer for article</p> </aside></article><figure> <img src=”...”> <figcaption>text</figcaption></figure><footer> © <time datetime=”2012-11-08”> 2012</time></footer></body>
HTML5 // Common structure
...much better semantic!
<section class=”item”> <header> <h1></h1> </header> <footer class=”meta”>...</footer> <div class=”content”> ... </div> <nav class=”links”> ... </nav></section>
HTML5 // Common structure
<a href=”#” target=“_blank”> <div class=”panel”> <h2>Banner title</h2> <p>Get your 50% discount now, mofo!</p> </div></a>
HTML5 // Common structure
...example available
<input type=”text” required>
<input type=”email” value=”[email protected]”>
<input type=”date” min=”2010-08-14” max=”2016-08-14” value=”2010-08-10”>
<input type=”range” min=”0” max=”50” value=”11”>
<input type=”search” placeholder=”Type city or property”>
<input type=”tel” placeholder=”(353)657778888 patter=”[regexp]”>
<input type=”color” placeholder=”#ff00ff”>
<input type=”number” step=”1” min=”-5” max=”10” value=”0”>
HTML5 // Forms
<audio id=”audio” scr=”song.mp3” controls></audio>
<video id=”video” src=”video.mov” autoplay controls></video>
HTML5 // Audio & Video
...degrade gracefully.
<video id=”video” src=”video.mov” autoplay controls> <object data=”video.mov”> <!-- fallback content --> </object></video>
HTML5 // Audio & Video
:link:visited:hover:active
CSS // Pseudo classes
Links
:focus:target:enabled:disabled:checked
Input
:first-child:last-child:nth-child(n):nth-of-type(n):first-of-type:last-of-type:nth-last-of-type(n):nth-last-child(n):only-of-type
Position
:not:empty
Relational
:first-letter:first-line:lang::selection
Text
BAD NEWs...Most of these don’twork on old popularbrowsers! :(
:link:visited:hover:active
CSS // Pseudo classes
Links
:focus:target:enabled:disabled:checked
Input
:first-child:last-child:nth-child(n):nth-of-type(n):first-of-type:last-of-type:nth-last-of-type(n):nth-last-child(n):only-of-type
Position
:not:empty
Relational
:first-letter:first-line:lang::selection
Text
SOLUTION?Use more markup or
try Selectivizr.com
:link:visited:hover:active
CSS // Pseudo classes
Links
:focus:target:enabled:disabled:checked
Input
:first-child:last-child:nth-child(n):nth-of-type(n):first-of-type:last-of-type:nth-last-of-type(n):nth-last-child(n):only-of-type
Position
:not:empty
Relational
:first-letter:first-line:lang::selection
Text
GOOD NEWS...They all work great onIE9, webkit browsers,Firefox and Opera...
:link:visited:hover:active
CSS // Pseudo classes
Links
:focus:target:enabled:disabled:checked
Input
:first-child:last-child:nth-child(n):nth-of-type(n):first-of-type:last-of-type:nth-last-of-type(n):nth-last-child(n):only-of-type
Position
:not:empty
Relational
:first-letter:first-line:lang::selection
Text
GOOD NEWS...... meaning, very suitableto work on mobilebrowsers :)
:link:visited:hover:active
CSS // Pseudo classes
Links
:focus:target:enabled:disabled:checked
Input
:first-child:last-child:nth-child(n):nth-of-type(n):first-of-type:last-of-type:nth-last-of-type(n):nth-last-child(n):only-of-type
Position
:not:empty
Relational
:first-letter:first-line:lang::selection
Text
CSS // Some examples
elem:nth-child(5) { color:orange; }
elem:nth-child(n+6) { color:orange; }
elem:nth-child(-n+5) { color:orange; }
elem:nth-child(4n-7) { color:orange; }
CSS // Some examples
elem:nth-child(odd) { color:orange; }
elem:nth-child(even) { color:orange; }
elem:last-child { color:orange; }
elem:last-child(2) { color:orange; }
<blockquote> <p>What goes around comes around</p></blockquote>
p:before { content:’”’; color:light-green;}
p:after { content:’”’; color:light-green;}
HTML
CSS
CSS // Some examples
“What goes around comes around”
<p class=”warning”>Warning!</p>
p:before { content:””; background:url(warning-icon.png) 0 0 no-repeat; display:inline-block; margin-right:10px;}
HTML
CSS
CSS // Some examples
WARNING!i
<p class=”sign-up”>sign up here</p>
.sign-up:before { content:””; background:url(warning-icon.png) 0 0 no-repeat; display:inline-block; margin-right:10px;}
.sign-up:after { content:””; background:url(arrow.png) 0 0 no-repeat; position:absolute; bottom:-15px; left:50%;}
HTMLCSS
CSS // Some examples
SIGN UP HEREi
<p class=”sign-up”>sign up here</p>
.sign-up:before { /* same code as previous slide */}
.sign-up:after { content:””; position:absolute; bottom:0; left:50%; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid orange;}
HTMLCSS
CSS // Some examples
SIGN UP HEREi
no arrow img
!
RESOURCES
http://html5doctor.com/css3-pseudo-classes-and-html5-formshttp://www.developer.nokia.com/document/Mobile_Web_Templates_for_Smartphones_Examples/content.htmlhttp://mobilehtml5.org/http://css-tricks.com/pseudo-class-selectors/http://css-tricks.com/pseudo-element-roundup/http://www.sitepoint.com/css3-tabs-using-target-selector/http://slides.html5rocks.com/#landing-slidehttp://selectivizr.com
Thanks!