Numbers and Symbols A

Index

Numbers and Symbols alignment in flexible box layout, 187 * (asterisk), as Arbitrary Selector, 26 inside container, 193–197 ^ (caret), as Beginning Selector, 23–25 of multiple lines, 196–197 $ (dollar sign), as Ending Selector, of text, 70 25–26 align-self property, cross-axis :: (double colon), for alignment with, 195 pseudo-elements, 45 all value, of transition-property = (equal sign), as Exact Attribute Value property, 167 Selector, 22 Alpha color channel, 111, 113–116 ~ (tilde), as Partial Attribute Value hsla() function for, 118 Selector, 22 alternate value, for animation-direction | (vertical pipe), as Language Attribute property, 179 Selector, 22–23 and operator 2D transformations for chaining multiple media browser support, 137, 147, 261 queries, 18 in document flow, 137–138 for feature queries, 252 with matrices, 144–147 angle argument, for gradient online resources, 265 direction, 123 origin, 138–139 angle units, 124 2D Transformations Module, 135 animations, 175–183 3D transformations, 149–163 animation-delay property, 178 browser support, 163, 261 animation-direction property, functions, 151–158 179–180 perspective, 154–155 animation-duration property, 178 rotation around axis, 151–153 animation-fill-mode property, scaling, 156–157 180–181 transformation matrix, 157–158 animation-iteration-count translation along axis, 155–156 property, 179 online resources, 265 animation-name property, 177 origin, 160–161 animation-play-state property, 181 transform-style property, 161–162 animation-timing-function 456 Berea Street blog, 44 property, 178 browser support, 183, 261 A clip path, 240 example, 182–183 addition, calc() function for, 202 Adjacent Sibling Combinator, 28 keyframes, 175 –177 multiple, 183 ::af te r pseudo-element, 45 online resources, 265 align-items property, vertical alignment with, 194–195 repeating, 179 shorthand, 181–182 vs. transitions, 166 Animations Module, 165, 175 background-repeat property, 87–88 Arbitrary Selector, 26–27, 76 Backgrounds and Borders Module, 85, ascenders, 57 98–101 aspect ratio, for media queries, 17–18 background shortcut property, 94 asterisk (*), as Arbitrary Selector, 26 background-size property, 90 at keyword, with radial gradients, 128 backwards keyword attribute selectors, 21, 22–23 for animation-fill-mode property, 180 Arbitrary Selector, 26–27 for column-fill property, 78 Beginning Selector, 23–25 bandwidth, mobile-first browser support, 46, 258 development and, 19 chaining multiple, 27–28 Basic User Interface Module, 70, 204 Ending Selector, 25–26 ::before pseudo-element, 45 Exact Attribute Value Selector, 22 Beginning Substring Attribute Value Language Attribute Selector, 22–23 selector, 23–25 Partial Attribute Selector, 22 bitmap images Simple Attribute Selector, 22 device pixel ratio and, 14–15 auto value vs. SVG format, 225 for background-size property, 90 blend modes, 226–231 for column-fill property, 78–79 background-blend-mode property, for hyphens property, 72 226–228 axis, 64–65 browser support, 244, 262 main, 187 isolation, 230–231 rotation around, 151–153 mix-blend-mode property, 229 translation along, 155–156 multiple, 228–229 online resources, 266 B block-level flex container, 186 blog comments, markup, 40 backface of elements, showing or blur() function, 231 hiding, 162 blur radius backface-visibility property, 162 for box-shadow property, 108 background-attachment property, 86–87 for text-shado w property, 67 background-blend-mode property, border-box keyword, for background-clip 226–228 property, 92–94 background-clip property, 92, 94 border-image-outset property, 105–106 background-color property, 90 border-image-repeat property, 106–107 background-image property, 15 border-image shorthand property, 107 linear-gradient() function, 122 border-image-slice property, 102–104 background images, 85–95 border-image-source property, 102 blending, 227–228 border-image-width property, 104–105 for borders, 101–107 border-radius property, 98 browser support, 95, 260 percentage values for, 101 clip and origin, 92–94 shorthand, 99–101 color, 90 borders, 97 dynamically scaled, 90–92 applying mask, 242 multiple, 88–90 background images for, 101–107 online resources, 265 browser support, 110, 260 positioning, 86 online resources, 265 repeating, 87–88 rounded corners for, 97–101 scrolling, 86–87 both keyword tiling, 87–88 for animation-fill-mode property, 180 background-origin property, 93, 94 for resize property, 73 background-position property, 86, 89, 93 for wrap-flow property, 248

