常用前端 CSS 新特性,兼容方案一览

235 阅读6分钟
特性阶段ChromeEdge/IESafariFirefoxOpera解决方案可达到效果postcss 版本stylelint
round()mod()rem()Stage 212512515.4118111@csstools/postcss-stepped-value-functions部分可降级8function-disallowed-list
light-darkStage 212312317.5120109@csstools/postcss-light-dark-function无法完美降级8function-disallowed-list
nestingStage 212012017.2117106postcss-nesting完美降级8max-nesting-depth
pow()sqrt()hypot()log()exp()Stage 212012015.4118106@csstools/postcss-exponential-functions部分可降级8function-disallowed-list
:dirStage 212012016.417106postcss-dir-pseudo-class优雅降级8selector-pseudo-class-disallowed-list
Relative Color SyntaxStage 211911916.4128106@csstools/postcss-relative-color-syntax部分可降级8declaration-property-value-disallowed-list
@scope 11811817.4 104 无法完美降级8at-rule-disallowed-list
PostCSS Logical ResizeStage 21181181663104@csstools/postcss-logical-resize优雅降级8declaration-property-value-allowed-list
Logical Float And ClearStage 21181181555104@csstools/postcss-logical-float-and-clear完美降级8declaration-property-value-allowed-list
font-variantStage 41171179.134103postcss-font-variant优雅降级8declaration-property-value-disallowed-list
display multi-keywordStage 21151151570101@csstools/postcss-normalize-display-values部分可降级8declaration-property-value-allowed-list
image-setStage 2113113108899postcss-image-set-function完美降级8function-disallowed-list
lab()lch()Stage 21111111511398postcss-lab-function优雅降级8function-disallowed-list
oklab()oklch()Stage 211111115.411397@csstools/postcss-oklab-function优雅降级8function-disallowed-list
sin()cos()tan()...Stage 211111115.410897@csstools/postcss-trigonometric-functions部分可降级8function-disallowed-list
color-mix()Stage 211111116.211397@csstools/postcss-color-mix-function完美降级8function-disallowed-list
color()Stage 21111111511397@csstools/postcss-color-function部分可降级8function-disallowed-list
conic-gradient()Stage 211111116.212797@csstools/postcss-gradients-interpolation-method优雅降级8function-disallowed-list
media-queries-aspect-ratio-number-valuesStage 211011016.478 @csstools/postcss-media-queries-aspect-ratio-number-values完美降级8 
Constants pi e ...Stage 21101101611496 没有插件  
Font Format KeywordStage 21081084 94@csstools/postcss-font-format-keywords完美降级8 
vi vbStage 210810815.410194@csstools/postcss-logical-viewport-units优雅降级8unit-disallowed-list
icStage 210610615.49792@csstools/postcss-ic-unit优雅降级8unit-disallowed-list
@containerStage 21051051611091 没有插件 at-rule-disallowed-list
:hasStage 210510515.412191css-has-pseudoJS 降级8selector-pseudo-class-disallowed-list
Media Queries: Range SyntaxStage 310410416.46391@csstools/postcss-media-minmax完美降级8 
hwb()Stage 2101101159687@csstools/postcss-hwb-function完美降级8function-disallowed-list
@layerStage 2999915.49786@csstools/postcss-cascade-layers无法完美降级8at-rule-disallowed-list
overflow clip 9090168176postcss-overflow-clip优雅降级8declaration-property-value-disallowed-list
Logical PropertiesStage 28989156676postcss-logical优雅降级8 
:notStage 2888898475postcss-selector-not无法完美降级8selector-pseudo-class-disallowed-list
:isStage 28888147875@csstools/postcss-is-pseudo-class无法完美降级8selector-pseudo-class-disallowed-list
:whereStage 28888147874 没有插件8selector-pseudo-class-disallowed-list
:focus-visibleStage 2868615.4472postcss-focus-visibleJS 降级8selector-pseudo-class-disallowed-list
clamp()Stage 2797913.17566postcss-clamp部分可降级8function-disallowed-list
opacity percentageStage 2787913.17065postcss-opacity-percentage完美降级8declaration-property-value-allowed-list
Logical Overscroll BehaviorStage 27779167364@csstools/postcss-logical-overscroll-behavior 8declaration-property-value-allowed-list
Double position linear-gradientStage 2717912.16458postcss-double-position-gradients完美降级8 
overflow-shorthandStage 2687913.16155postcss-overflow-shorthand完美降级8declaration-property-value-allowed-list
Color Functional NotationStage 2657912.15252postcss-color-functional-notation完美降级8 
hex-alphaStage 26279104910postcss-color-hex-alpha完美降级8color-hex-alpha
:focus-withinStage 2607910.15247postcss-focus-withinJS 降级8selector-pseudo-class-disallowed-list
place-contentStage 2597994546postcss-place完美降级8declaration-property-value-disallowed-list
place-selfStage 25979114546postcss-place完美降级8declaration-property-value-disallowed-list
flow-root 58125791353postcss-flow-root部分可降级6declaration-property-value-allowed-list
PostCSS Text Decoration ShorthandStage 257798644@csstools/postcss-text-decoration-shorthand优雅降级8declaration-property-value-allowed-list
Grid GapStage 3571610.15244postcss-gap-properties完美降级8declaration-property-value-disallowed-list
Grid LayoutStage 3571010.15244autoprefixer无法完美降级8declaration-property-value-disallowed-list
calc(calc())Stage 25116114838@csstools/postcss-nested-calc完美降级8function-disallowed-list
break-insideStage 35010109211.5postcss-page-break优雅降级8declaration-property-value-disallowed-list
Custom PropertiesStage 349159.13136postcss-custom-properties部分可降级8function-disallowed-list
unsetStage 341139.12728@csstools/postcss-unset-value无法完美降级8declaration-property-value-disallowed-list
rebeccapurpleStage 238127337postcss-color-rebeccapurple完美降级8 
allStage 437799.12724@csstools/postcss-initial部分可降级8declaration-property-value-disallowed-list
:scopeStage 2277973215@csstools/postcss-scope-pseudo-class部分可降级8selector-pseudo-class-disallowed-list
overflow-wrapStage 2231874912.1postcss-replace-overflow-wrap完美降级8declaration-property-value-disallowed-list
calc() 1996415postcss-calc部分可降级8function-disallowed-list
filter 181363515postcss-filter-fallback部分可降级8declaration-property-value-allowed-list
any-linkStage 215796.1315postcss-pseudo-class-any-link+auto-prefix完美降级8selector-pseudo-class-disallowed-list
:in-range,:out-of-rangeStage 210135.12911 没有插件 selector-pseudo-class-disallowed-list
linear-gradient 10105.13.611.5postcss-filter-gradient部分可降级6function-disallowed-list
initial 1131.2215@csstools/postcss-initial完美降级8selector-pseudo-class-disallowed-list
rgba 193.1310postcss-filter-background部分可降级8function-disallowed-list
::before::after 1910.11.57postcss-pseudoelements部分可降级6selector-pseudo-class-disallowed-list