HTML and CSS Sitting in a Tree. K i s s i n O M G

HTML& CSS Sitting in a Tree

KissinOMG

Who?

ShaneBecker

@veganstraightedge

buzz.com

yp.com/lite

iamshane.com

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd




<!DOCTYPE html>

<html lang="en">

<html dir="ltr">

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<meta charset="utf-8" />

<script type=”text/javascrtipt” charset=”utf-8”>

<script>

<style type=”text/css”>

<style>

REDEFINEDELEMENTS

<b>

<strong>

<i>

<em>

<br>

<hr>

<s>

<small>

<embed>

NEW ELEMENTS

<article>

<aside>

<audio>

<audio src=""/>

<audio attrs>

controls

preload="none"

preload="metadata"

preload="auto"

loop

autoplay

<audio> <source src=".mp3"/> <source src=".ogg"/> <source src=".wav"/></audio>

<canvas>

<details>

<footer>

<header>

<hgroup>

<mark>

<nav>

<progress>

<section>

<summary>

<time>

<time pubdate>

datetime="2009-11-13T20:00"

datetime="2009-11-13T20:00+09:00"

<video>

<video src=""/>

<video attrs>

autoplay

poster=".png"

<video> <source src="h.264"/> <source src=".ogv"/></video>

HTML5FORMS

placeholder

autofocus

required

<input type=*>

type="email"

type="url"

type="tel"

type="search"

type="date"

type="datetime"

type="number"

type="range"

type="color"

<meter>

<progress>

MISC

data-* attrs

data-lat="123.456"

data-lon="3.14159"

data-foo="bar"

data-ypid="6159963"

ARIA

Accessible Rich Internet Applications

role="banner"

<header>

role="navigation"

<nav>

role="main"

<section>

role="article"

<article>

role="complementary"

<aside>

role="contentinfo"

<footer>

role="search"

<input type="search" />

HTML5FRIENDS

geolocation

local storage

offline apps

web workers

web sockets

history api

file api

undo history

drag and drop

deviceorientation

CSS3

border-radius

linear-gradient

radial-gradient

media queries

@media

@media="only screen and (max-device-width: 480px)"

@media="only screen and (max-device-width: 480px)" { h1 { background: url(small-logo.png) }}

@media="only screen and (max-device-width: 480px)

and (orientation:portrait)"

@media="only screen and (max-device-width: 480px)

and (orientation:landscape)"

box-shadow

text-shadow

multiple backgrounds

border-image

@font-face

:before

:after

:first-child

:last-child

:nth-child( )

:nth-child(even)

:nth-child(odd)

:nth-child(10n-1)

:target

img[alt=foo]

RGBa

transforms

transistions

More…

htmldog.com

diveintohtml5.org

html5doctor.com

books.alistapart.com

View Source

iamshane.com/products

Date post:	02-Jul-2015
Category:	Documents
Upload:	shane-becker
View:	601 times
Download:	1 times

HTML and CSS Sitting in a Tree. K i s s i n O M G

Documents