book

Mobile HTML5

by Estelle Weyl

November 2013

Intermediate to advanced

480 pages

14h 4m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Native Applications Versus Web ApplicationsPep Talk (or Leaving Old Internet Explorer Behind)The Browser LandscapeWeb Applications Versus Native Applications: A Brief HistoryRelease of the SDK: Beginning of Third-Party ApplicationsWhat’s New(t)? New Elements and APIsSemantic Grouping TagsWeb FormsSVG and CanvasVideo and AudioGeolocation APIOffline Content and StorageOther APIsWhat’s New in CSS?Web FontsMobile-Specific ConsiderationsWhy This Book?Screen SizeUser GoalsWhat’s in This BookConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgments
CubeeDoo: HTML5 Mobile GameDevelopment ToolsText EditorBrowserDebugging ToolsDesktop DebuggersMobile viewportRemote DebuggingAndroid debugging toolsweinreUsing weinreAdobe Edge Inspect and GhostlabJavaScript debugging with AardwolfBlackBerry 10 DebuggerTesting ToolsEmulators and SimulatorsOnline ToolsPhonesBrowser labsiOSAndroidWindowsBlackBerryNokiaKindleWebOSAutomated Testing
HTML5 SyntaxElementsAttributesGlobal and Internationalization AttributesidclasstitlestylelangdirHTML 4 Attributes Made Core in HTML5tabindexaccesskeyNew to HTML5: Global Accessibility and Interactive AttributeshiddencontenteditablecontextmenudraggabledropzonespellcheckARIA accessibility attributesCustom data attributes with data-*Dataset APIitemid, itemprop, itemref, itemscope, and itemtypeHTML Element/Attribute SyntaxSelf-Closing ElementsBest PracticesThe Required ComponentsThe Document Type DeclarationThe <html> elementThe <head> elementThe <title> elementThe <body> elementElements Found in the <head><meta>: Adding Metadata<meta charset=“UTF-8”>Description meta tagKeyword meta tag<meta http-equiv=“. . .”>Mobile Meta TagsViewport meta tagMobile Vendor-Specific Valuesapple-mobile-web-app-capableapple-mobile-web-app-status-bar-styleformat-detectionThe <base> of Your Web Page<link>s Aren’t Just for StylesheetsAdd <link>s for your stylesheetsAttributes of the <link> tagThe media attributeThe rel attribute<style><style> and mobile performance: standards anti-patternAdding a <script> to your web pageJavaScript performance tipsWhen a user has JavaScript turned off, <noscript>A <body> of elements
Sectioning Elements in HTML5<section><article><section> Versus <article><nav><aside><header><footer>CubeeDoo Header and FooterNot New, but Not Often Used: <address>Grouping Content: Other New HTML5 Elements<main><figure> and <figcaption><hr><li> and <ol> Attribute ChangesText-Level Semantic Elements New to HTML5<mark><time><rp>, <rt>, and <ruby><bdi><wbr>Changed Text-Level Semantic Elements<a>Mobile-specific link handlingText-Level Element Changes from HTML 4Unchanged ElementsEmbedded ElementsChanges to Embedded Elements<iframe><img><object><param><area><embed>Interactive Elements<details> and <summary><menu> and <menuitem><menuitem>All of XHTML Is in HTML5, Except...In Conclusion
Attributes of <input> (and Other Form Elements)The type AttributeThe required AttributeMinimum and Maximum Values: The min and max AttributesThe step AttributeThe placeholder AttributeThe pattern AttributeThe readonly AttributeThe disabled AttributeThe maxlength AttributeThe size AttributeThe form AttributeThe autocomplete AttributeThe autofocus Attribute<input> Types and AttributesRe-introduction to Input Types You Think You KnowText: <input type=“text”>Password: <input type=“password”>Checkbox: <input type=“checkbox”>Radio: <input type=“radio”>Submit: <input type=“submit”>Reset: <input type=“reset”>File: <input type=“file”>Hidden: <input type=“hidden”>Image: <input type=“image”>Button: <input type=“button”>Styling Input TypesNew Values for <input> TypeEmail: <input type=“email”>URL: <input type=“url”>Telephone: <input type=“tel”>Number: <input type=“number”>Range: <input type=“range”>Search: <input type=“search”>Color: <input type=“color”>Date and Time Input TypesDate: <input type=“date”>Datetime: <input type=“datetime”>Datetime-local: <input type=“datetime-local”>Month: <input type=“month”>Time: <input type=“time”>Week: <input type=“week”>Form ValidationEasy UI Improvements with CSSControlling validation bubblesStyling to enhance usabilityNew Form ElementsThe <datalist> Element and the list AttributeGraceful degradation of the <datalist>The <output> elementCubeeDoo<meter><progress><keygen>Other Form ElementsThe <form> element<fieldset> and <legend><select>, <option>, <optgroup><textarea><button>The <label> ElementIn Conclusion
HTML5 Media APIsSVGIncluding SVG in Your DocumentsClown Car Technique: SVG for Responsive Foreground ImagesLearning SVGCubeeDoo SVGCanvasYour first <canvas><canvas> code exampleCanvas Versus SVGWebGLAudio/VideoMedia TypesAdding <video> to Your WebsiteAttributes of <video> and <audio>The <track> elementVideo and Audio and JavaScriptCubeeDooStyling VideoResponsive video sizingThings to know about <video> implementation
Offline Web ApplicationsAm I Even Connected to the Internet?Application CacheThe cache manifest fileUpdating the cacheLocal and Session StorageThe cookie comparisonLocalStorage to enhance mobile performanceCubeeDooclassListSQL/Database StorageWeb SQL methodsopenDatabase methodtransaction methodexecuteSQL() methodCubeeDoo high scores codeIndexedDBEnhanced User ExperienceGeolocationWeb WorkersMicrodataMicrodata versus microformatsMicrodata APICross-Document MessagingCORS: Cross-Origin Resource SharingSecurityAccessible Rich Internet Applications (ARIA)AccessibilityIn Conclusion
CSS: A Definition and SyntaxCSS SyntaxUsing External Stylesheets: <link> RevisitedThe media attributeMedia Querieswindow.matchMediaCSS Best Practices1. Minimize HTTP requests2. Use external stylesheets3. Normalize browsers with a CSS reset or normalizer4. Use the weakest specificity for ease of overwriting5. Don’t use inline styles or the !important modifierCSS SelectorsBasic SelectorsType selectorClass selectorID selectorMore CSS3 SelectorsGeneral SelectorsUniversal selector: *Type selector: EClass selector: .classID selector: #idUsing the SelectorsRelational Selectors: Rules Based on Code OrderDescendant combinator: E FChild combinator: E > FAdjacent sibling combinator: E + FGeneral sibling combinator: E ~ FAttribute SelectorsCubeeDooPseudoclassesState PseudoclassesStructural PseudoclassesThe Math of the nth TypesEven and oddSingle elements:nth-of-type versus :nth-childNumber expressionsExerciseMore Pseudoclasses:target:lang(en):not(s), or the negation pseudoclassReal world examplePseudoelements::before and ::afterCubeeDooUnderstanding double-colon notationOther Selectors: Shadow DOMSpecificity Trumps Cascade: Understanding CSS SpecificityIn Conclusion
CSS Color ValuesHexadecimal Valuesrgb() SyntaxAdding Transparency with RGBAHue, Saturation, and Lightness: HSL()CMYKNamed ColorsCurrentColorBrowser Color ValuesWhich color syntax should I use?CSS Units of MeasurementCSS Length Valuesdpi, dpc, dppxCubeeDooAngles, Times, and FrequenciesCSS Angle MeasurementsDegreesGradsRadsTurnsTimesFrequenciesCubeeDooAvoiding TRouBLe: Shorthand Properties and Value DeclarationsIn Conclusion

