1. Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax. It defines detailed processing models to foster interoperable implementations and improves markup for documents and APIs for emerging web applications.
2. Todd Anglin discusses HTML5, CSS3, and techniques for using them today including progressive enhancement, feature detection, and libraries that help support older browsers.
3. He recommends trying a new HTML5/CSS3 technique like data attributes, border radius, box shadow, or animations using CSS transitions.
5. “While it continues to serve as a
rough guide to many of the core
features of HTML, it does not
provide enough information to
build implementations that
interoperate with each other and,
more importantly, with a critical
mass of deployed content.”
-W3C on HTML4
6. 1991
• HTML
Tags
1995
• HTML 2
• Later: File
uploads,
tables
1997 (Jan)
• HTML 3.2
(W3C)
1997 (Dec)
• HTML 4
• Strict,
Trans,
Frameset
• 1999:
4.01
HTML5:
• Addressing modern web applications & pains of the past
7. 1996
• CSS v1
• IE3: First
implementation
• IE Mac: First
100% support
1997
• CSS v2
• Still ZERO 100%
implementations
2007
• CSS v2.1
• Fixed errors in 2.0
spec
CSS: Plagued by implementation bugs & inconsistencies
CSS3
• Improve consistency & power of styling language
8. • Better, but not perfect
Feature Check
• CanIUse.com
• BrowserScope.org
• Html5Test.com
Equalizers
• Html5Reset.org
• Html5Boilerplate.com
• jQuery
Hacks
• JavaScript helpers
• “Downlevel”
experiences
Know your users. Know your browsers.
13. 1. Defines a single language called HTML5
which can be written in HTML syntax and in
XML syntax.
2. Defines detailed processing models to foster
interoperable implementations.
3. Improves markup for documents.
4. Introduces markup and APIs for emerging
idioms, such as Web applications.
16. • Tags with meaning
<body>
<div id=“header”>
</div>
<div id=“content”>
<div id=“nav”></div>
</div>
<div id=“footer”>
</div>
</body>
<body>
<header>
</header>
<section>
<nav></nav>
</section>
<footer></footer>
</body>
VS.
*Need shiv to trigger styling in old IE
17. • Content with meaning
– Machines understand more of your content
<!--Facebook Share Microformat for video-->
<meta name="title" content="Baroo? - cute puppies" />
<meta name="description" content="The cutest canine on the Internet!" />
<link rel="image_src" href="http://example.com/thumbnail_preview.jpg" />
<link rel="video_src" href="http://example.com/video_object.swf?id=12345"/>
<meta name="video_height" content="296" />
<meta name="video_width" content="512" />
<meta name="video_type" content="application/x-shockwave-flash" />
18. • Improved usability
– Supported in Safari, Chrome, Opera (so far)
<form name="f">
<input id="q" autofocus>
<!--Technique to support older browsers-->
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
</script>
<input type="submit" value="Go">
</form>
19. • data-*
– Valid approach to storing data in HTML
<!--Store values in data-* attributes-->
<div id="mydiv" data-key="26" data-name="My product name">
This product is an extremely popular choice.
</div>
<!--Access values with JavaScript-->
var mydiv=document.getElementById('mydiv')
//Using DOM's getAttribute() property
var key = mydiv.getAttribute("data-key") //returns "26"
//OR Using JavaScript's dataset property**
var key = mydiv.dataset.key //returns "26"
22. • CSS Reset
– Browsers ship with built-in styles – zero them out!
– Enable newer features in older browsers
http://html5reset.org
http://html5boilerplate.com
25. • Solve the licensing problem
• Host the TTF/OTF font files
• Provide easy-to-use code
http://code.google.com/webfonts
http://webfonts.fonts.com
http://typekit.com/libraries
26. • Easy corner control
– Expect GD for older browsers (IE)
-moz-border-radius: 5px 5px 5px 5px; //Optionally ”explicit”
-webkit-border-radius: 5px;
border-radius: 5px;
//Can also control specific corners
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
32. • Animate by setting CSS properties
– Works when JS is disabled
#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
33. • Target styles to specific devices…
– And features!
/*These two rules do the same thing*/
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
/*Multiple conditions*/
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
34. • Features waiting for friends
WebKit
• Reflections (-
webkit-box-
reflect)
• 3D Transforms (-
webkit-
perspective)
Mozilla
• <Nothing
notable?>
IE (9)
• Hardware
rendering!
35. • Shiv’r + Inspector
– Simple way to check feature support
– Conditional JS and CSS
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
if (Modernizr.canvas) {
//Canvas supported
}
if (Modernizer.cssColumns){
//Columns supported
}
//Etc...
*Don’t use with IE HTML5shiv. One or the other.
39. • LESS CSS “framework” + tutorial
– http://designshack.co.uk/articles/css/using-less-
js-to-simplify-your-css3
• LESS T4 Template from Phil Haack
– http://haacked.com/archive/2009/12/02/t4-
template-for-less-css.aspx
• LESS VS CSS code highlighting
– http://visualstudiogallery.msdn.microsoft.com/en-
us/dd5635b0-3c70-484f-abcb-cbdcabaa9923
Editor's Notes
HTML5 and CSS3 Techniques You Can Use TodayAs more browsers deliver rich support for the next generation of standards-based web development, new techniques are enabling web developers to design with unprecedented levels of control. In this session, you’ll learn practical HTML5 and CSS3 techniques that you can use in any web project today. Learn how to easily add drop shadows to HTML objects, how to quickly create rounded corners, how to use custom fonts, and even how to animate with CSS. All techniques will be demonstrated with special attention to cross-browser support and tips for supporting older browsers.
http://dev.w3.org/html5/html4-differences/
Goes on to say:
The same goes for XHTML1, which defines an XML serialization for HTML4, and DOM Level 2 HTML, which defines JavaScript APIs for both HTML and XHTML. HTML5 will replace these documents.
http://en.wikipedia.org/wiki/HTML
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
IE Mac: Shipped in March 2000
9 style sheet languages proposed in early 90s
Languages:
1996: JavaScript Style Sheets (JSSS) – Netscape
1994: Cascading HTML Style Sheets (CHSS)
1994: Stream-based Style Sheet Proposal (SSP)
http://dev.w3.org/html5/html4-differences/
http://code.google.com/p/ie7-js/
Testing IE: http://spoon.net/browsers/
Three choices:
Hack it – Force features with JS shivs
Support it – Provide gracefully degraded experience
Kill it – Provide message indicating no or limited support
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=164506
Google tool for testing Rich Snippets: http://www.google.com/webmasters/tools/richsnippets
Google will not show content from hidden div's in Rich Snippets.
Currently, review sites and social networking/people profile sites are eligible. We plan to expand Rich Snippets to other types of content in the future. (Sept 2010)
http://knol.google.com/k/google-rich-snippets-tips-and-tricks
Improve video discovery: http://googlewebmastercentral.blogspot.com/2009/09/supporting-facebook-share-and-rdfa-for.html
http://diveintohtml5.org/forms.html
http://www.javascriptkit.com/dhtmltutors/customattributes.shtml
http://html5doctor.com/html5-custom-data-attributes/
Two methods of access:
- Via Attributes (http://api.jquery.com/category/attributes/)
Via “dataset” (plug-in required today: http://www.orangesoda.net/jquery.dataset.html)
http://upload.wikimedia.org/wikipedia/en/d/d0/Chrome_Logo.svg
Comparison articles:
Great comparison: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
http://blogs.sitepoint.com/2010/07/06/canvas-vs-svg-how-to-choose/ (IDEA: progressive enhancement techniques — for example, IE8 and earlier versions show a table of data whereas supported browsers show an animated pie chart.)
SVG Bridge for all browsers: http://raphaeljs.com/
CANVAS Bridge for IE: http://code.google.com/p/explorercanvas/
(Pointless canvas example: http://paulirish.com/2010/high-res-browser-icons/)
SVG is DOM-based. All elements exist in DOM. Thus, you can attach event handlers. CON: Many objects can hurt perf.
CANVAS is PIXEL-based. All elements rendered quickly, but not part of DOM. CON: Harder to interact.
Microsoft Extensions: http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
Vendor specific prefixes: http://reference.sitepoint.com/css/vendorspecific
@font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5
IE relied on proprietary Embedded Open Type (.eot)
Old school solutions involved things like sIFR (http://www.mikeindustries.com/blog/sifr/)
Modern browsers finally support TTF and OTF
Resources:
http://www.css3.info/preview/web-fonts-with-font-face/
http://www.alistapart.com/articles/cssatten
Making fonts compatible with IE requires some work-around:
http://randsco.com/index.php/2009/07/04/p680
Fix “bleeding” in Webkit with: -webkit-background-clip: padding-box;
http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed