Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End

Do you love CSS quantity selectors, too? Is your pattern library still up-to-date today, and how would you go around building one? Do you adjust web font styles based on the battery status? How do you optimize start render for important images and fonts? Have you ever tried to work around complex spongy tables, perfect responsive grids without orphans, and responsive, fluid type with CSS locks? Well, bring it on!

In this talk, Vitaly Friedman — Editor-in-Chief of Smashing Magazine — highlights some of the practical front-end techniques and ideas. Beware: you might not be able to unsee some of the dirty tricks you'll see in this deck. Ready? Go!

Want to play along? For every level, you can get at most 3 points. Read the question, think on how you would solve the problem, and check the solution. Calculate your score in the end. And thanks for playing! ;-)

Transcript

1. Dirty Little Tricks From the Dark Corners of Front-End Vitaly Friedman (illustrations by Simon C Page, Nelson Cash) December 13, 2016
2. Vitaly Friedman, editor-in-chief
 and co-founder of SmashingMag
4. This webinar is about techniques.
5. And about tricky front-end strategies. This webinar is about techniques.
6. And what works in real-life projects. And about tricky front-end strategies. This webinar is about techniques.
10. It’s your lucky day. You grow, and your company expands to foreign markets. Your site has to support 23 languages. How do you architect CSS/JS to support it?
12. The crucial asset of longevity is building “neutral”, configurable components which can be easily extended and adjusted.
13. // english.json
 {
 serviceName: 'english';
 language: 'en';
 textDirection: 'ltr';
 socialMediaButtons: ['twitter', 'facebook', 'reddit'];
 }
 
 // russian.json
 {
 serviceName: 'russian';
 language: 'ru';
 textDirection: 'ltr';
 textLength: 'verbose';
 socialMediaButtons: ['twitter', 'facebook', 'vk'];
 }
14. config/english.json
 /russian.json 
 css/english.css
 /russian.css
 
 sass/english.scss
 /russian.scss
 /mixins/_textDirection.scss
 /mixins/_textLength.scss
 /mixins/_socialMediaButtons.scss
 
 index.en.html
 index.ru.html
15. // english.scss
 $english = true;
 $script = 'latin';
 
 // russian.scss
 $russian = true;
 $script = 'cyrillic';
 
 @if $russian {
 // apply styling only to Russian version
 } With a templating language, we can then plug data
 from config files and hence customize HTML output
 for every language.
16. // english.scss
 $english = true;
 $script = 'latin';
 $direction = 'left';
 @include(mixins/directions);
 @include(mainstyles);
 
 // arabic.scss
 $arabic = true;
 $script = 'arabic';
 $direction = 'right';
 @include(mixins/directions);
 @include(mainstyles);
 
 @if $arabic {
 // apply styling only to Arabic version
 }
17. // directions.scss
 $margin-left: margin-left;
 if $direction == 'right' {
 $margin-left: margin-right;
 }
 
 $padding-left: padding-left;
 if $direction == 'right' {
 $padding-left: padding-right;
 }
 
 $left: left;
 if $direction == 'right' {
 $left: right;
 }
18. // directions.scss
 $margin-left: margin-left;
 if $direction == 'right' {
 $margin-left: margin-right;
 }
 
 $padding-left: padding-left;
 if $direction == 'right' {
 $padding-left: padding-right;
 }
 
 $left: left;
 if $direction == 'right' {
 $left: right;
 } $margin-right: margin-right;
 if $direction == 'right' {
 $margin-right: margin-left;
 } $padding-right: padding-right;
 if $direction == 'right' {
 $padding-right: padding-left;
 } $right: right;
 if $direction == 'right' {
 $right: left;
 }
19. // global.scss
 .nav-element {
 #{$margin-left}: 10px;
 #{$padding-right}: 10px;
 #{$left}: 10px;
 }
 
 // english.css
 .nav-element {
 margin-left: 10px;
 padding-right: 10px;
 left: 10px;
 }
 
 // arabic.css
 .nav-element {
 margin-right: 10px;
 padding-left: 10px;
 right: 10px;
 }
 .nav-element {
 float: flip(left, right);
 padding: flip(10px 10px 0 0,
 10px 0 0 10px);
 line-height: get-script-value
 (latin 1.3, arabic 1.6);
 }
20. // global.scss
 .nav-element {
 float: flip(left, right);
 padding: flip(10px 10px 0 0, 10px 0 0 10px);
 line-height: get-script-value(latin 1.3, arabic 1.6);
 }
 
 // english.css
 .nav-element {
 float: left;
 padding: 10px 10px 0 0;
 line-height: 1.3em;
 }
 
 // arabic.css
 .nav-element {
 float: right;
 padding: 10px 0 0 10px;
 line-height: 1.6em;
 }

