diff --git a/Makefile b/Makefile index 39de9db..ae97192 100644 --- a/Makefile +++ b/Makefile @@ -28,6 +28,7 @@ init: clean minimize-html: init { for f in *.html; do python3 util/htmlminimizer.py "$$f" build/"$$f" || exit 1; done } + sed -i -e "s|;||g" build/*.html minimize-js: init ${JAVA} -jar util/compiler.jar -js build/j/dih5.js > build/j/dih5.min.js diff --git a/canvas.html b/canvas.html index 2ea0a04..a6e2e42 100644 --- a/canvas.html +++ b/canvas.html @@ -23,13 +23,10 @@
<canvas>
natively.
-So what does a canvas look like? Nothing, really. A <canvas>
element has no content and no border of its own.
IE | Firefox | Safari | Chrome | Opera | iPhone | Android - |
---|---|---|---|---|---|---|
7.0+* | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ - |
* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> shapes natively.
- |
Every canvas starts out blank. That’s boring! Let’s draw something.
@@ -176,13 +170,10 @@IE | Firefox | Safari | Chrome | Opera | iPhone | Android - |
---|---|---|---|---|---|---|
7.0+* | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ - |
* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> paths natively.
- |
@@ -277,14 +268,11 @@
IE | Firefox | Safari | Chrome | Opera | iPhone | Android - |
---|---|---|---|---|---|---|
7.0+* | 3.0+† | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ - |
* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports canvas text natively. | ||||||
† Mozilla Firefox 3.0 requires a compatibility shim. - |
In addition to drawing lines on a canvas, you can also draw text on a canvas. Unlike text on the surrounding web page, there is no box model. That means none of the familiar CSS layout techniques are available: no floats, no margins, no padding, no word wrapping. (Maybe you think that’s a good thing!) You can set a few font attributes, then you pick a point on the canvas and draw your text there. @@ -362,15 +350,12 @@
IE | Firefox | Safari | Chrome | Opera | iPhone | Android - | |
---|---|---|---|---|---|---|---|
linear gradients | 7.0+* | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
radial gradients | 9.0+ | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ - |
* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> gradients natively.
- |
Earlier in this chapter, you learned how to draw a rectangle filled with a solid color, then a line stroked with a solid color. But shapes and lines aren’t limited to solid colors. You can do all kinds of magic with gradients. Let’s look at an example.
@@ -450,13 +435,10 @@IE | Firefox | Safari | Chrome | Opera | iPhone | Android - |
---|---|---|---|---|---|---|
7.0+* | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ - |
* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> images natively.
- |
Here is a cat: diff --git a/forms.html b/forms.html index e270bc2..36856ba 100644 --- a/forms.html +++ b/forms.html @@ -28,10 +28,8 @@
The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears. @@ -71,10 +69,8 @@
@@ -323,7 +319,6 @@
type="date"
type="month"
type="time"
type="datetime"
type="datetime-local"
This is how Opera renders <input type="date">
:
@@ -436,10 +430,8 @@
In this chapter, I’ve talked about new input types and new features like auto-focus form fields, but I haven’t mentioned what is perhaps the most exciting part of HTML5 forms: automatic input validation. Consider the common problem of entering an email address into a web form. You probably have some client-side validation in JavaScript, followed by server-side validation in PHP or Python or some other server-side scripting language. HTML5 can never replace your server-side validation, but it might someday replace your client-side validation. @@ -480,10 +472,8 @@
HTML5 form validation isn’t limited to the type of each field. You can also specify that certain fields are required. Required fields must have a value before you can submit the form. diff --git a/geolocation.html b/geolocation.html index a71bce0..e5b8c7e 100644 --- a/geolocation.html +++ b/geolocation.html @@ -40,10 +40,8 @@
Along with support for the standard geolocation API, there are a plethora of device-specific APIs on other mobile platforms. I’ll cover all that later in this chapter. diff --git a/history.html b/history.html index 1b31920..e301f5d 100644 --- a/history.html +++ b/history.html @@ -55,10 +55,8 @@
dive into dogs is a straightforward but non-trivial example of using the HTML5 history API. It demonstrates a common pattern: a long article with an associated inline photo gallery. In a supported browser, navigating the Next and Previous links in the photo gallery will update the photo in place and update the URL in the browser location bar, without triggering a full page refresh. In unsupported browsers — or, indeed, supported browsers where the user has disabled scripting — the links simply function as regular links, taking you to a new page with a full page refresh. diff --git a/j/ga.js b/j/ga.js index 44c6f9e..8315ba2 100644 --- a/j/ga.js +++ b/j/ga.js @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/offline.html b/offline.html index 6bd1b28..b6dd95d 100644 --- a/offline.html +++ b/offline.html @@ -26,10 +26,8 @@
❧ diff --git a/storage.html b/storage.html index d6e95ee..6e6f114 100644 --- a/storage.html +++ b/storage.html @@ -67,10 +67,8 @@
From your JavaScript code, you’ll access HTML5 Storage through the localStorage
object on the global window
object. Before you can use it, you should detect whether the browser supports it.
@@ -160,16 +158,13 @@
key
oldValue
null
if a new item was added
newValue
null
if an item was removed
url
*url
property was originally called uri
. Some browsers shipped with that property before the specification changed. For maximum compatibility, you should check whether the url
property exists, and if not, check for the uri
property instead.
-The storage
event is not cancelable. From within the handle_storage
callback function, there is no way to stop the change from occurring. It’s simply a way for the browser to tell you, “hey, this just happened. There’s nothing you can do about it now; I just wanted to let you know.”
@@ -264,10 +259,8 @@
Of course, if you’ve used more than one database product in your life, you are aware that “SQL” is more of a marketing term than a hard-and-fast standard. (Some would say the same of “HTML5,” but never mind that.) Sure, there is an actual SQL specification (it’s called SQL-92), but there is no database server in the world that conforms to that and only that specification. There’s Oracle’s SQL, Microsoft’s SQL, MySQL’s SQL, PostgreSQL’s SQL, and SQLite’s SQL. Indeed, each of these products adds new SQL features over time, so even saying “SQLite’s SQL” is not sufficient to pin down exactly what you’re talking about. You need to say “the version of SQL that shipped with SQLite version X.Y.Z.” diff --git a/util/htmlminimizer.py b/util/htmlminimizer.py index 2bf1ece..226b91a 100644 --- a/util/htmlminimizer.py +++ b/util/htmlminimizer.py @@ -36,7 +36,11 @@ else: continue line = line.replace('&' + e + ';', chr(n)) - + + + # & followed by whitespace can be minimized as & (really!) + line = line.replace("& ", "& ") + # strip leading and trailing whitespace, except inside
blocks g = line.strip() if g.count('Diving In<video> element support IE Firefox Safari Chrome Opera iPhone Android - 9.0+ 3.5+ 3.0+ 3.0+ 10.5+ 1.0+ 2.0+ - But support for the
<video>
element itself is really only a small part of the story. Before we can talk about HTML5 video, you first need to understand a little about video itself. (If you know about video already, you can skip ahead to What Works on the Web.) @@ -160,16 +158,13 @@What Works on the Web
Video codec support in shipping browsers Codecs/container IE Firefox Safari Chrome Opera iPhone Android - Theora+Vorbis+Ogg · 3.5+ † 5.0+ 10.5+ · · H.264+AAC+MP4 · · 3.0+ 5.0–?‡ · 3.0+ 2.0+ WebM · · † 6.0+ 10.6+ · · - † Safari will play anything that QuickTime can play. QuickTime comes pre-installed with H.264/AAC/MP4 support. There are installable third-party plugins that add support for Theora and WebM, but each user needs to install these plugins before Safari will recognize those video formats. ‡ Google Chrome will drop support for H.264 soon. Read about why. - A year from now, the landscape will look significantly different as WebM is implemented in multiple browsers, those browsers ship non-experimental WebM-enabled versions, and users upgrade to those new versions. @@ -178,17 +173,14 @@
What Works on the Web
Video codec support in upcoming browsers Codecs/container IE Firefox Safari Chrome Opera iPhone Android - Theora+Vorbis+Ogg · 3.5+ † 5.0+ 10.5+ · · H.264+AAC+MP4 9.0+ · 3.0+ · · 3.0+ 2.0+ WebM 9.0+* 4.0+ † 6.0+ 10.6+ · 2.3‡ - * Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec,” which implies that Microsoft will not be shipping the codec themselves. † Safari will play anything that QuickTime can play, but QuickTime only comes with H.264/AAC/MP4 support pre-installed. ‡ Although Android 2.3 supports WebM, there are no hardware decoders yet, so battery life is a concern. - And now for the knockout punch: