CSS in Depth (Keith J. Grant)（Z-Library）

Page 1

M A N N I N G Keith J. Grant FOREWORD BY Chris Coyier

Page 2

Save 35% at manning.com Use the code humble35 at checkout to save on your first purchase. Early access Don’t wait to start learning! In MEAP, the Manning Early Access Program, you read books while they’re being written. Access anywhere with liveBook The Manning liveBook platform provides instant browser-based  access to our content. Beyond books Cutting edge liveProjects, liveAudio, and liveVideo courses give  you new ways to learn. Only available at manning.com Impeccable quality We believe in excellence. Our customers tell us we produce  the highest quality content you can buy. Exclusive eBooks Manning eBooks are only available from manning.com. You won’t find them anywhere else. Email shop at manning.com

Page 3

Box model and border-box sizing The box model refers to the composition of elements on a page. When you specify the height or width of an element, you’re setting the content size—any padding, border, and margin will be added to that. Applying box-sizing: border-box to an element changes the box model to a more pre- dictable behavior. Setting height or width will control the size of the entire element, including its padding and border. See chapter 3 for information on applying border-box sizing to the entire page, as well as other important concepts including:  Centering content  Creating columns of equal height  Controlling spacing between elements Width Height Content Padding Border Margin Width Height Content Padding Border Margin

Page 4

CSS in Depth

Page 5

(This page has no text content)

Page 6

CSS in Depth KEITH J. GRANT M A N N I N G SHELTER ISLAND

Page 7

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Email: orders@manning.com ©2018 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. Manning Publications Co. Development editor: Kristen Watterson 20 Baldwin Road Review editor: Aleksandar Dragosavljević PO Box 761 Technical development editor: Robin Dewson Shelter Island, NY 11964 Project editor: Kevin Sullivan Copy editor: Frances Buran Proofreader: Elizabeth Martin Technical proofreader: Birnou Sébarte Typesetter: Dennis Dalinnik Cover designer: Marija Tudor ISBN: 9781617293450 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – EBM – 23 22 21 20 19 18

Page 8

brief contents PART 1 REVIEWING THE FUNDAMENTALS....................................1 1 ■ Cascade, specificity, and inheritance 3 2 ■ Working with relative units 28 3 ■ Mastering the box model 55 PART 2 MASTERING LAYOUT....................................................85 4 ■ Making sense of floats 87 5 ■ Flexbox 116 6 ■ Grid layout 144 7 ■ Positioning and stacking contexts 177 8 ■ Responsive design 201 PART 3 CSS AT SCALE ...........................................................231 9 ■ Modular CSS 233 10 ■ Pattern libraries 253v

Page 9

BRIEF CONTENTSviPART 4 ADVANCED TOPICS.....................................................277 11 ■ Backgrounds, shadows, and blend modes 279 12 ■ Contrast, color, and spacing 300 13 ■ Typography 329 14 ■ Transitions 353 15 ■ Transforms 370 16 ■ Animations 396

Page 10

contents foreword xv preface xvii acknowledgments xix about this book xxi PART 1 REVIEWING THE FUNDAMENTALS..........................1 1 Cascade, specificity, and inheritance 3 1.1 The cascade 4 Understanding stylesheet origin 8 ■ Understanding specificity 10 ■ Understanding source order 15 Two rules of thumb 17 1.2 Inheritance 18 1.3 Special values 20 Using the inherit keyword 21 ■ Using the initial keyword 22 1.4 Shorthand properties 23 Beware shorthands silently overriding other styles 23 Understanding the order of shorthand values 24vii

Page 11

CONTENTSviii2 Working with relative units 28 2.1 The power of relative values 29 The struggle for pixel-perfect design 29 ■ The end of the pixel- perfect web 29 2.2 Ems and rems 31 Using ems to define font-size 32 ■ Using rems for font-size 36 2.3 Stop thinking in pixels 37 Setting a sane default font size 39 ■ Making the panel responsive 40 ■ Resizing a single component 41 2.4 Viewport-relative units 43 Using vw for font size 45 ■ Using calc() for font size 45 2.5 Unitless numbers and line-height 46 2.6 Custom properties (aka CSS variables) 48 Changing custom properties dynamically 50 ■ Changing custom properties with JavaScript 53 ■ Experimenting with custom properties 54 3 Mastering the box model 55 3.1 Difficulties with element width 56 Avoiding magic numbers 59 ■ Adjusting the box model 59 Using universal border-box sizing 61 ■ Adding a gutter between columns 62 3.2 Difficulties with element height 64 Controlling overflow behavior 64 ■ Applying alternatives to percentage-based heights 65 ■ Using min-height and max-height 70 ■ Vertically centering content 71 3.3 Negative margins 73 3.4 Collapsed margins 74 Collapsing between text 74 ■ Collapsing multiple margins 75 Collapsing outside a container 76 3.5 Spacing elements within a container 77 Considering changing content 79 ■ Creating a more general solution: the lobotomized owl selector 80

Page 12

