CSS Highlights – 2023

Written by

paula

in

JUMP TO:

1. CSS nesting

2. Typography

3. Trig functions

4. View transitions API

1. CSS nesting

CSS nesting lets you write selectors inside other selectors, reducing repetition and making relationships clearer — natively, without preprocessors.

Basic example

Before (traditional CSS)

.card {}
.card h2 {}
.card p {}
.card:hover {}

After (nested CSS)

.card {
  h2 {}
  p {}

  &:hover {}
}

Same output, cleaner syntax.

The & 

& represents the parent selector.

.button {
  &--primary {}   /* .button--primary */
  &:hover {}      /* .button:hover */
}

Without &, the selector means a descendant.

Common nesting patterns

Descendants (no &)

.card {
  img {
    border-radius: 8px;
  }
}

→ .card img

States & modifiers (with &)

.card {
  &:hover {}
  &.featured {}
}

Media queries inside components

.card {
  padding: 1rem;

  @media (min-width: 600px) {
    padding: 2rem;
  }
}

Pseudo-elements

.link {
  &::after {}
}

What CSS nesting is NOT

  • ❌ Not Sass-only anymore
  • ❌ Not unlimited deep nesting (keep it shallow)
  • ❌ Not changing specificity rules

It’s purely syntactic sugar.

2. Typography

Around 2023, CSS gained several native typography features that used to require hacks, JavaScript, or extra markup. These give you better control over:

  • text wrapping
  • drop caps and decorative initial letters
  • hyphenation behavior
  • spacing and line control

🔡 1. text-wrap: balance

What it does

Balances text across multiple lines, minimizing rivers or big uneven line breaks — especially useful in headings.

Example

h1 {
  text-wrap: balance;
}

Before:

Amazing
New Feature

After:

Amazing New
Feature

Why it matters
No JS or manual line breaks, just better line distribution.

✨ 2. initial-letter

What it does

Creates native “drop caps” or styled initial letters without extra HTML.

Example

p::first-letter {
  initial-letter: 3 2;
  font-size: 3rem;
  color: #333;
}

Breakdown:

  • 3 → number of lines to span
  • 2 → number of characters affected (optional)

Result
Classic magazine-style initials with minimal CSS.

🧵 3. Better text wrapping & overflow control

text-wrap variations

  • balance → tries to even out line lengths
  • unbalanced → default behavior

overflow-wrap

Already old, but now more consistent:

p {
  overflow-wrap: break-word;
}

Ensures long words don’t overflow containers.

🪶 4. Hyphenation improvements

CSS

p {
  hyphens: auto;
}

What it does

  • Lets the browser insert hyphens when needed
  • Works especially well on narrow columns

Bonus
Combine with language:

<p lang="de">…</p>

Affects how words break correctly in German, French, etc.

🚀 5. line-break & international text control

Example

p {
  line-break: strict;
}

Helps with:

  • CJK text (Chinese/Japanese/Korean)
  • Better line break rules per language

📏 6. More control over spacing

Features like:

  • text-indent
  • letter-spacing
  • word-spacing
  • line-height

have become more consistent and well-behaved with modern layout systems (Grid, Flexbox, Container Queries).

🧠 Why these matter now

Before:

  • balancing lines → JS or manual <br>
  • drop caps → extra HTML + positioning CSS
  • hyphenation → inconsistent or impossible in some browsers

Now:

  • purely CSS
  • cleaner HTML
  • responsive-friendly

3. Trig functions

CSS now includes a set of trigonometric functions and other math helpers that let you perform math directly in your stylesheets — no JavaScript needed. These are part of the CSS Values and Units Module Level 4 and now have broad support in modern browsers. 

🔁 Trigonometric functions

These work like in regular math:

FunctionWhat it returns
sin()Sine of an angle (–1 to 1)
cos()Cosine of an angle (–1 to 1)
tan()Tangent of an angle
asin()Inverse sine (number → angle)
acos()Inverse cosine
atan()Inverse tangent
atan2()Angle from two values (y, x)

You can use angles in units like deg, rad, and turn. 

Example: circle animation (CSS only)

@keyframes spin {
  to { --angle: 360deg; }
}

.orbit {
  animation: spin 4s linear infinite;
  left: calc(50px * cos(var(--angle)));
  top: calc(50px * sin(var(--angle)));
}

This uses cos() and sin() to position an element around a circle. 

How this helps real layouts

You can now:

  • animate orbital or cyclical motion
  • calculate positions with angles
  • create sine-wave motion without JavaScript
  • derive angles using atan2() for UI directions

These functions are particularly useful in animations, advanced transforms, and visual effects. 

Other math functions (context)

CSS also includes a full suite of math helpers such as:

  • min(), max(), clamp() – already widely used
  • pow(), sqrt(), hypot() – exponential math
  • abs() – absolute value
  • round(), mod() – rounding and remainder
    These give you even more control over computed values. 

4. View transitions API (not just CSS!)

The View Transitions API lets the browser animate visual changes between states or page navigations automatically, without manual animation code.

The problem it solves

Traditionally:

  • Page navigation → instant redraw (jarring)
  • State changes → complex JS + CSS animations
  • SPA transitions → lots of bespoke logic

View Transitions make these native, smooth, and consistent.

How it works (conceptually)

  1. The browser takes a snapshot of the old view
  2. You update the DOM (navigation or state change)
  3. The browser animates from old → new

You don’t animate elements directly — the browser does.

Basic example (same-page state change)

document.startViewTransition(() => {
  document.body.classList.toggle("dark");
});

The browser crossfades the old and new views automatically.

Element-level transitions

You can tell the browser which elements correspond between views:

.card {
  view-transition-name: card;
}

This allows:

  • smooth resizing
  • morphing positions
  • continuity between pages

Page navigation support

  • Works especially well with SPAs
  • Increasing support for MPAs (same-origin navigation)
  • No JS animation libraries required

Why it’s powerful

  • Browser-managed animations
  • Highly performant (compositor-level)
  • Consistent motion patterns
  • Respects prefers-reduced-motion

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *