HTML5 + CSS3
Falsy Values workshop
Tantek Çelik, Mozilla Web Standards tantek.com • @t
HTML5+CSS3 Falsy Values Workshop
- What's New in 2011
- HTML5: spec basics, learning, participating
- CSS3: overview, stable vs prefixed, exploring
2011: What's New?
W3C HTML5 logo
W3C HTML5 badges
2011 March
IE9
Firefox 4
NYT - HTML5
New York Times
HTML5 Is Breathing New Life Into the Web
Firefox 4 Mobile
for Android and Nokia
Now
glow.mozilla.org
Let's Get Started!
Introductions
- Say your name
- Favorite HTML5/CSS3 feature (or want)
- Three words to describe yourself
HTML5 we're covering today
- HTML5 Basics
- Upgrading from HTML4/XHTML to HTML5
- HTML5 Semantics
- Native Multimedia
- New HTML5 forms capabilities
- Web APIs and the evolution of HTML5
Workshop Conventions
- blue hyperlinks to more info, examples, demos
code is monospacebold italic gray for old codeorange dotted underlined transitional codebold fuchsia for new or recommended code
HTML5 Basics
HTML5 Basics: Adoption Strategy
- Start with basics
- Upgrade your HTML4/XHTML
- Add new HTML5 features as needed
- Experiment and keep up
HTML5 Basics: DOCTYPE
- Old SGML heritage DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - New DOCTYPE
<!DOCTYPE html>
HTML5 Basics: meta charset
- Old meta http-equiv charset
<meta http-equiv="content-type" content="text/html; charset=utf-8"> - Simpler meta charset
<meta charset="utf-8">
HTML5 Basics: First HTML5 Document
<!DOCTYPE html><meta charset="utf-8"><title> Hello </title><p> World Wide Web </p>
Exercises 1-2: HTML5 Basics
Exercise 3: New HTML5 Document
Upgrading from HTML4/XHTML
Upgrading from HTML4/XHTML
- Remove presentational markup
- Remove failed features
- Maintain compatibility
- Update obsolete markup
Upgrade: Remove Presentation
<plaintext>→ use<pre>instead<basefont> <big> <font> <tt>→ use CSSfont<strike> <u>→text-decoration<center>align→text-alignandmargin:autolink, alink, vlink→ pseudo-classes andcolor
Upgrade: Remove Failed Features
<img longdesc>- use a visible description or link<frameset> <frame>- breaks linking, history, accessibility
- redesign, with
<iframe>if necessary
<html version>- no practical effect
Upgrade: Remove Failed Features
<meta scheme>- avoid invisible metadata- add microformats to visible content
revattribute - oft misunderstood.- use
relmicroformats instead
- use
Upgrade: Maintain Compatibility
<script type="text/javascript"><a href="..."><img border="0"></a>
Upgrade: XHTML Compatibility
- Self-close empty HTML4 tags, e.g.
<br/> <embed/> <hr/> <img/> <input/> <link/> <meta/>
- Always use quoted attribute values
<img src=photo1.jpg>→<img src="photo1.jpg" />
- Use explicit tags for a consistent DOM
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> ... </title> </head> <body> ... </body> </html><table> <tbody> <tr> <td> ... </td> </tr> </tbody> </table>
Exercise 4: XHTML compatibility
Upgrade: Replace Obsolete Markup
<acronym>→ use<abbr>instead<applet>→<object><dir>→<ul><a name="a1"></a>→<div id="a1"> ... </div><img name="i1">→<img id="i1" />
Upgrade: Refinements to HTML4 elements
<em>- nest to indicate stronger emphasis<strong>- importance rather than emphasis
Upgrade: HTML4 elements now semantic
<small>- small print, disclaimer, caveat, copyright<i>- alternate voice/mood. technical term, idiom<b>- stylistically offset. keyword, product, lead<s>- no longer accurate or relevant<br>- line break, e.g. in poems, addresses<hr>- paragraph level thematic break
Upgrade: black sheep acknowledged
- Features that “worked” cross-browser
- But not in spec or were mistakenly deprecated
<iframe>for nested HTML<embed>for plugins<base target>, <a target>, <area target>
Upgrade: list numbering acknowledged
<li value><ol start><ol>,<ul>may have zero items<ol reversed>New!
Warning: HTML5 and <cite>
<cite>- HTML4 allowed speaker names- HTML5 only allows “title of a work”, disallows people
- Recommendation: use
<cite>+ hCard for speakers:<q cite="#ak"> The best way to predict the future is to invent it. </q> — <cite class="vcard" id="ak"> <span class="fn"> Alan Kay </span> </cite>
Questionable HTML5 restriction: <cite>
- Millions of real world web pages use cite for speakers
- Add your voice:
Upgrade: hyperlinks around blocks
<a>can now surround blocks, e.g. post headings<a rel="bookmark" href="..."><h2>title of a blog post, linked to its permalink</h2></a>
Upgrade: global attributes
class, dir, id, lang, style, tabindex, title- apply to all elements.
- simple example:
<html>,<title>elements
Upgrade: <a> <area> media
<a media>, <area media>just like<link media><a media="handheld" href="http://m.twitter.com" rel="alternate"> mobile site </a><a media="print" href="http://example.com/article-print" rel="alternate"> print version </a>
<area hreflang rel>like<a hreflang rel>- Potential additional use of
relfor microformats
- Potential additional use of
Upgrading from HTML4/XHTML - Summary
- Use CSS instead of presentational markup
- Drop
rev,longdesc,frame,version,scheme - Use compatibility attributes only as needed
- Update with
idattribute,<abbr>,<object>,<ul>
Upgrading from HTML4/XHTML - Summary
- New details:
<em> <strong> - Now semantic:
<small> <i> <b> <s> <br> <hr> - Ok:
<iframe> <embed> <li value> <ol start> target - Workaround:
<cite>+ hCard for speakers
Upgrading from HTML4/XHTML - Summary
- Hyperlinks can now surround blocks
- Universal attributes:
class dir id lang style tabindex title - Consistent link attributes:
media rel hreflang
Exercise 5: HTML5 Upgrade Sensible
Upgrade: Validate HTML5
- New validator: validator.nu
- Use the new validator favelet (from favelets.com)
- W3C validator now also supports HTML5
- Verify all your changes are still valid
- Make any necessary fixes and revalidate
Upgrade: Validate HTML5
- Congratulations!
- You've updated your existing markup to HTML5
- Review dev.w3.org/html5/html4-differences for more
- You're ready to learn new HTML5 features
HTML5 semantics
HTML5 semantics
- Practical HTML5 semantics: article
- More: figure, hgroup, time
- From XHTML 1.1: Ruby
Practical HTML5 semantics: article
<article>- self-contained post, news, comment<header>- intro,<nav>, headings<footer>- info, copyright<aside>- tangential content, side comments
More semantics: figure, hgroup, time
<figure> <figcaption>- images, captions/descriptions<hgroup>- related multilevel headings<time datetime>- precise dates and date-times- known limitations: wiki.whatwg.org/wiki/Time_element
Readability
Readability Article Publishing Guidelines
Exercises 6-7: post and poster
HTML5 semantics: bulletproofing
- New tags stylable in all modern browsers...
- except Internet Explorer 8 and earlier
- Use a nested div with semantic class name, e.g.:
<article><div class="article">...</div></article>....article { /* article styling here */ }
HTML5 semantics: bulletproofing
- Add more classes (microformats) to nested div:
<article><div class="article hentry">...</div><article> - Some new tags disallow nested divs
- Use a containing div in those cases:
<div class="hgroup">
<hgroup>...</hgroup></div>
HTML5 semantics: Ruby
- Nothing to do with the programming language
<ruby>- annotated East Asian text<rt>- Ruby Text annotation- Not Twitter retweets
<rp>- Ruby Parenthesis for non-supporting browsers
HTML5 semantics: Ruby Example
- Ruby markup for Japanese with hiragana reading
... <ruby> 漢 <rp>(</rp><rt>かん</rt><rp>)</rp> 字 <rp>(</rp><rt>じ</rt><rp>)</rp> </ruby> ... - Sample fallback (non-Ruby) rendering
... 漢 (かん) 字 (じ) ...
HTML5 semantics: Ruby Example
- Ruby markup for Japanese with hiragana reading
... <ruby> 漢 <rp>(</rp><rt>かん</rt><rp>)</rp> 字 <rp>(</rp><rt>じ</rt><rp>)</rp> </ruby> ... - Sample Ruby rendering
HTML5 semantics: Ruby
- Very useful for East Asian typography
- Works in IE & WebKit browsers today, graceful in others
- Mozilla / Gecko bug 3339
- Recommendation
- Use it!
New HTML5 semantics summary
<article>:<header> <nav> <footer> <aside><figure> <figcaption> <hgroup><time>for dates - beware of limitations<ruby>incorporated from XHTML 1.1
Native Multimedia
Multimedia: native vector graphics
<svg>- W3C's vector graphics markup- example: external images on Wikipedia
<canvas>- drawing with javascript
HTML5 vector graphics status
- SVG in HTML support shipped in FF4/IE9!
- Canvas - still challenging
- Modern browser support (except IE8 and below)
- Requires good design for fallback content
- Accessibility techniques still being developed
- Recommendation:
- decorative images and experiments
Exercise 8: Modify a canvas example
HTML5 multimedia: audio and video
<audio src></audio>- like img for sound<video src></video>- alternative to video plugins- numerous sites using HTML5 video today
Dependable HTML5: video formats
- H.264:
Chrome,Safari, IE9 - WebM: Chrome, Firefox, Opera, IE9+codec
- 2011 February: YouTube WebM iframe embeds
- Keep up with webmproject.org
2011 March
Vid.ly conversions public beta
Dependable HTML5: sources, fallback
<source src>- publish WebM and H.264<video controls> <source src="http://example.com/vid.ogv"> <source src="http://example.com/vid.mp4"> <object data="http://example.com/vid.mp4"> <embed src="http://example.com/vid.swf"> </object> </video>- Browser uses first format it can handle
<object><embed>for older browser fallback
VideoJS player code
HTML5 audio and video summary
<audio src> <video src>- Use vid.ly to transcode multiple formats
- Use
<source src>for alternatives - Provide alternate text content or embed inside
- Recommend starting with VideoJS player code
Exercises 9-10: audio & video
Geolocation API update
- Browser API for sites to request user location
- The only "Web App" API that is a CR!
- 2010 support: Chrome, Firefox, Opera, Safari
2010 October - Front Trends
Tweet: Dear IE please implement Geo
2011 February
IE9 RC: Added Geolocation
Practical Now: Geolocation API
- Recommendation: Use it!
- Provide fallback: enter location form
Roughly Usable HTML5
Roughly Usable: HTML5 History API
- The problem:
#!URLs history.pushState- update current URL- Examples: Facebook photos, Flickr lightbox
- Modern browser support (all but IE)
- Let's tweet:
- Dear @IE: please support HTML5 pushState in IE10! #html5 #falsyvalues
- Fallback: let them eat page loads
New HTML5 forms capabilities
New HTML5 forms capabilities
- Usable inputs
- Awkward inputs
- Output and details
- Meter and progress
New HTML5 usable inputs
- Good for mobile / touch input devices
New HTML5 harmless inputs
New HTML5 awkward inputs
New HTML5 form inputs summary
- Lots of new
<input type="..."> - Some good, some harmless, some awkward
- Some partial support of new inputs
- Try them in iOS, Android, Opera
- Undefined restylability
- Ok fallback textbox behavior
- Note: unpredictable future page UI changes
Exercise 11: new inputs
New HTML5 output and details
<output>- result of a calculation<details>- expandable content<summary>- label for details- example: list of grouped items
New HTML5 meter and progress
<meter>- % or measurement within a range- ratings, countdowns, fundraising donations (examples)
- use % or fraction inline, or
min max valueattributes
<progress max value>- task completion- uploading, online checkout, filling out a multipage form
Exercises 12-13: progress & meter
New HTML5 user interface attributes
autofocusattribute - upon page loadplaceholderattribute - suggestionsrequiredattribute - for form submission
Web APIs and the evolution of HTML5
HTML5 and related Web APIs
- For intermediate or advanced experiments:
Web App Experiments are Drafts
- All working drafts (or editor's drafts)
Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways.
- All of these Web APIs could change.
- If you want to depend on them, you must keep up
Web SQL Database abandoned
Mozilla Web of Wonder
HTML5 Open Discussion
Help HTML5 Evolve
- Read spec updates and HTML5 blogs
- WHATWG wiki
- #whatwg IRC channel on Freenode
- Join the W3C HTML Working Group
HTML5 Conclusion
HTML5 Conclusion
- Get started today
- Update your pages with HTML5 + microformats
- Enhance with new semantics, graphics, media
- Validate, Fix, Repeat and Publish your HTML5 site!
- Follow updates, Give feedback, Help move the Web forward
CSS3
CSS3 we're covering today
- Snapshot, CRs, Test Suites
- Roadmap and Drafts
- Case Study: S5
- Open Discussion
CSS3 Snapshot and CRs
CSS Snapshot
- State of CSS - after CSS 2.1
- As of 2007:
- CSS 2.1
- 'style' attribute
- CSS3 Selectors
- namespaces (for XML+CSS)
- CSS3 Color
Other Recent CSS CRs
Judging CSS CR features
- Find test suite
- Read the implementation reports
- Try test cases for a feature
CSS Roadmap and Drafts
CSS3 Working Drafts
- Browsers use prefixes: -moz-, -ms-, -o-, -webkit-
- Future browsers promise more:
- Try interactive examples
- View the Source!
Case Study: S5 - Upgraded
S5
- Simple
- Standards-based
- Slide-
- Show
- System
S5
- 2003 SXSW HTML+CSS+JS slides
- Eric Meyer made a public domain slide template
- Some markup + style upgrades
- You're soaking in it
S5 improvements
- microformats: hCalendar hCard XOXO
- For rich semantics + search engines
- Firefox: Operator
- Chrome: Michromeformats
S5 improvements
- HTML5:
<hgroup> <footer> history.pushState - CSS3:
.incremental {opacity: 0;} .incremental,.current { -moz-transition: opacity .5s linear; -webkit-transition: opacity .5s linear; -o-transition: opacity .5s linear; }