鏈枃灏嗗悜鎮ㄤ粙缁岰hrome87寮€濮嬫敮鎸佺殑CSSOverviewPanel锛屼互鍙婂浣曟洿濂藉湴鍒╃敤杩欎釜闈㈡澘銆傞€氳繃CSSOverviewPanel锛屽彲鑳藉府鍔╂垜浠細鏇村噯纭紙楂樹繚鐪燂級鐨勮繕鍘熻璁＄锛屽崗鍔╄璁¤蛋鏌ユ洿濂界殑绮剧畝鎴戜滑鐨凜SS浠ｇ爜锛屽崗鍔╂彁楂樼綉绔欑殑鍙闂€э紝鏇村ソ鐨勬暣浣撴瑙堢綉绔欓鏍兼竻妤氫簡瑙ｄ粈涔堟槸CSSOverviewPanelCSSOverviewPanel鐩磋瘧涓篊SSOverviewPanel锛岃繖鏄粠Chrome87寮€濮嬫敮鎸佺殑瀹為獙瀹ゅ姛鑳姐€傚睘浜庢帶鍒跺彴DevTool涓嬬殑涓€涓猅AB锛氶粯璁ゆ儏鍐典笅锛岃繖涓疄楠屽鍔熻兘鏄叧闂殑锛屼篃灏辨槸鎴戜滑鎵撳紑鎺у埗鍙版槸鐪嬩笉鍒扮殑锛岄偅涔堟€庝箞鎵撳紑鍛紵涓ょ鏂瑰紡锛氫粠DevTools鐨凷etting涓嬬殑Experiment鑿滃崟涓紝鍚敤CSSOverview鎵撳紑DevTools锛岄€氳繃Cmd+Shift+P璋冨嚭CommandMenu锛岃緭鍏howCSSOverviewCSSOverviewPanel鐨勪綔鐢ㄦ槸浠€涔堬紵OK锛屾墦寮€CSSOverview鍚庯紝杩涘叆浣犺瀹℃牳鐨勭綉绔欍€傜偣鍑绘寜閽細鍑犵閽熷悗锛屾彃浠朵細鍒嗘瀽褰撳墠椤甸潰鐨凜SS锛岃緭鍑轰竴涓畝鍗曠殑鎶ュ憡锛堟湁鐐圭被浼糒ightHouse锛夛細杩欓噷鎴戞壘浜嗕竴寮燝IF鍥捐繘琛岀畝鍗曟紨绀猴細濡備綘鎵€瑙侊紝鏁翠釜闈㈡澘鍒嗕负鍑犱釜妯″潡锛堜笅闈㈡垜鍒囧埌DevTool涓枃妯″紡绾圭悊灞曠ず锛夛細鏍峰紡瑙勫垯鐨勬暟閲忥紝绛夌瓑銆侰olors(usedcoloroverview)锛氬垪鍑洪〉闈腑鎵€鏈変笌棰滆壊鐩稿叧鐨勪俊鎭紝浣跨敤浜嗗摢绉嶈儗鏅壊锛屼娇鐢ㄤ簡鍝鏂囧瓧棰滆壊锛岃竟妗嗕娇鐢ㄤ簡鍝棰滆壊锛屼互鍙婃枃瀛椾笌鍏惰儗鏅壊鐨勯鑹插姣旓紝鍙互閫氳繃鐐瑰嚮Fontinfo锛堝瓧浣撲俊鎭級涓殑Towhichelementaspecificcolorisused鏉ヨ拷韪細娴嬮噺瀛椾綋鐨勪娇鐢ㄤ互鍙婂畠浠湪鏍峰紡琛ㄤ腑鍑虹幇鐨勯鐜囥€傚寘鎷琭ontweight鍜宭ineheightmetrics锛屽彲浠ラ€夋嫨fontmetrics鏉ユ樉绀哄彈褰卞搷鐨勫厓绱狅紝鍙互閫氳繃鐐瑰嚮杩借釜Unuseddeclarations锛堟湭浣跨敤鐨勬牱寮忚鍒欙級锛氭湭浣跨敤鐨凜SS瑙勫垯锛屽彲浠ラ€氳繃鐐瑰嚮杩借釜鍒板叿浣撶殑鏍峰紡浠ｇ爜銆傚獟浣撴煡璇紙mediaqueries锛夛細CSS濯掍綋鏌ヨ鐨勮缁嗕俊鎭紙渚嬪鏈€灏?鏈€澶у搴﹀€硷級浠ュ強瀹冧滑鍦ㄦ牱寮忚〃涓嚭鐜扮殑棰戠巼銆傚彲浠ョ偣鍑绘煡鐪嬪叿浣撶殑濯掍綋鏌ヨ鐩稿叧浠ｇ爜濡備綍鏇村ソ鍦板埄鐢–SS姒傝锛熼偅涔堬紝鎴戜滑搴旇浠€涔堟椂鍊欏紑濮嬩娇鐢ㄥ畠鎴栬€呭畠鑳藉府鍔╂垜浠仛浠€涔堝憿锛熸垜涓汉璁や负鏈夊嚑涓牳蹇冪偣锛氬璁捐绋跨殑杩樺師鏇村噯纭紙楂樹繚鐪燂級锛岃緟鍔╄璁¤蛋鏌ラ摼鎺ュ湪瀵硅璁＄杩樺師瑕佹眰鏇撮珮鐨勯〉闈€傚湪璁捐璧版煡閾炬帴涓紝闈炲父閫傚悎浣跨敤杩欎釜闈㈡澘鏉ユ鏌ラ〉闈笂鐨勯鑹蹭娇鐢ㄥ拰瀛椾綋浣跨敤鏄惁绗﹀悎瑙勮寖銆傚洜涓洪€氬父璁捐甯堜細鍒跺畾涓€绯诲垪瑙勮寖锛屾瘮濡傚湪浠€涔堝湴鏂逛娇鐢ㄤ粈涔堥鑹?瀛椾綋銆備絾鏄洜涓哄墠绔湪閲嶆瀯璁捐绋跨殑杩囩▼涓紝鐢变簬鏌愪簺鍘熷洜锛堟瘮濡傞鑹查€夋嫨鍣ㄤ笉澶熷噯纭紝鐞嗘墍褰撶劧鍦拌涓烘湁浜涢鑹插€兼槸榛戣壊鎴栫櫧鑹诧級銆傜劧鍚庝娇鐢–olor鍜孎ont妯″潡锛屼綘鍙互娓呮鍦版壘鍒颁笉鍦ㄨ鑼冭寖鍥村唴鐨勯鑹叉垨瀛椾綋骞惰繘琛屼慨鏀广€傛洿濂藉湴绠€鍖栨垜浠殑CSS浠ｇ爜鐨勬剰涔夊緢瀹规槗鐞嗚В銆備娇鐢║nuseddeclarations锛堟湭浣跨敤鐨勬牱寮忚鍒欙級妯″潡锛屾垜浠彲浠ュ緢濂界殑鎵惧埌鏈娇鐢ㄧ殑CSS浠ｇ爜锛岀‘璁ゅ悗绉婚櫎銆傛垜璁や负鍗忓姪鎻愰珮缃戠珯鐨勫彲璁块棶鎬ф槸闈炲父鏈夋剰涔夌殑銆傝緟鍔╁姛鑳斤紙Accessibility锛夛紝涔熻绉颁负A11Y锛屾槸鎴戠綉绔欏紑鍙戣繃绋嬩腑闈炲父閲嶈鐨勪竴閮ㄥ垎銆傚畠鐨勫彟涓€涓悕瀛楁槸鏃犻殰纰嶈璁°€傛彁楂樼綉绔欏彲璁块棶鎬ч€氬父鐨勬剰鎬濇槸甯姪涓€浜涙畫闅滀汉澹洿濂藉湴浣跨敤鎴戜滑鐨勭綉绔欍€傚綋鐒讹紝鎶婃棤闅滅鐩稿叧鐨勫唴瀹瑰仛濂斤紝鍏跺疄瀵瑰ぇ瀹舵洿鍙嬪ソ銆傚洜涓哄湪涓€浜涚壒娈婄殑鍦烘櫙涓嬶紝鎴戜滑涔熷彲鑳芥槸娈嬮殰浜哄＋锛屽涓嬪浘锛氬湪CSSOverview闈㈡澘涓紝鍞竴涓巃ccessibility鐩稿叧鐨勫氨鏄疌olor妯″潡涓嬬殑瀵规瘮搴︼紙Contrastissues锛夛細杩欓噷鍒楀湪page鏄剧ず鏂囨湰鐨勪綅缃紝鍏舵枃鏈鑹插拰鑳屾櫙棰滆壊鏄惁婊¤冻WCAGAA瑙勮寖涓瀹氱殑鎵€闇€瀵规瘮搴﹀€笺€傛渶鏉冨▉鐨勪簰鑱旂綉鏃犻殰纰嶈鑼冣€斺€擶CAGAA瑙勮寖瑙勫畾锛屾墍鏈夐噸瑕佸唴瀹圭殑棰滆壊瀵规瘮搴﹂渶瑕佽揪鍒?.5:1鎴栦互涓婏紙瀛椾綋澶т簬18鏃朵负3:1鎴栦互涓婏級锛屾墠鑳藉叿鏈夎壇濂界殑鍙鎬?杩欓噷鏈変竴涓蹇碘€斺€旇壊褰╁姣斻€傜畝鍗曠殑璇达紝鎻忚堪鐨勬槸涓ょ棰滆壊涔嬮棿浜害锛圔rightness锛夌殑宸紓銆傚綋搴旂敤鍒版垜浠殑椤甸潰涓椂锛屽ぇ澶氭暟鎯呭喌鏄儗鏅鑹诧紙background-color锛夊拰鍐呭棰滆壊锛坈olor锛変箣闂寸殑瀵规瘮銆傚€熺敤涓€寮犲浘鈥斺€旂煡涔庘€斺€旀帹鑽愮殑15娆綰I璁捐宸ュ叿锛屽姪浣犺交鏉炬棤闅滅锛氭樉鐒讹紝鍦ㄤ笂闈㈡渶鍚庝竴涓緥瀛愪腑锛屾枃瀛楀凡缁忓緢涓嶆竻鏅颁簡锛屾櫘閫氱敤鎴峰緢闅剧湅娓呮銆傝€屽埄鐢ㄥソCSSOverview涓殑杩欎釜鍔熻兘锛屾垜浠彲浠ュ緢瀹规槗鐨勬壘鍒颁笉瑙勮寖鐨勫湴鏂癸紝杩涜淇敼锛屽寮烘垜浠〉闈㈢殑鍙闂€с€傚叧浜庣綉椤垫棤闅滅鐨勬洿澶氬唴瀹癸紝鍙互娴忚鎴戠殑鏂囩珷鈥斺€斿墠绔壇濂藉疄璺电殑涓嶅畬鍏ㄦ寚鍗楋紝閫氳繃鏁翠綋闈㈡澘鐨勪俊鎭紝鏇存竻妤氬湴浜嗚В缃戠珯椋庢牸鐨勬暣浣撴鍐靛拰鏈€鍚庝竴鐐癸紝鍙互璁╂垜浠鎴戜滑鐨勭綉绔欐湁鏇存繁鍏ョ殑浜嗚В锛岃繘鑰屽彲浠ヨ緟鍔╂垜浠紭鍖栭〉闈紝寮曞鎴戜滑鍦ㄦ€ц兘浼樺寲鍜岄〉闈㈤噸鏋勭殑鏂版柟鍚戙€傛渶鍚庡綋鐒舵槸CSSOverviewPanel鐨勫姛鑳借繙涓嶆浠ヤ笂鍑犵偣锛岃繕鏈夋洿澶氱殑鍦烘櫙绛夊緟鎴戜滑缁х画鎸栨帢銆傛垜瑙夊緱杩欎釜Panel鏄垜浠墦寮€涔嬪悗灏辫垗涓嶅緱鍏虫帀鐨勪竴涓姛鑳姐€傚悎鐞嗙殑浣跨敤锛屽ぇ閲忕殑浣跨敤锛屽彲浠ユ垚涓烘垜浠紑鍙戣繃绋嬩腑闈炲父濂界殑宸ュ叿銆傛湰鏂囧埌姝ょ粨鏉燂紝甯屾湜瀵逛綘鏈夋墍甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳€荤粨鍦ㄦ垜鐨凣ithub--iCSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
