See the old way, the modern way and whether it's safe to ship today.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}.parent {
display: grid;
place-items: center;
}Enter any site and get a modernity score, the modern CSS it already uses and the old techniques it still carries, each with the modern way to replace it.
See how GitHub, Stripe and the BBC scorealign-contentWidely availablegrid-template-rowsWidely availableoutlineWidely availableanchor-size()Newly availableposition-try-fallbacksNewly availableoverflow-anchorNewly availableabs()Newly availablecalc-size()Limited availabilitydevice-postureLimited availabilityfont-paletteWidely availablereading-flowLimited availabilityscroll-marginWidely availablejustify-contentNewly availableshape-outsideWidely available:nth-child()Widely availabledisplay: contentsLimited availabilitytext-spacing-trimLimited availability@containerLimited availabilitylengthWidely availableanimation-timelineLimited availabilitypositionLimited availabilitypow()Widely available@layerWidely availableisolationWidely availabletext-wrap-styleLimited availability::details-contentNewly available@containerNewly availableforced-colorsWidely availabletext-box-trimLimited availabilitypointerWidely available:placeholder-shownWidely available:playingLimited availabilityshape()Newly availablerandom()Limited availabilityattr()Limited availabilitypow()Widely availablezoomNewly availablecontrast-color()Newly availableoklch()Widely availablebackdrop-filterNewly availableoffset-pathWidely availableinputmodeWidely available<output>Widely available<img loading>Widely available<details>Widely available<datalist>Limited availabilityscrollbar-gutterNewly availableoverscroll-behaviorLimited availabilityscrollbar-colorNewly availablelengthWidely availableprefers-reduced-motionWidely available@supportsWidely available<details name>Newly availablelinear()Widely availableobject-fitWidely available:user-invalidWidely availablefield-sizingNewly availableinterpolate-sizeLimited availability@containerLimited availabilityattr()Limited availability@functionLimited availabilityshape()Newly availablewidth: stretchLimited availabilitysibling-index()Newly availabletext-box-trimLimited availabilitypopoverLimited availabilitycommandNewly available<dialog closedby>Limited availabilityappearanceLimited availabilityoklch()Widely availableinitial-letterLimited availabilityinsetWidely availablecontent-visibilityNewly availablepopoverNewly available@scopeNewly available@propertyNewly availabletranslateWidely availabletransition-behaviorNewly available@starting-styleNewly availablescroll-snap-typeWidely availabletext-wrapNewly availablefont-displayWidely availablecolor-schemeWidely availablelight-dark()Newly available:where()Widely availablegrid-template-areasWidely available<dialog>Widely availableaccent-colorLimited availability:is()Widely available:focus-visibleWidely available@layerWidely availableclamp()Widely availablegapWidely availableaspect-ratioWidely availablepositionWidely availableanimation-timelineNewly availablecolor-mix()Widely available:has()Widely availableplace-itemsWidely availableA reference for web developers. Each of its 123 snippets puts an old CSS technique next to the modern CSS that replaces it, with browser support for each. It covers Grid, custom properties, nesting, container queries, :has(), anchor positioning and more.
No. modern-css.com is made by Naeem Noor and puts old and modern CSS side by side. moderncss.dev is Stephanie Eckles's Modern CSS Solutions, a separate site with its own articles.
Many things that needed a preprocessor are now part of CSS. Custom properties cover variables and native nesting covers nesting. color-mix() and relative color syntax cover color functions, and @layer handles specificity. Sass that works is fine; move over when it suits you.
It depends on the feature. Grid, custom properties, flexbox gap and aspect-ratio work in every major browser. Nesting, container queries and :has() reached all of them in the last few years. Each snippet shows its Baseline status and a global support figure from caniuse.
Baseline, from the WebDX Community Group, says how widely a web feature works. Newly available means it works in the latest Chrome, Edge, Firefox and Safari. Widely available means that has been true for 30 months. Limited availability means at least one of them doesn't support it yet.
Start with Baseline. Widely available is safe for nearly every project. Newly available suits most projects, so check which browsers your visitors use. Limited availability needs a fallback. Each snippet shows its status and when it got there.