CSS compatibility detailed

Previous words

For front-end engineers, do not want to face and have to face a problem is compatibility. A few years ago, dealing with compatibility was generally the process of dealing with the compatibility of IE's low-version browsers. In recent years, with the development of mobile, engineers also need to pay attention to mobile compatibility. This article will cover CSS compatibility in detail

Box Model Properties

"Wide-height width/height"

(fully compatible) Widthheight (IE6- not supported) min-widthmax-widthmin-HeightMax-height

"Inner margin padding"

Padding

"Border Border"

(fully compatible) Borderborder-widthborder-colorborder-style (IE8- not supported) border- radius (IE10- not supported) border-imageborder-image-sourceborder-image-  Sliceborder-image-widthborder-image-outsetborder-image-Repeat (only Firefox support, need to add -moz- prefix) border-colors

"Margin margin"

(fully compatible) margin (ie not supported and need to add webkit or Moz prefixes) margin-startmargin-End (only Chrome and safari support, And you need to add the WebKit prefix)-webkit-margin-before-webkit-margin-after

"Contour Outline"

(ie7- not supported) Outlineoutline-widthoutline-coloroutline-style (ie not supported) outline- Offset

"Box-sizing"

[note] Only Firefox supports Padding-box property values

(ie7- not supported) box-sizing

Layout class Properties

"Display"

Note Ie7-Browser does not support table class property values

(Fully compatible)
Display

Floating

(fully compatible) float Clear

Positioning

Note ie6-does not support fixed positioning position:fixed

(fully compatible) Positionleftrighttopbottomz-index

"Overflow related"

(Fully compatible) overflow
Overflow-x
Overflow-y
Clip
Visibility

(ie not supported)
Resize

"Flex"

(ie9- not supported) Flex-directionflex-wrapflex-flowjustify-contentalign- itemsalign-contentalign-selfflex-basisflex-growflex-  Shrinkflexorder

"Multi-Column Layout"

(ie10+ and chrome browsers support standard notation, Firefox, Safari and Mobile Android, iOS need to prefix) column-widthcolumn-  Countcolumn-gapcolumn-rulecolumn-span (Firefox does not support this property) columns (only Firefox supports prefixed column -Fill property) column-fill

"Grid"

(ie9-not supported, ie10+ need to add-ms-prefix, Android4.)4.4-Not supported, IOS10.2-not supported) grid-template-Rowsgrid-template-Columnsgrid-template-Areasgrid-column-Gapgrid-row-Gapgrid-Gapgrid-row-Startgrid-row-Endgrid-Rowgrid-column-Startgrid-column-Endgrid-Columngrid-Areagrid-auto-Flowgrid-auto-Rowsgrid-auto-columnsjustify-itemsjustify-selfalign-itemsalign-self

Text Class Properties

"Fonts Font"

(fully compatible) Fontfont-familyfont-sizefont-stylefont-variantfont-  Weightline-height@font-face

"First line indent text-indent"

(fully compatible) text-indent

"Snap To"

Note ie7-the percentage value of vertical-align in the browser does not support decimal line height

(fully compatible) text-alignvertical-align

(Not supported by Safari, IOS, androis4.4-browser)
Text-align-last

Interval

(fully compatible) Word-spacingletter-spacing

"Case Text-transform"

(fully compatible) text-transform

"Dash text-decoration"

(fully compatible) text-decoration

"White space character White-space"

Note Ie7-Browser does not support both Pre-line and Pre-wrap property values

(fully compatible)white-space

"Line Break"

[Note 1] The Overflow-wrap is recommended to replace Word-wrap with

[Note 2] The mobile side currently does not support Word-break property values keep-all

(fully compatible) Word-Wrap
Word-break (ie not supported) overflow-wrap

"Text Direction"

(Fully compatible) Directionunicode-bidi
(Safari and mobile iOS and Android need to add -webkit- prefix; IE browser only supports its own private property values) writing-mode

"Text Overflow text-overflow"

(fully compatible) text-overflow

