StateofCSS2022寮曞叆鐨凜SS鐗规€с€傛瑙?022宸茬粡鏀寔鐨勭壒鎬layer瑙ｅ喅浜嗕笟鍔′唬鐮佺殑!important闂銆備负浠€涔堜笟鍔′唬鐮侀渶瑕佷娇鐢?important鏉ヨВ鍐抽棶棰橈紵鍥犱负css鐨勪紭鍏堢骇涓庢枃浠跺０鏄庣殑鍏堝悗椤哄簭鏈夊叧锛岃€岀幇鍦ㄥぇ閲忎笟鍔￠噰鐢ㄥ姩鎬佹彃鍏ss鐨勬柟妗堬紝鎻掑叆鐨勬椂鏈轰笌js鏂囦欢鐨勫姞杞芥墽琛屾椂闂存湁鍏筹紝瀵艰嚧涓嶇ǔ瀹氶鏍间紭鍏堛€侤layer鍏佽涓氬姟瀹氫箟鏍峰紡浼樺厛绾с€傚眰瓒婇潬鍚庯紝浼樺厛绾ц秺楂樸€傛瘮濡備笅闈㈢殑渚嬪瓙锛宱verride瀹氫箟鐨勬牱寮忎紭鍏堢骇楂樹簬framework锛欯layerframework,override;@layeroverride{.title{棰滆壊锛氱櫧鑹诧紱}}@layerframework{.title{棰滆壊锛氱孩鑹诧紱}}subgridsubgrid瑙ｅ喅浜嗙綉鏍煎祵濂楁椂锛屽瓙缃戞牸鐨勪綅缃拰杞ㄨ抗涓嶈兘瀹屽叏瀵归綈鐖剁綉鏍肩殑闂銆傚彧闇€鍦ㄥ瓙缃戞牸鏍峰紡涓畾涔変互涓嬪唴瀹癸細.sub-grid{display:grid;缃戞牸妯℃澘鍒楋細瀛愮綉鏍硷紱grid-template-rows:subgrid;}@container@container浣垮厓绱犲搷搴旂壒瀹氱殑瀹瑰櫒澶у皬銆傚湪@container鍑烘潵涔嬪墠锛屾垜浠彧鑳戒娇鐢ˊmedia鏉ュ搷搴旇澶囩殑鏁翠綋灏哄锛岃€孈container鍙互灏嗗搷搴旈檺鍒跺湪鏌愪釜DOM瀹瑰櫒涓細//璁剧疆.container瀹瑰櫒鐨刢ontainer-name涓篴bc銆俢ontainer{container-name:abc;}//鏍规嵁abc瀹瑰櫒鐨勫ぇ灏忚繘琛屽搷搴擛containerabc(max-width:200px){.text{font-size:14px;}}涓€绉嶄娇鐢ㄥ満鏅槸锛氫笉鍚?container鍏冪礌涓殑鍏冪礌鏍峰紡鍙互涓嶅悓锛屽彇鍐充簬褰撳墠.container鐨勬牱寮忋€俬wb鏀寔hwb(hue,whiteness,blackness)definecolor:.text{color:hwb(30deg0%20%);}涓変釜鍙傛暟鍒嗗埆琛ㄧず锛氳搴0-360]銆佹贩鐧芥瘮渚嬨€佹贩榛戞瘮渚?瑙掑害瀵瑰簲鑹茶疆鍦ㄤ笉鍚岃搴︾殑浣嶇疆锛屾瘡涓搴﹂兘鏈夎嚜宸辩殑棰滆壊鍊笺€傝繖涓姛鑳介潪甯搁€傚悎浠庤壊杞殑鏌愪釜浣嶇疆鐩磋鍦版寫閫変竴绉嶉鑹层€俵ch,oklch,lab,oklab,display-p3绛塴ch(lightness,chroma,hue)锛屽嵆浜害銆侀ケ鍜屽害鍜岃壊璋冿紝璇硶濡傦細.text{color:lch(50%,100,100deg);}chroma(楗卞拰搴?鏄寚棰滆壊鐨勯矞鑹崇▼搴︼紝棰滆壊瓒婇珮锛岄鑹茶秺浜紝棰滆壊瓒婁綆锛岄鑹茶秺鏆椼€傝壊鐩革紙hue锛夋槸鎸囪壊鏉垮搴旇搴︾殑棰滆壊鍊笺€俹klch(lightness,chroma,hue,alpha)锛屽嵆浜害銆侀ケ鍜屽害銆佽壊鐩稿拰閫忔槑搴︺€?text{color:oklch(59.69%0.15649.77/0.5);}鏇村缁嗚妭涓嶅啀涓€涓€鍒椾妇銆傛€讳箣锛岃壊褰╃殑琛ㄧ幇鏂瑰紡澶氱澶氭牱锛屼篃鍙互鐩镐簰杞崲銆俢olor-mix()css璇硶鏀寔鐨刴ix绫讳技浜巗ass鐨刴ix()鍑芥暟銆傚嚱鏁帮細.text{color:color-mix(insrgb,#34c9eb10%,white);}绗竴涓弬鏁颁负棰滆壊绫诲瀷锛屽hwb銆乴ch銆乴ab銆乻rgb绛夛紝绗簩涓弬鏁颁负base棰滆壊鍜岀櫨鍒嗘瘮锛岀涓変釜鍙傛暟鏄娣峰悎鐨勯鑹层€俢olor-contrast()璁╂祻瑙堝櫒鑷姩璋冩暣涓嶅悓鑳屾櫙涓婄殑鍙闂鑹层€傛崲鍙ヨ瘽璇达紝褰撹儗鏅お鏆楁椂鑷姩浣跨敤鐧借壊鏂囨湰锛屽綋鑳屾櫙澶寒鏃惰嚜鍔ㄤ娇鐢ㄩ粦鑹叉枃鏈細.text{color:color-contrast(black);}涔熸敮鎸佹洿澶氱殑鍙傛暟銆傛湁鍏宠缁嗕俊鎭紝璇峰弬闃呬娇鐢–SSColor-Contrast()绠＄悊鍙闂殑璁捐绯荤粺涓婚銆傜浉瀵归鑹茶娉曞彲浠ユ牴鎹娉曠被鍨嬪湪涓€瀹氱▼搴︿笂鏀瑰彉鏌愪釜鍊硷細.text{color:hsl(fromvar(--color)hscalc(l-20%));}濡備笂锛屼緥濡傛垜浠湪hsl棰滆壊妯″紡涓嬶紝浣跨敤--color鍙橀噺灏嗗叾l锛堜寒搴︼級浜害闄嶄綆20%銆傛笎鍙樿壊鍛藉悕绌洪棿娓愬彉鑹茬幇鍦ㄤ篃鏀寔鍛藉悕绌洪棿鐨勫０鏄庯紝渚嬪锛?text{background-image:linear-gradient(torightinhsl,black,white);}杩欐槸涓轰簡瑙ｅ喅涓€涓彨鍋氱伆鑹叉鍖虹殑闂锛屽嵆濡傛灉娓愬彉鑹茬粡杩囬ケ鍜屽害涓?鐨勫尯鍩燂紝涓棿浼氭湁涓€娈电伆鑹诧紝鎸囧畾hsl绛夊懡鍚嶇┖闂村悗鍙互缁曡繃鐏拌壊姝诲尯銆傚洜涓篽sl瀵瑰簲鑹茶疆锛屾墍浠ユ笎鍙樼殑閫昏緫鏄部鐫€鍦嗗姬鐨勬柟鍚戠粫鑹茶疆锛岃€屼笉鏄洿鎺ラ€氳繃鍦嗗績锛堝渾蹇冮ケ鍜屽害浣庯紝浼氬憟鐜扮伆鑹诧級銆俛ccent-coloraccent-color涓昏瀵瑰崟閫夈€佸閫夈€佽繘搴︽潯绛夊師鐢熻緭鍏ョ粍浠舵湁鏁堬紝鎺у埗瀹冧滑鐨勪富棰樿壊锛歜ody{accent-color:red;}姣斿杩欐牱璁剧疆鍚庯紝鍗曢€夊拰澶氶€夌殑鑳屾櫙棰滆壊浼氱浉搴斿彉鍖栵紝杩涘害鏉＄殑妯潯鍜屼腑蹇冮鑹蹭篃浼氱浉搴斿彉鍖栥€俰nertinert鏄竴涓睘鎬э紝鍙互浣垮叿鏈夎灞炴€х殑dom鍙婂叾瀛愬厓绱犱笉鍙闂紝鍗充笉鑳借鐐瑰嚮銆侀€変腑銆佸揩鎹烽敭閫変腑锛?divinert>...
