Home · Book Reports · 2021 · Responsive Web Design With HTML5 and CSS

designates my notes. / designates important.

Thoughts

Very useful for understanding responsive design. The layout and flow of the book was very intuitive in leading from one topic to the next. Unlike many of the other programming books I read, this one I read for a practical purpose. Directly after reading it I built How to Eat an Elephant.xyz. About a year later I adapted what I already had there for this site.

Not much else to say, but the book allowed me to create what I wanted.

Table of Contents

• 01 - Essentials of Responsive Web Design
• 02 - Writing HTML Markup
• 03 - Media Queries - Supporting Different Viewports
• 04 - Fluid Layout, Flexbox, and Responsive Images
• 05 - Layout with CSS Grid
• 06 - CSS Selectors, Typography, Color Modes, and More
• 07 - Stunning Aesthetic with CSS
• 08 - Using SVGs for Resolution Independence
• 09 - Transitions, Transformations, and Animations
• 10 - Conquer Forms with HTML5 and CSS
• 11 - Bonus Techniques and Parting Advice

page 24:

· Chapter 01: Essentials of Responsive Web Design

page 45:

• When you write CSS for a responsive design, start with base styles that can work on any device—typically the smallest screen and then use media queries to adapt it for larger screens

page 48:

· Chapter 02: Writing HTML Markup

page 55:

• In terms of the HTML specification, the elements we will be looking at fall into one of three groups:

• Sectioning elements, for the broadest strokes in a HTML page. These are the kind of elements to use for header, footer, and sidebar areas.

• Grouping elements, which are used to wrap associated elements. Think of paragraphs, blockquotes, and content of that nature.

• Text-level semantics, which are the elements we use to designate particulars, like a section of bold or italic text or code.

page 58:

• However, HTML5 introduced the ability for each sectioning container to have its own self-contained outline. That means it is not necessary to think about which level of heading tag you’re at in terms of the entire document. You could just concentrate on the sectioning container you are currently working in.

• To illustrate why this might be preferable, within a blog, post titles could be set to use <h1> tags, while the title of the blog itself could also have an <h1> tag. For example, consider the following structure:

<h1>Ben's site</h1>
<section>
  <h1>Ben's blog</h1>
  <p>All about what I do</p>
</section>
<article>
  <header>
    <h1>A post about something</h1>
    <p>Trust me this is a great read</p>
    <p>No, not really</p>
    <p>See. Told you.</p>
  </header>
</article>

• Despite having multiple <h1> headings, the outline still appears as follows:
  1. Ben’s site
  2. Ben’s blog
  3. A post about something

page 59:

• However, the reality is that search engines and the like make no use of the HTML5 outliner at present. Therefore, from a pragmatic standpoint, it probably makes more sense to continue thinking about headings in terms of the whole document. That will make your documents easier to read for search engines and also aid assistive technology to infer the correct meaning.

page 68:

• Web Content Accessibility Guidelines (WCAG)

page 72:

• Further attributes include preload to control preloading of media, loop to repeat the video, and poster to define a poster frame for the video, the image that shows while a video loads. To use an attribute, simply add it to the tag. Here’s an example including all these attributes:

<video src="myVideo.mp4" width="640" height="480"
  controls
  autoplay
  preload="auto"
  loop
  poster="myVideoPoster.png">
  If you're reading
  this either the video didn't load or your browser is waaaayyyyyy old!
</video>

page 73:

• The

page 74:

• The only problem with our lovely HTML video implementation is it’s not responsive. That’s right, an example in a book about responsive web design with HTML5 and CSS that doesn’t respond. Thankfully, for HTML embedded video, the fix is easy. Simply remove any height and width attributes in the markup (for example, remove width=“640” height=“480”) and add the following in the CSS:

video {
  max-width: 100%;
  height: auto;
}

• However, while that works fine for files that we might be hosting locally, it doesn’t solve the problem of videos embedded within an iframe (take a bow YouTube, Vimeo, et al.) The following code will add a film trailer for Midnight Run from YouTube:

<iframe width="960" height="720" src="https://www.youtube.com/
embed/B1_N28DA3gY" frameborder="0" allowfullscreen></iframe>

• However, if you add that to a page as is, even if adding that earlier CSS rule, if the viewport is less than 960px wide, things will start to get clipped.

• The easiest way to solve this problem is with a little CSS trick pioneered by Gallic CSS maestro Thierry Koblentz here: http://alistapart.com/article/creating- intrinsic-ratios-for-video. Essentially, he is creating a box of the correct aspect ratio for the video it contains. I won’t spoil the magician’s own explanation, go take a read.

