CSS
Baseline ReadyA practical reference for deciding whether a CSS feature is ready to ship today.
- Widely available236features
- Newly available57features
- Limited support118features
Browse by category
outline
The outline CSS shorthand property sets most of the outline properties in a single declaration.
prefers-color-scheme media query
The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes.
prefers-reduced-motion media query
Warning:
2D transforms
The transform CSS property lets you rotate, scale, skew, or translate an element.
3D transforms
The backface-visibility CSS property sets whether the back face of an element is visible when turned towards the user.
animation-composition
The animation-composition CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.
Animations (CSS)
The animation shorthand CSS property applies an animation between styles.
cubic-bezier() easing
The <easing-function> CSS data type represents a mathematical function that describes the rate at which a value changes.
Individual transform properties
The rotate CSS property allows you to specify rotation transforms individually and independently of the transform property.
steps() easing
The steps() CSS function defines a transition that divides the input time into a specified number of intervals that are equal in length.
Transitions (CSS)
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, transition-delay, and transition-behavior.
background-color
The background-color CSS property sets the background color of an element.
Color
The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentColor value.
color-scheme
The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in.
color()
The color() functional notation allows a color to be specified in a particular, specified color space rather than the implicit sRGB color space that most of the other color functions operate in.
currentColor
The currentColor CSS value allows you to reuse an element's computed text color for other properties.
Gradients
The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.
HSL
Note:
HWB
The hwb() functional notation expresses a color in the sRGB color space according to its hue, whiteness, and blackness.
Lab and LCH
The lab() functional notation expresses a given color in the CIE L*a*b* color space.
Named colors
The <named-color> CSS data type is the name of a color, such as red, blue, black, or lightseagreen.
Oklab and OkLCh
The oklab() functional notation expresses a given color in the Oklab color space, which attempts to mimic how color is perceived by the human eye.
RGB
Note:
System colors
The <system-color> CSS data type usually reflects the default color choices used for the different parts of a web page.
Animatable clipping paths
The clip-path property can be animated using CSS transitions and animations.
background-blend-mode
The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.
background-clip
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
background-origin
The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.
Border images
The border-image CSS property draws an image around a given element.
Borders
The border shorthand CSS property sets an element's border.
Conic gradients
The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).
isolation
The isolation CSS property determines whether an element must create a new stacking context.
mask-type
The mask-type CSS property applies to the SVG <mask> element.
mix-blend-mode
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
shape-outside
The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.
shapes
The <basic-shape> CSS data type represents a shape used in the clip-path, shape-outside, and offset-path properties.
:indeterminate
The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, radio buttons which are members of a group in which all radio buttons are unchecked, and <progress> elements with no value attribute.
:read-only and :read-write
The :read-only CSS pseudo-class selects elements (such as certain <input> types and <textarea>) that are not editable by the user.
Input selectors
The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select> element) that is checked or toggled to an on state.
overscroll-behavior
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.
Scroll snap
The scroll-margin shorthand property sets all of the scroll margins of an element at once, assigning values much like the margin property does for margins of an element.
scroll-behavior
The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
Logical properties
The block-size CSS property defines the size of an element's block along the block axis.
Absolute positioning
The position: absolute CSS declaration removes an element from the normal flow and positions it relative to its containing block, which is often the root element, or closest positioned ancestor.
aspect-ratio
The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box.
box-sizing
The box-sizing CSS property sets how the total width and height of an element is calculated.
column-fill
The column-fill CSS property controls how an element's contents are balanced when broken into columns.
column-span
The column-span CSS property makes it possible for an element to span across all columns when its value is set to all.
contain-intrinsic-size
The contain-intrinsic-size CSS shorthand property sets the size of an element that a browser will use for layout when the element is subject to size containment.
Display
The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.
display: flow-root
The display: flow-root CSS declaration sets an element as the root element of a new flow layout for its children, preventing margin collapse with sibling elements.
display: list-item
The list-item keyword causes the element to generate a ::marker pseudo-element with the content specified by its list-style properties (for example a bullet point) together with a principal box of the specified type for its own contents.
display: table
The display: table CSS declaration renders an element with the box layout of a <table> HTML element. Child elements may use equivalents to <table> internal elements such as display: table-row for <tr>.
fit-content
The fit-content sizing keyword represents an element size that adapts to its content while staying within the limits of its container.
Fixed positioning
The position: fixed CSS declaration removes an element from the normal flow and positions it relative to the viewport or page.
Flexbox
The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.
Flexbox gap
The gap CSS property in a flexbox layout sets the size of the space between items.
Grid
The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.
Grid animation
Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.
image-rendering
The image-rendering CSS property sets an image scaling algorithm.
Inline-size containment
The contain: inline-size CSS declaration prevents the element's inline dimension from being set by the element's contents. This permits the browser to avoid slower layout calculations.
Layout containment
The contain: layout CSS declaration isolates the inside of an element such that it cannot affect the layout of the rest of the page or be affected by the rest of the page. This permits the browser to avoid slower layout calculations.
margin
The margin CSS shorthand property sets the margin area on all four sides of an element.
Min and max width and height
The max-height CSS property sets the maximum height of an element.
min-content and max-content
The max-content sizing keyword represents the maximum intrinsic size of an element.
Multi-column layout
The column-count CSS property breaks an element's content into the specified number of columns.
Overflow media queries
The overflow-block CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the block axis.
padding
The padding CSS shorthand property sets the padding area on all four sides of an element at once.
Page breaks
The break-after CSS property sets how page, column, or region breaks should behave after a generated box.
Paint containment
The contain: paint CSS declaration prevents an element's descendants from being drawn outside the boundaries of the containing element, with any overflow clipped. This permits the browser to avoid slower painting calculations.
Position
The position CSS property sets how an element is positioned in a document.
Relative positioning
The position: relative CSS declaration offsets the position of an element relative to its position in the normal flow.
Size containment
The contain: size CSS declaration sets an element's dimensions exclusively by its height and width properties, ignoring its contents and descendants. This permits the browser to avoid slower layout calculations.
Static positioning
The position: static CSS declaration positions an element in the normal flow. A statically positioned element ignores physical and logical properties such as top or inset-block-start.
Sticky positioning
The position: sticky CSS declaration positions an element in the normal flow until it crosses a specified threshold, at which points it becomes fixed (stuck) at that position.
Style containment
The contain: style CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (counter-increment and counter-set) and quotation styles (content property quote values) beyond the element's descendants.
Subgrid
The CSS grid layout module includes a subgrid value for grid-template-columns and grid-template-rows.
Width and height
The height CSS property specifies the height of an element.
object-fit
The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.
@supports (compatibility prefix)
The -webkit-transform-3d Boolean CSS media feature is a WebKit extension whose value is true if vendor-prefixed CSS 3D transforms are supported.
color-gamut media query
The color-gamut CSS media feature is used to apply CSS styles based on the approximate range of color gamut supported by the user agent and the output device.
dynamic-range media query
The dynamic-range CSS media feature can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device.
Interaction media queries
The any-hover CSS media feature can be used to test whether any available input mechanism can hover over elements.
Media queries
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries.
Media query range syntax
The range syntax of CSS media queries allows you to use mathematical comparison operators such as <, >, <=, and >= to define a range of values for a media query. For example, (400px < width < 1000px) returns true if the viewport width is between 400px and 1000px.
prefers-contrast media query
The prefers-contrast CSS media feature is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.
resolution media query
The resolution CSS media feature can be used to test the pixel density of the output device.
resolution media query (compatibility prefixes)
The -webkit-device-pixel-ratio is a non-standard Boolean CSS media feature which is an alternative to the standard resolution media feature.
Update frequency media query
The update CSS media feature can be used to test how frequently (if at all) the output device is able to modify the appearance of content once rendered.
::before and ::after
In CSS, ::after creates a pseudo-element that is the last child of the selected element.
object-position
The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box.
Outlines
The outline-color CSS property sets the color of an element's outline.
Small, large, and dynamic viewport units
The sv*, lv*, and dv* CSS viewport units are relative to the smallest, largest, and current (dynamic) viewport size. They are used to size elements in relation to the viewport's dimensions.
System font
The font-family: system-ui CSS declaration uses the operating system default font for text.
text-decoration
The text-decoration shorthand CSS property sets the appearance of decorative lines on text.
text-decoration-skip-ink
The text-decoration-skip-ink CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.
text-emphasis
The text-emphasis CSS property applies emphasis marks to text (except spaces and control characters).
touch-action
The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
contain
The contain CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree.
Container queries
The container shorthand CSS property establishes the element as a query container and specifies the name and type of the containment context used in a container query.
::backdrop
The ::backdrop CSS pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer.
::file-selector-button
The ::file-selector-button CSS pseudo-element represents the button of an <input> of type="file".
::first-letter
The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block container, but only when not preceded by other content (such as images or inline tables).
::first-line
The ::first-line CSS pseudo-element applies styles to the first line of a block container.
::placeholder
The ::placeholder CSS pseudo-element represents the placeholder text in an <input> or <textarea> element.
:default
The :default CSS pseudo-class selects form elements that are the default in a group of related elements.
:empty
The :empty CSS pseudo-class represents any element that has no children.
:focus-visible
The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element.
:focus-within
The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused.
:is()
The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
:lang()
The :lang() CSS pseudo-class matches elements based on the language they are determined to be in.
:modal
The :modal CSS pseudo-class matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed.
:not()
The :not() CSS pseudo-class represents elements that do not match a list of selectors.
:nth-child()
The :nth-child() CSS pseudo-class matches elements based on the indexes of the elements in the child list of their parents.
:nth-child() of <selector>
The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.
:nth-of-type() pseudo-classes
The :nth-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name).
:placeholder-shown
The :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.
:root
The :root CSS pseudo-class matches the root element of a tree representing the document.
:scope (pseudo-class)
The :scope CSS pseudo-class represents elements that are a reference point, or scope, for selectors to match against.
:target
The :target CSS pseudo-class selects the target element of the document.
:where()
The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
Case-insensitive attribute selector
The i identifier in a CSS attribute selector matches attribute values case-insensitively in document languages like XML where attribute values are case-sensitive.
Form validity pseudo-classes
The :in-range CSS pseudo-class represents an <input> element whose current value is within the range limits specified by the min and max attributes.
Host
The :host CSS pseudo-class selects the shadow host of the shadow DOM containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM.
Link selectors
The :any-link CSS pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited.
Selectors (core)
The CSS attribute selector matches elements based on the element having a given attribute explicitly set, with options for defining an attribute value or substring value match.
Shadow parts
The ::part CSS pseudo-element represents any element within a shadow tree that has a matching part attribute.
User action pseudo-classes
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user.
Opacity (SVG)
The fill-opacity CSS property defines the opacity of the painting operation (color, gradient, pattern, etc.
SVG
The clip-rule CSS property determines, when parts of the path overlap other parts, which pixels in a mask's box are inside the clipping shape defined by a clip path and which are outside.
SVG filters
The color-interpolation-filters CSS property specifies the color space for imaging operations performed via SVG filter effects.
@charset
The @charset CSS rule specifies the character encoding used in the style sheet.
@import
The @import CSS at-rule is used to import style rules from other valid stylesheets.
@namespace
@namespace is an at-rule that defines XML namespaces to be used in a CSS style sheet.
@supports
The @supports CSS at-rule lets you specify CSS declarations that depend on a browser's support for CSS features.
all
The all shorthand CSS property resets all of an element's properties except unicode-bidi, direction, and CSS Custom Properties.
appearance
The appearance CSS property specifies the rendered appearance of replaced UI widget elements such as form controls.
attr() (content only)
Note:
caret-color
The caret-color CSS property sets the color of the insertion caret, sometimes referred to as the text input cursor.
Cascade layers
The layer() CSS function is used along with the @import at-rule to put the imported resource in a separate named cascade layer.
color-mix()
The color-mix() functional notation takes one or more <color> values and returns the result of mixing them in a given colorspace by a given amount.
Content
The content CSS property replaces content with a generated value.
Custom properties
Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.
float and clear
The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it.
Forced colors
The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page.
Hyphenation
The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines.
image-set()
The image-set() CSS functional notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.
inherit
The inherit CSS keyword causes the element to take the computed value of the property from its parent element.
initial
The initial CSS keyword applies the initial (or default) value of a property to an element.
Layout direction override
Warning:
min(), max(), and clamp()
The clamp() CSS function clamps a value within a range of values between a defined minimum bound and a maximum bound.
Motion path
The offset CSS shorthand property sets all the properties required for animating an element along a defined path.
overflow
The overflow CSS shorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.
overflow: clip
The overflow: clip CSS declaration clips an element's overflowing content to the box that's defined by the overflow-clip-margin property. Unlike overflow: hidden, it allows you to hide overflow on one axis while keeping overflow on the other axis visible.
Physical properties
The bottom CSS property participates in setting the vertical position of a positioned element.
pointer-events
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
Quotes
The CSS quotes property sets how the browser should render quotation marks that are automatically added to the HTML <q> element or added using the open-quotes or close-quotes (or omitted using the no-open-quote and no-close-quote) values of the of the CSS content property.
revert
The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.
Safe area inset environment variables
The env() CSS function can be used to insert the value of a user-agent defined environment variable into your CSS.
sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS)
The acos() CSS function is a trigonometric function that returns the inverse cosine of a number between -1 and 1.
Text overflow
The text-overflow CSS property sets how hidden overflow content is signaled to users.
Text stroke and fill (compatibility prefixes)
The -webkit-text-fill-color CSS property specifies the fill color of characters of text.
text-indent
The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.
Two-value display property
The display CSS property accepts multiple keyword values, such as inline flex or block flow, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.
unset
The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
vertical-align
The vertical-align CSS shorthand property sets the vertical alignment of an inline, inline-block, or table-cell box.
visibility
The visibility CSS property shows or hides an element without changing the layout of a document.
will-change
The will-change CSS property hints to browsers how an element is expected to change.
z-index
The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items.
@counter-style
The @counter-style CSS at-rule lets you extend predefined list styles and define your own counter styles that are not part of the predefined set of styles.
@font-face
The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.
COLRv0
COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.
Counters (CSS)
The counters() CSS function enables combining markers when nesting counters.
dominant-baseline
The dominant-baseline CSS property specifies the specific baseline used to align the box's text and inline-level contents.
Font shorthand
The font CSS shorthand property sets all the different properties of an element's font.
font-display
The font-display descriptor for the @font-face at-rule determines how a font face is displayed based on whether and when it is downloaded and ready to use.
font-family
The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
font-feature-settings
The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.
font-kerning
The font-kerning CSS property sets the use of the kerning information stored in a font.
font-optical-sizing
The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.
font-palette
The font-palette CSS property allows specifying one of the many palettes contained in a color font that a user agent may use for the font.
font-size
The font-size CSS property sets the size of the font.
font-stretch
Note:
font-style
The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
font-synthesis
The font-synthesis shorthand CSS property lets you specify whether or not the browser may synthesize the bold, italic, small-caps, and/or subscript and superscript typefaces when they are missing in the specified font-family.
font-synthesis-small-caps
The font-synthesis-small-caps CSS property lets you specify whether or not the browser may synthesize small-caps typeface when it is missing in a font family.
font-synthesis-style
The font-synthesis-style CSS property lets you specify whether or not the browser may synthesize the oblique typeface when it is missing in a font family.
font-synthesis-weight
The font-synthesis-weight CSS property lets you specify whether or not the browser may synthesize the bold typeface when it is missing in a font family.
font-variant
The font-variant CSS shorthand property allows you to set all the font variants for a font.
font-variant-alternates
The font-variant-alternates CSS property controls the usage of alternate glyphs.
font-variant-caps
The font-variant-caps CSS property controls the use of alternate glyphs used for small or petite capitals or for titling.
font-variant-east-asian
The font-variant-east-asian CSS property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.
font-variant-ligatures
The font-variant-ligatures CSS property controls which ligatures and contextual forms are used in the textual content of the elements it applies to.
font-variant-numeric
The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
font-variation-settings
The font-variation-settings CSS property provides low-level control over variable font characteristics by letting you specify the four letter axis names of the characteristics you want to vary along with their values.
font-weight
The font-weight CSS property sets the weight (or boldness) of the font.
Hyphenate character
The hyphenate-character CSS property sets the character (or string) used at the end of a line before a hyphenation break.
letter-spacing
The letter-spacing CSS property sets the spacing between text characters.
line-break
The line-break CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.
line-height
The line-height CSS property sets the height of a line box in horizontal writing modes.
List style
The list-style CSS shorthand property allows you to set all the list style properties at once.
overflow-wrap
The overflow-wrap CSS property applies to text, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
tab-size
The tab-size CSS property is used to customize the width of tab characters (U+0009).
text-align
The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
text-align-last
The text-align-last CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.
text-combine-upright
The text-combine-upright CSS property sets the combination of characters into the space of a single character.
text-orientation
The text-orientation CSS property sets the orientation of the text characters in a line.
text-shadow
The text-shadow CSS property adds shadows to text.
text-transform
The text-transform CSS property specifies how to capitalize an element's text.
text-underline-offset
The text-underline-offset CSS property sets the offset distance of an underline text decoration line (applied using text-decoration) from its original position.
text-underline-position
The text-underline-position CSS property specifies the position of the underline which is set using the text-decoration property's underline value.
white-space
The white-space CSS property sets how white space inside an element is handled.
word-break
The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
word-spacing
The word-spacing CSS property sets the spacing between words and between tags.
writing-mode
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
calc()
The calc() CSS function lets you perform calculations when specifying CSS property values.
calc() keywords
The <calc-keyword> CSS data type represents well-defined constants such as e and pi.
ch unit
The ch CSS length unit is a font-relative length based on the width of the zero (0) character.
em unit
The em CSS length unit is a font-relative length equal to the specified font size. In an element with a 2 inch font, 1em equals 2 inches.
ex unit
The ex CSS length unit is a font-relative length equal to the used x-height of the first available font. X-height is often equal to the height of the lowercase x.
ic unit
The ic CSS length unit corresponds to the width of CJK ideographic characters.
image-orientation
The image-orientation CSS property specifies a layout-independent correction to the orientation of an image.
Q unit
The Q CSS length unit is an absolute length anchored to the physical measurement of quarter-millimeters. 1Q is equivalent to 1/40 of 1 centimeter.
rem
The rem CSS length unit is a font-relative length that is equal to the font size of the root HTML element which for most browsers is 16px.
Viewport units
The vw, vh, vmin, and vmax CSS viewport units are relative to the size of the viewport, and are used to size elements in relation to the viewport's dimensions.
background
The background shorthand CSS property sets all background style properties at once, such as color, image, origin, size, and repeat method.
background-image
The background-image CSS property sets one or more background images on an element.
background-position
The background-position CSS property sets the initial position for each background image.
background-repeat
The background-repeat CSS property sets how background images are repeated.
background-size
The background-size CSS property sets the size of the element's background image.
border-radius
The border-radius CSS property rounds the corners of an element's outer border edge.
box-shadow
The box-shadow CSS property adds shadow effects around an element's frame.
clip-path
The clip-path CSS property creates a clipping region that sets what part of an element should be shown.
filter
The filter CSS property applies graphical effects like blur or color shift to an element.
opacity
The opacity CSS property sets the opacity of an element.
Autonomous custom elements
The :defined CSS pseudo-class represents any element that has been defined.
Active view transition
The :active-view-transition CSS pseudo-class matches the root element of a document when a view transition is in progress (active) and stops matching once the transition has completed.
transition-behavior
The transition-behavior CSS property specifies whether transitions will be started for properties whose animation behavior is discrete.
View transitions
The view-transition-name CSS property specifies the view transition snapshot that selected elements will participate in.
view-transition-class
The view-transition-class CSS property provides the selected elements with an identifying class (a <custom-ident>), providing an additional method of styling the view transitions for those elements.
Clip path boxes
The fill-box, stroke-box, and view-box values for clip-path set an edge of the element's box to use as the clipping shape.
Gradient interpolation
Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, linear-gradient(to right in oklch longer hue, red, red); calculates in the oklch color space, with the hue going all the way around the hue circle from red back to red.
Masks
The mask CSS shorthand property hides an element (partially or fully) by masking or clipping a specified area of the image.
rect() and xywh()
The rect() CSS function creates a rectangle at the specified distance from the top and left edges of the containing block.
shape()
The shape() CSS function is used to define a shape for the clip-path and offset-path properties.
align-content in block layouts
The align-content property vertically aligns content in block layouts, like it does in flex or grid layouts.
Page setup
The page CSS property is used to specify the named page, a specific type of page defined by the @page at-rule.
print-color-adjust
The print-color-adjust CSS property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device.
scripting media query
The scripting CSS media feature can be used to test whether scripting (such as JavaScript) is available.
Math font family
The font-family: math CSS declaration uses the browser default font face for displaying mathematical expressions.
Registered custom properties
The @property CSS at-rule is used to explicitly define CSS custom properties, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.
Spelling and grammar text decorations
The text-decoration-line: spelling-error and text-decoration-line: grammar-error CSS declarations apply the browser's marking for spelling and grammatical mistakes. This is typically a wavy underline in red or green.
transform-box
The transform-box CSS property defines the layout box to which the transform, individual transform properties translate, scale, and rotate, and transform-origin properties relate.
zoom
The zoom CSS property can be used to control the magnification level of an element.
scrollbar-color
The scrollbar-color CSS property sets the color of the scrollbar track and thumb.
scrollbar-gutter
The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.
scrollbar-width
The scrollbar-width property allows the author to set the desired thickness of an element's scrollbars when they are shown.
::details-content
The ::details-content CSS pseudo-element represents the expandable/collapsible contents of a <details> element.
:dir()
The :dir() CSS pseudo-class matches elements based on the directionality of the text contained in them.
:has()
The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element.
:user-valid and :user-invalid
The :user-invalid CSS pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, after the user has interacted with it.
@scope
The @scope CSS at-rule enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure.
@starting-style
The @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.
abs() and sign()
The abs() CSS function returns the absolute value of the argument, as the same type as the input.
Alt text for generated content
The / notation in content CSS property values adds alternative text to generated content. For example, the content: url('upvote-icon.svg') / 'Upvote' declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.
backdrop-filter
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element.
content-visibility
The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed.
light-dark()
The light-dark() CSS function accepts two colors or two images and returns a color or an image based on the active color scheme, without needing a prefers-color-scheme media feature.
linear() easing
The linear() CSS function creates a transition curve that progresses uniformly between points.
Nesting
The CSS & nesting selector explicitly states the relationship between parent and child rules when using CSS nesting.
paint-order
The paint-order CSS property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.
pow(), sqrt(), hypot(), log(), and exp()
The exp() CSS function is an exponential function that takes a number as an argument and returns the mathematical constant e raised to the power of the given number.
Relative colors
The from keyword for color functions (color(), hsl(), oklch(), etc.) creates a new color based on a given color by modifying the values of the input color. Also known as relative color syntax (RCS).
round(), mod(), and rem()
The mod() CSS function returns a modulus left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%).
Vertical form controls
The writing-mode CSS property orients form elements (such as radio buttons, progress bars, or select menus) vertically when the writing mode is vertical-lr or vertical-rl. The direction CSS property sets whether inputs flow from top to bottom or bottom to top.
::target-text
The ::target-text CSS pseudo-element represents the text that has been scrolled to if the browser supports text fragments.
counter-set
The counter-set CSS property sets CSS counters on the element to the given values.
font-size-adjust
The font-size-adjust CSS property provides a way to modify the size of lowercase letters relative to the size of uppercase letters, which defines the overall font-size.
ruby-align
The ruby-align CSS property defines the distribution of the different ruby elements over the base.
ruby-position
The ruby-position CSS property defines the position of a ruby element relative to its base element.
text-indent: each-line
The text-indent: each-line CSS declaration indents text after forced breaks as well as to the first line of a block.
text-indent: hanging
The text-indent: hanging CSS declaration indents all lines except the first.
text-wrap
The text-wrap CSS shorthand property controls how text inside an element is wrapped.
text-wrap: balance
The text-wrap: balance CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing.
white-space-collapse
The white-space-collapse CSS property controls how white space inside an element is collapsed.
cap unit
The cap CSS length unit corresponds to the height of Latin capital letters.
lh unit
The lh CSS length unit corresponds to the requested line height, the computed value of the line-height property. Some lines may be higher than this based on their content.
rcap unit
The rcap CSS length unit is a font-relative length equal to the value of the cap unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.
rch unit
The rch CSS length unit is a font-relative length equal to the value of the ch unit on the root element. ch length is based on the width of the zero (0) character.
rex unit
The rex CSS length unit is a font-relative length that is equal to the x-height of the root element.
ric unit
The ric CSS length unit, or root international character, is a font-relative length equal to the width of CJK character relative to the root element.
rlh unit
The rlh CSS length unit is a font-relative length relative to the line height of root element.
:state()
The :state() CSS pseudo-class matches custom elements that have the specified custom state.
Cross-document view transitions
The @view-transition CSS at-rule is used to opt in the current and destination documents to undergo a view transition, in the case of a cross-document navigation.
interpolate-size
Experimental: This is an experimental technology
text-decoration-line: blink
The text-decoration: blink CSS declaration flashes text between visible and invisible.
contrast-color()
The contrast-color() CSS function takes a color value and returns a contrasting color.
background-attachment
The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
background-clip: border-area
The background-clip: border-area CSS declaration draws the background underneath only the border of an element.
background-clip: text
The background-clip: text CSS declaration draws the background underneath only the text in the element.
clip
Deprecated: This feature is no longer recommended.
mask-border
The mask-border CSS shorthand property lets you create a mask along the edge of an element's border.
accent-color
The accent-color CSS property sets the accent color for user-interface controls generated by some elements.
:autofill
The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser.
Cursor styles
The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.
resize (CSS property)
The resize CSS property sets whether an element is resizable, and if so, in which directions.
user-select
The user-select CSS property controls whether the user can select text.
::column
Experimental: This is an experimental technology
Column breaks
In columnar layouts (created by the columns or column-count CSS properties), the break-after, break-before, break-inside properties control where columns start or end.
Container scroll-state queries
Container scroll-state queries with the @container scroll-state(...) at-rule apply styles to an element based on the sticky positioning, snapped, and scrollable state of the container.
Container style queries
Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.
crisp-edges
The image-rendering: crisp-edges CSS declaration scales images to preserve lines without blurring.
fit-content()
The fit-content() CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).
image-rendering: smooth
The image-rendering: smooth CSS declaration scales images while retaining a gradual color blending that is useful for photos.
justify-self in block layouts
The justify-self CSS property aligns an item along a container's inline axis in block layouts, like it does in grid layouts. Likewise, the justify-items property sets a default justify-self value for all items in a container in a block layout.
Masonry
Experimental: This is an experimental technology
Page break aliases
Deprecated: This feature is no longer recommended.
page-orientation
The page-orientation CSS descriptor for the @page at-rule controls the rotation of a printed page.
Range syntax for style queries
The @container style() CSS at-rule and if(style()) CSS function queries accept a range syntax, such as >, <, >=, <=, to query for inexact values.
stretch
The stretch CSS keyword expands a box as needed to fit its contents until the maximum size is reached, without preserving the content's preferred aspect ratio.
Widows and orphans
The orphans CSS property sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column.
color-adjust
The color-adjust shorthand CSS property allows multiple performance related color adjustments to be set at once. Setting the print-color-adjust CSS property directly is preferred, as it is the only such adjustment so far defined.
Custom media queries
Experimental: This is an experimental technology
Device media queries
Deprecated: This feature is no longer recommended.
display-mode media query
The display-mode CSS media feature can be used to test whether a web app is being displayed in a normal browser tab or in some alternative way, such as a standalone app or fullscreen mode.
inverted-colors media query
The inverted-colors CSS media feature is used to test if the user agent or the underlying operating system has inverted all colors.
prefers-reduced-data media query
Experimental: This is an experimental technology
prefers-reduced-transparency media query
Experimental: This is an experimental technology
video-dynamic-range media query
The video-dynamic-range CSS media feature can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the video plane of the user agent and the output device.
Anchor position container queries
Anchor position container queries with the @container anchored(fallback: …) at-rule apply styles to an element based on the element's anchor position.
Anchor positioning
The anchor-name CSS property enables defining an element as an anchor element by giving it one or more identifying anchor names.
baseline-source
The baseline-source CSS property defines which baseline to use when inline-level boxes have multiple possible baselines, such as multi-line inline blocks or inline flex containers.
box-decoration-break
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
caret-shape
Experimental: This is an experimental technology
corner-shape
Experimental: This is an experimental technology
Custom ellipses
The text-overflow CSS property with a string value sets the string representing clipped text.
Custom highlights
The ::highlight() CSS pseudo-element applies styles to a custom highlight.
element()
Experimental: This is an experimental technology
Hanging punctuation
The hanging-punctuation CSS property specifies whether a punctuation mark should hang at the start or end of a line of text.
interactivity
Experimental: This is an experimental technology
Media element pseudo-classes
The :buffering CSS pseudo-class selector represents an element that is playable, such as <audio> or <video>, when the playable element is buffering a media resource.
path()
The path() CSS function accepts an SVG path string, and is used in the CSS shapes and CSS motion path modules to enable a shape to be drawn.
scroll-initial-target
Experimental: This is an experimental technology
SVG 1.1
Deprecated: This feature is no longer recommended.
text-autospace
The text-autospace CSS property allows you to specify the space applied between Chinese/Japanese/Korean (CJK) and non-CJK characters.
text-decoration-skip-ink: all
The text-decoration-skip-ink: all CSS declaration forces interruptions in underlines and overlines where the line would cross a glyph. This contrasts with auto, which does not skip for CJK glyphs.
text-size-adjust
Experimental: This is an experimental technology
::scroll-button
Experimental: This is an experimental technology
overflow-anchor
The overflow-anchor CSS property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.
Scroll marker target pseudo-classes
Experimental: This is an experimental technology
Scroll markers
Experimental: This is an experimental technology
Scroll-driven animations
The animation-range CSS shorthand property is used to set the start and end of an animation's attachment range along its timeline, i.
scroll-target-group
Experimental: This is an experimental technology
::selection
The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
::spelling-error and ::grammar-error
The ::grammar-error CSS pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.
:has-slotted
The :has-slotted CSS pseudo-class matches when the content of a <slot> element is not empty or not using the default value (see Using templates and slots for more information).
:host-context()
Deprecated: This feature is no longer recommended.
:open
The :open CSS pseudo-class represents an element that has open and closed states, only when it is currently in the open state.
Case-sensitive attribute selector
The s identifier in a CSS attribute selector matches attribute values case-sensitively in document languages like HTML where attribute values are case-insensitive.
Heading pseudo-classes
Experimental: This is an experimental technology
Page selectors
The :first CSS pseudo-class, used with the @page at-rule, represents the first page of a printed document.
text-decoration in ::selection
The text-decoration CSS property in a ::selection rule sets the underline and other text decoration styles on the text a user has highlighted.
Time-relative pseudo-selectors
The :future CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches :current.
@function
Experimental: This is an experimental technology
attr()
Note:
calc-size()
Experimental: This is an experimental technology
display animation
You can animate elements between display: none and any other display value or animate between content-visibility: hidden and any other content-visibility value. This also applies to transitions.
display: contents
The display: contents CSS declaration sets an element to display only its contents, not itself.
display: ruby
The display: ruby CSS declaration renders an element with the box layout of a <ruby> HTML element. Child elements may use equivalents to <ruby> internal elements such as display: ruby-base for <rb>.
field-sizing
The field-sizing CSS property enables you to control the sizing behavior of elements that are given a default preferred size, such as form control elements.
filter()
The filter() CSS function applies one or more graphic effects to a CSS image, such as a background image. You can use functions, such as blur() and drop-shadow(), alone or combined to produce different effects. For instance, background: filter(url(image.png), blur(2px)).
glyph-orientation-vertical
The glyph-orientation-vertical CSS property sets the orientation of glyphs in text rendered in a vertical writing mode.
if()
Experimental: This is an experimental technology
ime-mode
The ime-mode CSS property sets the state of the input method editor for text fields.
initial-letter
The initial-letter CSS property sets the size and sink for dropped, raised, and sunken initial letters.
line-clamp
The line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.
margin-trim
Experimental: This is an experimental technology
object-view-box
Experimental: This is an experimental technology
overflow-clip-margin
The overflow-clip-margin CSS property determines how far outside its bounds an element with overflow: clip may be painted before being clipped.
overflow: overlay
The overflow: overlay CSS declaration is an alias to overflow: auto. Historically, it caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space.
overlay
Experimental: This is an experimental technology
paint()
The paint() CSS function defines an <image> value generated with a PaintWorklet.
progress()
The progress() CSS function returns a <number> value representing the position of one value (the progress value) relative to two other values (the progress start and end values).
random()
Experimental: This is an experimental technology
reading-flow
Experimental: This is an experimental technology
sibling-count() and sibling-index()
The sibling-count() CSS function returns an integer representing the total number of sibling DOM elements (direct children of the parent) of the element on which it is used, including itself.
text-spacing-trim
Experimental: This is an experimental technology
word-break: break-word
The word-break: break-word CSS declaration sets word breaks to occur according to their customary rules.
writing-mode SVG 1.1 values
The lr, lr-tb, rl, rl-tb, tb, and tb-rl keyword values for the writing-mode CSS property set the text direction for elements in SVG 1.1 documents.
::marker
The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number.
alignment-baseline
The alignment-baseline CSS property specifies the specific baseline used to align the box's text and inline-level contents.
baseline-shift
The baseline-shift CSS property repositions the dominant-baseline of a text element relative to the dominant-baseline of its parent text content element.
COLRv1
COLRv1 is a font format that supports multi-color glyphs. COLRv1 extends COLRv0 to support gradients, transforms, and blending modes.
Font metric overrides
The ascent-override CSS descriptor for the @font-face at-rule defines the ascent metric for the font.
font-language-override
The font-language-override CSS property controls the use of language-specific glyphs in a typeface.
font-palette animation
Experimental: This is an experimental technology
font-synthesis-position
Experimental: This is an experimental technology
font-variant-emoji
The font-variant-emoji CSS property specifies the default presentation style for displaying emojis.
font-variant-position
The font-variant-position CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.
font-width
Experimental: This is an experimental technology
Hyphenate limit chars
The hyphenate-limit-chars CSS property specifies the minimum word length to allow hyphenation of words as well as the minimum number of characters before and after the hyphen.
Reversed counter-reset
The reversed() CSS function for counter-reset creates a counter that counts down.
ruby-overhang
The ruby-overhang CSS property specifies whether or not a <ruby> annotation overhangs any surrounding text.
speak
The speak CSS property sets whether or not text should be spoken.
speak-as
Experimental: This is an experimental technology
text-box
The text-box CSS property is a shorthand that corresponds to the text-box-trim and text-box-edge properties, which together specify the amount of space to trim from the block-start edge and block-end edge of a text element's block container.
text-justify
The text-justify CSS property sets what type of justification should be applied to text when text-align: justify; is set on an element.
text-wrap: pretty
The text-wrap: pretty CSS declaration prioritizes better layout over speed when text is broken into multiple lines.
UI fonts
The ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for the font-family CSS property use device-default user interface fonts for text.
word-break: auto-phrase
The word-break: auto-phrase CSS declaration specifies that wrapping should occur at natural phrase boundaries, especially in CJK languages.
cross-fade()
The cross-fade() CSS function can be used to blend two or more images at a defined transparency.