CONTENTS ixPART 2 MASTERING LAYOUT..........................................85 4 Making sense of floats 87 4.1 The purpose of floats 88 4.2 Container collapsing and the clearfix 93 Understanding container collapsing 94 ■ Understanding the clearfix 96 4.3 Unexpected “float catching” 99 4.4 Media objects and block formatting contexts 102 Establishing a block formatting context 103 ■ Using a block formatting context for media object layouts 104 4.5 Grid systems 105 Understanding a grid system 106 ■ Building a grid system 107 Adding gutters 111 5 Flexbox 116 5.1 Flexbox principles 117 Building a basic flexbox menu 120 ■ Adding padding and spacing 123 5.2 Flex item sizes 124 Using the flex-basis property 126 ■ Using flex-grow 127 Using flex-shrink 128 ■ Some practical uses 129 5.3 Flex direction 130 Changing the flex direction 132 ■ Styling the login form 133 5.4 Alignment, spacing, and other details 135 Understanding flex container properties 135 ■ Understanding flex item properties 139 ■ Using alignment properties 140 5.5 A couple of things to be aware of 142 Flexbugs 142 ■ Full-page layout 142 6 Grid layout 144 6.1 Web layout is here 145 Building a basic grid 146 6.2 Anatomy of a grid 148 Numbering grid lines 153 ■ Working together with flexbox 155 6.3 Alternate syntaxes 158 Naming grid lines 158 ■ Naming grid areas 160

Page 13

CONTENTSx6.4 Explicit and implicit grid 162 Adding variety 166 ■ Adjusting grid items to fill the grid track 169 6.5 Feature queries 172 6.6 Alignment 175 7 Positioning and stacking contexts 177 7.1 Fixed positioning 178 Creating a modal dialog with fixed positioning 178 Controlling the size of positioned elements 182 7.2 Absolute positioning 182 Absolutely positioning the Close button 182 ■ Positioning a pseudo-element 183 7.3 Relative positioning 185 Creating a dropdown menu 186 ■ Creating a CSS triangle 188 7.4 Stacking contexts and z-index 190 Understanding the rendering process and stacking order 191 Manipulating stacking order with z-index 193 ■ Understanding stacking contexts 194 7.5 Sticky positioning 197 8 Responsive design 201 8.1 Mobile first 202 Creating a mobile menu 209 ■ Adding the viewport meta tag 213 8.2 Media queries 214 Understanding types of media query 215 ■ Adding breakpoints to the page 217 ■ Adding responsive columns 221 8.3 Fluid layouts 223 Adding styles for a large viewport 224 ■ Dealing with tables 226 8.4 Responsive images 227 Using multiple images for different viewport sizes 227 Using srcset to serve the correct image 228

Page 14

CONTENTS xiPART 3 CSS AT SCALE..................................................231 9 Modular CSS 233 9.1 Base styles: laying the groundwork 234 9.2 A simple module 235 Variations of a module 237 ■ Modules with multiple elements 241 9.3 Modules composed into larger structures 243 Dividing multiple responsibilities among modules 244 Naming modules 248 9.4 Utility classes 250 9.5 CSS methodologies 251 10 Pattern libraries 253 10.1 Introduction to KSS 254 Setting up KSS 255 ■ Writing KSS documentation 257 Documenting module variants 261 ■ Creating an overview page 264 ■ Documenting modules that require JavaScript 264 Organizing the pattern library into sections 266 10.2 Shifting the way you build CSS 269 Using a CSS First workflow 269 ■ Using a pattern library as an API 270 PART 4 ADVANCED TOPICS...........................................277 11 Backgrounds, shadows,and blend modes 279 11.1 Gradients 280 Using multiple color stops 283 ■ Using radial gradients 285 11.2 Shadows 287 Defining depth with gradients and shadows 288 ■ Creating elements with a flat design 289 ■ Creating buttons with a more modern look 290 11.3 Blend modes 291 Tinting an image 294 ■ Understanding types of blend mode 295 ■ Adding texture to an image 296 Using mix blend modes 298

Page 15

CONTENTSxii12 Contrast, color, and spacing 300 12.1 Contrast is king 302 Establishing patterns 303 ■ Implementing the design 304 12.2 Color 306 Understanding color notations 312 ■ Adding new colors to a palette 316 ■ Considering contrast for font colors 318 12.3 Spacing 320 Using ems vs. px 320 ■ Factoring in line height 323 Spacing inline elements 326 13 Typography 329 13.1 Web fonts 331 13.2 Google fonts 332 13.3 How @font-face works 336 Font formats and fallbacks 337 ■ Multiple variants of the same typeface 338 13.4 Adjusting space for readability 339 Body copy spacing 340 ■ Headings, small elements, and spacing 342 13.5 The dreaded FOUT and FOIT 346 Using Font Face Observer 348 ■ Falling back to system fonts 349 Getting ready for font-display 351 14 Transitions 353 14.1 From here to there 354 14.2 Timing functions 356 Understanding Bézier curves 357 ■ Steps 360 14.3 Non-animatable properties 361 Properties that cannot be animated 364 ■ Fading in and out 365 14.4 Transitioning to auto height 367 15 Transforms 370 15.1 Rotate, translate, scale, and skew 371 Changing the transform origin 374 ■ Applying multiple transforms 375