CSS Box Model Propertiesborderborder-styleborder-colorMaking triangles with CSSborder-widthThe CSS Box Modelbox-sizingMarginsLearning CSS3border-radiusborder-radius for native-looking buttons on the iPhone and in CubeeDooCSS GradientsGradient Type: Linear or RadialRadial GradientsLinear GradientsGradient angles and directionsGradient colorsiPhone and CubeeDoo linear gradientsbackground-sizeDPI and background-sizeStripey GradientsRepeating Linear GradientsGradients in CubeeDooMultiple background imagesCandy buttons and hard stopsTools for gradientsShadowsText ShadowFitting Text with width, overflow, and text-overflowtext-overflow propertywhite-space propertyBox ShadowPutting It All Together: CubeeDoo
CSS TransitionsThe transition-property PropertyThe transition-duration PropertyThe transition-timing-function PropertyThe transition-delay PropertyThe Shorthand transition PropertyMultiple TransitionsCSS3 TransformsThe transform-origin PropertyThe transform Propertytranslate()translateX()translateY()scale()scaleX()scaleY()rotate()rotateX()rotateY()skew()skewX()skewY()Multiple Transformsmatrix()Transitioning Transformations3D Transform Functionstranslate3d()translateZ()scale3d()scaleZ()rotate3d()perspective()Other 3D Transform PropertiesThe transform-origin property revisitedThe perspective propertyThe transform-style propertyThe backface-visibility propertyPutting It All TogetherCSS3 AnimationKeyframesApplying animationsBouncing ball animationAnimating spritesCubeeDoo animationsTransitions, Animations, and Performance
Media Queries, Breakpoints, and Fluid LayoutsMultiple ColumnsBorder ImagesSetting Border Imagesborder-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeatBorder-image shorthandFlexboxflexFeature Detection with @supportsResponsive MediaServing ImagesRetina®: high pixel-density displaysConnection speedbackground-sizeData URIsSpritesimage-set()Font iconsCSS Masking: Creating Transparent JPEGsClient Hints
Considerations Before You StartDesign ConsiderationsTools: Productivity ApplicationsEntertainment: Immersive ApplicationsFun entertainmentSerious entertainmentUtilityWhat Is Right for You?The Mobile Platform: Rich with PossibilitiesSmall ScreenLess MemoryManage memoryOne Window, One Application at a TimeMinimal DocumentationDevelopment ConsiderationsTargeting Mobile WebKitStatus BarNavigation BarUX of navigation barPage controlsNavigation bar size and colorStartup ImageHome Screen IconsMinimize Keyboard EntryBe SuccinctMake it ObviousMinimize Required InputMinimize TextOther User Experience Considerations
Scaling Down to Size@viewportTouch MeTouch AreasMouse Events, Touch EventsPointer eventsTouch eventsFeature detection for touch eventsPseudo or Not-So-Pseudo Click EventsTap highlight colorKill the selection dialogKill the images dialogKill panningonTouchEndTouching to scrollHardware AccessPhone Movement and DirectionDevice StatusNetwork connectionBatteryOther APIsNative Web Apps, Packaged Apps, and HybridsPhoneGap/Apache CordovaSencha TouchAppcelerator TitaniumTesting
Battery LifeUse Dark ColorsUse JPEGsReduce JavaScriptEliminate Network RequestsHardware AccelerationAvoid repaints and reflowsLatencyReduce the Number of HTTP RequestsBrowser cacheCombined JavaScript fileSingle stylesheetImage spritesImage compressionData URIs/inline imagesIcons and character setsInspecting network requestsReduce Size of RequestsMinify text-based assetsCompress binary filesGzip everythingReduce image sizeSkip the frameworkMinimize cookiesDefer third-party scriptsPerformance anti-patternsMemoryOptimize ImagesWeigh the benefits of CSSGPU benefits and pitfallsViewport: Out of sight does not mean out of mindMinimize the DOMMemory managementUI ResponsivenessTouch EventsAnimationIn Conclusion
CSS Selectors Level 3CSS Selector Cheat SheetCSS Selector SpecificityCSS Selectors Level 4

Content preview from Mobile HTML5

Chapter 8. Expanding Options with CSS3 Values

As we develop mobile applications on our modern browser on smartphones, we don’t have to worry about older browsers’ lack of support for CSS3 selectors, properties, and values. The iPhone, iPod, iPad, modern Android phones, Galaxy tablet, Microsoft Surface, and all other WebKit, Firefox, Opera, and Windows 8 devices have one of the most modern, standards compliant browsers. With smartphone browsers (excluding some older Windows 7 phones, but that is changing rapidly), we can now move forward and code with the most cutting-edge CSS3 and HTML5. There’s no longer a reason to hold back.

In this chapter, we start on our journey to becoming cutting-edge CSS3 developers. In the last chapter, we learned about CSS3 selectors: cutting-edge ways of targeting elements with CSS. In this chapter, we start with cutting-edge CSS3 values. In Chapter 9, we will learn how to use some cutting-edge CSS3 properties.

There are new values, including new value types, in the CSS3 specifications. In this chapter, we will cover both the old and new values of colors, lengths, and angles. We’ll learn what values are useable in all browsers, what values are new in CSS3 but already supported in most browsers, and some keyword values that are unique to specific browsers.

CSS Color Values

Prior to CSS3, we had three types of color formats: there was the hexadecimal format (and the shorthand hex format), rgb() format, and named colors. CSS3 adds support for HSL, HSLA, RGBA, ...