CSS Support in HTML Email — Full Property Reference | MailViewr

:

:activeStyles an element while it is being activated, such as while a button is being pressed.:checkedStyles a checkbox, radio, or option element when it is in a checked state.:first-childSelects an element that is the first child of its parent.:first-of-typeSelects the first element of its type among siblings.:focusStyles an element when it has keyboard or pointer focus.:has()Represents an element if any of the selectors passed as parameters match at least one element.:hoverApplies styles when the user hovers a pointing device over an element.:last-childSelects an element that is the last child of its parent.:last-of-typeSelects the last element of its type among siblings.:linkStyles links that have not yet been visited.:notSelects elements that do not match a given selector.:nth-childSelects elements based on their position among siblings using a formula.:nth-last-childSelects elements based on their position from the end among siblings.:nth-last-of-typeSelects elements of a given type by position from the end among siblings.:nth-of-typeSelects elements of a given type by their position among siblings.:only-childSelects an element that is the only child of its parent.:only-of-typeSelects an element that is the only one of its type among siblings.:targetStyles an element that is the current URL fragment target.:visitedStyles links that the user has already visited.::afterInserts generated content after an element's actual content using the content property.::beforeInserts generated content before an element's actual content using the content property.::first-letterApplies styles to the first letter of a block-level element.::first-lineApplies styles to the first line of text in a block-level element.::markerSelects the marker box of a list item (typically a bullet or number).::placeholderStyles the placeholder text inside an input or textarea element.

!

!important keywordAn `!important` declaration takes precedence over a normal declaration.

@

@font-face`@font-face` in CSS allows to include your own fonts inside an email.@importThis is the description of the `@import` property.@keyframesDefines animation keyframes for use with the animation property.@media (-webkit-device-pixel-ratio)Media query that targets devices based on their pixel density or device pixel ratio.@media (hover), @media (any-hover)This media query tests whether the user's input device[s] (i.e mouse, trackpad etc.) can hover over elements @media (orientation)Media query that applies styles based on whether the viewport is in portrait or landscape orientation.@media (prefers-color-scheme)This media query allows to theme for system light and dark mode.@media (prefers-reduced-motion)Media query that detects whether the user has requested reduced motion in their system settings.@mediaApplies a block of CSS rules conditionally based on media type or feature queries.@supportsApplies a block of CSS rules only when the browser supports a specified CSS feature.

%

% unitSupport for percentage unit

A

accent-colorSets the accent color for UI elements such as checkboxes, radio buttons, and range inputs.align-itemsAligns flex or grid children along the cross axis within their container.animationTests for the shorthand `animation` property and its longhand equivalents.aspect-ratioSets a preferred aspect ratio for the element Adjacent sibling combinatorThe adjacent sibling combinator (`h1 + p`) allows to target an element that is directly after another.Attribute selectorThe attribute selector (`[attr]`) targets elements with this specific attribute.

B

backdrop-filterLets you apply graphical effects such as blurring or color shifting to the area behind an element.background-blend-modeSets how an element's background image blends with its background color.background-clipDetermines whether the background extends under the border, padding, or content box only.background-colorSets the background color of an element using color names, hex, rgb, or other color values.background-imageSets one or more background images on an element, including gradients.background-originSpecifies the origin position of a background image relative to border, padding, or content box.background-positionSets the starting position of a background image within its container.background-repeatDefines whether and how a background image repeats across the element.background-sizeSpecifies the size of background images, supporting keywords like cover and contain.backgroundShorthand property for setting all background properties in a single declaration.block-size & inline-sizeDefines the horizontal or vertical size of an element's block, depending on its writing mode.border-collapseSets whether cells inside a `<table>` have shared or separate borders.border-imageDraws an image around an element in place of a standard border.border-inline & border-block individual logical propertiesSupport for `border-inline` & `border-block` individual logical properties.border-inline & border-block longhand propertiesSupport for `border-inline` & `border-block` longhand properties.border-inline & border-blockSupport for the `border-inline` and `border-block` shorthand properties.border-radius logical propertiesSupport for border radius logical properties border-radiusThe `border-radius` CSS property rounds the corners of an element's outer border edge.border-spacingSets the distance between the borders of adjacent cells in a `<table>`.borderThe `border` properties set an element's border. This page accounts for all `border` longhands and shorthands.box-shadowAdds shadow effects around an element's frame.box-sizingControls whether padding and border are included in an element's total width and height calculation.

C

caption-sideThe `caption-side` CSS property puts the content of a table's `<caption>` on the specified side.clearSets whether an element must be moved below (cleared) floating elements that precede it.clip-pathClips an element to a specified shape, hiding the parts outside the clipping region.color-scheme CSS propertyChanges the default colors of HTML elements. Useful for when you want an email to display only in a dark color scheme or only a light scheme, regardless of user settings column-countDivides an element's content into a specified number of columns.css column propertiesSupport for the `columns` shorthand and longhand properties.CSS commentsAdds explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet conic-gradient()Creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).cursorThe cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.clamp()Support for the CSS `clamp()` function.CSS NestingA syntax for nesting selectors, providing the ability to nest one style rule inside another.Chaining selectorsChaining selectors (`.foo.bar`) allows to apply styles to elements matching all the corresponding selectors.Child combinatorThe child combinator is represented by a superior sign (`>`) between two selectors and matches the second selector if it is a direct child of the first selector.Class selectorThe class selector (`.className`) allows to apply styles to a group of elements with the corresponding `class` attribute.CSS calc() functionSupport for CSS calc function.ch unitSupport for ch unit, relative to the width of a '0'.cm unitSupport for centimeters unit CSS Variables (Custom Properties)Custom properties that hold reusable values, referenced elsewhere with var(), enabling theme-like CSS patterns.

D

directionSets the direction of text or table columns.display:flexEnables flexbox layout, allowing children to be arranged in a row or column with alignment controls.display:gridEnables CSS Grid layout, allowing children to be placed into rows and columns.display:noneHides an element completely, removing it from the document flow.displaySets whether an element is treated as a block or inline element and the layout used for its children.Descendant combinatorThe descendant combinator is represented by a space (` `) between two selectors and matches the second selector if it has ancestor matching the first selector.

E

empty-cellsSets whether borders and backgrounds appear around `<table>` cells that have no visible content.em unitSupport for em unit, relative to the current font-size.ex unitSupport for ex unit, relative to the height of an 'x'.

F

filterTests with values `blur`, `brightness`, `grayscale`, `hue-rotate`, `invert`, `opacity`, `saturate`, `sepia` and `shadow`.flex-direction:columnSpecifies the direction flex items are placed in a flex container — row or column.flex-wrap: wrapControls whether flex items wrap onto multiple lines when they exceed the container width.floatPositions an element to the left or right, allowing content to wrap around it.font-kerningControls the use of kerning information stored in a font to adjust spacing between letters.font-sizeSets the size of the font.font-stretchSelecting different font widths (e.g. condensed, expanded)font-weightSets the weight or thickness of the font, from thin (100) to black (900).font shorthandShorthand for setting font-style, font-variant, font-weight, font-size, line-height, and font-family.fit-content, min-content, max-contentSets the height or width relative to its content.

G

gap, column-gap, row-gapProperties for adding spacing between grid items, flex items and columns grid-template-* propertiesThis page reflects support for `grid-template`, `grid-template-areas`, `grid-template-columns`, `grid-template-rows`.General sibling combinatorThe general sibling combinator (`img ~ p`) allows to target any element that after another (directly or indirectly).Grouping selectorsGrouping selectors (`.foo, .bar`) allows to apply the same styles to the different corresponding elements.

H

height propertySets the height of an element's content area, excluding padding, border, and margin.hyphenate-characterSets the character (or string) used at the end of a line before a hyphenation break.hyphenate-limit-charsSpecifies the minimum word length to allow hyphenation of words as well as the minimum number of characters before and after the hyphen.hyphensControls whether words should be hyphenated when text wraps across lines.

I

inline-size Sets the width of an element in horizontal writing modes; equivalent to width in standard layouts.insetShorthand that corresponds to the `top`, `right`, `bottom`, and/or `left` properties ID selectorThe ID selector (`#id`) allows to apply styles to an element with the corresponding `id` attribute.in unitSupport for inches unit initial unitSupport for initial keyword value.

J

justify-contentDistributes flex or grid items along the main axis with options like center, space-between, and flex-end.

L

light-dark()Enables setting two colors (one for light and the other for dark mode) for a property.left, right, top, bottomOffsets a positioned element from its reference edges — left, right, top, and bottom.letter-spacingAdjusts the spacing between characters in a text element.line-heightSets the height of a line box. Or, basically, the height of a line of text.linear-gradient()Creates an image consisting of a progressive transition between two or more colors along a straight line.list-style-imageReplaces the default list item marker with a custom image.list-style-positionSets whether list item markers appear inside or outside the list item's content box.list-style-typeSpecifies the type of list item marker: disc, circle, square, decimal, and more.list-styleShorthand for setting list-style-type, list-style-position, and list-style-image together.lch(), oklch(), lab(), oklab()Modern color values: lch, lab, oklch and oklab lang()Matches elements based on the language they are determined to be in.

M

max()Support for the CSS `max()` function.min()Support for the CSS `min()` function.margin-block-start & margin-block-endSupport for the `margin-block-start` and `margin-block-end` css properties.margin-inline & margin-blockSupport for the `margin-inline` and `margin-block` shorthand properties.margin-inline-start & margin-inline-endSupport for the `margin-inline-start` and `margin-inline-end` css properties.marginSupport for the `margin` shorthand property and the `margin-left`, `margin-right`, `margin-top`, `margin-bottom` properties.mask-imageSets the image that is used as mask layer for an element max-block-sizeSets the maximum size of an element in the block direction; equivalent to max-height in horizontal writing modes.max-height propertySets the maximum height of an element.max-inline-sizeDefines the horizontal or vertical maximum size of an element's block, depending on its writing mode max-widthThis is the description of the `max-width` property.min-block-sizeDefines the minimum horizontal or vertical size of an element's block, depending on its writing mode min-height propertySets the minimum height of an element.min-inline-sizeSets the minimum size of an element in the inline direction; equivalent to min-width in horizontal writing modes.min-width propertySets the minimum width of an element.mix-blend-modeSets how an element's content blends with the content behind it.mm unitSupport for millimeters unit