27. You want to add a background to inline text for headings, but the text should be padded along both the left and right edge of each line. Left/right padding will only apply to the very first and very last line.
30. The box-decoration-break in CSS specifies element’s appearance if the box for the element is fragmented, i.e when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container.
33. We can use a little trick: apply a zero-spread box-shadow on an inline element by defining the shadow only on the x-axis.
40. You have to build in fluid, flexible type, and designers want you to implement perfect modular scale. The proportions have to stay consistent across screens.
43. CSS Architecture • Main CSS contains default type styles: /* CSS Reset of your choice */
 body { font-size: 100%; line-height: 1.45em; } /* 2:3 Perfect Fifth: 7.111, 10.667, 16 (i), 24, 36, 54 */
 h1 { font-size: 3.375rem }
 h2 { font-size: 2.25rem }
 h3 { font-size: 1.5rem }
 h4 { font-size: 1rem }
 caption { font-size: 0.667rem }
 small { font-size: 0.444rem }
44. CSS Architecture /* CSS Reset of your choice */
 body { font-size: 100%; line-height: 1.45em; } /* 2:3 Perfect Fifth: 7.111, 10.667, 16 (i), 24, 36, 54 */
 h1 { font-size: 3.375rem }
 h2 { font-size: 2.25rem }
 h3 { font-size: 1.5rem }
 h4 { font-size: 1rem }
 caption { font-size: 0.667rem }
 small { font-size: 0.444rem } /* Ideal line length: 66 ch; => max-width: 33em */
 article { max-width: 33em; }
 :lang(de) article { max-width: 40em; }
 p, ul, ol, dl, table { margin-bottom: 1.45rem; }
45. CSS Architecture /* CSS Reset of your choice */
 body { font-size: 100%; line-height: 1.45em; } /* 2:3 Perfect Fifth: 7.111, 10.667, 16 (i), 24, 36, 54 */
 h1 { font-size: 54px; font-size: 3.375rem }
 h2 { font-size: 36px; font-size: 2.25rem }
 h3 { font-size: 16px; font-size: 1rem; }
 h4 { font-size: 24px; font-size: 1.5rem }
 caption { font-size: 7px; font-size: 0.667rem }
 small { font-size: 11px; font-size: 0.444rem } /* Ideal line length: 66 ch; => max-width: 33em */
 article { max-width: 33em; }
 :lang(de) article { max-width: 40em; }
 p, ul, ol, dl, table { margin-bottom: 1.45rem; }
46. “How do you efficiently scale up / down any UI component (e.g. a slider or calendar) and keep all the proportions intact—without fiddling with width, height or border-radius manually? 
 — @simurai
49. “By sneaking a Trojan horse into your components. We use rem for components “root” and em for sub- parts of the components. Then, by adjusting the font-size of the root, we adjust all size-related CSS properties of a component at once. 
 — @simurai
53. With media queries, we can target specific screen width ranges and adjust type by just manipulating the font-size rem value of the article’s container.
54. “To achieve fluid typography, we can combine the calc( ) function in CSS with viewport units (vw/vh/vmin/ vmax). But what if you want to apply a modular scale to font sizes?
55. We can get perfectly fluid type with
 html { font-size: calc(1em + 1vw); } but it gives us little control over the rate at which viewport units change. Media queries? Well, with them usually there is an annoying “visual” jump between fixed and fluid values. 
 — Mike Riethmuller
57. …E.g. if we wanted to choose a font- size of 16px at a screen resolution of 400px and then transition to 24px at a resolution of 800px, we couldn’t do it without a breakpoint. 
 — Mike Riethmuller
62. You choose the min and max font- size and the screen sizes, over which the font should scale and plug them into the equation. You can use any unit type including ems, rems or px. 
 — Mike Riethmuller
76. Implement the baseline rhythm in CSS. Insert two differently formatted elements next to each other and they’ll seem out of phase. How do we fix it?
78. “So you want to implement a baseline rhythm in CSS. Insert two differently formatted elements next to each other and they’ll seem out of phase. How do we bring them under control? 
 — Jan Dudek
80. Often we define a common line height value (or its multiple) that’s used for all elements, including their paddings and margins, occasionally taking border widths into the equation.
81. What if we align the baseline instead? So that all type—regardless of its size —lies on the same grid line? We just need to calculate the offset and then shift the content by that offset.
83. By default, browsers center the cap height (the height of a capital letter above the baseline) between grid lines. So we shift it by the half of the difference between line height and cap height.
84. To determine the cap height, we
 fiddle with offset values until the
 type is properly aligned with the grid.
85. $font-stacks: (
 s: $font-stack-text,
 m: $font-stack-text,
 l: $font-stack-display,
 xl: $font-stack-display
 ); • vertical-rhythm.scss: $line-height: 24px; $font-sizes: (s: 13px, m: 15px, l: 19px, xl: 27px);
 $cap-heights: (s: 0.8, m: 0.8, l: 0.68, xl: 0.68);
