Table of Contents for
Responsive Web Design with HTML5 and CSS3 - Second Edition

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Responsive Web Design with HTML5 and CSS3 - Second Edition by Ben Frain Published by Packt Publishing, 2015
  1. Cover
  2. Table of Contents
  3. Responsive Web Design with HTML5 and CSS3 Second Edition
  4. Responsive Web Design with HTML5 and CSS3 Second Edition
  5. Credits
  6. About the Author
  7. About the Reviewers
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Conventions
  13. Reader feedback
  14. Customer support
  15. 1. The Essentials of Responsive Web Design
  16. Defining responsive web design
  17. Setting browser support levels
  18. Our first responsive example
  19. The shortcomings of our example
  20. Summary
  21. 2. Media Queries – Supporting Differing Viewports
  22. Media query syntax
  23. Combining media queries
  24. Using media queries to alter a design
  25. Considerations for organizing and authoring media queries
  26. Combine media queries or write them where it suits?
  27. The viewport meta tag
  28. Media Queries Level 4
  29. Summary
  30. 3. Fluid Layouts and Responsive Images
  31. Introducing Flexbox
  32. Getting Flexy
  33. Responsive images
  34. Summary
  35. 4. HTML5 for Responsive Web Designs
  36. Starting an HTML5 page the right way
  37. Easy-going HTML5
  38. New semantic elements in HTML5
  39. HTML5 text-level semantics
  40. Obsolete HTML features
  41. Putting HTML5 elements to use
  42. WCAG and WAI-ARIA for more accessible web applications
  43. Embedding media in HTML5
  44. Responsive HTML5 video and iFrames
  45. A note about 'offline first'
  46. Summary
  47. 5. CSS3 – Selectors, Typography, Color Modes, and New Features
  48. Anatomy of a CSS rule
  49. Quick and useful CSS tricks
  50. Word wrapping
  51. Facilitating feature forks in CSS
  52. New CSS3 selectors and how to use them
  53. CSS3 structural pseudo-classes
  54. CSS custom properties and variables
  55. CSS calc
  56. CSS Level 4 selectors
  57. Web typography
  58. New CSS3 color formats and alpha transparency
  59. Summary
  60. 6. Stunning Aesthetics with CSS3
  61. Box shadows
  62. Background gradients
  63. Repeating gradients
  64. Background gradient patterns
  65. Multiple background images
  66. High-resolution background images
  67. CSS filters
  68. A warning on CSS performance
  69. Summary
  70. 7. Using SVGs for Resolution Independence
  71. The graphic that is a document
  72. Creating SVGs with popular image editing packages and services
  73. Inserting SVGs into your web pages
  74. Inserting an SVG inline
  75. What you can do with each SVG insertion method (inline, object, background-image, and img)
  76. Extra SVG capabilities and oddities
  77. Animating SVG with JavaScript
  78. Optimising SVGs
  79. Using SVGs as filters
  80. A note on media queries inside SVGs
  81. Summary
  82. 8. Transitions, Transformations, and Animations
  83. CSS3 2D transforms
  84. CSS3 3D transformations
  85. Animating with CSS3
  86. Summary
  87. 9. Conquer Forms with HTML5 and CSS3
  88. Understanding the component parts of HTML5 forms
  89. HTML5 input types
  90. How to polyfill non-supporting browsers
  91. Styling HTML5 forms with CSS3
  92. Summary
  93. 10. Approaching a Responsive Web Design
  94. View and use the design on real devices
  95. Embracing progressive enhancement
  96. Defining a browser support matrix
  97. Tiering the user experience
  98. Linking CSS breakpoints to JavaScript
  99. Avoid CSS frameworks in production
  100. Coding pragmatic solutions
  101. Use the simplest code possible
  102. Hiding, showing, and loading content across viewports
  103. Validators and linting tools
  104. Performance
  105. The next big things
  106. Summary
  107. Index

Easy-going HTML5