O

object-fitThe `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.object-positionThe `object-position` CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.opacitySets the transparency level of an element, from 0 (fully transparent) to 1 (fully opaque).orphansSets the minimum number of lines in a block container split on an old page, region or column.outline-offsetControls the position of an outline.outlineSets a line outside of the element's border.overflow-wrapAllows long words or URLs to be broken and wrapped onto the next line to prevent overflow.overflowSets the desired behavior when content does not fit in the element's padding box

P

padding-block-start & padding-block-endSupport for the `padding-block-start` and `padding-block-end` css properties.padding-inline & padding-blockSupport for the `padding-inline` and `padding-block` shorthand properties.padding-inline-start & padding-inline-endSupport for the `padding-inline-start` and `padding-inline-end` css properties.paddingThis test includes support for the `padding` shorthand property as well as for `padding-left`, `padding-right`, `padding-top` and `padding-bottom`.positionTests for CSS positioning include `relative`, `absolute`, `fixed` and `sticky`.pc unitSupport for picas unit pt unitSupport for points unit px unitSupport for pixels unit

R

radial-gradient()Creates an image consisting of a progressive transition between two or more colors that radiate from an origin.resizeSets whether an element is resizable, and in which directions.rgb()RGB functional notation (`rgb()`)rgba()RGB functional notation with alpha-channel transparency value (`rgba()`)rem unitSupport for rem unit, relative to the root font-size.

S

scroll-snapControls panning and scrolling behaviour with snap positions.shape-marginSets a margin for a CSS shape created using `shape-outside`shape-outsideDefines a shape, which may be non-rectangular, around which adjacent inline content should wrap.system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospaceCSS keywords for specifying system fonts for `font-family`.

T

Type selectorType selector or element selectors allow to apply styles by HTML element names.tab-sizeSets the width of tab characters in pre-formatted text.table-layoutThe table-layout property defines the algorithm used to lay out table cells, rows, and columns.text-align-lastThe `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-alignSets the horizontal alignment of the content.text-decoration-colorSets the color of text decorations such as underlines, overlines, and line-throughs.text-decoration-lineSets the kind of decoration that is used on text in an element, such as an underline or overline.text-decoration-skip-inkSpecifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.text-decoration-styleSets the style of the lines specified by text-decoration-line.text-decoration-thicknessSets the thickness of text decoration lines such as underlines.text-decorationTested with the values `overline`, `underline` and `line-through`.text-emphasis-positionDetermines the position of the emphasis mark.text-emphasisApplies emphasis marks to text commonly used in East Asian languages. Tests with text-emphasis, text-emphasis-color & text-emphasis-style properties.text-indentSupport below refers to supporting a `<length>` value only. This does not include the new `each-line` or `hanging` keywords.text-justifySets what type of justification should be applied to text when `text-align: justify;` is set on an element.text-orientationSets the orientation of the text characters in vertical mode.text-overflowTested with the value `ellipsis`.text-shadowAdds one or more shadow effects to text, specified as horizontal offset, vertical offset, blur radius, and color.text-transformEach of the six `text-transform` values defined by MDN (`capitalize`, `uppercase`, `lowercase`, `none`, `full-width`, `full-size-kana`).text-underline-offsetSets the distance between an underline text decoration and the text baseline.text-underline-positionSpecifies the position of the underline which is set using the `text-decoration property`'s underline value.text-wrapControls how text inside an element is wrapped transformTested with values `matrix`, `translate`, `scale`, `rotate`, `skew`, `scale translate`.transitionCreates a visual transition when changing CSS properties.

U

Universal selector *The universal selector (`*`) allows to apply styles to every elements.user-selectControls whether the user can select text.

V

vh unitSupport for viewport height unit.vmax unitSupport for viewport maximum unit.vmin unitSupport for viewport minimum unit.vw unitSupport for viewport width unit.vertical-alignAligns an inline or table-cell element vertically relative to its line box or table cell.visibilityTested for values `hidden` and `collapse`.

W

white-space-collapseControls how white space inside an element is collapsed.white-spaceTested with the values `nowrap` and `pre`.widowsSets the minimum number of lines in a block container split on a new page, region or column.width propertySets the width of an element's content area, excluding padding, border, and margin.word-breakPrevents or allows words to be broken over multiple lines.word-spacingSets the length of space between words and between tags.word-wrapThe word-wrap CSS property (now standardized as overflow-wrap) controls whether the browser should break words to prevent them from overflowing their container. When set to break-word, it forces otherwise unbreakable strings to wrap onto the next line to avoid layout issues.writing-modeSets whether lines of text are laid out horizontally or vertically.

Z

z-indexSets the stack order of a positioned element — higher values appear on top of lower ones.

Check your email's CSS compatibility

Paste your HTML and get an instant compatibility score across 20+ clients.

Try MailViewr Free