268 Index bottom keyword cells in grid, 210 for perspective-origin property, 159 center, of radial gradient, 128 for transform-origin property, 139 center keyword box effects for align-items property, 194, 195 browser support, 110, 260 for justify-content property, online resources, 265 193, 194 box-shadow property, 107–109 for perspective-origin property, 159 box sizing, 203–204 for transform-origin property, 139 break-word keyword, for word-wrap chaining property, 71 keyframe selectors, 177 brightness() function, 232 multiple attribute selectors, 27–28 browser support, 257–262 multiple media queries, 18 2D transformations, 137, 147 :checked pseudo-class selector, 43 3D transformations, 163 child elements, 34–39 animations, 183 Chrome attribute selectors, 46 3D transformations, 149 background images, 95 background images, 87 blend modes, 244 column-fill property, 79 borders, 110 column layout, 76 box effects, 110 font-feature-settings property in, 61 color, 119 font-variant-* properties, 61 columns of text, 84 and legacy gradient syntaxes, 131 DOM selectors, 46 min-content and max-content, 205 filter effects, 244 prefix for, 5 flexible box layout, 197, 198 resize property, 73 for future CSS, 255 resolution media feature, 15 gradients, 133 ::sele c tio n pseudo-element, 46 grid layout, 224 web fonts, 47 and legacy gradient syntaxes, 131 Chunk font, 49 masking, 244 circle, percentage values on media queries, 20 border-radius for, 101 min-content and max-content, 205 circle() function, for clip-path, 236 opacity, 30, 119 circle keyword, for radial gradient, selectors, 30, 46 127–128 text effects, 74 classes. See pseudo-classes transitions, 183 class selectors, 21 typographic styles, 74 clear value, for wrap-flow property, 248 values and sizing, 208 clip keyword, for text-overflo w web fonts, 62 property, 69 clip-path property, 235–241 C clip paths, 235, 240–241 clipping, 235–241 calc() function, 202 closest-corner keyword, for radial calculated values, 202–203 gradient, 128–129 Candidate Recommendation status, 4 closest-side keyword, for radial caret (^), as Beginning Selector, 23–25 gradient, 128–129 Cartesian coordinate system, 64, 150 color, 111–119 Cascading Style Sheets (CSS) Alpha color channel, 113–116 future possibilities, 245–255 background-color property, 90 browser support, 255, 262 blending image with, 227 online resources, 263–266 for box-shadow property, 108 case sensitivity, of attribute selector browser support, 119, 260 value, 24

