鏂囧皢浠嬬粛CSS濯掍綋鏌ヨ鐨勫嚑涓柊鐗规€э細prefers-reduced-motionprefers-color-schemeprefers-contrastprefers-reduced-transparencyprefers-reduced-data寰堝ソ鍦板埄鐢ㄤ簡瀹冧滑锛岃繖鍙互鎻愰珮鎴戜滑缃戠珯鐨勫仴澹€у拰鍙闂€э紒浜掕仈缃戝彂灞曞埌浠婂ぉ锛屽浜庢垜浠殑鍓嶇鏉ヨ锛屾垜浠殑鍏虫敞鐐瑰簲璇ヤ笉浠呬粎鏄垜浠埗浣滃嚭鏉ョ殑椤甸潰鑳戒笉鑳界敤锛屾洿闇€瑕佸叧娉ㄧ殑鏄垜浠殑椤甸潰鑳戒笉鑳界敤锛屾垜浠湁娌℃湁閲囧彇鍏冲績鏇村瀹㈡埛锛熻鐭ラ亾鎴嚦2020骞?2鏈堬紝涓浗缃戞皯瑙勬ā宸茶揪9.89浜匡紙鏁版嵁鏉ユ簮鈥斺€旂47鏉°€婁腑鍥戒簰鑱旂綉缁滃彂灞曠姸鍐电粺璁℃姤鍛娿€嬶級锛屽苟涓嶆槸姣忎釜鐢ㄦ埛閮藉湪浣跨敤iPhone12ProMax杩欐牱鐨勯珮绔棗鑸帮紝鏇村浜哄彲鑳界敤璧锋潵杩樻槸鐧惧厓鏈猴紝鍗冨厓鏈猴紝鍗佸嚑骞村墠鐨凱C銆傚苟闈炴瘡涓敤鎴烽兘韬綋鍋ュ悍鎴栬韩浣撳仴搴凤紝浼氭湁鍚勭瑙嗚闅滅銆佸惉鍔涢殰纰嶅拰琛屽姩闅滅鐨勭敤鎴枫€傛垜浠殑椤甸潰闇€瑕佹笎杩涘紡澧炲己锛屼娇鐢ㄥ悇绉嶆柊鐨勩€佽姳閲岃儭鍝ㄧ殑涓滆タ锛屾坊鍔犲悇绉嶇偒閰风殑鏁堟灉銆傚悓鏃惰繕瑕佽€冭檻浣庣鏈哄瀷鐨勭敤鎴蜂綋楠岋紝鑰冭檻涓€浜涙畫闅滀汉澹殑浣跨敤锛屾垨鑰呭皧閲嶇敤鎴风殑涓€у寲閰嶇疆銆傚熀浜庢锛孋SS瑙勮寖鎻愬嚭浜嗕竴绯诲垪鏈夌泭鐨勫睘鎬ф潵閫傚簲鐢ㄦ埛鐨勪竴浜涗釜鎬у寲閰嶇疆锛屾彁楂橀〉闈㈢殑鍙闂€у拰鍋ュ．鎬с€備篃灏辨槸涓婇潰鎻愬埌鐨?涓猵refers-*鐨勫唴瀹癸紝涓嬮潰鎴戜滑涓€涓€浠嬬粛銆侰SS@media瑙勮寖prefers-reduced-motion锛宲refers-color-scheme锛宲refers-contrast锛宲refers-reduced-transparency锛宲refers-reduced-data閮藉睘浜嶤SS@media瑙勮寖鐨勫唴瀹广€傛渶鏂扮殑CSS@media瑙勮寖宸茬粡鍒颁簡绗簲鐗堚€斺€擬ediaQueriesLevel5銆傚畠浠殑鐢ㄦ硶鍩烘湰鐩稿悓锛屽儚杩欐牱锛岀被浼间簬鎴戜滑缁忓父鍐欑殑viewportmediaquery锛屼互prefers-reduced-motion涓轰緥锛?ele{animation:aniName5sinfinitelinear;}@media(prefers-reduced-杩愬姩锛氬噺灏戯級{.ele{鍔ㄧ敾锛氭棤锛涢偅涔堬紝瀹冧滑閮芥槸鍋氫粈涔堢敤鐨勶紵prefers-reduced-motion闄嶄綆鍔ㄧ敾鏁堟灉prefers-reduced-motion瑙勫垯鏌ヨ鐢ㄤ簬闄嶄綆鍔ㄧ敾鏁堟灉銆傞櫎浜嗛粯璁よ鍒欎箣澶栵紝鍙湁涓€涓娉曞€紁refers-reduced-motion锛歳educe銆傚惎鐢ㄨ繖涓鍒欏悗锛屽氨鐩稿綋浜庡憡璇夌敤鎴蜂唬鐞嗭紝甯屾湜浠栫湅鍒扮殑椤甸潰鍙互鍒犻櫎鎴栬€呮浛鎹竴浜涜涓€浜涜闅滀汉澹笉鑸掓湇鐨勫姩鐢荤被鍨嬨€傝鑼冪殑鍘熷鏂囨湰锛氳〃绀虹敤鎴峰凡閫氱煡绯荤粺浠栦滑鏇村枩娆竴涓晫闈紝璇ョ晫闈㈠彲浠ュ垹闄ゆ垨鏇挎崲鍩轰簬杩愬姩鐨勫姩鐢荤被鍨嬶紝杩欎簺鍔ㄧ敾浼氬紩鍙戝墠搴繍鍔ㄩ殰纰嶆偅鑰呯殑涓嶉€傘€傛垜鍙互璋锋瓕缈昏瘧涓€涓嬶紝缈昏瘧杩囨潵灏辨槸鍓嶅涵杩愬姩闅滅銆傛垜璁や负杩欐槸涓嶅鐨勩€傝胺姝屼竴涓嬶紝鏄竴绉嶄細寮曡捣澶存檿鐨勭梾銆備緥濡傦紝涓€涓姩鐢绘瘡绉掗棯鐑佸娆★紝杩欎細缁欐偅鑰呭甫鏉ヤ笉閫傘€備娇鐢ㄦ柟娉曡繕鏄笂闈㈢殑浠ｇ爜锛?ele{animation:aniName5sinfinitelinear;}@media(prefers-reduced-motion:reduce){.ele{animation:none;濡傛灉鎴戜滑鏈夎繖鏍风殑鍔ㄧ敾锛氬綋鐢ㄦ埛鎵撳紑prefers-reduced-motion:reduce鏃讹紝瀹冣€嬧€嬪簲璇ヨ绉婚櫎銆傞偅涔堝浣曞惎鐢ㄨ繖涓€夐」鍛紵MDN--prefers-reduced-motion璇达細InGTK/Gnome,itispossibletosetgtk-enable-animations'savalueoffalsecanbesetunderthe[Settings]moduleinthe[Settings]moduleinGTK3'sconfigurationfilegtk-enable-animations=false鍦╓indows10涓細璁剧疆>杞绘澗浣跨敤>鏄剧ず>鍦╓indows涓樉绀哄姩鐢诲湪Windows7涓細鎺у埗闈㈡澘>杞绘澗浣跨敤>?鐢佃剳鏄惁鏇存槗浜庢煡鐪?鍏抽棴涓嶅繀瑕佺殑鍔ㄧ敾鍦∕acOS涓細绯荤粺鍋忓ソ璁剧疆>杈呭姪鍔熻兘>鏄剧ず>鍑忓皯鍔ㄧ敾鍦╥OS涓婏細璁剧疆>甯歌>杈呭姪鍔熻兘>鍑忓皯鍔ㄧ敾鍦ˋndroid9+涓婏細璁剧疆>杈呭姪鍔熻兘灞炴€?鍒犻櫎鍔ㄧ敾棣栭€夐鑹叉柟妗圓dapttolightanddarkthemeprefers-color-scheme杩樻槸寰堝鏄撶悊瑙ｇ殑锛屽畠鐢ㄦ潵鍖归厤鐢ㄦ埛閫氳繃鎿嶄綔绯荤粺璁剧疆鐨勪寒鎴栧锛堟殫锛夋ā寮忋€傚畠鏈変袱涓笉鍚岀殑鍊硷細prefers-color-scheme:light:brightmodeprefers-color-scheme:dark:night(娣辫壊)妯″紡璇硶濡備笅锛屽鏋滄垜浠粯璁や负bright妯″紡锛屽彧闇€瑕侀€傞厤night妯″紡鍗冲彲锛氳韩浣搟鑳屾櫙锛氱櫧鑹诧紱棰滆壊锛氶粦鑹诧紱}@media锛堥閫夐鑹叉柟妗堬細娣辫壊锛墈涓讳綋{鑳屾櫙锛氶粦鑹诧紱鐧介鑹?}}褰撶劧锛屼互涓婂彧鏄疌SS浠ｇ爜鐨勬彁绀猴紝瑕佸仛涓ゅ涓婚鐨勫垏鎹㈣偗瀹氫笉鏄偅涔堢畝鍗曪紝鏂规硶鏈夊緢澶氥€傛湰鏂囦笉鍐嶈禈杩般€傝鑰呭彲浠ヤ簡瑙ｅ疄鐜颁富棰樺垏鎹紝鎴栬€呮槑鏆楀垏鎹㈢殑鍚勭鏂规銆俻refers-contrast璋冩暣鍐呭棰滆壊瀵规瘮搴refers-contrast杩欎釜CSS濯掍綋鍑芥暟鐢ㄤ簬妫€娴嬬敤鎴锋槸鍚﹁姹傜綉椤靛唴瀹逛互鏇撮珮鎴栨洿浣庣殑瀵规瘮搴﹀憟鐜般€傚叾涓細prefers-contrast:no-preference:榛樿鍊硷紝涓嶈鍋氫换浣曟敼鍙榩refers-contrast:less:鎯充娇鐢ㄥ姣斿害杈冧綆鐨勭晫闈refers-contrast:more:鎯充娇鐢ㄥ姣斿害杈冮珮鐨勭晫闈㈠彇prefers-contrast:less涓轰緥锛岃娉曞涓嬶細body{background:#fff;//鏂囧瓧鍜岃儗鏅殑瀵规瘮搴︿负5.74color:#666;}//鎻愰珮瀵规瘮搴media(prefers-contrast:more){body{background:#fff;//鏂囧瓧鍜岃儗鏅姣斾负21color:#000;}}浠ヤ笂鍙槸涓€涓吉CSS浠ｇ爜锛屽彲鑳介渶瑕佸涓€浜涚壒瀹氱殑鍏冪礌杩涜澶勭悊锛屾垨鑰呬娇鐢╢ilter:contrast()杩涜鍏ㄥ眬缁熶竴澶勭悊銆傞厤缃紑鍚悗锛岀敤浜庡疄鐜扮被浼艰繖鏍风殑鍔熻兘锛氶偅涓轰粈涔堥渶瑕佽皟鏁撮〉闈㈢殑瀵规瘮搴﹀憿锛熻繖鏄负浜嗚涓€浜涜闅滅敤鎴锋湁鏇村ソ鐨勪綋楠屻€傝繖閲屾湁涓€浜涘叧浜庡姣斿害鍙闂€х殑鐭ヨ瘑銆傚唴瀹规憳鑷垜鐨勮繖绡囨枃绔犫€斺€擨ncompleteGuidetoFront-EndGoodPracticeAccessibility鈥斺€擟olorContrast棰滆壊涔熸槸鎴戜滑姣忓ぉ闇€瑕佹墦浜ら亾鐨勫睘鎬с€傚浜庡ぇ澶氭暟瑙嗗姏姝ｅ父鐨勭敤鎴锋潵璇达紝浠栦滑鍙兘瀵归〉闈㈢殑棰滆壊娌℃湁閭ｄ箞鏁忔劅銆備絾瀵逛簬涓€灏忛儴鍒嗚壊寮辫壊鐩茬敤鎴锋潵璇达紝浠栦滑瀵圭綉绔欑殑棰滆壊浼氭瘮杈冩晱鎰燂紝璁捐涓嶅綋浼氱粰浠栦滑璁块棶缃戠珯甯︽潵鏋佸ぇ鐨勪笉渚裤€備粈涔堟槸鑹插僵瀵规瘮浣犳湁娌℃湁鍏冲績杩囬〉闈㈠唴瀹圭殑鍛堢幇锛岀敤鐨勯鑹叉槸鍚﹀悎閫傦紵鑹茬洸鍜岃壊鐩茬敤鎴疯兘鍚︽甯哥湅鍒板唴瀹癸紵鍠勭敤鑹插僵鍦ㄤ换浣曟椂鍊欓兘鏄湁鐩婄殑锛岃€屼笉浠呴檺浜庤壊寮便€佽壊鐩茬殑鐢ㄦ埛銆傚湪鎴峰浣跨敤鎵嬫満鏃讹紝鍦ㄥ己鐑堢殑闃冲厜涓嬪緢闅剧湅娓咃紝浣嗙鍚堟棤闅滅鏍囧噯鐨勯珮娓呫€侀珮瀵规瘮搴︾殑鏂囧瓧鏇存槗闃呰銆傝繖閲屾湁涓€涓蹇碘€斺€旇壊褰╁姣斻€傜畝鍗曠殑璇达紝鎻忚堪鐨勬槸涓ょ棰滆壊涔嬮棿浜害锛圔rightness锛夌殑宸紓銆傚綋搴旂敤鍒版垜浠殑椤甸潰涓椂锛屽ぇ澶氭暟鎯呭喌鏄儗鏅鑹诧紙background-color锛夊拰鍐呭棰滆壊锛坈olor锛変箣闂寸殑瀵规瘮銆傛渶鏉冨▉鐨勪簰鑱旂綉鏃犻殰纰嶈鑼冣€斺€擶CAGAA瑙勮寖瑙勫畾锛屾墍鏈夐噸瑕佸唴瀹圭殑棰滆壊瀵规瘮搴﹂渶瑕佽揪鍒?.5:1鎴栦互涓婏紙瀛椾綋澶т簬18鏃朵负3:1鎴栦互涓婏級锛屾墠鑳藉叿鏈夎壇濂界殑鍙鎬?鍊熺敤涓€寮犲浘鈥斺€旂煡涔庘€斺€旀帹鑽愮殑15娆綰I璁捐宸ュ叿锛屽姪浣犺交鏉炬棤闅滅锛氭樉鐒讹紝鍦ㄤ笂闈㈡渶鍚庝竴涓緥瀛愪腑锛屾枃瀛楀凡缁忓緢涓嶆竻鏅颁簡锛屾櫘閫氱敤鎴峰緢闅剧湅娓呮銆傞鑹插姣旀鏌ュ伐鍏稢hrome娴忚鍣ㄥ緢鏃╀互鍓嶅氨鏀寔妫€鏌ュ厓绱犵殑棰滆壊瀵规瘮銆備互鎴戠洰鍓嶆鍦ㄥ啓鐨勯〉闈负渚嬶紝GithubIssues缂栬緫椤甸潰涓婄殑涓や釜鎸夐挳锛歳eview鍏冪礌锛屽彲浠ュ垎鍒湅鍒颁袱涓寜閽殑棰滆壊瀵规瘮锛氬彲浠ョ湅鍒扮櫧鑹叉寜閽湪缁胯壊涓婄殑棰滆壊瀵规瘮鑳屾櫙涓嶈揪鏍囷紝杩樻墦涓婇粍鑹叉劅鍙瑰彿銆傚彟澶栵紝鍦╮eview鍏冪礌鐨勬牱寮忕晫闈㈢殑棰滆壊閫夋嫨鍣ㄤ腑锛屾敼鍙橀鑹蹭篃鍙互鐩磋鐨勭湅鍒板綋鍓嶇殑棰滆壊瀵规瘮锛歱refers-reduced-transparency鍑忓皯閫忔槑鍏冪礌prefers-reduced-transparency杩欎釜CSS濯掍綋鍑芥暟鏄敤鏉ユ娴嬫槸鍚︾敤鎴疯姹傚噺灏戠綉椤典腑鐨勯€忔槑鍏冪礌:prefers-contrast:no-preference:榛樿鍊硷紝涓嶈鍋氫换浣曟敼鍙榩refers-contrast:reduce:甯屾湜鐣岄潰鍏冪礌涓殑閫忔槑鍏冪礌灏藉彲鑳藉皯鍙杙refers-contrast:reduce涓轰緥锛岃娉曞涓嬶細.ele{opacity:0.5;}//鍑忓皯閫忔槑鍏冪礌@media(prefers-contrast:reduce){.ele{opacity:1;涓嶈繃杩欒繕鏄疄楠屽鐨勫姛鑳斤紝鏆傛椂娌℃湁娴忚鍣ㄦ敮鎸佽繖涓獟浣撴煡璇馃槩prefers-reduced-data鍑忓皯鏁版嵁浼犺緭銆傚浜庝竴浜涚綉閫熶笉浣虫垨娴侀噺鏄傝吹鐨勫湴鍖猴紝鐢ㄦ埛浼氬笇鏈涘噺灏戦〉闈腑鐨勬祦閲忚姹傘€傚熀浜庢锛屾湁prefers-reduced-data銆俻refers-reduced-data姝SS濯掍綋鏌ヨ鍔熻兘鐢ㄤ簬閫氱煡鐢ㄦ埛浠ｇ悊瀹冨笇鏈涘噺灏戦〉闈㈢殑娴侀噺璇锋眰銆俻refers-reduced-data:no-preference:榛樿鍊硷紝涓嶈鍋氫换浣曟敼鍙榩refers-reduced-data:reduce:甯屾湜鐣岄潰鍏冪礌灏戞秷鑰楃綉缁滄祦閲忎互prefers-reduced-data:reduce涓轰緥锛岃娉曞涓嬪涓嬶細.ele{background-image:url(image-1800w.jpg);}//闄嶄綆鍥惧儚璐ㄩ噺@media(prefers-reduced-data:reduce){.ele{background-image:url(image-600w.jpg);}}褰撴娴嬪埌鐢ㄦ埛鍚敤浜唒refers-reduced-data:reduce锛屾垜浠皢鎻愪緵鍘嬬缉鐜囨洿楂樸€佸昂瀵告洿灏忋€佹祦閲忔秷鑰楁洿灏戠殑鍥剧墖銆傚綋鐒讹紝涓婇潰鐨勪唬鐮佸彧鏄竴涓彁绀猴紝鍏跺疄鎴戜滑鑳藉仛鐨勮繕鏈夋洿澶氥€備笉杩囪繖杩樻槸涓€涓疄楠屽鍔熻兘锛岀洰鍓嶈繕娌℃湁娴忚鍣ㄦ敮鎸佽繖涓獟浣撴煡璇馃槩褰撶劧锛屼粠Chrome85+寮€濮嬶紝浣犲彲浠ラ€氳繃鍚敤#enable-experimental-web-platform-features瀹為獙瀹ら€夐」鏉ュ惎鐢ㄨ繖涓姛鑳斤紒鏈€鍚庯紝鎻愰珮缃戠珯鐨勫彲璁块棶鎬у拰鐢ㄦ埛浣撻獙骞朵笉瀹规槗銆傚湪瑙勮寖涓嶆柇浼樺寲瀹屽杽鐨勫悓鏃讹紝鎴戜滑涔熼渶瑕佸悓姝ユ彁鍗囪嚜宸辩殑鐩稿叧鐭ヨ瘑鍜屾妧鑳姐€傞殢鐫€鐢ㄦ埛鍩烘暟鐨勬墿澶э紝蹇呯劧浼氬嚭鐜板悇绉嶉渶姹傜殑鐢ㄦ埛锛岃繖浜涚敤鎴风幇鍦ㄤ笉澶噸瑙嗐€傚彲璁块棶鎬у湪鏈潵鑲畾浼氬彉寰楄秺鏉ヨ秺閲嶈銆傚ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
