AA GUIDEGUIDE TOTO MODERNMODERN WEBWEB DEVELOPMENTDEVELOPMENT THE MODERN WEB THE MODERN WEBTHETHE MODERNMODERN WEBWEB MULTI-DEVICE WEB DEVELOPMENT Today’s web technologies are evolving at near–light speed, U Incorporate cross-platform audio and video without WITH HTML5, CSS3, AND JAVASCRIPT bringing the promise of a seamless Internet ever closer to using troublesome plug-ins reality. When users can browse the Web on a three-inch U Make images and graphics scalable on high-resolution phone screen as easily as on a fifty-inch HDTV, what’s a devices with SVG developer to do? U Use powerful HTML5 elements to design better forms Peter Gasston’s The Modern Web will guide you through PETER GASSTON the latest and most important tools of device-agnostic web Turn outdated websites into flexible, user-friendly ones development, including HTML5, CSS3, and JavaScript. that take full advantage of the unique capabilities of any His plain-English explanations and practical examples device or browser. With the help of The Modern Web, emphasize the techniques, principles, and practices that you’ll be ready to navigate the front lines of device- you’ll need to easily transcend individual browser quirks independent development. and stay relevant as these technologies are updated. Learn how to: A B O U T T H E AUTHOR U Plan your content so that it displays fluidly across Peter Gasston has been a web developer for more than multiple devices 12 years in both agency and corporate settings. The author of The Book of CSS3, Gasston has also been published U Design websites to interact with devices using the most in Smashing Magazine, A List Apart, and .net magazine. up-to-date APIs, including Geolocation, Orientation, and He runs the web development blog Broken Links (http:// Web Storage broken-links.com/) and lives in London, England. TH E FINEST I N G EEK ENTERTAINMENT ™ www.nostarch.com “I LI E FLAT.” $34.95 ($36.95 CDN) This book uses RepKover —a durable binding that won’t snap shut. COMPUTERS/WEB PROGRAMMING SHELV E IN: I NDEX Symbols and Numerals and operator for feature queries, 207 @import at-rule, 40 for media queries, 44 @supports at-rule, 102, 207 Android, 19 @viewport at-rule, for setting viewport browsers, 212 parameter, 49–50 anonymous functions . (dot) notation, for storing items, 117 vs. named functions, 92 [] (square bracket) notation, for removing from event handlers, 94 storing items, 117 Apache Cordova, 182 3-D axes, 110 APIs. See device APIs; specific APIs 3-D context app object, in manifest file, 180 detecting device position in, 110 AppCache (Application Cache), 178, WebGL for, 138 185–188 3-D orientation, information sources, caching sequence, 186–187 124, 222 documentation, 189, 225 .appcache file, 185, 186 A Appcelerator Titanium, 184 appendChild() method, 193 a element, dragging, 119 aboutness, 28 Apple, and MP4 format, 166 Application Cache. See AppCache activeElement() attribute, 131 Adaptive Images tool, 63, 64, 221 (Application Cache) adaptive websites, 39 application role, 27 vs. responsive, 53–56 applications. See TV apps; web apps arc() method, 136 add() method, 97 Archibald, Jake, 185 addEventListener method, 91–94 Adobe, 1, 182, 210, 226 areas in grid, 78, 79 Edge Inspect, 19 aria-haspopup attribute, 26 open standards, 200 article element, 22–24 agents, detecting dimension, 41 width of, 59 aside element, 22 align-content property, 77 aspect ratio align-items property, 74 alignment of device or viewport, 43 in Flexbox, 73 maintaining, 60 in grid layout, 83–84 assistive technology automatic focus and, 144 align-self property, 75 browser awareness of interactive all media type, for media queries, 44 content, 26 all value, for column-span property, 68 almost standards mode, 15 asynchronous execution of scripts, 90–91 alpha property, for orientation, 111 Atkins, Tab, 85 alt attribute, for picture element, 62 Amazon Kindle, 6 audio element, 116, 162–163 Ambient Findability (Morville), 38, 219 multiple source files for, 164 audio format, variation in browser break-inside property, 68–69 support, 166 breakpoints, 53 audio() method, 173 content, 57–59, 64, 220 AudioContext() method, 174 breaks for columns, 68–70 auto value broadband connections, 8 for column-fill property, 67 Brown, Brennen, 10, 218 for height property, 60 browsers, 12 for preload attribute, 163 alert on size, 52 autocomplete attribute for form, 145 default behavior, 90 autofocus attribute for form, 144 desktop, 3 autoplay attribute, for media developer tools in, 12 elements, 163 experimental features, enabling, avoid-column value, for break-before 212–213 property, 69 implementation of client-side axes validation, 154 in Flexbox, 73 rendering modes, 14–15 in Orientation API, 110 support, 18–19, 211–216 “business card” syntax, 29 business-to-business (B2B) sites, 2 B B2B (business-to-business) sites, 2 C balance value, for column-fill property, 67 bandwidth attribute, of connection caching sequence, 186–187 object, 115 calc() function, 55–56 banner role, 27 Camen, Kroc, 167, 175, 224 baseline value, for align-items camera, 116–117 property, 74 accessing data stream from, 175 Battery Status API, 114–115 canvas information sources, 124, 222 information sources, 140, 223 battery, vibrating impact on, 113 vs. SVG files, 138–139 beta property, for orientation, 111 canvas element, 125, 135–138 Beverloo, Peter, 106, 221 captions, for media files, 167–168 Bidelman, Eric, 209, 225 cascading variables, 200, 208–209, bitmap images, 46 210, 226 vs. vector graphics, 126 CDATA section in SVG file, 129 Blackberry, 19 center value blockquote element, 24 for align-items property, 74 Blooman, Patrick, 20, 219 for grid alignment properties, 83 Blueprint.css file, 18 for justify-content property, 73 Boolean attributes, 16 for object-position property, 61 Bootstrap framework, 18 chaining methods in jQuery, 99 border-box value, for box-sizing change event handler, in Network property, 54 Information API, 116 both keyword, for wrap-flow property, 203 charging attribute, of navigator.battery bottom value, for object-position object, 114 property, 61 chargingchange event, in Battery Status Boulton, Mark, 85, 87, 221 API, 115 Box Alignment module, information chargingTime attribute, of navigator.battery sources, 210, 226 object, 114 box-sizing property, 54–55, 207 chargingtimechange event, in Battery break-after property, 68–69 Status API, 115 break-before property, 68–69 charset attribute, for meta tag, 15 checkValidity() method, 156 228 Index child elements, in grid, 78 connection object, attributes, 115 Christian, Mark, 189, 225 Constraint Validation API, 156–158 Chrome (browser), 3 information sources, 160, 224 enabling experimental Contacts API, 123 features in, 213 contacts object, 183 Chrome for Android, Geolocation contain keyword opt-in prompt, 108 for object fit, 60–61 Chrome Web Store, 178 for object-position property, 61 documentation from, 188, 225 contains() method, 97, 120–121 manifest file for, 179–180 content attribute, 49 Chromium, 212 content breakpoints, 57–59, 64, 220 circle element in SVG, 127–128, 131 content element, 199 circles, arc() method for, 136 content object, to access web Cisco, 10, 217 template, 193 classes in JavaScript, interaction with, contentinfo role, 27 97–98 context classList object, 97 for canvas element, 135 clear keyword, for wrap-flow property, for content, 28 203–204 for device use, 7–9 clear() method, 118 controls attribute, for media clearWatch() method, 109 elements, 162 click event, information in cookies, 117 object from, 93 coords child object, 108 client-side validation cover keyword, for object fit, 60–61 disabling, 155 create() function, for contacts object, 183 of HTML form data, 154–156 createObjectURL() method, 117 cloneNode() method, 193 createShadowRoot() method, 198 closing empty elements, 16 CreativeJS, 176, 224 Coenraets, Christopher, 106, 222 cross axis, in Flexbox, 73 color input, 150–151 CSS color picker, 150–151 future of, 200–209 color query, for ebook reader, 51 Box Alignment module, 206 column value cascading variables, 208–209 for break-before property, 69 Exclusions, 202–205, 210, 226 for flex-direction property, 71 feature queries, 207–208 column-count property, 66–67, 207 Line Grid module, 206 column-fill property, 67 Paged Media module, 206 column-gap property, 67–68 Pagination Templates, 206 column-reverse value, for flex-direction Regions, 200–202 property, 71–72 and HTML forms, 159 column-rule property, 68 inheritance in, 195–196 column-span property, 68 preprocessors, 208 columns property, 67 web component conflicts, 192 column-width property, 66–67 CSS box model, 54 combining media queries, 44–45 CSS Exclusions, 202–205 comma separator, in media queries, 44 CSS layouts, 65–87 comments, in .appcache file, 186 browser support, 214 complementary role, 27 convergence with SVG, 134–135 condition, YepNope to test, 100 Flexbox module, 70–78 conditional elements, for HTML5 adding flexibility, 75–76 in IE, 25 alignment inside container, config.xml manifest file, 181 73–75 Index 229 CSS layouts, Flexbox (continued) data property, for image changing content order, 71–72 manipulation, 137 checking browser for data storage, user agents for, 117 properties, 101 datalists, for form input suggestions, declaring model, 70–71 146–147 information sources, 87, 221 dataset property, 35 wrap and flow, 76–78 datatransfer object, 120, 121 Grid Layout module, 18, 78–86 datatypes, specifying for element, 120 alignment and stacking, 83–84 date-picker widget, 149 Exclusions and, 204–205 dates, input types in forms, 148–150