Write better, more efficient CSS, and take advantage of the plethora of the new cutting-edge CSS features available to the front-end developer. You’ll also learn to master tools that will improve your workflow.

CSS Master, 3rd Edition

Preface

Understanding selectors is key to writing maintainable, scalable CSS. Selectors are the mechanism by which CSS rules are matched to elements. There are various ways to do this, and you’re probably familiar with most of them. Element type, class name, ID, and attribute selectors are all well supported and widely used.

Selectors

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. It took years to work through the details of the syntax and decide how variables would fit into existing rules governing cascade and inheritance. Now they’re available to developers in the form of CSS custom properties .

Custom Properties

CSS layouts have come a long way in the last decade. In an earlier era of the Web, we wrestled and wrangled  tags or used heavy CSS frameworks that relied on floats and clearing. 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, extensive knowledge of browser quirks, or expensive DOM operations.

Layouts

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

Now let’s look at how to add some whimsy, delight, and polish to our documents and applications. In this chapter, we’ll cover 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.

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

CSS includes several features for creating the kinds of visual effects that used to require image-editing software such as Photoshop. Filter effects give us the ability to add true drop shadows, and to blur or desaturate images, while blend modes let us combine layers.

Visual Effects

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

Smooth scrolling previously required the use of JavaScript to calculate the speed and timing of a scrolling operation. Developers of a certain age may remember using the animate() method of the jQuery JavaScript library, or the MooTools Fx.Scroll() class to make a page scroll to a given location.

CSS and Scrolling

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.

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