CSS compatibility detailed

Source: Internet
Author: User
Tags visibility

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"


"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


[note] Only Firefox supports Padding-box property values

(ie7- not supported) box-sizing

Layout class Properties


Note Ie7-Browser does not support table class property values

(Fully compatible)


(fully compatible) float Clear


Note ie6-does not support fixed positioning position:fixed

(fully compatible) Positionleftrighttopbottomz-index

"Overflow related"

(Fully compatible) overflow

(ie not supported)


(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


(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)


(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
(IE8- not supported) CurrentColor

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

"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


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

Other class properties


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


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


(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


(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


(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


[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


(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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.