Index 269 color (continued) contrast() function, 232 common color equivalents, 117 coordinates, 64–65 gradients, 121–133 corners for borders, rounded, 97–101 grayscale(), sepia(), and saturate() cosine functions, in matrix functions, 232–233 transformations, 146 HSL (Hue, Saturation, Lightness), cover keyword, for background-size 116–117 property, 91–92 online resources, 265 cross axis, 187 opacity property, 112–113 alignment with align-self RGB (Red, Green, Blue) model, 111 property, 195 of shadow, 66 CSS Pocket Reference (Meyer), 23 Color Module, 111 CSS3 color picker, for HSL, 117 history, 1–2 color stop, 122 modules, 2–3 for linear gradient, 123–125 cubic-bezier() function, 168 for radial gradient, 129–130 for transition-timing-function column-count property, 76–77 property, 168–170 combining with column-width, 79–80 currentColor keyword, 118–119 column-fill property, 78 Custom Properties for Cascading column-gap property, 80–81 Variables Module, 250 column keyword for flex-direction property, 187 D for grid-auto-flow property, 220 column-reverse value, for flex-direction datetime attribute, 25 property, 187 decorative elements. See background column-rule property, 80–81 images column-rule-width property, 80 degrees, 124 columns of text, 75–84 deprecation browser support, 84, 259 of media types, 8 containing elements within, 81–82 of single colon syntax, 45 content distribution across, 78–79 Deveria, Alexis, 264 elements spanning multiple, 82–83 Device Adaptation Module, 252–253 gaps and rules, 80–81 browser support, 255 layout methods, 76–79 device-aspect-ratio property, for media online resources, 264 queries, 17–18 column-span element, 82–83 device-height property, 15–16 columns shorthand property, 80 device pixel ratio (DPR), 13 column-width-color property, 80–81 device-width property, 15–16 column-width property, 77–78 direction keyword, for animation, 171 combining with column-count, 79–80 direction property, 186 column-width-style property, 80–81 direction vector, 153 combinator, 21 :disabled pseudo-class selector, 43 General Sibling Combinator, 28–29 discretionary ligatures (dlig), 59, 60 Compositing and Blending Module, 226 display property, 186 Conditional Rules Module, 251 for defining grid, 211 conic gradient, 133 division, calc() function for, 202–203 constraint validation pseudo-classes, dlig (discretionary ligatures), 59, 60 44–45 document flow, 2D transformations in, contain keyword, for background-size 137–138 property, 91–92 dollar sign ($), as Ending Selector, content-box keyword, 204 25–26 for background-clip property, 92–93 DOM selectors, 21 browser support, 46, 258

270 Index dots per centimeter (DPCM), 14 Exclusions Module, 247–249 dots per inch (DPI), 14 browser support, 255 dots per pixel (DPPX), 14 expand keyword, for animation-name double colon (::), for property, 177 pseudo-elements, 45 explicit grids drop-shadow() function, 233–234 creating by setting track size, 211 drop shadows, 65–68, 107–109, 233–234 vs. implicit grids, 221–222 dynamic columns, 77–78 placing items in, 214–215 expression, evaluating, 11 E extent of gradient, 128 external style sheet ease-in keyword, for transition-timing- @import rule for, 10 function property, 168 link element for, 9 ease-in-out keyword, for transition- extrinsic sizing, 204–207 timing-function property, 168 ease keyword, for transition-timing- function property, 168 F ease-out keyword, for transition-timing- FaaS (Fonts as a Service), 53–54 function property, 168 farthest-corner keyword, for radial elements. See also pseudo-elements gradient, 128–129 resizing, 72–73 farthest-side keyword, for radial size of, 203–207 gradient, 128–129 spanning multiple columns, 82–83 feature queries, 251–252 text flow around, 248 browser support, 255 ellipse() function, for clip-path, 236 logical operators for, 252 ellipse keyword, for radial gradients, file-type extensions, rules for, 26 127–128 fill keyword, 206–207 ellipses for border-image-slice property, 104 percentage values on filter effects, 231–235 border-radius for, 101 blur() function, 231 quarter, 98 brightness() and contrast() ellipsis keyword, for text-overflo w functions, 232 property, 69 browser support, 244, 262 em (relative unit), 199, 200 combining with masking, 243 Embedded OpenType (EOT) drop-shadow() function, 233–234 format, 52 grayscale(), sepia(), and saturate() :empty pseudo-class, 41 functions, 232–233 enabled elements, 43 hue-rotate() function, 233 :enabled pseudo-class selector, 43 multiple functions, 234 Ending Substring Attribute Value online resources, 266 selector, 25–26 opacity() function, 233 end keyword in SVG, 235 for animation, 171 Firefox for text-align property, 70 background images, 87 for wrap-flow property, 248 column-fill property, 79 EOT (Embedded OpenType) column layout, 76 format, 52 font-feature-settings property in, 61 equal sign (=), as Exact Attribute Value font formats, 52 Selector, 22 font-size-adjust property, 57 even keyword, 33 font-stretch property, 58 ex (relative unit), 199 images in column layout, 82 Exact Attribute Value Selector, 22 and legacy gradient syntaxes, 131 min-content and max-content, 205

Index 271 Firefox (continued) @font-face rule, 47, 48–51 prefix for, 5 bulletproof syntax, 51–53 resize property, 73 font-family property, 48 resolution media feature, 15 font features, 59–61 ::sele c tio n pseudo-element, 46 font-feature-settings property, 59 text-overflo w property, 70 font-kerning property, 61 web fonts, 47 fonts :first-child pseudo-class, 33 controlling loading, 55 ::first-letter pseudo-element, 45 defining different faces, 49–50 ::fi rst-lin e pseudo-element, 45 finding name, 49 :first-of-type pseudo-class, 37–38 formats, 52 fit-content keyword, 206 licensing for web use, 53–54 fixed keyword, for background- OpenType fonts, 58–61 attachment property, 86 true vs. artificial faces, 50–51 Flash of Unstyled Text (FoUT), 55 x-height, and ex, 199 flat keyword, for transform-style Fonts as a Service (FaaS), 53–54 property, 161 font-size-adjust property, 56–57 Flexbox. See Flexible Box Layout font-size property, 199 Module Fonts Module Level 3, 48 flex container Font Squirrel, @font-face Generator, 53 alignment inside, 193–197 font-stretch property, 58 creating, 186 font-variant-* properties, 61 width of, 189 forwards keyword, for animation-fill- flex-direction property, 186 mode property, 180 flex-end value FoUT (Flash of Unstyled Text), 55 for align-items property, 194, 195 fraction unit (fr), 211 for justify-content property, 193 vs. percentages, 213 Flexible Box Layout Module, 185 alignment, 187 G inside container, 193–197 of multiple lines, 196–197 Gaussian blur, 231 browser support, 197, 198, 261 General Sibling Combinator, 28–29 declaring model, 186 global scope, for variables, 251 flex-basis property, 191–192 Google Fonts, 54 flex-direction property, 187 gradians, 124 flex-flow shorthand, 196 gradient line, 122 flex-grow property, 189–190 gradients, 121–133 flex shorthand, 192–193 browser support, 133, 260 flex-shrink property, 191 linear, 122–127 fully reordering content, 188–189 setting direction, 122–123 online resources, 265 multiple, 132 reversing content order, 187–188 online resources, 265 wrap and flow, 195 radial, 127–131 flex items, adding to container, 186 graphics. See images flex-start value grayscale() function, 232–233, 234 for align-items property, 194 grid-area rule, 216 for justify-content property, grid areas, 210 193, 194 names for, 217–219 flex-wrap property, 196 grid-auto-columns property, 219, 221 flow-from property, 249 grid-auto-flow property, 220 flow-into property, 249 grid-auto-rows property, 219, 221 Fontdeck, 54, 57 grid-column-end property, 215 grid-column-start property, 214

272 Index grid container, 210, 211 hsla() function, 118 grid items, 210 hsl() function, 117 Grid Layout Module, 185, 209–224 HTML content, 165 browser support, 224, 262 Hue, Saturation, Lightness (HSL), declaring and defining grid, 116–117 211–220 hue-rotate() function, 233 grid items without declared hyperlinks, web protocol for, 24–25 place, 220 hyphenation, of words, 72 grid placement shorthand, 215–216 grid-template shorthand, 218–219 I implicit grids, 211, 219–220 vs. explicit grids, 221–222 images. See also background images Internet Explorer syntax, 223–224 blending two, 227–228 named grid areas, 217–218 blending with color, 227 online resources, 266 masking, 241–242 placing items in explicit grid, img element, in column layout, 81–82 214–215 implicit grids, 211, 219–220 repeating grid lines, 216–217 vs. explicit grids, 221–222 shorthand, 221–222 @import rule, 10 stacking order for grid items, indeterminate UI element state, 44 222–223 infinite keyword, for animation- terminology, 210 iteration-count grid lines, 210 property, 179 grid-row-end property, 215 inline-flex value, 186 grid-row-start property, 214 :in-range pseudo-class, 45 grid-template-areas property, for inset() function, for clip-path, 236–237 placing items in named inset keyword, for box-shadow areas, 217 property, 108 grid-template-columns property, 211 inset-rectangle() function, 238–239 repeat() function and, 216–217 inset shadows, 109 grid-template-rows property, 211 Internet Explorer grid tracks, 210 background images, 85, 87 defining, 211 box model, 203 gutter, 216 column-fill property, 79 column layout, 76 Exclusions Module, 248 H Flexbox, 197 hardware acceleration for graphics, 149 font-feature-settings property in, 61 Hay, Stephen, 197 font-stretch property, 58 header, for @media, 12–13 grid layout syntax, 223–224 height media feature, 13 and legacy gradient syntaxes, 131 hexadecimal notation, for color local() value in, 52 values, 113 prefix for, 5 hidden keyword, for backface-visibility Regions Module, 250 property, 162 resolution media feature, 15 horizontal alignment, with justify- ::sele c tio n pseudo-element, 46 content property, 193–194 vmin and vmax, 202 horizontal axis, translateX() function web fonts, 47 for movement on, 140 Intrinsic & Extrinsic Sizing horizontal value, for resize property, 73 Module, 204–207 :hover pseudo-class, as trigger, 166 :invalid pseudo-class, 44 HSL (Hue, Saturation, Lightness), iPhone, aspect ratio, 17–18 116–117

