Additional, advanced CSS

Our HTML/CSS focus up to this point has been relatively broad, to start with the basics. Here we want to begin 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
  There are going to be a lot of MDNs, here.

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

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

• CSS Transforms | MDN
  Back to MDN.

• CSS Transitions | MDN

• CSS Animations | MDN

A good pattern to follow in web development is to let each technology do what it does best—using HTML for semantic meaning, CSS to handle how we form a page, and JavaScript to introduce interaction. But much of what you’ll use JavaScript for, to start, is simply adding or removing classes—and ahead of that, there is still a lot we can do in 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 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 negative margin. By doing this on the pseudo elements, we can still position the parent element normally, otherwise!

Eric and I will often call 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 2, or with names like Eric Li.

You can wrap multiple words (or whole phrases) in an 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 need JavaScript to fully balance your lines! (Which is a whole can of worms, ask Eric.)

When in doubt, The Elements of Typographic Style has many of the answers you need about where to break text apart or keep it together! But also, as Bringhurst says, “read the text before designing it.” Put yourself in the mind of your reader!

These strategies only work if you can manually edit your text content, which is not always feasible. Do it when you can, and give more attention to your headings, then your body copy, etc.

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 is appropriate. (This is bad practice, and usually very brittle.) Use transform for what they 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 class is applied (or later—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:

Essentially any CSS property 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: