Welcome to the design studio, class. Modern CSS has quietly become incredibly powerful. Techniques that once needed JavaScript libraries or complicated workarounds now work natively in current browsers. Professor Press has picked a set of techniques worth experimenting with on your WordPress site today, each with real browser support and a note on how to use it responsibly.
These are not a ranked list of “the top trends.” They are practical tools. Pick the ones that serve your content and your visitors.
Professor’s note: Browser support changes over time. Before relying on a feature, check its current status on a resource like Can I Use or MDN, and design so the page still works if a feature is missing. That approach is called progressive enhancement.
Fluid Typography with clamp()
Instead of setting different font sizes at several breakpoints, clamp() lets text scale smoothly between a minimum and maximum size:
h1 {
/* Never smaller than 2rem, never larger than 3.5rem, scales in between */
font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}Block themes can do this for you. In theme.json, WordPress supports fluid typography, generating clamp() values from your minimum and maximum sizes:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{ "slug": "large", "name": "Large", "size": "2rem",
"fluid": { "min": "1.5rem", "max": "2rem" } }
]
}
}
}Pair fluid type with variable fonts, which pack multiple weights and widths into one file. They can reduce the number of font files you load and let you fine-tune weight precisely. WordPress’s Font Library (in the Site Editor) makes adding fonts easier, and you can self-host them for privacy and performance.
Smarter Layouts: Container Queries and :has()
Container queries
Media queries respond to the viewport. Container queries respond to the size of a component’s parent, so a card can adapt whether it sits in a wide content area or a narrow sidebar:
.wpp-card-wrap {
container-type: inline-size;
}
@container (min-width: 480px) {
.wpp-card {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
}
}The :has() selector
Often called the “parent selector,” :has() styles an element based on what it contains. It is supported in current versions of major browsers:
/* Give cards that contain an image a different layout */
.wpp-card:has(img) {
padding-top: 0;
}
/* Highlight a form field group when its input is invalid */
.wpp-field:has(input:user-invalid) {
border-color: #b00020;
}Bento-grid layouts
Bento grids arrange content in tiles of varied sizes, like a bento box. CSS Grid makes them straightforward: define a grid, then let certain items span two columns or rows. They work nicely for feature sections, portfolios, and homepage highlights. Keep the reading order logical in the HTML so screen reader and keyboard users get a sensible sequence, and collapse to a single column on small screens.
Tip: Build a bento grid once as a block pattern, then reuse it anywhere with a click. Patterns keep designs consistent across your site.
Motion: View Transitions and Scroll-Driven Animations
CSS view transitions
View transitions animate smoothly between states or pages. For traditional multi-page sites like most WordPress sites, cross-document view transitions can be enabled with a small snippet in supporting browsers:
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
}Browsers without support simply navigate normally, which makes this a textbook progressive enhancement.
Scroll-driven animations
Scroll-driven animations link an animation’s progress to scrolling, without JavaScript. Support is newer and not yet universal, so wrap them in @supports and a reduced-motion check:
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.wpp-reveal {
animation: wpp-fade-in linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
}
}
@keyframes wpp-fade-in {
from { opacity: 0; transform: translateY(1.5rem); }
to { opacity: 1; transform: none; }
}Heads up: Always respect prefers-reduced-motion. Some visitors experience discomfort from motion effects, and content must never depend on an animation to be visible or usable.
Micro-interactions
Small touches, like a button that subtly lifts on hover, a clear focus ring, or a checkmark after a form submits, make a site feel polished and give users feedback. Keep them quick and meaningful, and make sure every hover effect has a matching keyboard :focus-visible style.
Dark Mode with prefers-color-scheme
Many visitors set their device to dark mode. You can honor that choice with CSS custom properties:
:root {
--wpp-bg: #ffffff;
--wpp-text: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
:root {
--wpp-bg: #121212;
--wpp-text: #eeeeee;
}
}
body {
background: var(--wpp-bg);
color: var(--wpp-text);
}Check images, logos, and embedded content in both modes, and re-test contrast, since colors that work on white may fail on dark backgrounds.
Block Themes: Patterns and Style Variations
If you use a block theme, theme.json is your design control center. It defines color palettes, font sizes, spacing scales, and per-block styles. Two features are especially useful:
- Style variations — alternate JSON files in a theme’s styles folder that offer different color and typography combinations, selectable in the Site Editor.
- Block patterns — reusable, pre-designed layouts. PHP files in a theme’s patterns folder with a header comment are registered automatically.
Using presets instead of hard-coded values keeps everything consistent and easy to change later. Explore more in our themes guide and design secrets collection.
Accessibility-First Contrast and Design
The most “cutting-edge” design is one everyone can use. WCAG 2.2 Level AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and key interface elements. Build your palette with contrast in mind from the start:
- Test color pairs with a contrast checker before finalizing them.
- Do not rely on color alone to convey meaning.
- Keep visible focus styles for keyboard users.
- Use real text instead of text baked into images.
Want structured practice? The design module in our course covers these skills step by step, and our tools page lists free contrast checkers.
Homework
- Replace one set of fixed heading sizes with fluid typography.
- Try a container query or :has() rule on a staging site.
- Add a reduced-motion-friendly view transition and test it in two browsers.
- Run your color palette through a contrast checker and fix any failing pairs.