Index 273 irregular quarter ellipses, 98 M shorthand syntax for, 100–101 Magnet Studio’s Beginners Guide to isolation, 230–231 OpenType, 59 italic text, 50–51 main axis, 187 manual value, for hyphens property, 72 J Marcotte, Ethan, “Responsive Web JavaScript, 165 Design,” 10 justify-content property, horizontal mask-border-output property, 242 alignment with, 193–194 mask-border-repeat property, 242 mask-border-slice property, 242 mask-border-source property, 242 K mask-border-width property, 242 keyframes, in animations, 175–177 mask-clip property, 242 @keyframes rule, 175 –177 mask-composite property, 242 keywords, for color values, 113 masking, 235–243 browser support, 244, 262 L clipping, 235–241 combining filter effects with, 243 landscape value, of orientation image masks, 241–242 property, 16–17 online resources, 266 Language Attribute Selector, 23 in SVG, 242–243 Last Call status, 4 mask-mode property, 242 :last-child pseudo-class, 37–38 mask-origin property, 242 :last-of-type pseudo-class, 37–38 mask property, 241–242 left keyword mask-repeat property, 242 for perspective-origin property, 159 matrices, 2D transformations with, for transform-origin property, 139 144 –147 licensing fonts for web use, 53–54 matrix() function, 145, 157–158 ligatures, 60 max-content keyword, 205 lightness, 116, 117 max-device-aspect-ratio property, 18 line, between columns, 80 max-height property, 13 linear gradients, 122–127 maximum keyword, for wrap-flow adding color-stop values, 123–125 property, 248 repeating, 126–127 max-resolution media feature, 14 setting direction, 122–123 max-width property, 12 linear keyword, for transition-timing- MDN (Mozilla Developer Network), function property, 168 44, 264 line wrap, controlling, 71–72 measurement, relative length units, link element 199–202 for external style sheet, 9 media attribute of link element, 7–8, 10 media attribute, 7–8, 10 Media Queries Module, 8 mobile-first development and, 19 advantages, 8–9 loading fonts, control of, 55 browser support, 258 load time, mobile-first media features, 11–18 development and, 19 aspect ratio, 17–18 local keyword, for background- chaining multiple queries, 18 attachment property, 87 device width and height, 15–16 local() value, for src property, 48–49, 52 orientation, 16–17 logical operators pixel rate, 13–15 for feature queries, 252 width and height, 12–13 for media queries, 11 mobile-first development, 18–19 luminance, 116 online gallery, 9

