The Cross-Browser Compatibility Guide – CSS Rules Across Browsers
CSS rules across browsers
CSS 2 and 3 know many style rules which you can use to separate the styling and markup of your website. Unfortunately, not every rule can be recognized in every browser. So again we’ll need some big tables to figure out what to use and when.
At-Rules
| Rule | Chrome | Edge | Firefox | Safari | Opera | Description |
| @charset | 2.0 | 12.0 | 1.5 | 4.0 | 9.0 | Specifies the character encoding used in the style sheet |
| @font-face | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 | Web designers do not have to use one of the “web-safe” fonts anymore |
| @import | 1.0 | 5.5 | 1.0 | 1.0 | 3.5 | Allows you to import a style sheet into another style sheet |
| @keyframes | 43.0 4.0 (-webkit-) |
10.0 | 16.0 5.0 (-moz-) |
9.0 4.0 (-webkit-) |
30.0 15.0 (-webkit-) 12.0 (-o-) |
Specifies the animation code |
| @media | 21 | 9 | 3.5 | 4.0 | 9 | Used in media queries to apply different styles for different media types/devices |
| @page | 8 | 19 | 15 | 15 | Describes the aspect of layout changes that will be applied when printing the document. | |
| @namespace | 9 | 1 | 1 | 1 | 8 | Declares a namespace prefix and associates it with a given namespace name |
Values and Units
In many cases, CSS rules need values and/or units. And of course, there are cross-browser issues.
| Value/Unit | Chrome | Edge | Firefox | Safari | Opera | Description |
| attr() | 2.0 | 8.0 | 1.0 | 3.1 | 9.0 | Returns the value of an attribute of the selected elements. |
| calc() | 26.0 19.0 (-webkit-) |
9.0 | 16.0 4.0 (-moz-) |
7.0 6.0 (-webkit-) |
15.0 | Performs a calculation to be used as the property value. |
| conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 | Sets a conic gradient as the background image. |
| counter() | Yes | Yes | Yes | Yes | Yes | Returns the current value of the named counter, as a string. |
| cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 | Defines a Cubic Bezier curve. |
| hsl() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 | Define colors using the Hue-saturation-lightness model (HSL). |
| hsla() | 1.0 | 9.0 | 3.0 | 3.1 | 10.0 | Define colors using the Hue-saturation-lightness-alpha model (HSLA). |
| linear-gradient() | 26.0 10.0 (-webkit-) |
10.0 | 16.0 3.6 (-moz-) |
6.1 5.1 (-webkit-) |
12.1 11.1 (-o-) |
Sets a linear gradient as the background image. |
| max() | 79.0 | 79.0 | 75.0 | 11.1 | 66.0 | Uses the largest value, from a comma-separated list of values, as the property value. |
| min() | 79.0 | 79.0 | 75.0 | 11.1 | 66.0 | Uses the smallest value, from a comma-separated list of values, as the property value. |
| radial-gradient() | 26.0 10.0 (-webkit-) |
10.0 | 16.0 3.6 (-moz-) |
6.1 5.1 (-webkit-) |
12.1 11.6 (-o-) |
Sets a radial gradient as the background image. |
| repeating-conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 | Used to repeat conic gradients. |
| repeating-linear-gradient() | 26.0 10.0 (-webkit-) |
10.0 | 16.0 3.6 (-moz-) |
6.1 5.1 (-webkit-) |
12.1 11.1 (-o-) |
Used to repeat linear gradients. |
| repeating-radial-gradient() | 26.0 10.0 (-webkit-) |
10.0 | 16.0 3.6 (-moz-) |
6.1 5.1 (-webkit-) |
12.1 11.1 (-o-) |
Used to repeat radial gradients. |
| rgb() | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Define colors using the Red-green-blue (RGB) model. |
| rgba() | 1.0 | 9.0 | 3.0 | 3.1 | 10.0 | Define colors using the Red-green-blue-alpha (RGBA) model. |
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 | Used to insert the value of a CSS variable. |
| cm | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Fixed and a length expressed in any of these will appear as exactly that size. |
| mm | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Fixed and a length expressed in any of these will appear as exactly that size. |
| in | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Fixed and a length expressed in any of these will appear as exactly that size. |
| px* | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Fixed and a length expressed in any of these will appear as exactly that size. |
| pt | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Fixed and a length expressed in any of these will appear as exactly that size. |
| pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Fixed and a length expressed in any of these will appear as exactly that size. |
| em | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Specify a length relative to another length property. |
| ex | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Specify a length relative to another length property. |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 | Specify a length relative to another length property. |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 | Specify a length relative to another length property. |
| vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 | Specify a length relative to another length property. |
| vh | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 | Specify a length relative to another length property. |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 | Specify a length relative to another length property. |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 | Specify a length relative to another length property. |
| % | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Specify a length relative to another length property. |
| inherit | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 | Specifies that a property should inherit its value from its parent element. |
| initial | 1.0 | 12.0 | 19.0 | 1.2 | 15.0 | Used to set a CSS property to its default value. |
| url() | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | To specify more than one image, separate the URLs with a comma |
| currentcolor | Yes | Yes | Yes | Yes | Yes | Refers to the value of the color property of an element. |
CSS Properties
Properties are the major part of style sheets. Again, not every property can be used across different browsers.
| Property | Chrome | Edge | Firefox | Safari | Opera | Description |
| accent-color | 93.0 | 93.0 | 92.0 | 15.4 | 79.0 | Specifies the accent color for user-interface controls |
| align-content | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 | Specifies how flex lines are distributed along the cross axis in a flexbox container. |
| align-items | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 | Specifies the default alignment for items inside a flexbox or grid container. |
| align-self | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 | Specifies the alignment in the block direction for the selected item inside a flexbox or grid container. |
| all | 37.0 | 79.0 | 27.0 | 9.1 | 24.0 | Resets all properties, apart from unicode-bidi and direction, to their initial or inherited value. |
| animation | 43.0 4.0 (-webkit-) |
10.0 | 16.0 5.0 (-moz-) |
9.0 4.0 (-webkit-) |
30.0 15.0 (-webkit-) 12.0 (-o-) |
shorthand property |
| animation-delay | 43.0 4.0 (-webkit-) |
10.0 | 16.0 5.0 (-moz-) |
9.0 4.0 (-webkit-) |
30.0 15.0 (-webkit-) 12.0 (-o-) |
Specifies a delay for the start of an animation. |
| animation-direction | 43.0 4.0 (-webkit-) |
10.0 | 16.0 5.0 (-moz-) |
9.0 4.0 (-webkit-) |
30.0 15.0 (-webkit-) 12.0 (-o-) |
Defines whether an animation should be played forwards, backwards or in alternate cycles. |
| animation-duration | 43.0 3.0 (-webkit-) |
10.0 | 16.0 5.0 (-moz-) |
9.0 4.0 (-webkit-) |
30.0 15.0 (-webkit-) 12.0 (-o-) |
Defines how long an animation should take to complete one cycle. |
| animation-fill-mode | 43.0 4.0 (-webkit-) |
10.0 | 16.0 5.0 (-moz-) |
9.0 4.0 (-webkit-) |
30.0 15.0 (-webkit-) 12.1 12.0 (-o-) |
Specifies a style for the element when the animation is not playing |
| animation-iteration-count | 43.0 4.0 (-webkit-) |
10.0 | 16.0 5.0 (-moz-) |
9.0 4.0 (-webkit-) |
30.0 15.0 (-webkit-) 12.0 (-o-) |
Specifies the number of times an animation should be played. |
| animation-name | 43.0 4.0 (-webkit-) |
10.0 | 16.0 5.0 (-moz-) |
9.0 4.0 (-webkit-) |
30.0 15.0 (-webkit-) 12.0 (-o-) |
Specifies a name for the @keyframes animation. |
| animation-play-state | 43.0 4.0 (-webkit-) |
10.0 | 16.0 5.0 (-moz-) |
9.0 4.0 (-webkit-) |
30.0 15.0 (-webkit-) 12.0 (-o-) |
Specifies whether the animation is running or paused. |
| animation-timing-function | 43.0 4.0 (-webkit-) |
10.0 | 16.0 5.0 (-moz-) |
9.0 4.0 (-webkit-) |
30.0 15.0 (-webkit-) 12.0 (-o-) |
Specifies the speed curve of an animation. |
| aspect-ratio | 88 | 88 | 89 | 15 | 74 | Allows you to define the ratio between width and height of an element. |
| backdrop-filter | 76.0 | 17.0 | 70.0* | 9.0 (-webkit-) |
63.0 | Used to apply a graphical effect to the area behind an element. |
| backface-visibility | 36.0 12.0 (-webkit-) |
10.0 | 16.0 10.0 (-moz-) |
4.0 (-webkit-) |
23.0 15.0 (-webkit-) |
Defines whether or not the back face of an element should be visible when facing the user. |
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | shorthand property |
| background-attachment | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets whether a background image scrolls with the rest of the page, or is fixed. |
| background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 | Defines the blending mode of each background layer (color and/or image). |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 | Defines how far the background (color or image) should extend within an element. |
| background-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the background color of an element. |
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets one or more background images for an element. |
| background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 | Specifies the origin position (the background positioning area) of a background image. |
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the starting position of a background image. |
| background-position-x | 1.0 | 12.0 | 49.0 | 1.0 | 15.0 | Sets the position of a background image on the x-axis. |
| background-position-y | 1.0 | 12.0 | 49.0 | 1.0 | 15.0 | Sets the position of a background image on the y-axis. |
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets if/how a background image will be repeated. |
| background-size | 4.0 1.0 (-webkit-) |
9.0 | 4.0 3.6 (-moz-) |
4.1 3.0 (-webkit-) |
10.5 10.0 (-o-) |
Specifies the size of the background images. |
| block-size | 57.0 | 79.0 | 41.0 | 12.1 | 44.0 | Specifies the size of an element in the block direction. |
| border | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | shorthand property |
| border-block | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | shorthand property |
| border-block-color | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | Sets the color of an element’s borders in the block direction. |
| border-block-end-color | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the color of an element’s border at the end in the block direction. |
| border-block-end-style | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the style of an element’s border at the end in the block direction. |
| border-block-end-width | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the width of an element’s border at the end in the block direction. |
| border-block-start-color | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the width of an element’s border at the start in the block direction. |
| border-block-start-style | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the style of an element’s border at the start in the block direction. |
| border-block-start-width | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the width of an element’s border at the start in the block direction. |
| border-block-style | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | Sets the style of an element’s borders in the block direction. |
| border-block-width | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | Sets the width of an element’s borders in the block direction. |
| border-bottom | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | shorthand property |
| border-bottom-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the color of an element’s bottom border. |
| border-bottom-left-radius | 5.0 4.0 (-webkit-) |
9.0 | 4.0 3.0 (-moz-) |
5.0 3.1 (-webkit-) |
10.5 | Defines the radius of the bottom-left corner. |
| border-bottom-right-radius | 5.0 4.0 (-webkit-) |
9.0 | 4.0 3.0 (-moz-) |
5.0 3.1 (-webkit-) |
10.5 | Defines the radius of the bottom-right corner. |
| border-bottom-style | 1.0 | 5.5 | 1.0 | 1.0 | 9.2 | Sets the style of an element’s bottom border. |
| border-bottom-width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the width of an element’s bottom border. |
| border-collapse | 1.0 | 5.0 | 1.0 | 1.2 | 4.0 | Sets whether table borders should collapse into a single border or be separated as in standard HTML. |
| border-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the color of an element’s four borders. This property can have from one to four values. |
| border-end-end-radius | 89.0 | 89.0 | 66.0 | 15.0 | 75.0 | Defines the radius of the corner at the end in the block and inline directions. |
| border-end-start-radius | 89.0 | 89.0 | 66.0 | 15.0 | 75.0 | Defines the radius of the corner at the end in the block direction and the start in the inline direction. |
| border-image | 16.0 4.0 (-webkit-) |
11.0 | 15.0 3.5 (-moz-) |
6.0 3.1 (-webkit-) |
15.0 11.0 (-o-) |
Allows you to specify an image to be used as the border around an element. |
| border-image-outset | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 | Specifies the amount by which the border image area extends beyond the border box. |
| border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 | Specifies whether the border image should be repeated, rounded, spaced or stretched. |
| border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 | specifies how to slice the image specified by border-image-source. |
| border-image-source | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 | Specifies the path to the image to be used as a border (instead of the normal border around an element). |
| border-image-width | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 | Specifies the width of the border image. |
| border-inline | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | shorthand property |
| border-inline-color | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | Sets the color of an element’s borders in the inline direction. |
| border-inline-end-color | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the color of an element’s border at the end in the inline direction. |
| border-inline-end-style | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the style of an element’s border at the end in the inline direction. |
| border-inline-end-width | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the width of an element’s border at the end in the inline direction. |
| border-inline-start-color | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the color of an element’s border at the start in the inline direction. |
| border-inline-start-style | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the style of an element’s border at the start in the inline direction. |
| border-inline-start-width | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 | Sets the width of an element’s border at the start in the inline direction. |
| border-inline-style | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | Sets the style of an element’s borders in the inline direction. |
| border-inline-width | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | Sets the width of an element’s borders in the inline direction. |
| border-left | 1.0 | 4.0 | 1.0 | 3.5 | 1.0 | shorthand property |
| border-left-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the color of an element’s left border. |
| border-left-style | 1.0 | 5.5 | 1.0 | 1.0 | 9.2 | Sets the style of an element’s left border. |
| border-left-width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the width of an element’s left border. |
| border-radius | 5.0 4.0 (-webkit-) |
9.0 | 4.0 3.0 (-moz-) |
5.0 3.1 (-webkit-) |
10.5 | Defines the radius of the element’s corners. |
| border-right | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | shorthand property |
| border-right-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the color of an element’s right border. |
| border-right-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the style of an element’s right border. |
| border-right-width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the width of an element’s right border. |
| border-spacing | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 | Sets the distance between the borders of adjacent cells. |
| border-start-end-radius | 89.0 | 89.0 | 66.0 | 15.0 | 75.0 | Defines the radius of the corner at the start in the block direction and end in the inline direction. |
| border-start-start-radius | 89.0 | 89.0 | 66.0 | 15.0 | 75.0 | Defines the radius of the corner at the end in the block and inline directions. |
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the style of an element’s four borders. This property can have from one to four values. |
| border-top | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Shorthand property sets all the top border properties in one declaration. |
| border-top-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the color of an element’s top border. |
| border-top-left-radius | 5.0 4.0 (-webkit-) |
9.0 | 4.0 3.0 (-moz-) |
5.0 3.1 (-webkit-) |
10.5 | Defines the radius of the top-left corner. |
| border-top-right-radius | 5.0 4.0 (-webkit-) |
9.0 | 4.0 3.0 (-moz-) |
5.0 3.1 (-webkit-) |
10.5 | Defines the radius of the top-right corner. |
| border-top-style | 1.0 | 5.5 | 1.0 | 1.0 | 9.2 | Sets the style of an element’s top border. |
| border-top-width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the width of an element’s top border. |
| border-width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the width of an element’s four borders. This property can have from one to four values. |
| bottom | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 | Affects the vertical position of a positioned element. |
| box-decoration-break | 22.0 (-webkit-) |
79.0 | 32.0 | 6.1 (-webkit-) |
11.5 (-webkit-) |
Specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the box for the element is fragmented. |
| abox-reflect | 4.0 (-webkit-) |
79.0 (-webkit-) |
Not supported | 4.0 (-webkit-) |
15.0 (-webkit-) |
Used to create a reflection of an element. |
| box-shadow | 10.0 4.0 (-webkit-) |
9.0 | 4.0 3.5 (-moz-) |
5.1 3.1 (-webkit-) |
10.5 | Attaches one or more shadows to an element. |
| box-sizing | 10.0 4.0 (-webkit-) |
8.0 | 29.0 2.0 (-moz-) |
5.1 3.2 (-webkit-) |
9.5 | Defines how the width and height of an element are calculated: should they include padding and borders, or not. |
| break-after | 50.0 | 10.0 | 65.0 | 10.0 | 37.0 | Specifies whether or not a page break, column break, or region break should occur after the specified element. |
| break-before | 50.0 | 10.0 | 65.0 | 10.0 | 37.0 | Specifies whether or not a page break, column break, or region break should occur before the specified element. |
| break-inside | 50.0 | 10.0 | 65.0 | 10.0 | 37.0 | Specifies whether or not a page break, column break, or region break should occur inside the specified element. |
| caption-side | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 | Specifies the placement of a table caption. |
| caret-color | 57.0 | 79.0 | 53.0 | 11.1 | 44.0 | Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable. |
| clear | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 | Controls the flow next to floated elements. |
| clip | 1.0 | 8.0 | 1.0 | 1.0 | 7.0 | Lets you specify a rectangle to clip an absolutely positioned element. |
| clip-path | 55.0 23.0 (-webkit-) |
79.0** | 54.0 | 9.1 6.1 (-webkit-) |
42.0 15.0 (-webkit-) |
Lets you clip an element to a basic shape or to an SVG source. |
| color | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Specifies the color of text. |
| column-count | 50.0 4.0 (-webkit-) |
10.0 | 52.0 2.0 (-moz-) |
9.0 3.1 (-webkit-) |
37.0 15.0 (-webkit-) 11.1 |
Specifies the number of columns an element should be divided into. |
| column-fill | 50.0 | 10.0 | 52.0 13.0 (-moz-) |
10.0 7.0 (-webkit-) |
37.0 | Specifies how to fill columns, balanced or not. |
| column-gap | 50(in Multiple) 66(in Grid) 84(in Flexbox) |
10(in Multiple) 16(in Grid) 84(in Flexbox) |
52(in Multiple) 61(in Grid) 63(in Flexbox) |
10(in Multiple) 12(in Grid) 14.1(in Flexbox) |
37(in Multiple) 53(in Grid) 70(in Flexbox) |
Specifies the gap between the columns in grid, flexbox or multi-column layout. |
| column-rule | 50.0 4.0 (-webkit-) |
10.0 | 52.0 2.0 (-moz-) |
9.0 3.1 (-webkit-) |
37.0 15.0 (-webkit-) 11.1 |
Sets the width, style, and color of the rule between columns. |
| column-rule-color | 50.0 4.0 (-webkit-) |
10.0 | 52.0 2.0 (-moz-) |
9.0 3.1 (-webkit-) |
37.0 15.0 (-webkit-) 11.1 |
Specifies the color of the rule between columns. |
| column-rule-style | 50.0 4.0 (-webkit-) |
10.0 | 52.0 2.0 (-moz-) |
9.0 3.1 (-webkit-) |
37.0 15.0 (-webkit-) 11.1 |
Specifies the style of the rule between columns. Show demo ❯ |
| column-rule-width | 50.0 4.0 (-webkit-) |
10.0 | 52.0 2.0 (-moz-) |
9.0 3.1 (-webkit-) |
37.0 15.0 (-webkit-) 11.1 |
Specifies the width of the rule between columns. |
| column-span | 50.0 4.0 (-webkit-) |
10.0 | 52.0 2.0 (-moz-) |
9.0 3.1 (-webkit-) |
37.0 15.0 (-webkit-) 11.1 |
Specifies how many columns an element should span across. |
| column-width | 50.0 4.0 (-webkit-) |
10.0 | 52.0 2.0 (-moz-) |
9.0 3.1 (-webkit-) |
37.0 15.0 (-webkit-) 11.1 |
Specifies the column width. |
| columns | 50.0 4.0 (-webkit-) |
10.0 | 52.0 2.0 (-moz-) |
9.0 3.1 (-webkit-) |
37.0 15.0 (-webkit-) 11.1 |
shorthand property |
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 | Used with the ::before and ::after pseudo-elements, to insert generated content. |
| counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 | Increases or decreases the value of one or more CSS counters. |
| counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 | Creates or resets one or more CSS counters. |
| cursor | 5.0 | 5.5 | 4.0 | 5.0 | 9.6 | Specifies the mouse cursor to be displayed when pointing over an element. |
| direction | 2.0 | 5.5 | 1.0 | 1.3 | 9.2 | Specifies the text direction/writing direction within a block-level element. |
| display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 | Specifies the display behavior (the type of rendering box) of an element. |
| empty-cells | 1.0 | 8.0 | 1.0 | 1.2 | 4.0 | Sets whether or not to display borders on empty cells in a table. |
| filter | 53.0 18.0 (-webkit-) |
13.0 | 35.0 | 9.1 6.0 (-webkit-) |
40.0 15.0 (-webkit-) |
Defines visual effects (like blur and saturation) to an element (often <img>). Show demo ❯ |
| flex | 29.0 21.0 (-webkit-) |
11.0 10.0 (-ms-) |
28.0 18.0 ( -moz-) |
9.0 6.1 (-webkit-) |
17.0 | shorthand property |
| flex-basis | 29.0 21.0 (-webkit-) |
11.0 10.0 (-ms-) |
28.0 18.0 ( -moz-) |
9.0 6.1 (-webkit-) |
17.0 | Specifies the initial length of a flexible item. |
| flex-direction | 29.0 21.0 (-webkit-) |
11.0 10.0 (-ms-) |
28.0 18.0 ( -moz-) |
9.0 6.1 (-webkit-) |
17.0 | Specifies the direction of the flexible items. |
| flex-flow | 29.0 21.0 (-webkit-) |
11.0 10.0 (-ms-) |
28.0 18.0 ( -moz-) |
9.0 6.1 (-webkit-) |
17.0 | shorthand property |
| flex-grow | 29.0 21.0 (-webkit-) |
11.0 10.0 (-ms-) |
28.0 18.0 ( -moz-) |
9.0 6.1 (-webkit-) |
17.0 | Specifies how much the item will grow relative to the rest of the flexible items inside the same container. |
| flex-shrink | 29.0 21.0 (-webkit-) |
11.0 10.0 (-ms-) |
28.0 18.0 ( -moz-) |
9.0 6.1 (-webkit-) |
17.0 | Specifies how the item will shrink relative to the rest of the flexible items inside the same container. |
| flex-wrap | 29.0 21.0 (-webkit-) |
11.0 10.0 (-ms-) |
28.0 18.0 ( -moz-) |
9.0 6.1 (-webkit-) |
17.0 | Specifies whether the flexible items should wrap or not. |
| float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 | Specifies whether an element should float to the left, right, or not at all. |
| font | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | shorthand property |
| font-family | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Specifies the font for an element. |
| font-feature-settings | 48.0 16.0 (-webkit-) |
10.0 | 34.0 15.0 (-moz-) |
9.1 | 35.0 15.0 (-webkit-) |
Allows control over advanced typographic features in OpenType fonts. |
| font-kerning | 33.0 29.0 (-webkit-) |
79.0 | 34.0 | 9.1 7.0 (-webkit-) |
20.1 16.0 (-webkit-) |
Controls the usage of the kerning information stored in a font. |
| font-size | 1.0 | 5.5 | 1.0 | 1.0 | 7.0 | Sets the size of a font. |
| font-size-adjust | Not supported | Not supported | 3.0 | Not supported | Not supported | Gives you better control of the font size when the first selected font is not available. |
| font-stretch | 48.0 | 9.0 | 9.0 | 11.0 | 35.0 | Allows you to make text narrower (condensed) or wider (expanded). |
| font-style | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 | Specifies the font style for a text. |
| font-variant | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Specifies whether or not a text should be displayed in a small-caps font. |
| font-variant-caps | 52.0 | 79.0 | 34.0 | Not supported | 39.0 | Controls the usage of alternate glyphs for capital letters. |
| font-weight | 2.0 | 4.0 | 1.0 | 1.3 | 3.5 | Sets how thick or thin characters in text should be displayed. |
| gap | 66 (in Grid) 84 (in Flexbox) 66 (in Multiple Columns) |
16(in Grid) 84(in Flexbox) 16(in Multiple Columns) |
61(in Grid) 63(in Flexbox) 61(in Multiple Columns) |
12(in Grid) 14.1(in Flexbox) Not supported(in Multiple Columns) |
53(in Grid) 70(in Flexbox) 53(in Multiple Columns) |
Defines the size of the gap between the rows and between the columns in flexbox, grid or multi-column layout. |
| grid | 57 | 16 | 52 | 10 | 44 | shorthand property |
| grid-area | 57 | 16 | 52 | 10 | 44 | Specifies a grid item’s size and location in a grid layout |
| grid-auto-columns | 57 | 16 | 52 | 10 | 44 | Sets a size for the columns in a grid container. |
| grid-auto-flow | 57 | 16 | 52 | 10 | 44 | Controls how auto-placed items get inserted in the grid. |
| grid-auto-rows | 57 | 16 | 52 | 10 | 44 | Sets a size for the rows in a grid container. |
| grid-column | 57 | 16 | 52 | 10 | 44 | Specifies a grid item’s size and location in a grid layout |
| grid-column-end | 57 | 16 | 52 | 10 | 44 | Defines how many columns an item will span, or on which column-line the item will end |
| grid-column-gap | 57 | 16 | 52 | 10 | 44 | Defines the size of the gap between the columns in a grid layout. |
| grid-column-start | 57 | 16 | 52 | 10 | 44 | Defines on which column-line the item will start. |
| grid-gap | 57 | 16 | 52 | 10 | 44 | Defines the size of the gap between the rows and columns in a grid layout |
| grid-row | 57 | 16 | 52 | 10 | 44 | Specifies a grid item’s size and location in a grid layout |
| grid-row-end | 57 | 16 | 52 | 10 | 44 | Defines how many rows an item will span, or on which row-line the item will end |
| grid-row-gap | 57 | 16 | 52 | 10 | 44 | Defines the size of the gap between the rows in a grid layout. |
| grid-row-start | 57 | 16 | 52 | 10 | 44 | Defines on which row-line the item will start. |
| grid-template | 57 | 16 | 52 | 10 | 44 | shorthand property |
| grid-template-areas | 57 | 16 | 52 | 10 | 44 | Specifies areas within the grid layout |
| grid-template-columns | 57 | 16 | 52 | 10 | 44 | Specifies the number (and the widths) of columns in a grid layout. |
| grid-template-rows | 57 | 16 | 52 | 10 | 44 | Specifies the number (and the heights) of the rows in a grid layout. |
| hanging-punctuation | Not supported | Not supported | Not supported | 10+ | Not supported | Specifies whether a punctuation mark may be placed outside the line box at the start or at the end of a full line of text. |
| height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 | Sets the height of an element. |
| hyphens | 55.0 | 79.0 10.0 (-ms-) |
43.0 | 5.1 (-webkit-) |
44.0 | Defines whether hyphenation is allowed to create more soft wrap opportunities within a line of text. |
| image-rendering | 41.0 | 79.0 | 65.0 | 10.0 | 28.0 | Specifies the type of algorithm to be used for image scaling. |
| inline-size | 57.0 | 79.0 | 41.0 | 12.1 | 44.0 | Specifies the size of an element in the inline direction. |
| inset | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | Sets the distance between an element and the parent element. |
| inset-block | 87.0 | 87.0 | 63.0 | 14.1 | 73.0 | sets the distance between an element and the parent element in the block direction. |
| inset-block-end | 87.0 | 87.0 | 63.0 | 14.1 | 73.0 | Sets the distance between the end of an element and the parent element in the block direction. |
| inset-block-start | 87.0 | 87.0 | 63.0 | 14.1 | 73.0 | Sets the distance between the start of an element and the parent element in the block direction. |
| inset-inline | 87.0 | 87.0 | 63.0 | 14.1 | 73.0 | Sets the distance between an element and the parent element in the inline direction. |
| inset-inline-end | 87.0 | 87.0 | 63.0 | 14.1 | 73.0 | Sets the distance between the end of an element and the parent element in the inline direction. |
| inset-inline-start | 87.0 | 87.0 | 63.0 | 14.1 | 73.0 | Sets the distance between the start of an element and the parent element in the inline direction. |
| isolation | 41.0 | 79.0 | 36.0 | Yes | 30.0 | Defines whether an element must create a new stacking content. |
| justify-content | 29.0 21.0 (-webkit-) |
11.0 | 28.0 18.0 (-moz-) |
9.0 6.1 (-webkit-) |
17.0 | Aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally). |
| justify-items | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 | Set on the grid container to give child elements (grid items) alignment in the inline direction. |
| justify-self | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 | Aligns a grid item within its grid cell in the inline direction. |
| left | 1.0 | 5.5 | 1.0 | 1.0 | 5.0 | Affects the horizontal position of a positioned element. |
| letter-spacing | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Increases or decreases the space between characters in a text. |
| line-height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 | Specifies the height of a line. |
| list-style | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 | shorthand for the following properties |
| list-style-image | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 | Replaces the list-item marker with an image. |
| list-style-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Specifies the position of the list-item markers (bullet points). |
| list-style-type | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Specifies the type of list-item marker in a list. |
| margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 | Sets the margins for an element |
| margin-block | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | Specifies the margin at the start and end in the block direction |
| margin-block-end | 87.0 | 87.0 | 41.0 | 12.1 | 73.0 | Specifies the margin at the end in the block direction. |
| margin-block-start | 87.0 | 87.0 | 41.0 | 12.1 | 73.0 | Specifies the margin at the start in the block direction. |
| margin-bottom | 1.0 | 6.0 | 41.0 | 12.1 | 3.5 | Sets the bottom margin of an element. |
| margin-inline | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | Specifies the margin at the start and end in the inline direction |
| margin-inline-end | 87.0 | 87.0 | 41.0 | 12.1 | 73.0 | Specifies the margin at the end in the inline direction. |
| margin-inline-start | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the margin at the start in the inline direction. |
| margin-left | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 | Sets the left margin of an element. |
| margin-right | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 | Sets the right margin of an element. |
| margin-top | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 | Sets the top margin of an element. |
| mask-image | 4.0 (-webkit-) |
79.0 (-webkit-) |
53.0 | 4.0 (-webkit-) |
15.0 (-webkit-) |
Specifies an image to be used as a mask layer for an element. |
| mask-mode | Not supported | Not supported | 53.0 | Not supported | Not supported | Specifies whether the mask layer image should be treated as a luminance mask or as an alpha mask. |
| mask-origin | 4.0 (-webkit-) |
79.0 (-webkit-) |
53.0 | 4.0 (-webkit-) |
15.0 (-webkit-) |
Specifies the origin position (the mask position area) of a mask layer image. |
| mask-position | 4.0 (-webkit-) |
79.0 (-webkit-) |
53.0 | 4.0 (-webkit-) |
15.0 (-webkit-) |
Sets the starting position of a mask image (relative to the mask position area). |
| mask-repeat | 4.0 (-webkit-) |
79.0 (-webkit-) |
53.0 | 4.0 (-webkit-) |
15.0 (-webkit-) |
Sets if/how a mask image will be repeated. |
| mask-size | 4.0 (-webkit-) |
79.0 (-webkit-) |
53.0 | 4.0 (-webkit-) |
15.0 (-webkit-) |
Specifies the size of the mask layer image. |
| max-height | 1.0 | 7.0 | 1.0 | 2.0.2 | 7.0 | Defines the maximum height of an element. |
| max-width | 1.0 | 7.0 | 1.0 | 2.0.2 | 7.0 | Defines the maximum width of an element. |
| max-block-size | 57.0 | 79.0 | 41.0 | 12.1 | 44.0 | Specifies the maximum size of an element in the block direction. |
| max-inline-size | 57.0 | 79.0 | 41.0 | 12.1 | 44.0 | Specifies the maximum size of an element in the inline direction. |
| min-block-size | 57.0 | 79.0 | 41.0 | 12.1 | 44.0 | Specifies the minimum size of an element in the block direction. |
| min-inline-size | 57.0 | 79.0 | 41.0 | 12.1 | 44.0 | Specifies the minimum size of an element in the inline direction. |
| min-height | 1.0 | 7.0 | 3.0 | 2.0.2 | 4.0 | Defines the minimum height of an element. |
| min-width | 1.0 | 7.0 | 1.0 | 2.0.2 | 4.0 | Defines the minimum width of an element. |
| mix-blend-mode | 41.0 | 79.0 | 32.0 | 8.0 | 35.0 | Specifies how an element’s content should blend with its direct parent background. |
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 | Used to specify how an <img> or <video> should be resized to fit its container. |
| object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 | Used together with object-fit to specify how an <img> or <video> should be positioned with x/y coordinates inside its “own content box”. |
| offset | 55.0 | 79.0 | 72.0 | 16.0 | 42.0 | Used when animating an element along a path |
| offset-anchor | Not supported | Not supported | 72.0 | Not supported | Not supported | Sspecifies the point on an element to be fixed along a path defined by the offset-path property. |
| offset-distance | 55.0 | 79.0 | 72.0 | Not supported | 42.0 | Sets the distance of an element from the start of the path defined by the offset-path property. |
| offset-path | 55.0 | 79.0 | 72.0 | 15.4 | 45.0 | Creates a path for an animated element to follow. |
| offset-rotate | 56.0 | 79.0 | 72.0 | Not supported | 43.0 | Sets the rotation of an animated element moving aling a path. |
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 | Sets the opacity level for an element. |
| order | 29.0 21.0 (-webkit-) |
11.0 | 28.0 18.0 (-moz-) |
9.0 6.1 (-webkit-) |
17.0 | Specifies the order of a flexible item relative to the rest of the flexible items inside the same container. |
| orphans | 25.0 | 8.0 | Not supported | 3.1 | 10.0 | Specifies the minimum number of lines that must be left at the bottom of a page or column. |
| outline | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 | shorthand property |
| outline-color | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 | Specifies the color of an outline. |
| outline-offset | 4.0 | 15.0 | 3.5 | 3.1 | 10.5 | Adds space between the outline and the edge or border of an element. |
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 | Specifies the style of an outline. |
| outline-width | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 | Specifies the width of an outline. |
| overflow | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 | Specifies what should happen if content overflows an element’s box. |
| overflow-anchor | 56.0 | 79.0 | 66.0 | Not supported | 43.0 | Makes it possible to turn off scroll anchoring. |
| overflow-wrap | 23.0 | 18.0 | 49.0 | 6.1 | 12.1 | Specifies whether or not the browser can break lines with long words, if they overflow the container. |
| overflow-x | 4.0 | 9.0 8.0 (-ms-) |
3.5 | 3.0 | 9.5 | Specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges. |
| overflow-y | 4.0 | 9.0 8.0 (-ms-) |
1.5 | 3.0 | 9.5 | Specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges. |
| overscroll-behavior | 63.0 | 18.0 *** | 59.0 | 16.0 | 50.0 | Used to turn off scroll chaining or overscroll affordance on an element when you try to scroll past the scroll boundary. |
| overscroll-behavior-block | 63.0 | 18.0 | 59.0 | 16.0 | 50.0 | Used to turn off scroll chaining or overscroll affordance on an element when you try to scroll past the scroll boundary in the block direction. |
| overscroll-behavior-inline | 63.0 | 18.0 | 59.0 | 16.0 | 50.0 | Used to turn off scroll chaining or overscroll affordance on an element when you try to scroll past the scroll boundary in the inline direction. |
| overscroll-behavior-x | 63.0 | 18.0 *** | 59.0 | 16.0 | 50.0 | Used to turn off scroll chaining or overscroll affordance on an element when you try to scroll past the scroll boundary in the x-direction. |
| overscroll-behavior-y | 63.0 | 18.0 *** | 59.0 | 16.0 | 50.0 | Used to turn off scroll chaining or overscroll affordance on an element when you try to scroll past the scroll boundary in y-direction. |
| padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | shorthand property |
| padding-block | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 | The space from its border to its content in the block direction, and it is a shorthand property for the following properties: |
| padding-block-end | 87.0 | 87.0 | 41.0 | 12.1 | 73.0 | The space from its border to its content, at the end in the block direction. |
| padding-block-start | 87.0 | 87.0 | 41.0 | 12.1 | 73.0 | The space from its border to its content, at the start in the block direction. |
| padding-bottom | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the bottom padding (space) of an element. |
| padding-inline | 87.0 | 4.0 | 66.0 | 14.1 | 3.5 | The space from its border to its content in the inline direction, and it is a shorthand property for the following properties: |
| padding-inline-end | 87.0 | 4.0 | 41.0 | 12.1 | 3.5 | The space from its border to its content, at the end in the inline direction. |
| padding-inline-start | 87.0 | 4.0 | 41.0 | 12.1 | 3.5 | The space from its border to its content, at the start in the inline direction. |
| padding-left | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the left padding (space) of an element. |
| padding-right | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the right padding (space) of an element. |
| padding-top | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the top padding (space) of an element. |
| page-break-after | 1.0 | 4.0 | 1.0 | 1.2 | 7.0 | Adds a page-break after a specified element. |
| page-break-before | 1.0 | 4.0 | 1.0 | 1.2 | 7.0 | Adds a page-break before a specified element.. |
| page-break-inside | 1.0 | 8.0 | 19.0 | 1.3 | 7.0 | Sets whether a page-break should be avoided inside a specified element. |
| paint-order | 35.0 | 17.0 | 60.0 | 8.0 | 22.0 | Specifies the order of how an SVG element or text is painted. |
| perspective | 36.0 12.0 (-webkit-) |
10.0 | 16.0 10.0 (-moz-) |
9.0 4.0.3 (-webkit-) |
23.0 15.0 (-webkit-) |
Used to give a 3D-positioned element some perspective. |
| perspective-origin | 36.0 12.0 (-webkit-) |
10.0 | 16.0 10.0 (-moz-) |
9.0 4.0.3 (-webkit-) |
23.0 15.0 (-webkit-) |
Defines at from which position the user is looking at the 3D-positioned element. |
| place-content | 59.0 | 79.0 | 53.0 | 11.0 | 46.0 | Used in flexbox and grid layouts, and is a shorthand property for the following properties: |
| place-items | 59.0 | 79.0 | 45.0 | 11.0 | 46.0 | Used in grid layout, and is a shorthand property for the following properties: |
| place-self | 59.0 | 79.0 | 45.0 | 11.0 | 46.0 | Used to align individual grid items, and is a shorthand property for the following properties: |
| pointer-events | 2.0 | 11.0 | 3.6 | 4.0 | 9.0 | Defines whether or not an element reacts to pointer events. |
| property | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 | Specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). |
| quotes | 11.0 | 8.0 | 1.5 | 5.1 | 4.0 | Sets the type of quotation marks for quotations. |
| resize | 4.0 | 79.0 | 5.0 4.0 (-moz-) |
4.0 | 15.0 | Defines if (and how) an element is resizable by the user. |
| right | 1.0 | 5.5 | 1.0 | 1.0 | 5.0 | Affects the horizontal position of a positioned element. |
| rotate | 104 | 104 | 72 | 14.1 | 90 | Allows you to rotate elements. |
| row-gap | 66(in Grid) 84(in Flexbox) |
16(in Grid) 84(in Flexbox) |
61(in Grid) 63(in Flexbox) |
12(in Grid) 14.1(in Flexbox) |
53(in Grid) 70(in Flexbox) |
Specifies the gap between the rows in a flexbox or grid layout. |
| scale | 104 | 104 | 72 | 14.1 | 90 | Allows you to change the size of elements. |
| scroll-behavior | 61.0 | 79.0 | 36.0 | 14.0 | 48.0 | Specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box. |
| scroll-margin | 69.0 | 79.0 | 90.0 | 14.1 | 56.0 | Specifies the distance between the snap position and the container. |
| scroll-margin-block | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance in block direction, between the snap position and the container. |
| scroll-margin-block-end | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance in block direction, between the snap position and the container. |
| scroll-margin-block-start | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance in block direction, between the snap position and the container . |
| scroll-margin-bottom | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance between the snap position and the container. |
| scroll-margin-inline | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance in the inline direction, between the snap position and the container. |
| croll-margin-inline-end | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance in the inline direction, between the snap position and the container. |
| scroll-margin-inline-start | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance in the inline direction, between the snap position and the container. |
| scroll-margin-left | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance between the snap position and the container. |
| scroll-margin-right | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance between the snap position and the container. |
| scroll-margin-top | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance between the snap position and the container. |
| scroll-padding | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance from the container to the snap position of child elements. |
| scroll-padding-block | 69.0 | 79.0 | 68.0 | 15.0 | 56.0 | Specifies the distance in block direction, from the container to the snap position on the child elements. |
| scroll-padding-block-end | 69.0 | 79.0 | 68.0 | 15.0 | 56.0 | Specifies the distance in block direction from the end of the container to the snap position on the child elements. |
| scroll-padding-block-start | 69.0 | 79.0 | 68.0 | 15.0 | 56.0 | Specifies the distance in block direction from the start of the container to the snap position on the child elements. |
| scroll-padding-bottom | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance from the bottom of the container to the snap position on the child elements. |
| scroll-padding-inline | 69.0 | 79.0 | 68.0 | 15.0 | 56.0 | Specifies the distance in the inline direction from the container to the snap position on the child elements. |
| scroll-padding-inline-end | 69.0 | 79.0 | 68.0 | 15.0 | 56.0 | Specifies the distance in the inline direction from the end of the container to the snap position on the child elements. |
| scroll-padding-inline-start | 69.0 | 79.0 | 68.0 | 15.0 | 56.0 | Specifies the distance in the inline direction from the start of the container to the snap position on the child elements. |
| scroll-padding-left | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance from the left side of the container to the snap position on the child elements. |
| scroll-padding-right | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance from the right side of the container to the snap position on the child elements. |
| scroll-padding-top | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 | Specifies the distance from the top of the container to the snap position on the child elements. |
| scroll-snap-align | 69.0 | 79.0 | 68.0 | 11.0 | 56.0 | Specifies where elements will snap into focus when you stop scrolling. |
| scroll-snap-stop | 75.0 | 79.0 | 103.0 | 15.0 | 62.0 | Specifies whether to scroll past elements or to stop and snap on the next element. |
| scroll-snap-type | 69.0 | 79.0 | 99.0 | 11.0 | 56.0 | Specifies how the elements will snap into focus when you stop scrolling, and in what direction. |
| tab-size | 21.0 | 79.0 | 4.0 (-moz-) | 6.1 | 15.0 10.6 (-o-) |
Specifies the width of a tab character. |
| table-layout | 14.0 | 5.0 | 1.0 | 1.0 | 7.0 | Defines the algorithm used to lay out table cells, rows, and columns. |
| text-align | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Specifies the horizontal alignment of text in an element. |
| text-align-last | 47.0 | 5.5**** | 49.0 12.0 (-moz-) |
Not supported | 34.0 | Specifies how to align the last line of a text. |
| text-decoration | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Specifies the decoration added to text |
| text-decoration-color | 57.0 | 79.0 | 36.0 6.0 (-moz-) |
12.1 7.1 (-webkit-) |
44.0 | Specifies the color of the text-decoration (underlines, overlines, linethroughs). |
| text-decoration-line | 57.0 | 79.0 | 36.0 6.0 (-moz-) |
12.1 7.1 (-webkit-) |
44.0 | Sets the kind of text decoration to use (like underline, overline, line-through). |
| text-decoration-style | 57.0 | 79.0 | 36.0 6.0 (-moz-) |
12.1 | 44.0 | Sets the style of the text decoration (like solid, wavy, dotted, dashed, double). |
| text-decoration-thickness | 89.0 | 89.0 | 70.0 | 12.1 | 75.0 | Specifies the thickness of the decoration line. |
| text-emphasis | 99.0 | 99.0 | 46.0 | 7.0 | 15.0 (-webkit-) |
Used to apply emphasis marks to text. |
| text-indent | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 | Specifies the indentation of the first line in a text-block. |
| text-justify | Yes***** | 11.0 | 55.0 | 10.0.3 | Yes***** | Specifies the justification method of text when text-align is set to “justify”. |
| text-orientation | 48.0 | 79.0 | 41.0 | 14.0 | 35.0 | Specifies the orientation of characters. |
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 (-o-) |
Specifies how overflowed content that is not displayed should be signaled to the user. |
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 | Adds shadow to text. |
| text-transform | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 | Controls the capitalization of text. |
| top | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 | Affects the vertical position of a positioned element. |
| transform(2D) | 36.0 4.0 (-webkit-) |
10.0 9.0 (-ms-) |
16.0 3.5 (-moz-) |
9.0 3.2 (-webkit-) |
23.0 15.0 (-webkit-) 10.5 (-o-) |
Applies a 2D or 3D transformation to an element. |
| transform(3D) | 36.0 12.0 (-webkit-) |
12.0 | 10.0 | 9.0 4.0 (-webkit-) |
23.0 15.0 (-webkit-) |
Applies a 2D or 3D transformation to an element. |
| transform-origin | 36.0 4.0 (-webkit-) |
10.0 9.0 (-ms-) |
16.0 3.5 (-moz-) |
9.0 3.2 (-webkit-) |
23.0 15.0 (-webkit-) 10.5 (-o-) |
Allows you to change the position of transformed elements. |
| transform-style | 36.0 12.0 (-webkit-) |
11.0 | 16.0 10.0 (-moz-) |
9.0 4.0 (-webkit-) |
23.0 15.0 (-webkit-) |
Specifies how nested elements are rendered in 3D space. |
| transition | 26.0 4.0 (-webkit-) |
10.0 | 16.0 4.0 (-moz-) |
6.1 3.1 (-webkit-) |
12.1 10.5 (-o-) |
shorthand property |
| transition-delay | 26.0 4.0 (-webkit-) |
10.0 | 16.0 4.0 (-moz-) |
6.1 3.1 (-webkit-) |
12.1 10.5 (-o-) |
Specifies when the transition effect will start. |
| transition-duration | 26.0 4.0 (-webkit-) |
10.0 | 16.0 4.0 (-moz-) |
6.1 3.1 (-webkit-) |
12.1 10.5 (-o-) |
Specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete. |
| transition-property | 26.0 4.0 (-webkit-) |
10.0 | 16.0 4.0 (-moz-) |
6.1 3.1 (-webkit-) |
12.1 10.5 (-o-) |
Specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). |
| transition-timing-function | 26.0 4.0 (-webkit-) |
10.0 | 16.0 4.0 (-moz-) |
6.1 3.1 (-webkit-) |
12.1 10.5 (-o-) |
Specifies the speed curve of the transition effect. |
| translate | 104 | 104 | 72 | 14.1 | 90 | Allows you to change the position of elements. |
| unicode-bidi | 2.0 | 5.5 | 1.0 | 1.3 | 9.2 | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document. |
| user-select | 54.0 6.0 (-webkit-) |
79.0 10.0 (-ms-) |
69.0 2.0 (-moz-) |
3.1 (-webkit-) |
41.0 15.0 (-webkit-) |
Specifies whether the text of an element can be selected. |
| vertical-align | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 | Sets the vertical alignment of an element. |
| visibility | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 | Specifies whether or not an element is visible. |
| white-space | 1.0 | 8.0 | 3.5 | 3.0 | 9.5 | Specifies how white-space inside an element is handled. |
| width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | Sets the width of an element. |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 | Specifies how words should break when reaching the end of a line. |
| word-spacing | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 | Increases or decreases the white space between words. |
| word-wrap | 4.0 | 5.5 | 3.5 | 3.1 | 10.5 | Allows long words to be able to be broken and wrap onto the next line. |
| writing-mode | 48.0 | 12.0 | 41.0 | 11.0 | 35.0 | Specifies whether lines of text are laid out horizontally or vertically. |
| z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 | Specifies the stack order of an element. |
* To get this to work, open about:config and set thelayout.css.backdrop-filter.enabled to true, and also the gfx.webrender.all preferences needs to be set to true.
**Before version 79, Edge only supported clip-path on SVG elements (not HTML elements).
*** In Microsoft Edge, the property value ‘none’ is treated like ‘contain’, and this is not correct.
****In Internet Explorer 11 (and earlier), the “start” and “end” values are not supported.
*****This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to Enabled). To change preferences in Chrome: type in “chrome://flags” in the Chrome browser. To change preferences in Opera: type in “flags” in the Opera browser.
As you can see CSS is far from being cross-browser compatible. You need to be careful which selectors, units, and properties you use.
Source:https://www.w3schools.com