I remember, back in school, every so often our super-mean (but actually very good) math teacher would be away. The class would breathe a collective sigh of relief as, rather than "Mr. Mean" (names have been changed to protect the innocent), the replacement teacher was usually an easy-going and amiable man. He sat quietly and left us to get on without shouting or constant needling. He didn't insist on silence whilst we worked, he didn't much care if we adhered to the way he worked out problems, all that mattered was the answers and that we could articulate how we came to them. If HTML5 were a math teacher, it would be that easy-going supply teacher. I'll now qualify this bizarre analogy.

If you pay attention to how you write code, you'll typically use lower-case for the most part, wrap attribute values in quotation marks, and declare a "type" for scripts and style sheets. For example, perhaps you link to a style sheet like this:

<link href="CSS/main.css" rel="stylesheet" type="text/css" />

HTML5 doesn't require such precision, it's just as happy to see this:

<link href=CSS/main.css rel=stylesheet >

Did you notice that? There's no end tag/slash, there are no quotation marks around the attribute values, and there is no type declaration. However, easy going HTML5 doesn't care. The second example is just as valid as the first.

This more lax syntax applies across the whole document, not just linked assets. For example, specify a div like this if you like:

<div id=wrapper>

That's perfectly valid HTML5. The same goes for inserting an image:

<img SRC=frontCarousel.png aLt=frontCarousel>

That's also valid HTML5. No end tag/slash, no quotes, and a mix of capitalization and lower case characters. You can even omit things such as the opening <head> tag and the page still validates. What would XHTML 1.0 say about this?

Tip

Want a short-cut to great HTML5 code? Consider the HTML5 Boilerplate (http://html5boilerplate.com/). It's a pre-made "best practice" HTML5 file, including essential styles, polyfills, and optional tools such as Modernizr. You can pick up lots of great tips just by viewing the code and it's also possible to custom build the template to match your specific needs. Highly recommended!

A sensible approach to HTML5 markup

Personally, I like writing my markup 'XHTML' style. That means closing tags, quoting attribute values, and adhering to a consistent letter case. One could argue that ditching some of these practices would save a few bytes of data but that's what tools are for (any needless characters/data could be stripped if needed). I want my markup to be as legible as possible and I would encourage others to do the same. I'm of the opinion that clarity in code should trump brevity.

When writing HTML5 documents therefore, I think you can write clean and legible code while still embracing the economies afforded by HTML5. To exemplify, for a CSS link, I'd go with the following:

<link href="CSS/main.css" rel="stylesheet"/>

I've kept the closing tag and the quotation marks but omitted the type attribute. The point to make here is that you can find a level you're happy with yourself. HTML5 won't be shouting at you, flagging up your markup in front of the class and standing you in a corner with a dunces hat on for not validating (was it just my school that did that?). However you want to write your markup is just fine.

Who am I kidding? I want you to know right now that if you're writing your code without quoting attribute values and closing your tags, I am silently judging you.

Tip

Despite HTML5's looser syntax, it's always worth checking whether your markup is valid. Valid markup is more accessible markup. The W3C validator was created for just this reason: http://validator.w3.org/

Enough of me berating writers of 'hipster' style markup. Let's look at some more benefits of HTML5.

All hail the mighty <a> tag

A huge economy in HTML5 is that we can now wrap multiple elements in an <a> tag (woohoo! About time, right?). Previously, if you wanted your markup to validate, it was necessary to wrap each element in its own <a> tag. For example, look at the following HTML 4.01 code:

<h2><a href="index.html">The home page</a></h2>
<p><a href="index.html">This paragraph also links to the home page</a></p>
<a href="index.html"><img src="home-image.png" alt="home-slice" /></a>

With HTML5, we can ditch all the individual <a> tags and instead wrap the group with one:

<a href="index.html">
  <h2>The home page</h2>
  <p>This paragraph also links to the home page</p>
  <img src="home-image.png" alt="home-slice" />
</a>

The only limitations to keep in mind are that, understandably, you can't wrap one <a> tag within another <a> tag (because, like, duh) or another interactive element such as a button (because like, double duh!) and you can't wrap a form in an <a> tag either (because like, oh, you get the idea).