86. $font-stacks: (
 s: $font-stack-text,
 m: $font-stack-text,
 l: $font-stack-display,
 xl: $font-stack-display
 ); @function rhythm-shift($size-name) {
 $font-size: map-get($font-sizes, $size-name);
 $cap-height: map-get($cap-heights, $size-name);
 $offset: ($line-height - $cap-height * $font-size) / 2;
 return round($offset);
 } $line-height: 24px; $font-sizes: (s: 13px, m: 15px, l: 19px, xl: 27px);
 $cap-heights: (s: 0.8, m: 0.8, l: 0.68, xl: 0.68);
87. Now we just need to apply the offset, and do so reliably. We can combine positive top margin and negative bottom margin to make it work.
88. .rhythm-m {
 margin-top: $offset;
 margin-bottom: -1 * $offset;
 } $offset: rhythm-shift(m);
89. • Collapsing works differently with positive and negative margins: • Two positive margins
 The bigger one wins. • Two negative margins
 The lower (i.e. the more negative) wins. • One positive, one negative margin
 The margins sum up.
90. If an element doesn’t have a border nor padding, and its first child has a margin, that margin will flow out of the parent. Use overflow: hidden.
94. Often we want to target a specific child
 in the DOM, but the parent might have many children. Usually we style all children first and the overwrite the styles.
96. “What if you want all links to have an underline except the ones you specify? Or you want all <li>’s in the navigation to have a right border, except the last one. Normally you would use :last-child (or extra class) to overwrite a default CSS rule. 
 — Ire Aderinokun
100. “You’ve built an alert message box. To be resilient to failure, how can we make sure that the box will be hidden when there is no content within it? — Ire Aderinokun
103. “What if you want a tidy grid with fine and consistent line endings? Sometimes you might end up with not enough space to display all content blocks in a row, or not enough items to properly fill a row. 
 — Patrick Clancey
106. A quantity selector is a CSS selector that allows styles to be applied to elements based on the number of siblings.
111. • CSS:
 li:nth-last-child(6):first-child,
 li:nth-last-child(6):first-child ~ li {
 color: green;
 }
112. • CSS:
 li:nth-child(n+6) {
 color: green;
 }
113. li:nth-last-child(n+6) {
 color: green;
 }
114. li:nth-last-child(n+6):first-child,
 li:nth-last-child(n+6):first-child ~ li {
 color: green;
 }
116. To create a perfect grid, we’ll need to define layout for any number of items with specific quantity selectors within media queries.
118. • “Mod query selector” in CSS:
 li:nth-last-child(3n):first-child,
 li:nth-last-child(3n):first-child ~ li {
 /* … styles for list items in a list divisible by 3 … */
 }
119. li:nth-last-child(3n):first-child,
 li:nth-last-child(3n):first-child ~ li {
 /* … styles for list items in a list divisible by 3 … */
 } — Select all following sibllings (~ li) which follow after
 — The first child (first li in the list here), (:first-child) that also is
 — Every third item starting from the end (:nth-last-child(3n)).
120. — Select all the items up to and including the fifth item, then
 — Select all the items from the third item onwards. • “Range selector” in CSS:
 li:nth-child(n+3):nth-child(-n+5) {
 /* … styles for list items from 3 to 5 … */
 }
122. We use a mod query to check if the number of items is divisible by 3. Then we use a range selector to style items differently, e.g. apply one styling to first three, another styling to the fourth through ninth, and another to 10th onwards. Voilà!
123. • “Mod query selector” in CSS:
 li:nth-last-child(3n):first-child /* mod query */
 ~ li:nth-child(n+4):nth-child(-n+6) { /* range selector */
 /* … styles for 4th to 6th elements, in a list divisible by 3 … */
 }
128. Holy smokes! You are tasked to build a pattern library for your company. You know well where to start, but what’s your strategy to keep it up-to-date long-term?
129. Pain Points and Bottlenecks • Digital not properly understood and applied, • Subpar workflow and loose communication, • Tech-driven design decisions made by developers, • Legacy code base, CMS, slow workflow — “watergile”, • Almost every mid-size/large company has similar pain points, issues and concerns: • Inconsistency reflected in different views, • Gap between screen mock-ups and front-end prototypes.
130. Pain Points and Bottlenecks • Design-driven approach is prioritized by management, • Responsive design is difficult to estimate and plan for, • Focused on content first, performance and longevity, • Pattern library seen as ultimate source of consistency. • Almost every mid-size/large company has similar pain points, issues and concerns: • Goal: one (responsive) site, serving tailored multi- screen experiences. Maintainable, future-proof.
132. Success with a pattern library means moving meaningful metrics, such as increasing bookings or decreasing costs.
133. “We collected components in a master Sketch file. After a week or two we began to see huge leaps in productivity by using the library when iterating on designs…
 — Karri Saarinen, AirBnB
 http://airbnb.design/co-creating-experiences-with-our-community/
134. “…One day, while putting together a last-minute prototype, our team was able to create nearly 50 screens within just a few hours by using the framework our library provided.
 — Karri Saarinen, AirBnB
 http://airbnb.design/co-creating-experiences-with-our-community/
141. • JavaScript var size = window.getCo PropertyValu 
 if (size == // Load so }
144. “Re-usable components can be used in many different but similar ways. It leaves room for interpretation. This opens the door for all kinds of disjointed experiences and makes the system harder to maintain.
 — Karri Saarinen, AirBnB
 http://airbnb.design/building-a-visual-language/

156. “A design system should not simply be a collection of UI components along with some design theory. A library that simply provides a “kit of parts” leaves a lot open to interpretation. 
 — Jeff Crossman, GE
 https://medium.com/ge-design/ges-predix-design-system-8236d47b0891
157. Beyond Atomic Design • Having a shared understanding of building blocks helps, but they need context to be used effectively. • Pattern library isn’t the end game. It shines when
 internal teams use it to extend the product. • Show examples. The team should know how to apply patterns in appropriate and meaningful ways. • The context exists on the most concrete levels of atomic design — applications and features.
165. • JavaScript var size = window.getCo PropertyValu 
 if (size == // Load so }
167. Find the features your team needs. 1:1 code base mapping. Automated updates. Masterlods don’t scale. Show context, interface examples.
175. By default, broken images look pretty unspectacular. Is there any way to improve the experience by changing the styling if images are actually broken?
177. The <img> element is a replaced element. This is an element “whose appearance and dimensions are defined by an external resource. Pseudo-elements typically shouldn’t work with it.
186. What if you wanted the color of the SVG icon to inherit the color property of a button in which it resides? Can we use CSS alone (no SASS/LESS) to establish this relationship?
198. What if you want to use a full-width element in a fixed-width container? E.g. when you want some content to extend beyond the boundaries of the container?
200. • HTML:
 <div class="u—containProse">
 <p>...</p>
 <p>...</p>
 </div> • CSS:
 .u—containProse {
 margin: 0 auto;
 max-width: 40em;
 }
201. • HTML:
 <div class="u—containProse">
 <p>...</p>
 </div>
 
 <img src="..." alt="..." />
 
 <div class="u—containProse">
 <p>...</p>
 </div>
 • CSS:
 .u—containProse {
 margin: 0 auto;
 max-width: 40em;
 }
202. To release our child element from its container, we need to know how much space there is between the container edge and the viewport edge.
203. What’s this space exactly? Well, we just need to subtract half the container width from half the viewport width. calc() to the rescue!
204. • HTML:
 <div class="u—containProse">
 <p>...</p>
 <img class="u—release" src="..." /> 
 <p>...</p>
 </div> • CSS:
 .u—release {
 margin-left: calc(-50vw + 50%);
 margin-right: calc(-50vw + 50%);
 }
206. When the height or width of the initial containing block is changed, they are scaled accordingly. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.
207. • HTML:
 <div class="u—containProse">
 <p>...</p>
 <img class="u—release" src="..." /> 
 <p>...</p>
 </div> • CSS:
 .u—release {
 margin-left: calc(-50vw + 50%);
 margin-right: calc(-50vw + 50%);
 }
208. • HTML:
 <div class="u—containProse">
 <p>...</p>
 <img class="u—release" src="..." /> 
 <p>...</p>
 </div> • CSS:
 .u—release {
 margin-left: calc(-50vw + 50%);
 margin-right: calc(-50vw + 50%);
 } html, body {
 overflow-x: hidden;
 }
210. • CSS:
 .u—release {
 width: 100vw;
 position: relative;
 left: 50%;
 right: 50%;
 margin-left: -50vw;
 margin-right: -50vw;
 } We push the container to the exact middle of the browser window with left: 50%, then pull it back to the left edge with -50vw margin
 (h/t Sven Wolfermann).
213. Images make up a large portion of bandwidth payload. Is there any way to optimize images beyond good ol’ image optimization? What if a hero image has to render fast, e.g. on landing pages?
214. • The original photo has 1600px width, 971 Kb. Quality 60 brings the size down to 213 Kb.
215. • Blurring unimportant parts of the photo brings the size down to 147 Kb.
216. Sequential JPEG Progressive JPEG Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 13 / 44
217. Scans 14 / 44
218. Default Scan Levels Thanks to Frédéric Kayser for creating 'jsk': http://encode.ru/threads/1800-JSK-JPEG-Scan-Killer-progressive-JPEG-explained-in-slowmo 15 / 44
219. 16 / 44
220. 17 / 44
221. 18 / 44
222. 1st Scan Layer Has Small Byte Size Ships Fast & Shows Soon 19 / 44
223. 31 / 44
224. 1 32 / 44
225. 2 33 / 44
226. 3 34 / 44
227. 4 35 / 44
228. 5 36 / 44
229. 37 / 44
232. “What if you have a large photo that requires a transparent shadow? PNG is too large in file size, and JPEG isn’t good enough in quality. Trick: create a regular non- transparent JPG and an 8-bit PNG (alpha mask) and load both images inside an SVG container.
235. 
 <image width="560" height="1388" xlink:href="can-top-alpha.png">
 </image> </mask> <mask id="canTopMask"> <image mask="url(#canTopMask)" id="canTop" width="560" height="1388"
 xlink:href="can-top.jpg"></image> • hero-image.svg:
 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 560 1388"> <defs> </svg> </defs>
236. • HTML/CSS:
 <img src="hero-image.svg" />, background: url("hero-image.svg") 
 <image width="560" height="1388" xlink:href="can-top-alpha.png">
 </image> </mask> <mask id="canTopMask"> <image mask="url(#canTopMask)" id="canTop" width="560" height="1388"
 xlink:href="can-top.jpg"></image> • hero-image.svg:
 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 560 1388"> <defs> </svg> </defs>
241. We want nice type, but performance matters, too. You either rely on Typekit/ Google Fonts or self-host the fonts. What is your strategy for loading web fonts?
243. Declaring @font-face • We can use bulletproof @font-face syntax to avoid common traps along the way: • CSS:
 @font-face { 
 font-family: 'Elena Regular'; 
 src: url('elena.eot?#iefix') format('embedded-opentype'),
 url('elena.woff2') format('woff2'),
 url('elena.woff') format('woff'),
 url('elena.otf') format('opentype');
 }
244. Declaring @font-face • If you want only smart browsers (IE9+) to download fonts, declaration can be shorter: • CSS:
 @font-face { 
 font-family: 'Elena Regular'; 
 src: url('elena.woff2') format('woff2'),
 url('elena.woff') format('woff'),
 url('elena.otf') format('opentype');
 }
245. • CSS:
 @font-face { 
 font-family: 'Elena Regular'; 
 src: url('elena.woff2') format('woff2'),
 url('elena.woff') format('woff'),
 url('elena.otf') format('opentype');
 } • When a font family name is used in CSS, browsers match it against all @font-face rules, download web fonts, display content.
246. • When a font family name is used in CSS, browsers match it against all @font-face rules, download web fonts, display content. • CSS:
 body { 
 font-family: 'Elena Regular',
 AvenirNext, Avenir, /* iOS */
 'Roboto Slab', 'Droid Serif', /* Android */
 'Segoe UI', /* Microsoft */ 
 Georgia, 'Times New Roman', serif; /* Fallback */
 }
247. • CSS:
 body { 
 font-family: 'Elena Regular',
 AvenirNext, Avenir, /* iOS */
 'Roboto Slab', 'Droid Serif', /* Android */
 'Segoe UI', /* Microsoft */ 
 Georgia, 'Times New Roman', serif; /* Fallback */
 } • HTML:
 <link href='http://fonts.googleapis.com/css?family=Skolar_Reg' rel='stylesheet' type='text/css'>
 
 <script type="text/javascript"
 src="//use.typekit.net/tbb3uid.js"></script>
 <script type="text/javascript">
 try{Typekit.load();}catch(e){}</script>
249. • Once DOM and CSSOM are constructed, if @font-face matches, a font will be required. • If fonts aren’t cached yet, they will be requested, downloaded and applied, deferring rendering.
251. • FOUT (Flash Of Unstyled Text): show content in fallback fonts first, then switch to web fonts. • FOIT (Flash Of Invisible Text): no content displayed until the font becomes available.
253. Async Data URI Stylesheet • To eliminate FOIT, we display fallback right away, and load web fonts async with loadCSS. • Verdict: bare minimum for the web font loading strategy today. Self-hosting required. • Easy to group requests into a single repaint, • Has a noticeable short FOIT during parsing, • How to choose a format to load? JS loader needed.
254. CSS Font Loading API • Native browser API à la Web Font Loader, with a 
 FontFace object representing @font-face rules. • JavaScript:
 var elena_reg = new FontFace(
 'Elena Regular',
 'url(elena_reg.woff) format("woff"),' + 
 'url(elena_reg.otf) format("otf")', 
 { weight: 'regular', unicodeRange: 'U+0-7ff' } 
 );
255. • JavaScript:
 document.fonts.load('1em elena_reg')
 .then(function() {
 var docEl = document.documentElement;
 docEl.className += ' elena_reg-loaded';
 }).catch(function () { 
 var docEl = document.documentElement;
 docEl.className += ' elena_reg-failed';
 }); • JavaScript:
 var elena_reg = new FontFace(
 'Elena Regular',
 'url(elena_reg.woff) format("woff"),' + 
 'url(elena_reg.otf) format("otf")', 
 { weight: 'regular', unicodeRange: 'U+0-7ff' } 
 );
256. • JavaScript:
 document.fonts.load('1em elena_reg')
 .then(function() {
 var docEl = document.documentElement;
 docEl.className += ' elena_reg-loaded';
 }).catch(function () { 
 var docEl = document.documentElement;
 docEl.className += ' elena_reg-failed';
 }); • CSS:
 .elena_reg-loaded h1 {
 font-family: "Elena Regular";
 }
257. • JavaScript:
 document.fonts.load('1em elena_reg’)
 .then(function() {
 var docEl = document.documentElement;
 docEl.className += ' elena_reg-loaded’;
 }).catch(function () { 
 var docEl = document.documentElement;
 docEl.className += ' elena_reg-failed’;
 }); • CSS:
 .elena_reg-loaded h1 {
 font-family: "Elena Regular";
 font-rendering: "block 0s swap infinite"; // FOUT
 // font-rendering: "block 3s swap infinite"; // FOIT
 }
258. • JavaScript:
 document.fonts.load('1em elena_reg’)
 .then(function() {
 var docEl = document.documentElement;
 docEl.className += ' elena_reg-loaded’;
 }).catch(function () { 
 var docEl = document.documentElement;
 docEl.className += ' elena_reg-failed’;
 }); • CSS:
 .elena_reg-loaded h1 {
 font-family: "Elena Regular";
 // font-rendering: "block 0s swap infinite"; // FOUT
 font-rendering: "block 3s swap 3s"; // FOIT, at most 3sec
 }
262. Font Load Events • Use the CSS Font Loading API with a polyfill to apply web font only after it has loaded successfully. • Verdict: good option for web font loading, to integrate with 3rd-party hosting providers. • Toggle a class on <html>; with Sass/LESS mixins, • Requires strict control of CSS; a single use of a web font font-family will trigger a FOIT. • Optimize for repeat views with sessionStorage, • Easy to implement with 3rd-party hosts,
263. Flash of Faux Text • When using multiple weights, we split web fonts into groups: Roman / Faux content. • Two-stage render: Roman first and rest later, • Optimize for repeat views with sessionStorage, • Font synthesis is a big drawback. • Verdict: good option for great performance, but
 font synthesis might produce awkward results.
264. Critical FOFT • When using multiple weights, we split web fonts into groups: Roman / Faux content. • Two-stage render: Roman first and rest later, • Optimize for repeat views with sessionStorage, • Font synthesis is a big drawback. • Verdict: good option for great performance, but
 font synthesis might produce awkward results. • Subset fonts to minimum (A–Z, 0–9, punctuation), • Subset is duplicated in the full Roman font. • Licensing issues: requires subsetting.
265. Critical FOFT With Data URI • Instead of loading via a JavaScript API, we inline the web font directly in the markup. • Verdict: the fastest web font loading strategy as of today. Eliminates FOIT and greatly reduces FOUT. • Two-stage render: Roman first and rest later, • Load full fonts with all weights and styles async, • Subset fonts to minimum (A–Z, 0–9, punctuation), • Load the subsetted font (Roman) first inline, • Use sessionStorage for return visits, • Requires self-hosting; data URI blocks rendering.
269. Critical FOFT Data URI/SW (CFOFTWDUASW) • Instead of using sessionStorage, we inline the web font in the markup and use Service Workers cache. • Verdict: the fastest web font loading strategy as of today. Eliminates FOIT and greatly reduces FOUT. • Two-stage render: Roman first and rest later, • Load full fonts with all weights and styles async, • Subset fonts to minimum (A–Z, 0–9, punctuation), • Load the subsetted font (Roman) first inline, • Use Service Workers for return visits, • Requires self-hosting/HTTPS; data URI blocks rendering.
270. • When a font family name is used in CSS, browsers match it against all @font-face rules, download web fonts, display content. • CSS:
 body { 
 font-family: 'Elena Regular',
 AvenirNext, Avenir, /* iOS */
 'Roboto Slab', 'Droid Serif', /* Android */
 'Segoe UI', /* Microsoft */ 
 Georgia, 'Times New Roman', serif; /* Fallback */
 }
271. • CSS:
 body { 
 font-family: 'Elena Regular',
 AvenirNext, Avenir, /* iOS */
 'Roboto Slab', 'Droid Serif', /* Android */
 'Segoe UI', /* Microsoft */ 
 Georgia, 'Times New Roman', serif; /* Fallback */
 }
273. • CSS:
 body { 
 font-family: 'Elena Regular', /* Web font */
 AvenirNext, Avenir, /* iOS */
 -apple-system, BlinkMacSystemFont, /* macOS San Francisco */
 Roboto Slab', 'Droid Serif', /* Android */
 'Segoe UI', /* Microsoft */ 
 Oxygen-Sans, /* KDE */
 Ubuntu, /* Ubuntu */
 Cantarell, /* GNOME */
 Georgia, 'Times New Roman', serif; /* Fallback */
 }
274. • CSS:
 .lowBattery { 
 font-family: /* 'Elena Regular' */ /* Web font */
 AvenirNext, Avenir, /* iOS */
 -apple-system, BlinkMacSystemFont, /* macOS San Francisco */
 Roboto Slab', 'Droid Serif', /* Android */
 'Segoe UI', /* Microsoft */ 
 Oxygen-Sans, /* KDE */
 Ubuntu, /* Ubuntu */
 Cantarell, /* GNOME */
 Georgia, 'Times New Roman', serif; /* Fallback */
 }
277. What if you have to translate an interface into many languages? The length of words is unpredictable. How do you manage it across devices?
282. The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
288. You’ve built a perfect grid with perfectly sized thumbnail images (e.g. squared size), but when the client uploads images with incorrect dimensions, they are squished into the rectangle, incorrectly resized.
291. “For img src, we can use object-fit property in CSS to “letterbox” the images, preserving the ratio, or crop the images inside the block. For background images, we can apply background-size exactly the same way.
300. Is there any way to isolate expensive components, be it JavaScript, comments or off-canvas navigation, similar to lazy loading, and paint important content faster using CSS alone?
301. The contain property is a primitive for isolating style, layout and paint. It allows us to limit a specific DOM sub-tree and the rest of the document with native boundaries.
302. • With the contain property, we can define priorities for loading and painting CSS components. • Third-party widgets
 Delay expensive layout with contain: strict. • Off-screen modules
 Delay expensive paints with contain: paint. • Container queries
 Focus on the local scope with contain: strict.
303. • With the contain property, we can define priorities for loading and painting CSS components. • Third-party widgets
 Delay expensive layout with contain: strict. • Off-screen modules
 Delay expensive paints with contain: paint. • Container queries
 Focus on the local scope with contain: strict. • Browser support is coming.
 Enabled by default in Chrome 52.
307. What’s the deal with emoji? Can we style them with CSS, or change them with JavaScript? Or even better, can they be an alternative to SVG and icon fonts?
309. Clockwise Rightwards and Leftwards Open Circle Arrows With Circled One Overlay
 (also known as U+1F502, &#x1f502; or \u1f502).
310. Person Raising Both Hands in Celebration (also known as Festivus Miracle Emoji,
 U+1F64C, &#1f64c; or \u1f64c).
311. %
319. Emoji are coloured glyphs added into Unicode 6.0 in 2010. They are depicted in the spec, but the exact appearance isn’t defined and varies between fonts, just like normal typefaces display letters differently.
324. Because emoji are Unicode code points, we can create a font with the emoji that we need in our interface and override platform-specific designs to avoid inconsistencies.
326. Internally strings are represented
 in UTF-16, so each code point can be represented by one or more 16-bit code units. Some emoji use only 1 code unit, others 2 and more.
327. Not all emoji are created equal.
 They can be modified with emoji modifiers, so some are surrogates which is why sometimes icons are rendered incorrectly.
329. ( ) *
330. • HTML:
 <p style="font-family: 'Comic Sans', sans-serif;">%</p>

331. • The browser will: — Look up the glyph in the Comic Sans font,
 — If it can’t find the glyph, it will fall back to the fallback font,
 — In this case, fallback is sans-serif (Helvetica/Arial),
 — The fallback doesn’t have the glyph either,
 — Browser will try to figure out the glyph type,
 — Eventually it will look up in a locally installed Emoji font
 (e.g. AppleColorEmoji),
 — The browser will render the icon. • HTML:
 <p style="font-family: 'Comic Sans', sans-serif;">%</p>

336. How do you highlight both a row and a column on hover and on tap in a multi- column table? Highlighting the current row is easy, but what about the column?
338. “We create tall pseudo elements on <td>’s with a negative top-value of half of that value. Then we hide these pseudo elements with oveflow: hidden, and use negative z-index to keep it below the content. Then we make all cells focusable and focus them on touchstart. 
 — @simurai
339. • CSS:
 table { overflow: hidden; }
 td, th { position: relative; }
 tr:hover { background-color: #ffa; }
 td:hover::after { content: "";
 position: absolute;
 width: 100%;
 height: 10000px;
 left: 0;
 top: -5000px;
 background-color: currentColor;
 z-index: -1;
 }
340. • CSS:
 table { overflow: hidden; }
 tr:hover { background-color: #ffa; }
 td:hover::after,
 th:hover::after { content: "";
 position: absolute;
 width: 100%;
 height: 10000px;
 left: 0;
 top: -5000px;
 background-color: currentColor;
 z-index: -1;
 }
342. “By default, tables are quite unpredictable and spongy, and if you don’t know how lengthy the content inside cells will be, some columns can be unpredictably wide, destroying the layout. What to do? 
 — Louis Lazaris
347. “With table-layout: fixed; the layout is fixed based on the widths defined for the first row. Set the width of those, and the rest of the table follows. 
 — Chris Coyier
350. Oh heavens! You’ve been promoted to craft responsive emails. Many of your users use AOL/Outlook clients. How do you make emails bulletproof?
356. <table> /* “Desktop” width = 600px = 300*2 */ 
 <tr>
 <td class="col" width="300">...</td>
 <td class="col" width="300">...</td>
 </tr>
 </table>
 • Content Stacking
357. @media only screen and (max-width: 600px) {
 table, tr, td {
 display: block; /* table-cell -> block */
 width: 100%;
 }
 }
 • Content Stacking
358. • Column Switching <table> /* “Desktop” width = 600px = 300*2 */ 
 <tr>
 <td class="sub-col" width="300">...</td>
 <td class="main-col" width="300">...</td>
 </tr>
 </table>

359. @media only screen and (max-width: 500px) {
 table, tr, td {
 display: block; /* table-cell -> block */
 width: 100%;
 }
 
 td[class=main-col] { display: table-header-group; }
 td[class=sub-col] { display: table-footer-group; }
 }
 • Column Switching
360. • Order and Re-order <td class="wrapper"> /* Nested tables, oh my... */ 
 <table class="header">Header</table>
 <table class="nav">Navigation</table>
 <table class="content">Content</table>
 <table class="footer">Footer</table>
 /table>
361. @media only screen and (max-width: 500px) {
 table[class=wrapper] { display: table; }
 table[class=header] { display: table-caption; }
 table[class=nav] { display: block; }
 table[class=content] { display: table-header-group; }
 table[class=footer] { display: table-footer-group; }
 }
 • Order and Re-order
366. HTTP/1.1 Deployment Strategy • CSS:
 .box {
 width: 320px;
 min-width: 480px;
 max-width: 160px;
 } If the width value is greater than the max-width value, max-width wins.
367. HTTP/1.1 Deployment Strategy • CSS:
 .box {
 width: 320px;
 min-width: 480px;
 max-width: 160px;
 } If the min-width value is greater than the width or max-width values, then min- width wins.
368. HTTP/1.1 Deployment Strategy • CSS:
 .box {
 display: inline-block;
 min-width: 50%; // basically 2-col-desktop version
 max-width: 100%; // basically 1-col-mobile version
 width: calc((480px - 100%) * 480);
 /* 480px = the breakpoint, 100% = width of the parent
 Goal: create a value bigger than our max-width or smaller than our min-width, so that either one of those property is applied instead. */
 } Let’s build a 2-col-layout that stacks and grows below 480px.
 No media queries allowed.
380. “Can we replicate interactivity that require maintaining state, such as switching tabs or panels or toggle menus, with CSS? JS binds events that manipulate classes and CSS restyles elements based on those classes. What if we used radio buttons for the same purpose?.. 
 — Art Lawry
381. “We use a connected label and checkbox input to control another element (e.g. <div>). We hide the checkbox but <label> still toggles its value on and off. By using adjacent sibling combinator, we can style the <div> differently based on the :checked state. 
 — Chris Coyier
382. • HTML:
 <label for= "toggle-1">
 <input type="checkbox" id="toggle-1" />
 
 <div>Responsive component without JavaScript</div> • CSS:
 input[type=checkbox] { position: absolute;
 top: -9999px; left: -9999px; }
 /* Or checkbox on top of clickable area with opacity: 0; */
 div { color: grey; } /* default state */
 input[type=checkbox]:checked ~ div { color: red; } /* toggled */
388. • CSS:
 #itemA-3:checked ~
 #itemB-6:checked ~
 #itemC-2:checked ~
 #itemD-11:checked ~
 #itemE-5:not:checked ~
 #itemF-2:checked ~
 #itemG-5:checked ~ * .div1 {
 display: block;
 } • HTML:
 <input type="radio" id="itemA-1" />
 <input type="radio" id="itemA-2" />
 <input type="radio" id="itemA-3" />
 ...
 <label for="itemA-1" />Carousel</label>
 <label for=“itemD-11" />Div</label>
 ...
390. • CSS:
 body {
 counter-reset: amount;
 }
 #itemA-3:checked ~
 #itemE-5:not:checked {
 counter-increment: amount;
 }
 .price {
 content: '$' + counter(amount);
 }
 • Shopping Cart Email Checkout
 — 117 radio buttons,
 — 4 checkboxes,
 — Multi-page layout,
 — Adding/removing products,
 — Edit quantity, color, size,
 — See live calculation,
 — Select payment and delivery,
 — Form validation — all in the email,
 — Fallback: just a regular ol’ email.
391. In email clients, we just need support for :checked values and siblings selectors. But: In email, file size is limited to 102 Kb. In Gmail, CSS is limited to 12,000 characters.