Additional, advanced CSS

It is vain to do with more what can be done with less.

William of Ockham

Our HTML/CSS focus up to this point has been relatively broad, to start with the basics. Here we want to sand down some of the rough edges, and introduce you to specific, advanced techniques you can use to refine and enliven your work—still with just CSS, no JavaScript (yet)!

• Overflowing content | MDN
  There are going to be a lot of MDNs, here.

• Font metrics, line-height and vertical-align
  A deep-dive on type positioning.

• ::before and ::after - CSS Tricks
  Another great CSS Tricks article.

• Filter | MDN
  Back to MDN.

• Transform | MDN

• Using CSS transitions | MDN

• Using CSS animations | MDN

A good pattern to follow in web development is to use each technology only for what it does best—using HTML for semantic meaning, CSS to handle how we form a page, and, later, JavaScript to introduce more interaction. But even before we get to JS, we can start to layer in some more liveliness in our CSS.

Let’s look at some examples.

Overflows and scrolling

An overflow in CSS happens when there is too much content to fit in a container—usually because you have manually constrained its height or width. (By default, the browser will try to show you everything!)

We can use this behavior intentionally to crop our content or create scrolling areas:

Importantly, this creates a new stacking context—which means things with position (and some other properties) will now use the overflow container as their reference/origin:

Precise text positioning

HTML renders a lot of extra space around text elements, called the line box (or, in design software parlance, the bounding box).

It is based on the font-family, the font-size, and the line-height, which basically means it is different all the time—and crucially, often different from Adobe/Figma to HTML. This makes it difficult to position type precisely—especially at large, expressive sizes like your headings! It’s always annoying, and you’ll often be adding/subtracting your spacing (margin or padding) to account for it, if you want to line everything up just right, optically.

Let’s avoid it. We can use pseudo-elements, ::after / ::before—which are entirely created by CSS, not in your DOM—to negate this vertical space with a negative margin. By doing this on the pseudo-elements, we can still position the parent element normally, otherwise!

Michael calls this tactic “negating the bounding box.”

Text ragging (sorta)

We’ve gone on-and-on about how you can’t treat the web like print—always perfectly ragging your text for nice, smooth blocks. In modern (responsive) web design we don’t always know what our text will be, nor where it will wrap!

But we can do a handful of things to make for better ragging/wraps, given the unknowns—judiciously using hyphens/­, <wbr>, <nobr>, and   to somehwat control your line breaks.

hyphens / ­ and <wbr>

The hyphens property allows long, multi-syllable words to be hyphenated when they wrap across multiple lines. This can be done automatically by the browser, or by manually inserting ­ (for soft hyphen) as an HTML entity:

Somewhat similar to ­, the <wbr> is a (void/empty) HTML element that denotes a word break opportunity—a bit like an optional <br>! You can use these to control where single long word will wrap, without a hyphen:

<nobr> and  

More often, you’ll want to keep certain words together—to avoid a widow or orphan, or to keep important/related text together—like in dates, November 8, or with names like van Zanten.

You can wrap multiple words (or whole phrases) in a <nobr> tag—keeping in mind that like <em> or <strong>, the default behavior is cleared by most resets (ours included)—so you have to restore the property in CSS. You can also use a manual   entity between words:

Beyond these manual interventions, you used to need JavaScript to fully balance your lines—but text-wrap: balance; is finally becoming available!

Hanging punctuation (kinda)

Ideally we could set punctuation outside of our text blocks, for visual alignment based solely on the letters—a traditional design technique called hanging punctuation. There is actually a CSS property for this, but only Safari supports it. But we can still approximate the behavior, at least for quotes:

When in doubt, The Elements of Typographic Style explains these conventions. But also, as Bringhurst says, “read the text before designing it.” Always put yourself in the mind of your reader!

Filters!

CSS can apply visual effects on elements—adjusting their graphical display after they are laid out and rendered in the page—with the filter property:

