1. Background-clip: text

    Clipping a background image to the foreground text.

  2. Client Hints: DPR, Width, Viewport-Width

    DPR, Width, and Viewport-Width hints enable proactive content negotiation between client and server, enabling automated delivery of optimized assets - e.g. auto-negotiating image DPR resolution.

  3. CSS :any-link selector

    The `:any-link` CSS pseudo-class matches all elements that match `:link` or `:visited`

  4. Scoped Styles: the @scope rule

    Allows CSS rules to be scoped to part of the document, with upper and lower limits described by selectors.

  5. :default CSS pseudo-class

    The `:default` pseudo-class matches checkboxes and radio buttons which are checked by default, `<option>`s with the `selected` attribute, and the default submit button (if any) of a form.

  6. :dir() CSS pseudo-class

    Matches elements based on their directionality. `:dir(ltr)` matches elements which are Left-to-Right. `:dir(rtl)` matches elements which are Right-to-Left.

  7. CSS display: contents

    `display: contents` causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

  8. CSS Filter Effects

    Method of applying filter effects using the `filter` property to elements, matching filters available in SVG. Filter functions include blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and saturate.

  9. ::first-letter CSS pseudo-element selector

    CSS pseudo-element that allows styling only the first "letter" of text within an element. Useful for implementing initial caps or drop caps styling.

  10. CSS position:fixed

    Method of keeping an element in a fixed location regardless of scroll position

  11. :focus-visible CSS pseudo-class

    The `:focus-visible` pseudo-class applies while an element matches the `:focus` pseudo-class, and the UA determines via heuristics that the focus should be specially indicated on the element (typically via a “focus ring”).

  12. :focus-within CSS pseudo-class

    The `:focus-within` pseudo-class matches elements that either themselves match `:focus` or that have descendants which match `:focus`.

  13. :has() CSS relational pseudo-class

    Select elements containing specific content. For example, `a:has(img)` selects all `<a>` elements that contain an `<img>` child.

  14. :in-range and :out-of-range CSS pseudo-classes

    If a temporal or number `<input>` has `max` and/or `min` attributes, then `:in-range` matches when the value is within the specified range and `:out-of-range` matches when the value is outside the specified range. If there are no range constraints, then neither pseudo-class matches.

  15. :indeterminate CSS pseudo-class

    The `:indeterminate` pseudo-class matches indeterminate checkboxes, indeterminate `<progress>` bars, and radio buttons with no checked button in their radio button group.

  16. CSS ::marker pseudo-element

    The `::marker` pseudo-element allows list item markers to be styled or have their content value customized.

  17. :is() CSS pseudo-class

    The `:is()` (formerly `:matches()`, formerly `:any()`) pseudo-class checks whether the element at its position in the outer selector matches any of the selectors in its selector list. It's useful syntactic sugar that allows you to avoid writing out all the combinations manually as separate selectors. The effect is similar to nesting in Sass and most other CSS preprocessors.

  18. Media Queries: interaction media features

    Allows a media query to be set based on the presence and accuracy of the user's pointing device, and whether they have the ability to hover over elements on the page. This includes the `pointer`, `any-pointer`, `hover`, and `any-hover` media features.

  19. Media Queries: Range Syntax

    Syntax improvements to make media queries using features that have a "range" type (like width or height) less verbose. Can be used with ordinary mathematical comparison operators: `>`, `<`, `>=`, or `<=`. For example: `@media (100px <= width <= 1900px)` is the equivalent of `@media (min-width: 100px) and (max-width: 1900px)`

  20. Media Queries: resolution feature

    Allows a media query to be set based on the device pixels used per CSS unit. While the standard uses `min`/`max-resolution` for this, some browsers support the older non-standard `device-pixel-ratio` media query.

  21. selector list argument of :not()

    Selectors Level 3 only allowed `:not()` pseudo-class to accept a single simple selector, which the element must not match any of. Thus, `:not(a, .b, [c])` or `:not(a.b[c])` did not work. Selectors Level 4 allows `:not()` to accept a list of selectors. Thus, `:not(a):not(.b):not([c])` can instead be written as `:not(a, .b, [c])` and `:not(a.b[c])` works as intended.

  22. selector list argument of :nth-child and :nth-last-child CSS pseudo-classes

    The newest versions of `:nth-child()` and `:nth-last-child()` accept an optional `of S` clause which filters the children to only those which match the selector list `S`. For example, `:nth-child(1 of .foo)` selects the first child among the children that have the `foo` class (ignoring any non-`foo` children which precede that child). Similar to `:nth-of-type`, but for arbitrary selectors instead of only type selectors.

  23. :optional CSS pseudo-class

    The `:optional` pseudo-class matches form inputs (`<input>`, `<textarea>`, `<select>`) which are not `:required`.

  24. CSS overflow: overlay

    The `overlay` value of the `overflow` CSS property is a non-standard value to make scrollbars appear on top of content rather than take up space. This value is deprecated and related functionality being standardized as [the `scrollbar-gutter` property](mdn-css_properties_scrollbar-gutter).

  25. ::placeholder CSS pseudo-element

    The ::placeholder pseudo-element represents placeholder text in an input field: text that represents the input and provides a hint to the user on how to fill out the form. For example, a date-input field might have the placeholder text `YYYY-MM-DD` to clarify that numeric dates are to be entered in year-month-day order.

  26. :placeholder-shown CSS pseudo-class

    Input elements can sometimes show placeholder text as a hint to the user on what to type in. See, for example, the placeholder attribute in HTML5. The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text.

  27. CSS :read-only and :read-write selectors

    :read-only and :read-write pseudo-classes to match elements which are considered user-alterable

  28. ::selection CSS pseudo-element

    The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.

  29. CSS position:sticky

    Keeps elements positioned as "fixed" or "relative" depending on how it appears in the viewport. As a result the element is "stuck" when necessary while scrolling.

  30. CSS Table display

    Method of displaying elements as tables, rows, and cells. Includes support for all `display: table-*` properties as well as `display: inline-table`

  31. CSS text-wrap: balance

    Allows multiple lines of text to have their lines broken in such a way that each line is roughly the same width, often used to make headlines more readable and visually appealing.

  32. CSS3 Cursors: zoom-in & zoom-out

    Support for `zoom-in`, `zoom-out` values for the CSS3 `cursor` property.

  33. JavaScript modules: dynamic import()

    Loading JavaScript modules dynamically using the import() syntax

  34. CSS Flexible Box Layout Module

    Method of positioning elements in horizontal or vertical stacks. Support includes all properties prefixed with `flex`, as well as `display: flex`, `display: inline-flex`, `align-content`, `align-items`, `align-self`, `justify-content` and `order`.

  35. display: flow-root

    The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents. It provides a better solution to the most use cases of the "clearfix" hack.

  36. autocomplete attribute: on & off values

    The `autocomplete` attribute for `input` elements indicates to the browser whether a value should or should not be autofilled when appropriate.

  37. CSS justify-content: space-evenly

    The "space-evenly" value for the `justify-content` property distributes the space between items evenly. It is similar to space-around but provides equal instead of half-sized space on the edges. Can be used in both CSS flexbox & grid.

  38. Resource Hints: Lazyload

    Gives a hint to the browser to lower the loading priority of a resource. Please note that this is a legacy attribute, see the [`loading`](/loading-lazy-attr) attribute for the new standardized API.

  39. Resource Hints: dns-prefetch

    Gives a hint to the browser to perform a DNS lookup in the background to improve performance. This is indicated using `<link rel="dns-prefetch" href="https://example.com/">`

  40. Resource Hints: modulepreload

    Using `<link rel="modulepreload">`, browsers can be informed to prefetch module scripts without having to execute them, allowing fine-grained control over when and how module resources are loaded.

  41. Resource Hints: preconnect

    Gives a hint to the browser to begin the connection handshake (DNS, TCP, TLS) in the background to improve performance. This is indicated using `<link rel="preconnect" href="https://example-domain.com/">`

  42. Resource Hints: prefetch

    Informs the browsers that a given resource should be prefetched so it can be loaded more quickly. This is indicated using `<link rel="prefetch" href="(url)">`

  43. Resource Hints: preload

    Using `<link rel="preload">`, browsers can be informed to prefetch resources without having to execute them, allowing fine-grained control over when and how resources are loaded. Only the following `as` values are supported: fetch, image, font, script, style, track.

  44. Resource Hints: prerender

    Gives a hint to the browser to render the specified page in the background, speeding up page load if the user navigates to it. This is indicated using `<link rel="prerender" href="(url)">`

  45. display: run-in

    If the run-in box contains a block box, same as block. If a block box follows the run-in box, the run-in box becomes the first inline box of the block box. If an inline box follows, the run-in box becomes a block box.

  46. Efficient Script Yielding: setImmediate()

    Yields control flow without the minimum delays enforced by setTimeout

  47. URL Scroll-To-Text Fragment

    URL fragment that defines a piece of text to be scrolled into view and highlighted.

  48. CSS user-select: none

    Method of preventing text/element selection using CSS.

  49. SVG vector-effect: non-scaling-stroke

    The `non-scaling-stroke` value for the `vector-effect` SVG attribute/CSS property makes strokes appear as the same width regardless of any transformations applied.

  50. Viewport units: vw, vh, vmin, vmax

    Length units representing a percentage of the current viewport dimensions: width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).