HTML and CSS Reference
In-Depth Information
input.addEventListener('webkitspeechchange', function(event) {
if (event.results) {
for (var i = 0, result; result = event.results[i]; ++i) {
console.log('Speech: ' + result.utterance + ' ' + result.confidence);
}, false);
you can learn more about Chrome's speech api by going to
experimental.speechInput.html .
If you're familiar with speech to text recognition services like Dragon diction or even Siri from Apple, this feature
will be very familiar and useful to you and your users. For more information on the working spec on the JavaScript
speech API, visit
html . So, you may be thinking, “What good are these awesome attributes if some browsers won't recognize them?”
Well, good question. Be sure to check out or leverage tools like Modernizer (if available to you);
otherwise, you can always do some simple JavaScript checking like this:
if (!'x-webkit-speech' in document.createElement('input') ) {
// no speech input
} else {
// speech!
In the end, keep in mind your user base and remember that not all users will be capable of rendering all features
of the modern Web.
Details and Summary Element
The details element is a great new feature in modern browsers. Have you ever wanted to show just a bit of
information initially and, upon user selection, reveal more information, sort of like an accordion open/close effect?
Well, the details element can help you really quickly do just that. Take a look at Listing 11-10, which incorporates the
details element into the example ad. For this example, you'll assume you know where the user is and you want to
show the nearest stores based on their location.
Listing 11-10. Details/Summary Example
<html lang=en>
<style type="text/css">
summary {
outline: none;/*removes outline*/
Search WWH ::

Custom Search