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

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

3. None

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.
7. None
8. None
9. None

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?
11. None

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;
 }

21. None
22. None
23. None
24. None
25. None
26. None

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.
28. None
29. None

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.
31. None
32. None

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.
34. None
35. None
36. None
37. None
38. None
39. None

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.
41. None
42. None

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
47. None
48. None

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
50. None
51. None
52. None

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
56. None

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
58. None
59. None
60. None
61. None

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
63. None
64. None
65. None
66. None
67. None
68. None
69. None
70. None
71. None
72. None
73. None
74. None
75. None

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?
77. None

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
79. None

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.
82. None

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.
91. None
92. None
93. None

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.
95. None

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
97. None
98. None
99. None

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
101. None
102. None

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
104. None
105. None

106. A quantity selector is a CSS selector that allows styles

     to be applied to elements based on the number of siblings.
107. None
108. None
109. None
110. None

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;
 }

115. None

116. To create a perfect grid, we’ll need to define layout

     for any number of items with specific quantity selectors within media queries.
117. None

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 … */
 }
121. None

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 … */
 }
124. None
125. None
126. None
127. None

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.
131. None

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/
135. None
136. None
137. None
138. None
139. None
140. None

141. • JavaScript var size = window.getCo PropertyValu 
 if (size

     == // Load so }
142. None
143. None

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/

145. None
146. None
147. None
148. None
149. None
150. None
151. None
152. None
153. None
154. None
155. None

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.
158. None
159. None
160. None
161. None
162. None
163. None
164. None

165. • JavaScript var size = window.getCo PropertyValu 
 if (size

     == // Load so }
166. None

167. Find the features your team needs. 1:1 code base mapping.

     Automated updates. Masterlods don’t scale. Show context, interface examples.
168. None
169. None
170. None
171. None
172. None
173. None
174. None

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?
176. None

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.
178. None
179. None
180. None
181. None
182. None
183. None
184. None
185. None

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?
187. None
188. None
189. None
190. None
191. None
192. None
193. None
194. None
195. None
196. None
197. None

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?
199. None

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%);
 }
205. None

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;
 }
209. None

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).
211. None
212. None

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

230. None
231. None

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.
233. None
234. None

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>
237. None
238. None
239. None
240. None

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?
242. None

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>
248. None

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.
250. None

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.
252. None

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
 }
259. None
260. None
261. None

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.
266. None
267. None
268. None

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 */
 }
272. None

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 */
 }
275. None
276. None

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?
278. None
279. None
280. None
281. None

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.
283. None
284. None
285. None
286. None
287. None

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.
289. None
290. None

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.
292. None
293. None
294. None
295. None
296. None
297. None
298. None
299. None

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.
304. None
305. None
306. None

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?
308. None

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. %

312. None
313. None
314. None
315. None
316. None
317. None
318. None

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.
320. None
321. None
322. None
323. None

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.
325. None

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.
328. None

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>

332. None
333. None
334. None
335. None

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?
337. None

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;
 }
341. None

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
343. None
344. None
345. None
346. None

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
348. None
349. None

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?
351. None
352. None
353. None
354. None
355. None

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
362. None
363. None
364. None
365. None

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.
369. None
370. None
371. None
372. None
373. None
374. None
375. None
376. None
377. None
378. None
379. None

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 */
383. None
384. None
385. None
386. None
387. None

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>
 ...
389. None

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.
392. None
393. None
394. None
395. None