Detailed explanation of CSS compatibility

Box Model Attributes

[width/height]

(Full compatibility)
width
height

(IE6-I won't support it)
min-width
max-width
min-height
max-height

[inner margin padding]

padding

[border]

(Full compatibility)
border
border-width
border-color
border-style

(IE8-I won't support it)
border-radius

(IE10-I won't support it)
border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

(only firefox Support, need to be added-moz-prefix)
border-colors

[margin]

(Full compatibility)
margin

(IE Not supported, and need to add webkit or moz prefix)
margin-start
margin-end

(only chrome and safari Support and need to be added webkit prefix)-webkit-margin-before-webkit-margin-after

[outline]

(IE7-I won't support it)
outline
outline-width
outline-color
outline-style

(IE I won't support it)
outline-offset

[box-sizing]

[Note] Only firefox supports padding-box attribute values

(IE7-I won't support it)
box-sizing

 

Layout class attributes

[display]

[Note] IE7 - Browsers do not support table class attribute values

(Full compatibility)
display

[Floating]

(Fully compatible) floatclear

[Location]

[Note] IE6 - Fixed Location position:fixed is not supported

(Full compatibility)
position
left
right
top
bottom
z-index

[Spillover correlation]

(Full compatibility)
overflow
overflow-x
overflow-y
clip
visibility

(IE does not support it)
resize

[flex]

(IE9-I won't support it)
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
align-self
flex-basis
flex-grow
flex-shrink
flex
order

[Multi-column layout]

(IE10+and chrome Browsers support standard writing. firefox,safari Browser and Mobile android,IOS Need to add prefix)
column-width
column-count
column-gap
column-rule
column-span(firefox This property is not supported)
columns

(only firefox Supporting prefixed column-fill attribute)
column-fill

[grid]

(IE9-I won't support it, IE10+Need to add-ms-The prefix, android4.4.4-I won't support it, IOS10.2-I won't support it)
grid-template-rows
grid-template-columns
grid-template-areas
grid-column-gap
grid-row-gap
grid-gap
grid-row-start
grid-row-end
grid-row
grid-column-start
grid-column-end
grid-column
grid-area
grid-auto-flow
grid-auto-rows
grid-auto-columns
justify-items
justify-self
align-items
align-self

 

Text class attributes

[font]

(Full compatibility)
font
font-family
font-size
font-style
font-variant
font-weight
line-height
@font-face

[First line indentation text-indent]

(Full compatibility)
text-indent

[Alignment]

[Note] The percentage value of vertical-align in IE7-browser does not support decimal line height

--align

(safari Browser, IOS,androis4.4-Browser does not support)
text-align-last

[Interval]

(Full compatibility)
word-spacing
letter-spacing

[capitalization text-transform]

(Full compatibility)
text-transform

[underlined text-decoration]

(Full compatibility)
text-decoration

[white-space]

[Note] IE7-Browser does not support pre-line and pre-wrap attribute values

(Full compatibility)
white-space

[Line change]

[Note 1]W3C recommends replacing word-wrap with overflow-wrap

[Note 2] At present, the mobile terminal basically does not support the attribute value keep-all of word-break.

--wrap

[Text Direction]

-webkit--

[text overflow]

(Full compatibility)
text-overflow

[Text Shadow text-shadow]

(IE9-I won't support it)
text-shadow

 

Modifying class attributes

[background]

(Full compatibility)
background
background-color
background-image
background-repeat
background-position

(IE8-I won't support it)
background-attachment
background-clip
background-size

[Prospects and Transparency]

(Full compatibility)
color

(IE8-I won't support it)
opacity

[Color Mode]

[Note] IE7 - does not support color:transparent, but background-color:transparent and border-color:transparent

-

[cursor]

[Note] IE7 - Extended Styles Not Supported

(Full compatibility)
cursor

[transition] 

(IE9-I won't support it, safari3.1-6,IOS3.2-6.1,android2.1-4.3 Need to add-webkit-prefix)
transition-property
transition-duration
transiton-timing-function
transition-delay
transition

[deformation transform]

(IE9 - Not supported, Safari 3. -, Android 2. -., IOS3. -)

[gradient]

IE9-does not support, Safari 4-5, IOS 3.2-4.3, Android 2.1-3 only support linear gradient, and need to add - webkit-; Safari 5.1-6, IOS 5.1-6.1, Android 4-4.3 support linear and radial gradient, and need to add - webkit-

[Animation animation]

(IE9-I won't support it; safari4-8,IOS3.2-8.4,android2.1-4.4.4 Need to add-webkit-prefix)
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode

[Mixed Model]

(IE Browser, android4.4-I won't support it, safari and IOS Need to add-webkit-prefix)
mix-blend-mode
background-blend-mode
isolation

[filter]

(IE Browsers and android4.3-Browsers do not support it. android4.4+Need to add-webkit-prefix)
filter

[Reflection box-reflect ion]

Only chrome and safari browsers support it and need to add - webkit - prefix

[will-change]

(IE13+,chrome49+,safari9.1+,IOS9.3+,Android52+)
will-change

 

Other class attributes

[Table]

(Full compatibility)
border-collapse
table-layout
caption-side

(IE7-I won't support it)
border-spacing
empty-cells

[Paging]

(Full compatibility)
page-break-after
page-break-before
page-break-inside

(IE7-I won't support it)
orphans

(IE And the mobile terminal does not support it)
windows

[selector]

(Full compatibility)
Wildcard selector * element selector * div
 Class selector.box
 ID selector
 Descendant selector div a
 Packet selector h1,p

(IE6 - Not supported)
Attribute selector h1[class]
Sub-element selector UL > Li
 Neighboring Brother Selector div + p

(IE7 - Not supported)
Universal Brother Selector div~p

[Pseudoclass]

(Full compatibility)
:link
:visited

(IE6-does not support pseudo-classes for elements other than <a>)
:hover
:active  

(IE7 - Not supported)
:focus
:lang() 

(IE8 - Not supported)
:target
:enabled   
:disabled   
:checked :nth-child(n)
:nth-last-child(n)
:first-child
:last-child
:only-child
:nth-of-type(n)
:nth-last-of-type(n)
:first-of-type
:last-of-type
:only-of-type
:root
:not
:empty
:target

[Pseudo-elements]

(IE6-browser only supports when there is a space between the selector section and the left brace)
:first-letter
:first-line

(IE7 - Not supported)
:before
:after

(IE8 - Not supported)
::selection

[Keyword]

(IE7-Browser does not support)
inherit

(IE Browser does not support)
initial

(IE I won't support it, safari9-I won't support it, ios9.2-I won't support it, android4.4.4-I won't support it)
unset
all

(only safari9.1+and ios9.3+Support)
revert

[calc] 

[Note] Android 4.4-4.4.4 only supports addition and subtraction. IE9 does not support backround-position

(IE8-,safari5.1-,ios5.1-,android4.3-I won't support it)
calc

[Unit]

(Full compatibility)
pxincm
mm
q
pt
pc
em
ex
ch

(IE8-I won't support it)
rem

(IE8-Browsers do not support it. IOS7.1-I won't support it, android4.3-Not supported, for vmax All IE Browsers are not supported)
vh
vw
vmin
vmax


Keywords: IE Attribute Firefox Android

Added by tinkertron on Wed, 12 Jun 2019 20:45:57 +0300