"Text Shadow Text-shadow"

(ie9- not supported) text-shadow

Modifier class Properties

"Background Background"

(fully compatible) Backgroundbackground-colorbackground-imagebackground-repeatbackground -Position (IE8- not supported) background-attachmentbackground-clipbackground-size

"Foreground and transparency"

(fully compatible) color (IE8- not supported) opacity

"Color Mode"

Note Ie7-does not support color:transparent, but supports background-color:transparent and border-color:transparent

(fully compatible) named color 16 binary
Rgb
(IE8- not supported) CurrentColor
RGBA
Hsl
HSLA

Cursors cursor

Note Ie7-does not support extended styles

(fully compatible) cursor

"Transition Transition"

(ie9-not supported, Safari3. 1-6, IOS3. 2-6.1, Android2. 1-4. 3 need to add-webkit- prefix) transition-propertytransition-Durationtransiton -timing-functiontransition-delaytransition

"Deformed Transform"

(ie9-not supported, Safari3. 1-8, Android2. 1-4.4. 4, IOS3. 2-8. 4 need to add a prefix) transformtransform-origin
Transform-styleperspectiveperspective-originbackface-visibility

"Gradient Gradient"

Ie9-not supported, safari4-5, ios3.2-4.3, android2.1-3 only support linear gradients, and need to add-webkit-;safari5.1-6, ios5.1-6.1, The android4-4.3 supports linear and radial gradients and requires the addition of-webkit-

"Animated animation"

(ie9-not supported; safari4-8, IOS3. 2-8.4, Android2. 1-4.4. 4 need to add-webkit- prefix) animationanimation-nameanimation-  Durationanimation-timing-functionanimation-delayanimation-iteration-countanimation -directionanimation-play-stateanimation-fill-mode

"Blending Mode"

(ie browser, android4. 4-not supported, Safari and iOS need to add-webkit- prefix) mix-blend-modebackground-blend-modeisolation 

"Filter Filter"

(ie browser and android4. 3-Browser not supported, Android4. 4+ need to add-webkit- prefix) filter

"Reflection Box-reflect"

Only Chrome and Safari support, and you need to add the-webkit-prefix

"Will-change"

(ie13+, chrome49+, Safari9. 1+, IOS9. 3+, android52+)'ll-change

Other class properties

Table

(fully compatible) border-collapsetable-layoutcaption-side (IE7- not supported) border-  Spacingempty-cells

"Paging"

(fully compatible) page-break-afterpage-break-beforepage-Break- Inside (IE7- not supported) orphans (ie and mobile not supported) Windows

"Selector"

(fully compatible) wildcard selector    * element selector   div class selector     . Boxid selector     #box后代选择器   div A group selector   h1,p (IE6- not supported) property selector    h1[ class ] child element  selector >+ p (IE7-~ P

"Pseudo-Class"

(fully compatible): link:visited (IE6-does not support setting pseudo-classes for elements other than <a>): Hover:active  (IE7- not supported): Focus:lang () (IE8- not supported): target:enabled   :d isabled   :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 Element"

(ie6-browser is supported only if there is a space between the selector part and the left Brace ):first-letter:first-line(IE7- not supported): Before:after ( IE8- not supported):: Selection

"keywords"

(ie7- Browser not supported) inherit (ie browser not supported) initial (ie not supported, Safari9-not supported, iOS9. 2-not supported, Android4. 4.4- not supported) Unsetall (only safari9. 1+ and iOS9. 3+ support) revert

"Calc"

[Note that]android4.4-4.4.4 only supports addition and subtraction.] IE9 not supported for Backround-position

(ie8-, Safari5. 1-, ios5. 1-, Android4. 3- not supported) Calc

Unit

(fully compatible) PX inch cmmmqptpcemexch (IE8- not supported) REM (IE8-Browser not supported, IOS7. 1-not supported, Android4. 3- not supported, not supported for Vmax all IE browsers) Vhvwvminvmax

CSS compatibility detailed