html5 & css overview

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


<!doctype html>BAM!

Double BAM!!


<meta charset=”utf-8”>

...looks much prettier!

<link rel="stylesheet" href="styles.css” />

<script src=”jquery.js”></script>


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>


...much better semantic!

<a href=”#” target=“_blank”> <div class=”panel”> <h2>Banner title</h2> <p>Get your 50% discount now, mofo!</p> </div></a>


...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”>  </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! :(



Links


Input


Position

:not:empty

Relational


Text

SOLUTION?Use more markup or

try Selectivizr.com



Links


Input


Position

:not:empty

Relational


Text

GOOD NEWS...They all work great onIE9, webkit browsers,Firefox and Opera...



Links


Input


Position

:not:empty

Relational


Text

GOOD NEWS...... meaning, very suitableto work on mobilebrowsers :)



Links


Input


Position

:not:empty

Relational


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; }


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


“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


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


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


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!

html5 & css overview

Technology

article link1 link2