Html5 & CSS overview

HTML5 // Cleaning redundancy

<!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">


AM !
B <!doctype html>

HTML5 // New elements

<header> <video>

<nav> <figure>

<section> <footer>

<article> <time>

<aside> <datalist>

To check all elements: http://joshduck.com/periodic-table.html

HTML5 // Common structure
<body> <div class=”article”>
<div class=”header”> <h1>Article head</h1>
<h1>Company logo</h1> <p>Article paragraph</p>
<p>Tagline</p> <div class=”aside”>
</div> <p>pointer for article</p>
<div class=”nav”> </div>
<ul> </div>
<li>link1</li> <div class=”figure”>
<li>link2</li> <img src=”...”>
</ul> <div class=”figcaption”>text</div>
</div> </div>
<div class=”section”> <footer>
<div class=”article”> ©
<div class=”header”> <time datetime=”2012-11-08”>
<h1>...</h1> 2012</time>
</div> </footer>
<div class=”section”> </body>
...
</div>
</div>

<body> <article>
<header> <h1>Article head</h1>
<h1>Company logo</h1> <p>Article paragraph</p>
<p>Tagline</p> <aside>
</header> <p>pointer for article</p>
<nav> </aside>
<ul> </article>
<li>link1</li> <figure>
<li>link2</li> <img src=”...”>
</ul> <figcaption>text</figcaption>
</nav> </figure>
<section> <footer>
<article> ©
<header> <time datetime=”2012-11-08”>
<h1>...</h1> 2012</time>
</header> </footer>
<section> </body>
...
</section>
</article>
...much better semantic!


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

HTML5 // Forms

<input type=”text” required>

<input type=”email” value=”i@i.com”>

<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”>

...example available

HTML5 // Audio & Video

<audio id=”audio” scr=”song.mp3” controls></audio>

<video id=”video” src=”video.mov” autoplay controls></video>

HTML5 // Audio & Video
d egrad e grac efully.
...

<video id=”video” src=”video.mov” autoplay controls>
<object data=”video.mov”>

</object>
</video>

CSS // Pseudo classes

Relational Links Input Text

:not :link :focus :first-letter
:empty :visited :target :first-line
:hover :enabled :lang
:active :disabled ::selection
Position :checked

: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 :checked

:first-child
:last-child
:nth-child(n)
:nth-of-type(n)
BAD NEWs...
:first-of-type
:last-of-type
Most of these don’t
:nth-last-child(n)
:only-of-type
work on old popular
browsers! :(



Position :checked

:first-child
:last-child
:nth-child(n)
:nth-of-type(n)
SOLUTION?
:first-of-type
:last-of-type
Use more markup or
:nth-last-child(n) try Selectivizr.com
:only-of-type



Position :checked

:first-child
:last-child
:nth-child(n)
:nth-of-type(n)
GOOD NEWS...
:first-of-type
:last-of-type
They all work great on
:nth-last-child(n)
:only-of-type
IE9, webkit browsers,
Firefox and Opera...



Position :checked

:first-child
:last-child
:nth-child(n)
:nth-of-type(n)
GOOD NEWS...
:first-of-type
:last-of-type
... meaning, very suitable
:nth-last-child(n)
:only-of-type
to work on mobile
browsers :)

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


“What goes around comes around”

<blockquote>
HTML <p>What goes around comes around</p>
</blockquote>

p:before { p:after {

CSS content:’”’;
color:light-green;
content:’”’;
color:light-green;
} }


i WARNING!

HTML <p class=”warning”>Warning!</p>

p:before {
CSS content:””;
background:url(warning-icon.png) 0 0 no-repeat;
display:inline-block;
margin-right:10px;
}


i SIGN UP HERE

HTML <p class=”sign-up”>sign up here</p>

CSS .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%;
}


i SIGN UP HERE

HTML <p class=”sign-up”>sign up here</p>

CSS .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;

ro w im g!
}
border-right: 15px solid transparent;
border-top: 30px solid orange;
no ar

RESOURCES
http://html5doctor.com/css3-pseudo-classes-and-html5-forms
http://www.developer.nokia.com/document/Mobile_Web_Templates_for_Smartphones_Examples/content.html
http://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-slide
http://selectivizr.com

Html5 & CSS overview

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to Html5 & CSS overview

Similar to Html5 & CSS overview (20)

Recently uploaded

Recently uploaded (20)

Html5 & CSS overview