• If you’re feeling lazy, you don’t even need to work out the aspect ratio and plug it in yourself; there’s an online service that can do it for you. Just head to http:// embedresponsively.com/ and paste your iframe URL in. It will spit you out a simple chunk of code you can paste into your page.

page 75:

• For example, our Midnight Run trailer results in this (note the padding-bottom value to define the aspect ratio):

<style>
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
  }
  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class="embed-container">
  <iframe
    src="http://www.youtube.com/embed/B1_N28DA3gY"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

page 78:

· Chapter 03: Media Queries - Supporting Different Viewports

page 82:

page 85:

• Here’s what a media query looks like on a link you’d find in the section of markup:

<link rel="stylesheet" media="screen and (orientation: portrait)"
href="portrait-screen.css" />

• This media query is asking “Are you a screen and is your orientation portrait?”.

@media screen and (orientation: portrait) {
    /* styles here */
}

<link rel="stylesheet" media="not screen and (orientation:
portrait)" href="portrait-screen.css" />

page 87:

• width: The viewport width.

• height: The viewport height.

• DEPRICATED device-width: The rendering surface’s width (for our purposes, this is typically the screen width of a device).

• DEPRICATED device-height: The rendering surface’s height (for our purposes, this is typically the screen height of a device).

• orientation: This capability checks whether a device is portrait or landscape in orientation.

• aspect-ratio: The ratio of width to height based upon the viewport width and height. A 16:9 widescreen display can be written as aspect-ratio: 16/9.

• DEPRICATED device-aspect-ratio: This capability is similar to aspect-ratio but is based upon the width and height of the device rendering surface, rather than viewport.

• color: The number of bits per color component. For example, min-color: 16 will check that the device has 16-bit color.

• color-index: The number of entries in the color lookup table (the table is how a device changes one set of colors to another) of the device. Values must be numbers and cannot be negative.

• monochrome: This capability tests how many bits per pixel are in a monochrome frame buffer. The value would be a number (integer), for example, monochrome: 2, and cannot be negative.

• resolution: This capability can be used to test screen or print resolution; for example, min-resolution: 300dpi. It can also accept measurements in dots per centimeter; for example, min-resolution: 118dpcm.

• scan: This can be either progressive or interlace features largely particular to TVs. For example, a 720p HDTV (the p part of 720p indicates “progressive”) could be targeted with scan: progressive, while a 1080i HDTV (the i part of 1080i indicates “interlaced”) could be targeted with scan: interlace.

• grid: This capability indicates whether or not the device is grid- or itmap- based.

page 88:

• All the preceding features, with the exception of scan and grid, can be prefixed with min or max to create ranges. For example, consider the following code snippet:

@import url("tiny.css") screen and (min-width:200px) and (max-
width:360px);

• It’s worth being aware that the draft specification for Media Queries Level 4 deprecates the use of a few features (http://dev. w3.org/csswg/mediaqueries-4/#mf-deprecated), most notably device-height, device-width, and device-aspect- ratio. Support for those queries will remain in browsers but it’s recommended you refrain from writing any new style sheets that use them.

page 90:

• Notice that each time, in our media query, we only amend the specific properties we need to change?

rwd-Nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    position: relative;
    margin: 10px 0 0 0;
}

@media (min-width: 1000px) {
    .rwd-Nav {
        margin: 0;
        padding: 0;
    }
}

page 96:

• A coarse pointer device might be a finger on a touch screen device. However, it could equally be a cursor from a games console that doesn’t have the fine-grained control of something like a mouse:

@media (pointer: coarse) {
    /* styles for when coarse pointer is present */
}

• A fine pointer device might be a mouse but could also be a stylus pen or any future fine-grained pointer mechanism:

@media (pointer: fine) {
    /* styles for when fine pointer is present */
}

• Browsers report whether the value of pointer is fine, coarse, or none, based on the “primary” pointing device. Therefore, consider that just because a device has the capability of a fine pointer, it doesn’t mean that will be the primary pointing device. Think of tablets where the primary pointer is a finger (coarse), but that has an attached stylus—a fine pointing device.

• The safest bet is always to assume users are using touch-based input and to size user interface elements accordingly. That way, even if they are using a mouse they will have no difficulty using the interface with ease. If however you assume mouse input and don’t provide affordance for coarse pointers, it might make for a difficult user experience.

page 97:

• For users that have no ability to hover, we can target styles at them with a value of none:

@media (hover: none) {
    /* styles for when the user cannot hover */
}

• Or, as before, we might choose to make the non-hover scenario the default and then only add hover styles for devices that take advantage of them:

@media (hover) {
    /* styles for when user can hover */
}

• Be aware that there are also any-pointer or any-hover media features. They are like the preceding hover and pointer but test the capabilities of any of the possible input devices.

• That way, if you want to apply styles if any input device is capable of hover, regardless of whether that input device is the primary one:

@media (any-hover: hover) {
    /* styles if any input device is capable of hover*/
}

• If you wanted to style an element a certain way based upon whether any attached pointer device was coarse, you could use any-pointer like this:

@media (any-pointer: coarse) {
    /* styles to be applied if any attached pointer is coarse */
}

• In the last couple of years, popular operating systems for both desktop and mobile computers have given users the option of a “dark mode.” To supplement this, operating systems expose this user preference to the browser by way of the prefers-color-scheme media feature. This media query is actually in Level 5 of the specification, not Level 4. However, it is in the odd situation of being 5 of the specification, not Level 4. However, it is in the odd situation of being implemented in most common browsers already.

page 98:

• At present there are three possible preferences: light, dark, and no-preference. To demonstrate this feature’s use, we might amend the default colors for a page like this:

body {
    background-color: #e4e4e4;
    color: #545454;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #ddd;
    }
}

page 100:

· Chapter 04: Fluid Layout, Flexbox, and Responsive Images

page 100:

• …the three core tenets of responsive web design are fluid layout, media queries, and flexible media.

page 109:

• For the sake of your sanity, to accurately and easily add vendor prefixes to CSS, use some form of automatic prefixing solution. Right now, I favor Autoprefixer (https://github.com/postcss/autoprefixer). It’s fast, easy to set up, and very accurate.

• There are versions of Autoprefixer for most setups; you don’t necessarily need a command line-based build tool (such as Gulp or Grunt).

• Flexbox has four key characteristics: direction, alignment, ordering, and flexibility.

page 117:

page 144:

· Chapter 05: Layout with CSS Grid

page 178:

· Chapter 06: CSS Selectors, Typography, Color Modes, and More

page 182:

<img src="https://placeimg.com/640/480/any" alt="an inquisitive cat">

And this CSS:

img[alt] {
  border: 3px dashed #e15f5f;
}

• this selects all img tags with the alt attribute.

[data-sausage] {
  /* styles */
}

• this selects all img tags with the data-sausage attribute.

page 183:

img[alt="Sausages cooking"] {
  /* Styles */
}

• This would only target images that have an alt attribute of “Sausages cooking”; for example:

<img src="img/sausages.png" alt="Sausages cooking" />

<li data-type="todo-chore">Empty the bins</li>
<li data-type="todo-exercise">Play football</li>

page 184:

[data-type^="todo"] {
  /* Styles */
}

• this selects all data-type attributes that start with “todo” (just like regex)

[attribute*="value"] {
  /* Styles */
}

• this selects all data-type attributes that contain “value” (just like regex)

page 161:

[data-type^="todo"] {
/* Styles */
}

[attribute$="value"] {
  /* Styles */
}

page 184:

• this selects all data-type attributes that end with “value” (just like regex)

page 186:

[data-activity-name="swimming"][data-location="indoor"] {
  /* Styles */
}

• chaining data type selectors

page 187:

• You can select the first or last item in an element. For example to put the last link in the head off to the right. Instead of giving it an id, you can use :last-child.

div:first-child {
  /* Styles */
}

div:last-child {
  /* Styles */
}

• There are also useful selectors for when something is the only item: :only-child and the only item of a type: :only-of-type.

page 188:

• select every other item (even or odd).

.nav-Link:nth-child(odd) {
  /* Styles */
}

.nav-Link:nth-child(even) {
  /* Styles */
}

• nth options: nth-child(n) nth-last-child(n) nth-of-type(n) nth-last-of-type(n)

• :nth-child(3n+1) would start at the first element, and then select every third element.

page 195:

• For example, .parent .descendant {} would select any element that was a descendant of the .parent element with a class of .descendant, no matter how many levels deep.

• We can select only the direct “child” of the parent element, like this:

.parent > .descendant {
  /* Styles */
}

.one + .item {
  border: 3px dashed #f90;
}

• The + symbol there means “next sibling,” so select the next sibling element of .one.

page 196:

.item:nth-child(3) ~ .item {
  border: 3px dashed #f90;
}

• The ~ symbol, called “tilde,” says “every subsequent sibling.”

.a-div:not(.not-me) {
    background-color: orange;
    border-radius: 50%;
}

• The :not negates. This selects all divs without the .not-me class.

page 197:

<div class="thing"></div>

• And here’s the CSS:

.thing {
  padding: 1rem;
  background-color: violet;
}

• Without any content in that element, I still see the background color. Thankfully, we can easily hide it, like this:

.thing:empty {
  display: none;
}

page 198:

• The vw unit, where each vw unit is 1% of the viewport width.

• The vh unit, where each vh unit is 1% of the viewport height.

• The vmin unit (for viewport minimum; equal to the smaller of either vw or vh).

• The vmax (viewport maximum; equal to the larger of either vw or vh).

page 199:

.Hero-text {
  font-size: 25vw;
}

• scaling font via viewport.

• There is a new mathematical expression on the way to CSS called clamp(), which lets us specify a minimum, maximum, and variable size. For example, we might opt for a headline like this: .headline { font-size: clamp(20px, 40vw, 80px) }. And while our headline text might vary in size, depending upon the viewport, it would never be less than 20px or larger than 80px. You can read the specification for clamp() here: https://www. w3.org/TR/css-values-4/#calc-notation.

.thing {
    width: calc(50% - 10px);
}

• width is 50% of the parent minus 10 pixels. (NOTE: needs whitespace around operators.)

page 200:

:root {
  --MainFont: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

• :root is a pseudo-element that references the top element (html tag in html page)

• –MainFont: is like a variable that can be passed to javascript or in the css file.

.Title {
  font-family: var(--MainFont);
}

page 203:

.my-Item {
     background-color: var(--backgroundColor, #555);
}

• sets #555 to the fallback color if –backgroundColor is unavailable.

page 205:

@supports (display: grid) {
  .Item {
    display: inline-grid;
  }
}
@supports not (display: grid) {
  .Item {
    display: inline-flex;
  }
}

• Here, we are defining one block of code for when the browser supports a feature, and another lot for when it doesn’t. This pattern is fine if the browser supports @supports (yes, I realize that is confusing), but if it doesn’t, it won’t apply any of those styles.

• If you want to cover off devices that don’t support @supports, you’re better off writing your default declarations first and then your @supports-specific one after. That way, the prior rule will be overruled if support for @supports exists, and the @supports block will be ignored if the browser doesn’t support it. Our prior example could, therefore, be reworked to:

.Item {
  display: inline-flex;
}
@supports (display: grid) {
  .Item {
    display: inline-grid;
  }
}

page 206:

@supports ((display: flex) and (pointer: coarse)) {
  .Item {
    display: inline-flex;
  }
}

• chaining conditionals in @supports.

• And that really is all there is to feature queries. As with media queries, put your “default” styles first, and then your enhancement inside a feature query @supports at-rule. Remember, you can combine queries and also offer differing possibilities in which the enclosed code can apply.

page 224:

· Chapter 07: Stunning Aesthetic with CSS

page 262:

· Chapter 08: Using SVGs for Resolution Independence

page 300:

· Chapter 09: Transitions, Transformations, and Animations

page 304:

• transitions

.style {
  /*...(more styles)...*/
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

• or:

transition: all 1s ease 0s;

page 305:

• Furthermore, the shorthand syntax is much easier to write as you can get away with only providing the property you want to transition and the duration it should transition over. To exemplify, suppose I wanted the background-color to transition over 2 seconds:

transition: background-color 2s;

• If no timing function is provided, the default timing function of ease is applied.

• multiple transitions:

.style {
  /* ...(more styles)... */
  transition-property: border, color, text-shadow;
  transition-duration: 2s, 3s, 8s;
}

• or

.style {
  transition: border 2s, color 3s, text-shadow 8s;
}

page 307:

page 309:

• scale: Scale an element (larger or smaller)

• translate: Move an element on the screen (up, down, left, and right)

• rotate: Rotate the element by a specified amount (defined in degrees or turns)

• skew: Skew an element with its X and Y coordinates

• matrix: Allows you to move and shape transformations in multiple ways

page 311:

• If you want to specify just one axis to translate an element, you can also use translateX(-20px), which, in this instance, would move the element left 20px, or you could use translateY(-20px), which, in this case, would move the element 20px up.

page 334:

· Chapter 10: Conquer Forms with HTML5 and CSS

page 366:

· Chapter 11: Bonus Techniques and Parting Advice