274 Index online resources, 264 normal value syntax, 9–11 for animation-direction property, 179 @media rule, 10–11 for word-wrap property, 71 Meyer, Eric, CSS Pocket Reference, 23 not operator, for feature queries, 252 min-content keyword, 205 :not() pseudo-class, 42 min-device-aspect-ratio property, 18 not value, for @media rule, 11 min-height property, 13 nowrap value, for flex-wrap property, 196 minimum keyword, for wrap-flow :nth-* pseudo-class, 33–36 property, 248 :nth-child() pseudo-class, 34–36 min-resolution media feature, 14 :nth-last-child() pseudo-class, 36 min-width property, 12 :nth-last-of-type() pseudo-class, 36 mix-blend-mode property, 229 :nth-of-type() pseudo-class, 34–36 mobile-first development, 18–19 mobile-friendly versions, of websites, 8 O mobile mode, 16 modules, 2–3 odd keyword, 33 and recommendation process, 3–4 odd-numbered element, selecting, Mozilla, font formats, 52 33–34 Mozilla Developer Network (MDN), online resources, 263–266 44, 264 :only-child pseudo-class, 39 -moz- prefix, 5 only value, for @media rule, 11 -ms- prefix, 5 :only-of-type pseudo-class, 39 Multi-column Layout Module, 75 opacity multiplication, calc() function for, browser support, 119, 260 202–203 online resources, 265 Multiply mode, 226 opacity() function, 233 opacity property, 111, 112–113 vs. rgba() function, 114 N OpenType fonts, 52, 58–61 named anchor, 40 :optional pseudo-class, 44 names order property for CSS variables, 250 for flexible box layout, 188 for flow, 249 for grid layout, 223 for grid areas, 217–219 ordinal group, 188 navigation menu, orientation for or expression, for multiple media display, 16–17 queries, 18 negation pseudo-class, 42 orientation, of viewing device, 16–17 negative value origin for flipping element vertically, 142 of 2D transformations, 138–139 for transition-delay property, 172 of 3D transformations, 160–161 nested calc() function, 203 of coordinate system, 64 Next Web (website), 9 or operator, for feature queries, 252 none keyword :out-range pseudo-class, 45 for animation-fill-mode property, 180 overflow text, restricting, 69–70 for animation-name property, 177 overflow-wrap property, 71 for hyphens property, 72 Overlay mode, 226 for perspective() function, 154 for resize property, 73 P for transition-property property, 167 padding-box keyword, for background- no-repeat value, for background-repeat clip property, 92–93 property, 87 parent elements, children of, 34

Index 275 Partial Attribute Value Selector, 22, 27 radial-gradient() value function, 127 paused keyword, for animation-play-state radians, 124 property, 181 recommendation process, percentages, vs. fraction unit (fr), 213 for modules, 3–4 performance Recommendation status, 4 3D-transformed elements and, rectangle() function, 239–240 149–150 Red, Green, Blue (RGB) model, 111, 113 graphical effects and, 122 Red, Green, Blue, Alpha (RGBA) perspective() function, 154 model, 113–115 perspective-origin property, 159 and graceful degradation, 115–116 perspective property, 159–160 Regions Module, 249–250 pixel grid, 65 browser support, 255 polygon() function, for clip paths, regular quarter ellipses, 98 237–238 shorthand syntax for, 99 portrait value, for orientation relative length units, 199–202 property, 16–17 rel attribute, 22 Positioned Layout Module, 253 rem (root em), 200 position property, 253 repeat() function, grid-template-columns prefixes, for properties, 5 property and, 216–217 prescriptive columns, 76–77 repeating animations, 179 presentation, of web page, 165 repeating-linear-gradient() function, 126 preserve-3d keyword, for transform-style repeating-radial-gradient() function, property, 161 130–131 print media type, 10 repeat keyword properties for background-repeat property, 87 changes, transitions and, 166 for border-image-repeat property, 106 custom, 250 repeat-x value, for background-repeat prefix for, 5 property, 87 Proposed Recommendation status, 4 repeat-y value, for background-repeat pseudo-classes, 31 property, 87 constraint validation, 44–45 required attribute, 44 :empty, 41 :required pseudo-class, 44 :not(), 42 resize property, 72–73 online resources, 264 resizing elements, 72–73 :root, 41–42 resolution media feature, 14–15 structural, 32–39 “Responsive Web Design” (Marcotte), 10 :target, 40–41 reverse play for animation, 179–180 UI element states, 43–44 RGB (Red, Green, Blue) model, 111, 113 pseudo-elements, 31, 45–46 RGBA (Red, Green, Blue, Alpha) online resources, 264 model, 113–115 pseudo-selectors, 21 and graceful degradation, 115–116 rgba() function, 68, 113–115 Q right keyword for perspective-origin property, 159 quarter ellipses, 98 for transform-origin property, 139 queries. See feature queries; Media root em (rem), 200 Queries Module :root pseudo-class, 41–42 root-relative units, 200 R rotate3d() function, 152–153 rotate function, for transform property, radial gradients, 127–131 136 –140 multiple color-stop values, 129–130 rotateX() function, 152 repeating, 130–131

