CanIUse
Type members
Classlikes
Value members
Concrete methods
CSS Appearance
CSS Appearance
The appearance property defines how elements (particularly form controls) appear by default. By setting the value to none the default appearance can be entirely redefined using other CSS properties.
CSS background-attachment
CSS background-attachment
Method of defining how a background image is attached to a scrollable element. Values include scroll (default), fixed and local.
https://www.w3.org/TR/css3-background/#the-background-attachment
CSS3 Background-image options
CSS3 Background-image options
New properties to affect background images, including background-clip, background-origin and background-size
CSS background-position edge offsets
CSS background-position edge offsets
Allows CSS background images to be positioned relative to the specified edge using the 3 to 4 value syntax. For example: background-position: right 5px bottom 5px; for positioning 5px from the bottom-right corner.
CSS background-repeat round and space
CSS background-repeat round and space
Allows CSS background images to be repeated without clipping.
https://www.w3.org/TR/css3-background/#the-background-repeat
CSS background-blend-mode
CSS background-blend-mode
Allows blending between CSS background images, gradients, and colors.
https://www.w3.org/TR/compositing-1/#propdef-background-blend-mode
CSS box-decoration-break
CSS box-decoration-break
Controls whether the box's margins, borders, padding, and other decorations wrap the broken edges of the box fragments (when the box is split by a break (page/column/region/line).
calc() as CSS unit value
calc() as CSS unit value
Method of allowing calculated values for length units, i.e. width: calc(100% - 3em)
CSS Canvas Drawings
CSS Canvas Drawings
Method of using HTML5 Canvas as a background image. Not currently part of any specification.
CSS caret-color
CSS caret-color
The caret-color property allows the color to be set of the caret (blinking text insertion pointer) in an editable text area.
ch (character) unit
ch (character) unit
Unit representing the width of the character "0" in the current font, of particular use in combination with monospace fonts.
CSS clip-path property (for HTML)
CSS clip-path property (for HTML)
Method of defining the visible region of an HTML element using SVG or a shape definition.
Crisp edges/pixelated images
Crisp edges/pixelated images
Scales images with an algorithm that preserves edges and contrast, without smoothing colors or introducing blur. This is intended for images such as pixel art. Official values that accomplish this for the image-rendering property are crisp-edges and pixelated.
https://drafts.csswg.org/css-images-3/#valdef-image-rendering-crisp-edges
CSS3 Box-sizing
CSS3 Box-sizing
Method of specifying whether or not an element's borders and padding should be included in size units
CSS3 Cursors: zoom-in & zoom-out
CSS3 Cursors: zoom-in & zoom-out
Support for zoom-in, zoom-out values for the CSS3 cursor property.
CSS3 tab-size
CSS3 tab-size
Method of customizing the width of the tab character. Only effective using 'white-space: pre' or 'white-space: pre-wrap'.
CSS Device Adaptation
CSS Device Adaptation
A standard way to override the size of viewport in web page using the @viewport rule, standardizing and replacing Apple's own popular <meta> viewport implementation.
CSS display: contents
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 Feature Queries
CSS Feature Queries
CSS Feature Queries allow authors to condition rules based on whether particular property declarations are supported in CSS using the @supports at rule.
CSS Filter Effects
CSS Filter Effects
Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.
CSS position:fixed
CSS position:fixed
Method of keeping an element in a fixed location regardless of scroll position
display: flow-root
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. The result is the same as the "clearfix" hack.
https://www.w3.org/TR/css-display-3/#valdef-display-flow-root
system-ui value for font-family
system-ui value for font-family
Value for font-family that represents the default user interface font.
CSS font-feature-settings
CSS font-feature-settings
Method of applying advanced typographic and language-specific font features to supported OpenType fonts.
CSS3 font-kerning
CSS3 font-kerning
Controls the usage of the kerning information (spacing between letters) stored in the font. Note that this only affects OpenType fonts with kerning information, it has no effect on other fonts.
CSS font-size-adjust
CSS font-size-adjust
Method of adjusting the font size in a matter that relates to the height of lowercase vs. uppercase letters. This makes it easier to set the size of fallback fonts.
CSS font-stretch
CSS font-stretch
If a font has multiple types of variations based on the width of characters, the font-stretch property allows the appropriate one to be selected. The property in itself does not cause the browser to stretch to a font.
CSS Generated content for pseudo-elements
CSS Generated content for pseudo-elements
Method of displaying text or images before or after the given element's contents using the ::before and ::after pseudo-elements. All browsers with support also support the attr() notation in the content property.
CSS hanging-punctuation
CSS hanging-punctuation
Allows some punctuation characters from start (or the end) of text elements to be placed "outside" of the box in order to preserve the reading flow.
https://drafts.csswg.org/css-text-3/#hanging-punctuation-property
CSS Hyphenation
CSS Hyphenation
Method of controlling when words at the end of lines should be hyphenated using the "hyphens" property.
CSS3 image-orientation
CSS3 image-orientation
CSS property used generally to fix the intended orientation of an image. This can be done using 90 degree increments or based on the image's EXIF data using the "from-image" value.
CSS image-set
CSS image-set
Method of letting the browser pick the most appropriate CSS background image from a given set, primarily for high PPI screens.
CSS Initial Letter
CSS Initial Letter
Method of creating an enlarged cap, including a drop or raised cap, in a robust way.
Intrinsic & Extrinsic Sizing
Intrinsic & Extrinsic Sizing
Allows for the heights and widths to be specified in intrinsic values using the max-content, min-content, fit-content and stretch (formerly fill) properties.
letter-spacing CSS property
letter-spacing CSS property
Controls spacing between characters of text (i.e. "tracking" in typographical terms). Not to be confused with kerning.
CSS Logical Properties
CSS Logical Properties
Use start/end properties that depend on LTR or RTL writing direction instead of left/right
Media Queries: resolution feature
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.
CSS3 object-fit/object-position
CSS3 object-fit/object-position
Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.
CSS overflow-anchor (Scroll Anchoring)
CSS overflow-anchor (Scroll Anchoring)
Changes in DOM elements above the visible region of a scrolling box can result in the page moving while the user is in the middle of consuming the content.
By default, the value of overflow-anchor is auto, it can mitigate this jarring user experience by keeping track of the position of an anchor node and adjusting the scroll offset accordingly
CSS overscroll-behavior
CSS overscroll-behavior
CSS property to control the behavior when the scroll position of a scroll container reaches the edge of the scrollport.
CSS page-break properties
CSS page-break properties
Properties to control the way elements are broken across (printed) pages.
CSS Repeating Gradients
CSS Repeating Gradients
Method of defining a repeating linear or radial color gradient as a CSS image.
CSS resize property
CSS resize property
Method of allowing an element to be resized by the user, with options to limit to a given direction.
display: run-in
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.
CSSOM Scroll-behavior
CSSOM Scroll-behavior
Method of specifying the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs.
https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior
CSS 2.1 selectors
CSS 2.1 selectors
Basic CSS selectors including: * (universal selector), > (child selector), :first-child, :link, :visited, :active, :hover, :focus, :lang(), + (adjacent sibling selector), [attr], [attr="val"], [attr~="val"], [attr|="bar"], .foo (class selector), #foo (id selector)
CSS3 selectors
CSS3 selectors
Advanced element selection using selectors including: [foo^="bar"], [foo$="bar"], [foo*="bar"], :root, :nth-child(), :nth-last-child(), nth-of-type, nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :target, :enabled, :disabled, :checked, :not(), ~ (general sibling)
::selection CSS pseudo-element
::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
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.
CSS3 text-align-last
CSS3 text-align-last
CSS property to describe how the last line of a block or a line right before a forced line break when text-align is justify.
text-emphasis styling
text-emphasis styling
Method of using small symbols next to each glyph to emphasize a run of text, commonly used in East Asian languages. The text-emphasis shorthand, and its text-emphasis-style and text-emphasis-color longhands, can be used to apply marks to the text. The text-emphasis-position property, which inherits separately, allows setting the emphasis marks' position with respect to the text.
https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property
CSS text-indent
CSS text-indent
The text-indent property applies indentation to lines of inline content in a block.
CSS text-justify
CSS text-justify
CSS property to define how text should be justified when text-align: justify is set.
CSS text-orientation
CSS text-orientation
The CSS text-orientation property specifies the orientation of text within a line. Current values only have an effect in vertical typographic modes (defined with the writing-mode property)
https://drafts.csswg.org/css-writing-modes-3/#text-orientation
CSS text-size-adjust
CSS text-size-adjust
On mobile devices, the text-size-adjust CSS property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.
CSS text-stroke and text-fill
CSS text-stroke and text-fill
Method of declaring the outline (stroke) width and color for text.
CSS3 Text-shadow
CSS3 Text-shadow
Method of applying one or more shadow or blur effects to text
https://www.w3.org/TR/css-text-decor-3/#text-shadow-property
CSS touch-action property
CSS touch-action property
touch-action is a CSS property that controls filtering of gesture events, providing developers with a declarative mechanism to selectively disable touch scrolling (in one or both axes) or double-tap-zooming.
https://www.w3.org/TR/pointerevents/#the-touch-action-css-property
CSS3 2D Transforms
CSS3 2D Transforms
Method of transforming an element including rotating, scaling, etc. Includes support for transform as well as transform-origin properties.
CSS3 3D Transforms
CSS3 3D Transforms
Method of transforming an element in the third dimension using the transform property. Includes support for the perspective property to set the perspective in z-space and the backface-visibility property to toggle display of the reverse side of a 3D-transformed element.
Variable fonts
Variable fonts
OpenType font settings that allows a single font file to behave like multiple fonts: it can contain all the allowed variations in width, weight, slant, optical size, or any other exposed axes of variation as defined by the font designer. Variations can be applied via the font-variation-settings property.
https://drafts.csswg.org/css-fonts-4/#font-variation-settings-def
Viewport units: vw, vh, vmin, vmax
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).
https://www.w3.org/TR/css3-values/#viewport-relative-lengths
CSS widows & orphans
CSS widows & orphans
CSS properties to control when lines break across pages or columns by defining the amount of lines that must be left before or after the break.
CSS3 word-break
CSS3 word-break
Property to prevent or allow words to be broken over multiple lines between letters.
CSS3 Overflow-wrap
CSS3 Overflow-wrap
Allows lines to be broken within words if an otherwise unbreakable string is too long to fit. Currently mostly supported using the word-wrap property.
Concrete fields
CSS3 Border-radius (rounded corners)
CSS3 Border-radius (rounded corners)
Method of making the border corners round. Covers support for the shorthand border-radius as well as the long-hand properties (e.g. border-top-left-radius)
CSS Counters
CSS Counters
Method of controlling number values in generated content, using the counter-reset and counter-increment properties.
CSS Flexible Box Layout Module
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.
CSS Grid Layout
CSS Grid Layout
Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Includes support for all grid-* properties and the fr unit.
CSS3 Multiple column layout
CSS3 Multiple column layout
Method of flowing information in multiple columns
CSS outline properties
CSS outline properties
The CSS outline properties draw a border around an element that does not affect layout, making it ideal for highlighting. This covers the outline shorthand, as well as outline-width, outline-style, outline-color and outline-offset.
CSS Shapes Level 1
CSS Shapes Level 1
Allows geometric shapes to be set in CSS to define an area for text to flow around.
text-decoration styling
text-decoration styling
Method of defining the type, style and color of lines in the text-decoration property. These can be defined as shorthand (e.g. text-decoration: line-through dashed blue) or as single properties (e.g. text-decoration-color: blue)