HTML5
The State of the Dis-Union
Reliable Sources
HTML5 For
Designers
Jeremy Keith
The Spec
Ian Hickson, editor
http://www.w3.org/
TR/html5/
The
Authoring
Spec
Ian Hickson, editor
http://www.w3.org/
TR/html5/author
Dive Into
HTML5
Mark Pilgrim
http://
diveintohtml5.org/
HTML5
Doctor
Rich Clark, Bruce
Lawson, Tom Leadbetter,
Jack Osborne, Mike
Robinson, Remy Sharp,
Oli Studholme
http://html5...
HTML5
Gallery
Showcase of HTML5-
based sites
http://
html5gallery.com/
Progress
What’s the frequency, Kenneth?
Current state


 Spec is in Last Call phase
 Next step is call for implementations and review
 Arguments still exist, but ...
HTML5 Mythbusting
Let’s Play!
HTML5 won’t be complete
for 10 years!
HTML5 won’t be complete
for 10 years!
Definition of complete
is different
HTML5 won’t be complete
for 10 years!
Definition of complete
is different
According to this
definition, CSS2 isn’t
complete
HTML5 won’t be complete
for 10 years!
Definition of complete
is different
According to this
definition, CSS2 isn’t
complete
...
HTML5 won’t be complete
for 10 years!
Definition of complete
is different
According to this
definition, CSS2 isn’t
complete
...
HTML5 isn’t suported by
most browsers!
HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class...
HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class...
HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class...
HTML5 isn’t suported by
most browsers!
New structure tags can
be enabled with a few
lines of javascript
Can use <div
class...
HTML5 means XHTML is
Dead!
HTML5 means XHTML is
Dead!

HTML5 includes an
XHTML-compatible
version
HTML5 means XHTML is
Dead!

HTML5 includes an
XHTML-compatible
version
XHTML
implementations will
continue to work
HTML5 means XHTML is
Dead!

HTML5 includes an
XHTML-compatible
version
XHTML
                       Busted!
implementation...
HTML5 Makes Flash
Irrelevant!
HTML5 Makes Flash
Irrelevant!
Video
 H.264
 Theora
 VP8
HTML5 Makes Flash
Irrelevant!
Video
  H.264
  Theora
  VP8
Interaction
  Canvas
HTML5 Makes Flash
Irrelevant!
Video
  H.264
  Theora
  VP8
              Plausible!
Interaction
  Canvas
What About WebM?
What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, ...
What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, ...
What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, ...
What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, ...
What About WebM?
WebM uses VP8 for video, Vorbis for audio, wrapped in
a Matroska (MKV) container
Opera 10.6 supports it, ...
Thinking in HTML5
Thinking in HTML5
Outline your document
  Map document sections to sections of your outline
  Use sectioning elements to r...
Thinking in HTML5
Outline your document
  Map document sections to sections of your outline
  Use sectioning elements to r...
Using the New Structure
Elements
Using the New Structure
Elements
They’re not just <div>’s with a new name
Using the New Structure
Elements
They’re not just <div>’s with a new name
They have semantic meanings which can be used by...
Using Sectioning Elements
Using Sectioning Elements


There are far more in HTML5 than just <div>
Using Sectioning Elements


There are far more in HTML5 than just <div>
To avoid confusion, ask yourself a series of quest...
Is it introductory info?
Is it introductory info?


 This info could also include a ToC or other nav aids,
 such as search forms.
Is it introductory info?


 This info could also include a ToC or other nav aids,
 such as search forms.
 If yes, mark it ...
Does it contain summary
information?
Does it contain summary
information?

This sort of information would include info such as
copyright date, author informati...
Does it contain summary
information?

This sort of information would include info such as
copyright date, author informati...
Is it a major navigation
block?
Is it a major navigation
block?


 If yes, use the <nav> element to mark it up
Does it make sense as a
standalone item?
Does it make sense as a
standalone item?


If yes, mark it up as <article>
Is it directly related to the
main content?
Is it directly related to the
main content?
 If yes, it’s either <aside> or <figure>
Is it directly related to the
main content?
 If yes, it’s either <aside> or <figure>
     Is it required in order to unders...
Is it directly related to the
main content?
 If yes, it’s either <aside> or <figure>
     Is it required in order to unders...
Is it directly related to the
main content?
 If yes, it’s either <aside> or <figure>
     Is it required in order to unders...
Is it directly related to the
main content?
 If yes, it’s either <aside> or <figure>
     Is it required in order to unders...
Is it directly related to the
main content?
 If yes, it’s either <aside> or <figure>
     Is it required in order to unders...
Might it logically have its
own heading?
Might it logically have its
own heading?


 If yes, mark it up as a <section>
Does it have semantic
meaning?
Does it have semantic
meaning?

If yes, mark it up with the element that reflects its
semantic value
Does it have semantic
meaning?

If yes, mark it up with the element that reflects its
semantic value
If no, then use a <div>
<audio>
          Browser   mp3   Vorbis   wav   AAC


          Firefox           x      x
          Opera             x ...
<audio>
                        Browser   mp3   Vorbis   wav   AAC
Problematic, due to
lack of unified suport   Firefox    ...
<audio>
                          Browser   mp3   Vorbis   wav   AAC
Problematic, due to
lack of unified suport     Firefox...
<audio>
                          Browser   mp3   Vorbis   wav   AAC
Problematic, due to
lack of unified suport     Firefox...
<video>
          Browser   Theora   H.264   WebM

          Chrome      x       x       *
          Firefox     x        ...
<video>
                  Browser   Theora   H.264   WebM
Lacks universal
support           Chrome      x       x       *
...
<video>
                      Browser   Theora   H.264   WebM
Lacks universal
support               Chrome      x       x ...
<video>
                        Browser   Theora   H.264   WebM
Lacks universal
support                 Chrome      x     ...
Flash as fallback
Flash as fallback


 Currently supports H.264 video on all supported
 platforms
Flash as fallback


 Currently supports H.264 video on all supported
 platforms
 Announced support for VP8, not WebM, and ...
Video Delivery
Video Delivery

 http://camendesign.com/code/video_for_everybody
Video Delivery

 http://camendesign.com/code/video_for_everybody
   HTML solution which uses multiple sources to
   suppor...
Video Delivery

 http://camendesign.com/code/video_for_everybody
   HTML solution which uses multiple sources to
   suppor...
Video Delivery

 http://camendesign.com/code/video_for_everybody
   HTML solution which uses multiple sources to
   suppor...
<details>
<details>

 Expandable box containing further information
<details>

 Expandable box containing further information
 Contains <summary> element (title of details box)
 followed by ...
<details>

 Expandable box containing further information
 Contains <summary> element (title of details box)
 followed by ...
Forms
Forms

Most <form> improvements mimic current javascript
practice
Forms

Most <form> improvements mimic current javascript
practice
Support for them is currently spotty and idiosyncratic
Forms

Most <form> improvements mimic current javascript
practice
Support for them is currently spotty and idiosyncratic
B...
New Form Field Attributes
New Form Field Attributes

autofocus
  Focus will automatically start on this field
New Form Field Attributes

autofocus
  Focus will automatically start on this field
placeholder
  Placeholder text
New Form Field Attributes

autofocus
  Focus will automatically start on this field
placeholder
  Placeholder text
use java...
New <input> types
New <input> types

Email, URL, Search, Color
New <input> types

Email, URL, Search, Color
Number, Range
  min, max, step, value
  stepUp, stepDown, valueAsNumber
New <input> types

Email, URL, Search, Color
Number, Range
  min, max, step, value
  stepUp, stepDown, valueAsNumber
Date
Why use them?
Why use them?

If not supported, no effect on browser
Why use them?

If not supported, no effect on browser
Some user agents can modify behavior accordingly
Why use them?

If not supported, no effect on browser
Some user agents can modify behavior accordingly
If supported, built...
Why use them?