276 Index rotateY() function, 152 screen size, physical, 15 rotateZ() function, 152 scroll keyword, for background- rotation attachment property, 86 around axis, 151–153 ::sele c tio n pseudo-element, 45–46 with skew, 143 selectors, 4, 21–30 rounded corners, for borders, 97–101 attribute selectors, 22–23 round keyword browser support, 30, 46, 258 for background images, 87 online resources, 264 for border-image-repeat property, 106 Selectors Level 3 Module, 21–22 for clip path corners, 237 sepia() function, 232–233, 234 row keyword shadows for flex-direction property, 187 drop, 65–67, 107–109, 233–234 for grid-auto-flow property, 220 multiple, for text, 67–68 row-reverse value, for flex-direction inset, 109 property, 187 shape-margin property, 247 running keyword, for animation-play- shape-outside property, 246 state property, 181 Shapes Module, 246–247 browser support, 255 S shrinking elements, 191 (soft-hyphenation symbol), 72 Safari Simple Attribute Selector, 22 3D transformations, 148, 149 sine functions, in matrix background images, 87 transformations, 146 clip path in, 238–240 sizing column-fill property, 79 elements, 72–73, 203–207 column layout, 76 fill keyword, 206–207 Flexbox, 197 fit-content keyword, 206 font formats, 52 intrinsic and extrinsic, 204–207 font-variant-* properties, 61 max-content keyword, 205 and legacy gradient syntaxes, 131 min-content keyword, 205 min-content and max-content, 205 online resources, 266 Regions Module, 250 and values, browser support, resize property, 73 208, 261 ::sele c tio n pseudo-element, 46 skew functions, for transform property, text-shado w property, 65 143–144 web fonts, 47 skewing, with matrices, 145 -webkit-device-pixel-ratio, 15 slices for images, 102 saturate() function, 232–233 small caps font faces, 50 saturation, 116, 117 smcp (small caps) OpenType feature, Scalable Vector Graphics (SVG), 59–60 135, 225 space-around keyword, for justify- clip paths in, 240–241 content property, 193, 194 filter effects in, 235 space between columns, 80–81 font type, 52 space-between keyword, for justify- masking in, 242–243 content property, 193 scale3d() function, 156–157 space keyword, for background scale function, for transform images, 87 property, 142 span keyword, for grid-row-end scaleZ() function, 156–157 property, 215 scaling, 156–157 spanning element, 83 with matrices, 145 spread value, for box-shadow screen media type, 10 property, 108 Screen mode, 226