Page 16

CONTENTS xiii15.2 Transforms in motion 375 Scaling up the icon 381 ■ Creating “fly in” labels 383 Staggering the transitions 386 15.3 Animation performance 387 Looking at the rendering pipeline 387 15.4 Three-dimensional (3D) transforms 389 Controlling perspective 390 ■ Implementing advanced 3D transforms 393 16 Animations 396 16.1 Keyframes 397 16.2 Animating 3D transforms 400 Building the layout without animations 400 ■ Adding animation to the layout 405 16.3 Animation delay and fill mode 407 16.4 Conveying meaning through animation 409 Responding to user interaction 409 ■ Drawing the user’s attention 413 16.5 One final piece of advice 416 appendix A Selectors reference 417 appendix B Preprocessors 422 index 435

Page 17

(This page has no text content)

Page 18

foreword “A minute to learn . . . A lifetime to master.” That phrase might feel a little trite these days, but I still like it. It was popularized in modern times by being the tagline for the board game Othello. In Othello, players take turns placing white or black pieces onto a grid. If, for example, a white piece is played trapping a row of black pieces between two white, all the black pieces are flipped and the row becomes entirely white. Like Othello, it isn’t particularly hard to learn the rules of CSS. You write a selec- tor that attempts to match elements, then you write key/value pairs that style those elements. Even folks just starting out don’t have much trouble figuring out that basic syntax. The trick to getting good at CSS, as in Othello, is knowing exactly when to do what. CSS is one of the languages of the web, but it isn’t quite in the same wheelhouse as programming. CSS has little in the way of logic and loops. Math is limited to a single function. Only recently have variables become a possibility. Rarely do you need to con- sider security. CSS is closer to painting than Python. You’re free to do what you like with CSS. It won’t spit out any errors at you or fail to compile. The journey to getting good at CSS involves learning everything CSS is capable of. The more you know, the more natural it starts to feel. The more you practice, the more easily your brain will reach for that perfect layout and spacing method. The more you read, the more confident you’ll feel in tackling any design. Really good CSS developers aren’t deterred by any design. Every job becomes an opportunity to get clever, a puzzle to be solved. Really good CSS developers have that full and wide spectrum of knowledge of what CSS is capable of. This book is part ofxv

Page 19

FOREWORDxviyour journey to being that really good CSS developer. You’ll gain the spectrum of knowledge necessary to getting there. If you’ll permit one more metaphor, despite CSS going on a couple of decades old, it’s a bit like the Wild Wild West. You can do just about whatever you want to do, as long as it’s doing what you want. There aren’t any hard and fast rules. But because you’re all on your own, with no great metrics to tell you if you’re doing a good job— or not—you’ll need to be extra careful. Tiny changes can have huge effects. A stylesheet can grow and grow and become unwieldy. You can start to get scared of your own styles! Keith covers a lot of ground in the book, and every bit of it will help you become a better CSS developer and tame this Wild Wild West. You’ll deep dive into the language itself, learning what CSS is capable of. Then, just as importantly, you’ll learn about ideas around the language that level you up in other ways. You’ll be better at writing code that lasts and is understandable and performant. Even seasoned developers will benefit. If you find yourself reading about some- thing that you already know, you’ll firm up your skills, affirm your knowledge, and find little “oooo” bits that surprise you and extend that base. CHRIS COYIER Co-founder, CodePen

Page 20

preface CSS was proposed in 1994 and first implemented (partially) by Internet Explorer 3 in 1996. It was somewhere around that time I discovered the wonderful View Source but- ton and realized all the secrets of a web page were there for me to decipher in plain text. I taught myself HTML and CSS by playing in a text editor and seeing what worked. It was a fun excuse to spend as much time as possible on the internet. In the meantime, I needed to find a real career. I went on to earn a degree in Com- puter Science. Little did I know that the two would come crashing together in the 2000s as the concept of “web developer” emerged. I’ve been in tune with CSS since the very beginning. Even when I’m working, it’s play. I’ve worked on the back end and the front end, yet I’ve always found myself to be the resident CSS expert on every team I’ve been on. It’s often the most neglected part of the web stack. But once you’ve been on a project with clean CSS, you never want to do without it again. After seeing it in action, even seasoned web developers ask, “How do I learn CSS?” There isn’t one concise, straightforward answer to this question. It’s not a matter of learning one or two quick tips. Rather, you need to understand all the disparate parts of the language and how they can fit together. Some books make a good beginner-level introduction to CSS, but many developers already have a basic understanding. Some books teach a lot of useful tricks but assume the reader has mastery over the language. At the same time, the rate of change in CSS in accelerating. Responsive design is now the de facto standard. Web fonts are commonplace. In 2016, we saw the rise of flexbox, and 2017 began the rise of something called grid layout. Blend modes, boxxvii