If not supported, no effect on browser
Some user agents can modify behavior accordingly
If supported, built...
Why use them?

If not supported, no effect on browser
Some user agents can modify behavior accordingly
If supported, built...
But they don’t work
   everywhere!!
A simple fix
A simple fix

 HTML5Shiv (Fixes IE to recognize new structure
 elements)
A simple fix

 HTML5Shiv (Fixes IE to recognize new structure
 elements)
   proposed by John Resig, coded by Remy Sharp
A simple fix

 HTML5Shiv (Fixes IE to recognize new structure
 elements)
   proposed by John Resig, coded by Remy Sharp
   ...
A simple fix

 HTML5Shiv (Fixes IE to recognize new structure
 elements)
   proposed by John Resig, coded by Remy Sharp
   ...
Say “Hello” to my little friend
Say “Hello” to my little friend

 Modernizr.js
Say “Hello” to my little friend

 Modernizr.js
   incorporates HTML5 shiv idea
Say “Hello” to my little friend

 Modernizr.js
   incorporates HTML5 shiv idea
   detects support for new field attributes ...
Say “Hello” to my little friend

 Modernizr.js
   incorporates HTML5 shiv idea
   detects support for new field attributes ...
Modernizr
Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr.inputtypes[inputtype] to test for pres...
Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr.inputtypes[inputtype] to test for pres...
Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr.inputtypes[inputtype] to test for pres...
Modernizr
Modernizr.input.attribute to test for presence of new
attribute
Modernizr.inputtypes[inputtype] to test for pres...
HTML5 Update
Upcoming SlideShare
Loading in...5
×

HTML5 Update

1,692

Published on

An update on the state of HTML5, given to web414, a web developer's group.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,692
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
44
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
































































































  • HTML5 Update

    1. 1. HTML5 The State of the Dis-Union
    2. 2. Reliable Sources
    3. 3. HTML5 For Designers Jeremy Keith
    4. 4. The Spec Ian Hickson, editor http://www.w3.org/ TR/html5/
    5. 5. The Authoring Spec Ian Hickson, editor http://www.w3.org/ TR/html5/author
    6. 6. Dive Into HTML5 Mark Pilgrim http:// diveintohtml5.org/
    7. 7. HTML5 Doctor Rich Clark, Bruce Lawson, Tom Leadbetter, Jack Osborne, Mike Robinson, Remy Sharp, Oli Studholme http://html5doctor.com/
    8. 8. HTML5 Gallery Showcase of HTML5- based sites http:// html5gallery.com/
    9. 9. Progress What’s the frequency, Kenneth?
    10. 10. Current state Spec is in Last Call phase Next step is call for implementations and review Arguments still exist, but their targets are smaller
    11. 11. HTML5 Mythbusting Let’s Play!
    12. 12. HTML5 won’t be complete for 10 years!
    13. 13. HTML5 won’t be complete for 10 years! Definition of complete is different
    14. 14. HTML5 won’t be complete for 10 years! Definition of complete is different According to this definition, CSS2 isn’t complete
    15. 15. HTML5 won’t be complete for 10 years! Definition of complete is different According to this definition, CSS2 isn’t complete Is curently in final comment stage
    16. 16. HTML5 won’t be complete for 10 years! Definition of complete is different According to this definition, CSS2 isn’t complete Busted! Is curently in final comment stage
    17. 17. HTML5 isn’t suported by most browsers!
    18. 18. HTML5 isn’t suported by most browsers! New structure tags can be enabled with a few lines of javascript
    19. 19. HTML5 isn’t suported by most browsers! New structure tags can be enabled with a few lines of javascript Can use <div class=xxx> also
    20. 20. HTML5 isn’t suported by most browsers! New structure tags can be enabled with a few lines of javascript Can use <div class=xxx> also HTML4 is part of HTML5
    21. 21. HTML5 isn’t suported by most browsers! New structure tags can be enabled with a few lines of javascript Can use <div class=xxx> also HTML4 is part of HTML5 Little else
    22. 22. HTML5 isn’t suported by most browsers! New structure tags can be enabled with a few lines of javascript Can use <div class=xxx> also Plausible! HTML4 is part of HTML5 Little else
    23. 23. HTML5 means XHTML is Dead!
    24. 24. HTML5 means XHTML is Dead! HTML5 includes an XHTML-compatible version
    25. 25. HTML5 means XHTML is Dead! HTML5 includes an XHTML-compatible version XHTML implementations will continue to work
    26. 26. HTML5 means XHTML is Dead! HTML5 includes an XHTML-compatible version XHTML Busted! implementations will continue to work
    27. 27. HTML5 Makes Flash Irrelevant!
    28. 28. HTML5 Makes Flash Irrelevant! Video H.264 Theora VP8
    29. 29. HTML5 Makes Flash Irrelevant! Video H.264 Theora VP8 Interaction Canvas
    30. 30. HTML5 Makes Flash Irrelevant! Video H.264 Theora VP8 Plausible! Interaction Canvas
    31. 31. What About WebM?
    32. 32. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container
    33. 33. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container Opera 10.6 supports it, also FF and Chrome nightlies
    34. 34. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container Opera 10.6 supports it, also FF and Chrome nightlies Flash will soon ship with VP8 codec, but not WebM
    35. 35. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container Opera 10.6 supports it, also FF and Chrome nightlies Flash will soon ship with VP8 codec, but not WebM IE will support VP8 codec if installed separately
    36. 36. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container Opera 10.6 supports it, also FF and Chrome nightlies Flash will soon ship with VP8 codec, but not WebM IE will support VP8 codec if installed separately Good analysis at http://x264dev.multimedia.cx/?p=377
    37. 37. What About WebM? WebM uses VP8 for video, Vorbis for audio, wrapped in a Matroska (MKV) container Opera 10.6 supports it, also FF and Chrome nightlies Flash will soon ship with VP8 codec, but not WebM IE will support VP8 codec if installed separately Good analysis at http://x264dev.multimedia.cx/?p=377 License prohibits Apple and MS from using it
    38. 38. Thinking in HTML5
    39. 39. Thinking in HTML5 Outline your document Map document sections to sections of your outline Use sectioning elements to reflect that structure http://gsnedders.html5.org/outliner/
    40. 40. Thinking in HTML5 Outline your document Map document sections to sections of your outline Use sectioning elements to reflect that structure http://gsnedders.html5.org/outliner/ Expand to more complete site outline Aids document processing
    41. 41. Using the New Structure Elements
    42. 42. Using the New Structure Elements They’re not just <div>’s with a new name
    43. 43. Using the New Structure Elements They’re not just <div>’s with a new name They have semantic meanings which can be used by assistive technologies Can locate navigation links more easily Locate page’s main content easily Pages can be meaningfully processed (SEO, etc.)
    44. 44. Using Sectioning Elements
    45. 45. Using Sectioning Elements There are far more in HTML5 than just <div>
    46. 46. Using Sectioning Elements There are far more in HTML5 than just <div> To avoid confusion, ask yourself a series of questions about the content of the section to help clarify your choice
    47. 47. Is it introductory info?
    48. 48. Is it introductory info? This info could also include a ToC or other nav aids, such as search forms.
    49. 49. Is it introductory info? This info could also include a ToC or other nav aids, such as search forms. If yes, mark it up as <header>
    50. 50. Does it contain summary information?
    51. 51. Does it contain summary information? This sort of information would include info such as copyright date, author information, links to related documents, etc.
    52. 52. Does it contain summary information? This sort of information would include info such as copyright date, author information, links to related documents, etc. If yes, mark it up as <footer>
    53. 53. Is it a major navigation block?
    54. 54. Is it a major navigation block? If yes, use the <nav> element to mark it up
    55. 55. Does it make sense as a standalone item?
    56. 56. Does it make sense as a standalone item? If yes, mark it up as <article>
    57. 57. Is it directly related to the main content?
    58. 58. Is it directly related to the main content? If yes, it’s either <aside> or <figure>
    59. 59. Is it directly related to the main content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content?
    60. 60. Is it directly related to the main content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside>
    61. 61. Is it directly related to the main content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside> If yes, could it also be an appendix?
    62. 62. Is it directly related to the main content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside> If yes, could it also be an appendix? If yes, mark it up as <figure>
    63. 63. Is it directly related to the main content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside> If yes, could it also be an appendix? If yes, mark it up as <figure> If no, it’s really part of the main content (see next question)
    64. 64. Might it logically have its own heading?
    65. 65. Might it logically have its own heading? If yes, mark it up as a <section>
    66. 66. Does it have semantic meaning?
    67. 67. Does it have semantic meaning? If yes, mark it up with the element that reflects its semantic value
    68. 68. Does it have semantic meaning? If yes, mark it up with the element that reflects its semantic value If no, then use a <div>
    69. 69. <audio> Browser mp3 Vorbis wav AAC Firefox x x Opera x x Safari x x x Chrome x x IE9 x ? x
    70. 70. <audio> Browser mp3 Vorbis wav AAC Problematic, due to lack of unified suport Firefox x x Opera x x Safari x x x Chrome x x IE9 x ? x
    71. 71. <audio> Browser mp3 Vorbis wav AAC Problematic, due to lack of unified suport Firefox x x Element allows fallback Opera x x sources Safari x x x Chrome x x IE9 x ? x
    72. 72. <audio> Browser mp3 Vorbis wav AAC Problematic, due to lack of unified suport Firefox x x Element allows fallback Opera x x sources Safari x x x http://dev.opera.com/ Chrome x x articles/view/html5- audio-radio-player/ IE9 x ? x
    73. 73. <video> Browser Theora H.264 WebM Chrome x x * Firefox x * IE9 * Opera x x Safari x
    74. 74. <video> Browser Theora H.264 WebM Lacks universal support Chrome x x * Firefox x * IE9 * Opera x x Safari x
    75. 75. <video> Browser Theora H.264 WebM Lacks universal support Chrome x x * Firefox x * Allows for fallback sources IE9 * Opera x x Safari x
    76. 76. <video> Browser Theora H.264 WebM Lacks universal support Chrome x x * Firefox x * Allows for fallback sources IE9 * IE9 will support VP8 Opera x x codec with separate Safari x install, but not WebM
    77. 77. Flash as fallback
    78. 78. Flash as fallback Currently supports H.264 video on all supported platforms
    79. 79. Flash as fallback Currently supports H.264 video on all supported platforms Announced support for VP8, not WebM, and so far no working examples.
    80. 80. Video Delivery
    81. 81. Video Delivery http://camendesign.com/code/video_for_everybody
    82. 82. Video Delivery http://camendesign.com/code/video_for_everybody HTML solution which uses multiple sources to support video delivery, falling back to Flash, and even to .wmv files
    83. 83. Video Delivery http://camendesign.com/code/video_for_everybody HTML solution which uses multiple sources to support video delivery, falling back to Flash, and even to .wmv files http://www.html5video.org/
    84. 84. Video Delivery http://camendesign.com/code/video_for_everybody HTML solution which uses multiple sources to support video delivery, falling back to Flash, and even to .wmv files http://www.html5video.org/ Aggregation of many javascript-based solutions
    85. 85. <details>
    86. 86. <details> Expandable box containing further information
    87. 87. <details> Expandable box containing further information Contains <summary> element (title of details box) followed by flow content
    88. 88. <details> Expandable box containing further information Contains <summary> element (title of details box) followed by flow content Enables authors to implant further details in a page without resorting to javascript
    89. 89. Forms
    90. 90. Forms Most <form> improvements mimic current javascript practice
    91. 91. Forms Most <form> improvements mimic current javascript practice Support for them is currently spotty and idiosyncratic
    92. 92. Forms Most <form> improvements mimic current javascript practice Support for them is currently spotty and idiosyncratic Best practice is to set up a fallback to javascript for dumb browsers to use.
    93. 93. New Form Field Attributes
    94. 94. New Form Field Attributes autofocus Focus will automatically start on this field
    95. 95. New Form Field Attributes autofocus Focus will automatically start on this field placeholder Placeholder text
    96. 96. New Form Field Attributes autofocus Focus will automatically start on this field placeholder Placeholder text use javascript fallback if (!("autofocus" in document.createElement("input")))
    97. 97. New <input> types
    98. 98. New <input> types Email, URL, Search, Color
    99. 99. New <input> types Email, URL, Search, Color Number, Range min, max, step, value stepUp, stepDown, valueAsNumber
    100. 100. New <input> types Email, URL, Search, Color Number, Range min, max, step, value stepUp, stepDown, valueAsNumber Date
    101. 101. Why use them?
    102. 102. Why use them? If not supported, no effect on browser
    103. 103. Why use them? If not supported, no effect on browser Some user agents can modify behavior accordingly
    104. 104. Why use them? If not supported, no effect on browser Some user agents can modify behavior accordingly If supported, built-in-browser validation will check them for you
    105. 105. Why use them? If not supported, no effect on browser Some user agents can modify behavior accordingly If supported, built-in-browser validation will check them for you pattern attribute supplies regex for “normal” fields
    106. 106. Why use them? If not supported, no effect on browser Some user agents can modify behavior accordingly If supported, built-in-browser validation will check them for you pattern attribute supplies regex for “normal” fields If not supported, use a js fallback
    107. 107. But they don’t work everywhere!!
    108. 108. A simple fix
    109. 109. A simple fix HTML5Shiv (Fixes IE to recognize new structure elements)
    110. 110. A simple fix HTML5Shiv (Fixes IE to recognize new structure elements) proposed by John Resig, coded by Remy Sharp
    111. 111. A simple fix HTML5Shiv (Fixes IE to recognize new structure elements) proposed by John Resig, coded by Remy Sharp http://html5shiv.googlecode.com/svn/trunk/html5.js
    112. 112. A simple fix HTML5Shiv (Fixes IE to recognize new structure elements) proposed by John Resig, coded by Remy Sharp http://html5shiv.googlecode.com/svn/trunk/html5.js Include <script src="http:// html5shiv.googlecode.com/svn/trunk/html5.js"></ script> with a conditional comment
    113. 113. Say “Hello” to my little friend
    114. 114. Say “Hello” to my little friend Modernizr.js
    115. 115. Say “Hello” to my little friend Modernizr.js incorporates HTML5 shiv idea
    116. 116. Say “Hello” to my little friend Modernizr.js incorporates HTML5 shiv idea detects support for new field attributes and types
    117. 117. Say “Hello” to my little friend Modernizr.js incorporates HTML5 shiv idea detects support for new field attributes and types detects CSS3 support
    118. 118. Modernizr
    119. 119. Modernizr Modernizr.input.attribute to test for presence of new attribute
    120. 120. Modernizr Modernizr.input.attribute to test for presence of new attribute Modernizr.inputtypes[inputtype] to test for presence of new input types
    121. 121. Modernizr Modernizr.input.attribute to test for presence of new attribute Modernizr.inputtypes[inputtype] to test for presence of new input types Modernizr.audio[format] for audio format support
    122. 122. Modernizr Modernizr.input.attribute to test for presence of new attribute Modernizr.inputtypes[inputtype] to test for presence of new input types Modernizr.audio[format] for audio format support CSS3 features indicated by classes attached to <html>
    123. 123. Modernizr Modernizr.input.attribute to test for presence of new attribute Modernizr.inputtypes[inputtype] to test for presence of new input types Modernizr.audio[format] for audio format support CSS3 features indicated by classes attached to <html> http://www.modernizr.com/ (11K unzipped, minimized)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×