Background-clip: text
Non-standard method of clipping a background image to the foreground text.
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.
CSS :any-link selector
The `:any-link` CSS pseudo-class matches all elements that match `:link` or `:visited`
Scoped Styles: the @scope rule
Allows CSS rules to be scoped to part of the document, with upper and lower limits described by selectors.
: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.
: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.
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.
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.
::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.
CSS position:fixed
Method of keeping an element in a fixed location regardless of scroll position
: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”).
:focus-within CSS pseudo-class
The `:focus-within` pseudo-class matches elements that either themselves match `:focus` or that have descendants which match `:focus`.
:has() CSS relational pseudo-class
Select elements containing specific content. For example, `a:has(img)` selects all `<a>` elements that contain an `<img>` child.
: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.
: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.
CSS ::marker pseudo-element
The `::marker` pseudo-element allows list item markers to be styled or have their content value customized.
: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.
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.
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)`
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.
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.
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.
:optional CSS pseudo-class
The `:optional` pseudo-class matches form inputs (`<input>`, `<textarea>`, `<select>`) which are not `:required`.
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).
::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.
: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.
CSS :read-only and :read-write selectors
:read-only and :read-write pseudo-classes to match elements which are considered user-alterable
::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.
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.
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`
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.
CSS3 Cursors: zoom-in & zoom-out
Support for `zoom-in`, `zoom-out` values for the CSS3 `cursor` property.
JavaScript modules: dynamic import()
Loading JavaScript modules dynamically using the import() syntax
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`.
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.
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.
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.
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.
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/">`
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.
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/">`
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)">`
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.
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)">`
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.
Efficient Script Yielding: setImmediate()
Yields control flow without the minimum delays enforced by setTimeout
URL Scroll-To-Text Fragment
URL fragment that defines a piece of text to be scrolled into view and highlighted.
CSS user-select: none
Method of preventing text/element selection using CSS.
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.
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).
50 results found.