These also correspond to backdrop-filter values—which apply the effect to the page behind an element! (Safari still needs prefixed -webkit-backdrop-filter to understand.) You’ll often use these in conjunction with a mix-blend-mode for interesting layer-blending effects.

Transforms!

Beyond our standard sizing and layout afforded by CSS, you can also visually manipulate elements using CSS transforms—scaling, skewing, translating, or rotating elements after they are laid out in the DOM. It’s like grabbing the “corner handles” in Adobe/Figma!

scale() / scaleX() / scaleY() / scaleZ() / scale3d()

Change the displayed size of the element—as if it is an image.

skew() / skewX() / skewY()

Tilt an element to the left or right, like turning a rectangle into a parallelogram.

translate() / translateX() / translateY() / translate3d()

Move an element left/right and up/down, and also in three-dimensional space.

rotate() / rotate3d()

Rotate the element.

perspective()

Doesn’t affect the element itself, sets the distance between the user and the three-dimensional plane.

The units for these are all a bit different; MDN is your friend here, as usual. You can apply single or multiple transforms, which are written space-separated and applied one after the other:

.rotated {
	transform: rotate(-5deg);
}

.rotated-and-scaled {
	transform: rotate(-5deg) scale(120%);
}

Keep in mind that these transformations are applied after the rest of the CSS is parsed, and thus treat your element a bit like an image. And like overflow, above, transform also creates a new stacking context for its children.

You shouldn’t use transform for layout, per se—as in, don’t use translate when margin, padding, flex, or grid can achieve your layout. (This is bad practice, and usually very brittle.) Use transform only for what other properties can’t accomplish!

Transitions!

CSS transitions allow us to more seamlessly move between CSS property values.

Instead of having a property take effect immediately when a pseudo-class is applied (or later, and more commonly, with JS—a proper class), we can tell a CSS property to transition from one value to another over a given amount of time (duration), and with a specific acceleration (timing-function), or a delay. Motion can quickly get very complex!

You’ll often see a transition in shorthand:

.some-cool-transition {
	transition: all 2s 1s linear;
}

.some-cool-transition {
	transition-delay: 1s;
	transition-duration: 2s;
	transition-property: all;
	transition-timing-function: linear;
}

You can also control how different properties of an element transition independently, with a comma-separated list:

.some-cool-transition {
	transition: background-color 2s linear, transform 1s ease-in-out;
}

.some-cool-transition {
	transition-duration: 2s, 1s;
	transition-property: background-color, transform;
	transition-timing-function: linear, ease-in-out;
}

Sometimes the shorthand here is easier than discrete properties, where you have to maintain the same order across all of them. It’s all the same to the computer!

Often, CSS transitions will be used with JavaScript adding/removing classes, to make a state change less abrupt. For now, we’ll use pseudo-classes to demonstrate:

Nearly all CSS properties can be transitioned—but keep in mind that changes that cause a reflow (re-triggering layout, sometimes called paint) are slow and can make your page feel glitchy—especially when you start having many of them. Each in-between state causes the browser to re-render your entire document! So stick to changes of color, opacity, and transform for the smoothest performance.

And animations!

Sometimes, transitioning a property from one value to another isn’t enough—you may need more complicated (or repeating) motion behavior. CSS animations allow precise state sequencing with @keyframes (akin to… keyframes or a timeline in other software contexts).

To create a keyframe animation, we define an element’s initial state in CSS—then an animation property, which includes timing and behavior, as well as an animation name (something that you make up). Again, you’ll often see these in shorthand:

section {
	animation: blinking 3s infinite ease-in-out;
}

section {
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-name: blinking;
	animation-timing-function: ease-in-out;
}

Importantly, we then define the actual keyframes of an animation in a separate at-rule. Each keyframe is specified with a percentage of the animation’s duration, and can specify multiple properties—a bit like selectors for the time:

With great power there must also come great responsibility.

Stan Lee