A Brief History of Time HTML5 CSS3 Tips
A Brief History of Time
HTML HTML Tags HTML 1.0 Spec HTML 2.0 Spec HTML 3 voorstel verworpen HTML HTML 4.0
HTML HTML XHTML XHTML Web HTML5 voorstel XHTML 2.0 verworpen
HTML Working Draft Cadidate Recommendation Proposed Recommendation
CSS CSS CSS2 - Candidate Recommendation CSS2 - Proposed Recommendation CSS3 - Candidate Recommendation Media Queries Namespaces Selectors Level 3 Color
CSS CSS CSS2 - Candidate Recommendation CSS2 - Proposed Recommendation CSS3 - Candidate Recommendation Media Queries Namespaces Selectors Level 3 Color CSS4 - First Draft
HTML5 is een standaard, CSS3 en JavaScript zijn andere standaarden Om HTML5 tot z'n recht te laten komen moet je deze drie standaarden samen laten werken
HTML5 = Eenvoud function isValid Address( Address) { var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\- \/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\- \/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0- \uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e- \x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01- \x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0- \uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|- |\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900- \uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a- z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900- \uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); return pattern.test( Address); };
HTML5 = Eenvoud
HTML5 = Eenvoud <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
HTML5 = Eenvoud
HTML5 = Eenvoud <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Demo Pagina Hello World!
HTML5 = Eenvoud Demo Pagina Hello World!
HTML5 = Eenvoud hello world! hello world!
Microdata format Avatar Director: James Cameron (born August 16, 1954 Science fiction Trailer
Microdata format Avatar Director: James Cameron (born August 16, 1954) Science fiction Trailer
Microdata format Avatar Director: James Cameron (born August 16, 1954 ) Science fiction Trailer
Demo time!
Microdata format schema.org
border-radius shadow transform media queries selectors level 3 color gradients multiple backgrounds CSS3
multi-columns border-images CSS3
CSS3 - Border-radius border-radius: 50px; border-top-left-radius: 50px 50px; border-top-right-radius: 100px 50px;
CSS3 - Shadows box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
CSS3 - Color HSL / HSLa / RGB / RGBa waardes #FF0000 rgb(100%, 0%, 0%) rgb(255, 0, 0) rgba(255, 0, 0, 1) hsl(0, 100%, 50%) hsla(0, 100%, 50%, 1)
CSS3 - Media Queries div.wrapper { margin: 0 auto; width: 940px; padding: 0px 10px 0px 10px; only screen and (max-width: 940px) { div.wrapper { width: 748px; } handheld, only screen and (max-width: 750px) { div.wrapper { padding: 0; width: 480px; } only screen and (max-width: 460px) { div.wrapper { width: 300px; } }
Demo time!
CSS3 - Transform div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ }
Demo time!
CSS3 - Transition div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } div:hover { width:300px; }
Demo time!
:nth-child(10n-1) = 9,19,29,... :nth-child(odd) = (2n+1) :nth-child(even) = (2n+0) :nth-of-type() :nth-last-of-type() :first-child :last-child :first-of-type :last-of-type :empty CSS3 - Selectors L3 :root :target :enabled :disabled :checked :not() :lang()
Demo time!
Meer info?
Begin er zelf mee html5boilerplate.com
Vragen?