HTML and CSS Reference
In-Depth Information
<script>
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);
</script>
■
you can learn more about Chrome's speech api by going to
http://developer.chrome.com/extensions/
Note
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
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
http://caniuse.com
or leverage tools like Modernizer (if available to you);
otherwise, you can always do some simple JavaScript checking like this:
<script>
if (!'x-webkit-speech' in document.createElement('input') ) {
// no speech input
} else {
// speech!
}
</script>
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
<!DOCTYPE HTML>
<html lang=en>
<head>
<style type="text/css">
summary {
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: none;/*removes outline*/
}