Index 277 src property text-align property, 70 for font file, 48 text-direction property, 186 local() value for, 48–49, 52 text effects stacking context, creating, 230 browser support, 74, 259 stacking order for grid items, 222–223 online resources, 264 start keyword Text Level 3 Module, 63 for text-align property, 70 Text Module, 63 for wrap-flow property, 248 text-overflo w property, 69–70 steps() function, 168, 170–171 text-shado w property, 65–68 sticky positioning, 253–254 three-dimensional. See 3D elements; browser support, 255 3D transformations sticky threshold value, 254 tilde (~), as Partial Attribute Value stretch keyword Selector, 22 for align-items property, 194, 195 tiling background images, 87–88 for border-image-repeat property, 106 to keyword, for gradient direction, structural pseudo-classes, 32–39 122–123 :first-child pseudo-class, 33 top keyword :first-of-type pseudo-class, 37–38 for perspective-origin property, 159 :last-child pseudo-class, 37–38 for transform-origin property, 139 :last-of-type pseudo-class, 37–38 tracks, in grids, 210 :nth-* pseudo-class, 33–36 transformations. See 2D transforma :nth-child() pseudo-class, 34–36 tions; 3D transformations :nth-last-child() pseudo-class, 36 transform-origin property, 138–139 :nth-last-of-type() pseudo-class, 36 of 3D transformations, 160 :nth-of-type() pseudo-class, 34–36 transform property, 136–144 :only-child pseudo-class, 39 default values for functions, 144 :only-of-type pseudo-class, 39 rotate function, 136–139 style sheet scale function, 142 @import rule for external, 10 skew function, 143–144 link element for external, 9 translate function, 140–141 subtraction, calc() function for, 202 Transforms Module, 135–136 @supports rule, 251 transform-style property, 161–162 SVG (Scalable Vector Graphics), transitions, 174. See also animations 135, 225 vs. animations, 166 clip paths in, 240–241 browser support, 183, 261 filter effects in, 235 conditions for, 166 font type, 52 example, 173–174 masking in, 242–243 multiple, 174 –175 SVG 1.1 module, 144 online resources, 265 syntax, 4–5 shorthand, 172–173 transition-delay property, 172 T transition-duration property, 167, 174 tangent functions, in matrix transition-property property, transformations, 145 167, 174 :target pseudo-class, 40–41 transition-timing-function property, text. See also fonts 168 –171 aligning, 70 Transitions Module, 165 controlling line wrapping, 71–72 translate3d() function, 156 flowing around elements, 248 translate() function, 140–141, 155 outlining, 63 translateX() function, 140, 155 restricting overflow, 69–70 translateY() function, 140, 155 shadows for, 65–68

278 Index trigonometric functions, 145–146 W TrueType font format, 52 Web Font Loader Library, 55 Typekit, 54 web fonts, 47–62 type selectors, 21 browser support, 62, 259 typographic styles @font-face method, 47, 48–51 browser support, 74, 259 licensing, 53–54 online resources, 264 online resources, 264 real-world example, 54–55 U WebKit, syntax for linear gradients, 131 UI element states, 43–44 -webkit-clip-path, in Safari, 238 url() function -webkit- prefix, 5, 149 for borders, 102 for transition properties, 166 filter ID in, 235 Web Open Font Format (WOFF), 52 web pages, layers, 165 websites V devices for accessing, 7 :valid pseudo-class, 44 mobile-friendly versions of, 8 values and sizing, browser support, web use, licensing fonts for, 53–54 208, 261 weight of fonts, 49–50 Values and Units Module, 199 Westciv, 3D effects test page, 151 angle units, 124 width calculated values, 202–203 of flex container, 189 relative length units, 199–202 of text column, 77–78 root-relative units, 200 width media feature, 12–13 viewport-relative units, 200–202 width-to-height ratio, for media variables, 250–251 queries, 17–18 browser support, 255 WOFF (Web Open Font Format), 52 online resources, 266 words, hyphenation, 72 Verou, Lea, 170 word-wrap property, 71 vertical alignment, with align-items Working Draft status, 3 property, 194–195 wrap-flow property, 248 vertical axis, translateY() function for wrap value, of flex-wrap property, 196 movement on, 140 vertical pipe (|), as Language Attribute X Selector, 22–23 vertical value, for resize property, 73 x-axis, 64 vh (viewport height), 201 x-height, 56 viewport x-offset, 66 descriptors, 253 for text shadow, 68 of media type, width, 12–13 meta tag, 16 Y of mobile device browser, 16 y-axis, 64 setting properties, 252–253 y-offset, 66 viewport height (vh), 201 for text shadow, 68 viewport-relative units, 200–202 @viewport rule, 253 viewport width (vw), 201 Z visible keyword, for backface-visibility z-axis, 64, 149, 150 property, 162 zebra striping for tables, 35–36 vmax, 201, 202 z-index property, 222–223 vmin, 201, 202 vw (viewport width), 201

Index 279