Keep ahead of the game by employing the most effective, cutting-edge CSS techniques. Create efficient, maintainable code, employ advanced layouts, and design innovative visuals with powerful effects, transitions, filters, SVGs, and animations.

CSS Master, 2nd Edition

Preface

If you’ve ever worked on a CSS codebase of any size—or even a small codebase with multiple developers—you’ll have realized how difficult it is to create CSS that’s predictable, reusable, and maintainable without being bloated. With added developers often comes added complexity: longer selectors, colliding selectors, and larger CSS files.

CSS Architecture and Organization

On your road to becoming a CSS master, you’ll need to know how to troubleshoot and optimize your CSS. How do you diagnose and fix rendering problems? How do you ensure that your CSS creates no performance lags for end users?

Debugging and Optimization

For years, variables were one of the most commonly requested CSS features. Variables make it easier to manage colors, fonts, size, and animation values, and to ensure their consistency across a codebase.

Custom Properties

In this chapter, we’ll look at two features of CSS that relate to text: @font-face , and writing modes. These features both play a role in internationalization —the process of making websites that work with the range of humanity’s languages and writing forms.

Working with Text

CSS layouts have come a long way in recent years. Not so long ago, we were wrestling with div soup in our HTML documents and using heavy CSS frameworks that relied on floats and clearing to get our layouts working just right. Or we threw a bunch of JavaScript at them. These days, it’s much easier to create the kinds of complex layouts that used to require nested elements or expensive DOM operations.

Layouts

Now that we’ve covered some advanced CSS layouts, let’s look at how to add some whimsy, delight, and polish to our documents with CSS transitions and animations. Transitions and animations can clarify the effect of an action. A menu that slides into view, for example, is less abrupt and jarring than one that appears suddenly after a button is clicked. Transitions and animations can also draw attention to a page change or problem. You might, for instance, transition the border color of a form field to highlight that its value is invalid.(“ Animation for Attention and Comprehension ”, from the Nielsen Norman Group, is a nice backgrounder on how animation and transitions can enhance usability.)

Transitions and Animations

Transforms allow us to create effects and interactions that are otherwise impossible. When combined with transitions and animations, we can create elements and interfaces that rotate, dance, and zoom. Three-dimensional transforms, in particular, make it possible to mimic physical objects.

Transforms

Conditional CSS refers to CSS rules that are applied when a condition is met. A condition may be a CSS property and value combination, as with the @supports rule. A condition may test for a browser window condition such as width, as with the @media rule. Or a condition may be a device feature such as hover capability or pointer input, as with some newer features of @media . We’ll discuss all of the above in this chapter.

Applying CSS Conditionally

So far, we’ve talked about using CSS with HTML, but we can also use CSS with SVG, or Scalable Vector Graphics . SVG is a markup format for describing flat, two-dimensional images. Because it’s a markup language, it has a Document Object Model, and can be used with CSS.

Using CSS with SVG

In this book, we’ve covered some of the finer points and broad strokes of CSS. In some ways, we’ve only scratched the surface.

Community Questions