|
我經(jīng)歷過許多 CSS 代碼的調(diào)試工作，有別人寫的也有自己寫的，有移動端平臺的也有標(biāo)準(zhǔn)桌面瀏覽器的，從陳舊的 IE 到最新的基于 Webkit 的每日構(gòu)建。經(jīng)驗(yàn)告訴我，很多人并沒有一個(gè)標(biāo)準(zhǔn)的 CSS 調(diào)試流程。 我發(fā)現(xiàn)在大多數(shù)情況下，擁有專業(yè)的解決問題的方法，能夠節(jié)省花在 bug 上的時(shí)間。 下面是我總結(jié)的經(jīng)驗(yàn)。 我不保證這是最適合的調(diào)試 CSS 的方法，但是確實(shí)對我很有效。如何 CSS 不是你的主要編程語言，調(diào)試它可能就像暗黑藝術(shù)一樣；遵循下面的指南能夠幫助你更有效地定位和解決 bug。 概括地說，我把調(diào)試流程分為 3 個(gè)階段：
我們挨個(gè)解釋每個(gè)階段并實(shí)踐一個(gè)例子。 1 評估并快速修復(fù) 如果 CSS 是你的主要工作語言，或者你對 CSS 有一定的理解和實(shí)踐經(jīng)驗(yàn)的話，解決 CSS 問題就有很多簡單的方法，否則的話，方法就少一些。 有經(jīng)驗(yàn)的 CSS 開發(fā)者可能都知道的一些 CSS 陷阱：
這樣的 “bug” 有一大堆。實(shí)際上根本沒有 bug，更多的是開發(fā)者缺少對瀏覽器行為的理解。更準(zhǔn)確地說，是 CSS 代碼讓瀏覽器怎么做。 對這些 CSS 特性熟悉的開發(fā)者能夠快速定位到問題并且修復(fù)。他們對 bug 的認(rèn)識與那些對 CSS 不了解的人會產(chǎn)生分歧。這樣在解決 CSS bug 中對‘工作流’需求的重要性的認(rèn)識就會因人而異。 對于‘快速修復(fù)’中沒有覆蓋的陌生問題，在開發(fā)者工具中靠猜來解決問題的方式已經(jīng)沒什么價(jià)值。即使運(yùn)氣好問題被解決了，也很難判斷出問題到底是怎樣被解決的。 如果出現(xiàn)的問題不能被輕易解決，先確定問題區(qū)域的范圍，抓取 HTML 標(biāo)簽（也就是拷貝 DOM），進(jìn)入下一個(gè)調(diào)試階段：還原和重現(xiàn)。 專業(yè)提示：大多數(shù)瀏覽器的開發(fā)者工具會讓你選擇包裹元素并拷貝 HTML 區(qū)塊。在 Chrome 的開發(fā)者工具中，要連同包裹元素一起拷貝，需要點(diǎn)擊 ‘Copy > Copy OuterHTML’。 2 還原和重視 本階段的 CSS bug 修復(fù)在類似 Codepen 的幫助下異常簡單。我們目的主要是復(fù)現(xiàn)出此問題 - 也就是引起 bug 的代碼。這能讓我們快速定位 bug，直搗黃龍。 為清晰起見，只把相關(guān)的 HTML 和 CSS 提取出來復(fù)現(xiàn)問題。你既可以手打 HTML 對應(yīng)的 CSS，也可以復(fù)制真實(shí)的代碼。如果可能的話，不用把所有 CSS 代碼一股腦拷貝過去重現(xiàn)問題，保證最精簡的要素即可。保持逐步增加 CSS 的習(xí)慣，問題就會自己找到你。 在快要接近真相時(shí)，往往只需要一個(gè)特殊的 CSS 屬性的改變就能讓 bug 暴露出來。 相對應(yīng)的做法是，把所有 CSS 都扔進(jìn)入復(fù)現(xiàn)問題，然后每次移除一點(diǎn)，直到問題出現(xiàn)。在實(shí)踐中，我發(fā)現(xiàn)這略笨，不用也因人而異，你可能有不同的見解。 逐步地增加或刪除 CSS 代碼已經(jīng)是重現(xiàn)問題和定位故障的固定套路了。 那么 HTML 標(biāo)簽?zāi)兀?/span> 假設(shè)使用最少 CSS 代碼復(fù)現(xiàn)問題時(shí)，效果有如原始代碼一樣。這也是有用的，我們現(xiàn)在看 HTML 標(biāo)簽。 第一件事要做的，也是不能跳過的，就是檢查標(biāo)簽的有效性。即使報(bào)告出我們不關(guān)心的問題（比如 meta），至少能保證它不會以某種方式破壞美感。我們希望能發(fā)現(xiàn)未閉合的標(biāo)簽、沒有引號的屬性，以及其它任何可能影響瀏覽器解析的問題。建議你使用 W3C validator。 一旦標(biāo)簽檢查通過，將有助于消除瀏覽器引入意外樣式的可能性。這樣做： 首先，把所有元素改成 div（塊級元素）和 span（行內(nèi)元素），保證它們只被 CSS 的類選擇器選中。也許有必要把額外的選擇器移除，如把 a.link 改為 .link。 通過使用固定的標(biāo)簽我們消除了瀏覽器針對特定元素引入默認(rèn)樣式的可能性。表單元素是個(gè)特例（馬上會在例子中見到）。 如果把所有元素改成 div 和 span，問題消失了，那么瀏覽器引入默認(rèn)樣式的嫌疑就被確定了?，F(xiàn)在在 computed styles 面板中尋找瀏覽器增加了什么樣式，想辦法覆蓋它。總之就是要看計(jì)算后的樣式。 3 定位根源并修復(fù) 如果簡化 HTML 標(biāo)簽也沒有找到問題，并且是可穩(wěn)定復(fù)現(xiàn)的，那么就該換個(gè)瀏覽器試一試。是否同樣的問題出現(xiàn)在 Chrome，IE，Safari 和 Firefox 上？如果不是，哪個(gè)的表現(xiàn)是正確的？如果只有一個(gè)瀏覽器是錯(cuò)的，那么就值得去搜索一下對應(yīng)的 bug 跟蹤系統(tǒng)了：
是某瀏覽器的問題嗎？或者是某瀏覽器的特定版本的問題？問題是否在修復(fù)中？有沒有不影響其它瀏覽器的解決方案？實(shí)在不行你可以為特定的瀏覽器編寫修復(fù)代碼嗎？ 過去我曾詳細(xì)描述過如何向?yàn)g覽器提 bug，在 2011 年 Lea Verou 也寫過一份描述提 bug 流程的文章。 另一種情況是可能需要‘無害的’hack。例如，我最近遇到的一個(gè)場景是在一個(gè)塊級元素后面的元素必須是絕對定位的才能顯示出來。 left: 100% 只有在 IE 瀏覽器（移動端是Windows Phone 8，8.1 和 10）中不生效。IE 中在兩個(gè)元素之間總有一個(gè)空隙?？雌饋硐袷且粋€(gè)亞像素渲染問題，因此 left: 99.99% 就能解決問題而不會影響其它瀏覽器。這是個(gè) hack 手段，但我們知道原理（有的瀏覽器會舍入，其它則不會），標(biāo)注在 CSS 的注釋中，沒有任何危害。 微軟的 Greg Whitworth 告訴我了關(guān)于亞像素舍入的更多細(xì)節(jié)。WebKit 和 Blink 內(nèi)核舍入 1/64，Gecko 內(nèi)核舍入 1/60，Edge 舍入 1/100（感謝 Webkit 開發(fā)者 ‘smfr’）。 4 計(jì)算后樣式 開發(fā)者工具中比較容易被忽視的是 computed styles 面板。如果你對 computed styles 不熟悉的話，顧名思義，就是真正應(yīng)用到元素上的樣式。這很重要，因?yàn)槟銓懙臉邮讲灰欢〞?。同樣，你寫的樣式也不是所有生效的樣式。下面的例子將解釋我的意思?/span>
對應(yīng)的 CSS 是：
outer 的寬度會是多少？如果你認(rèn)為是 max-width 的 400px，我會原諒你的。但是不是我們看到的寬度，看 Ben Frain 編寫的 codepen。 什么情況？為什么不是 max-width 的值？給你個(gè)思路，打開 Computed Styles 面板。 找到問題的根源了嗎？ 我來給你解釋下。默認(rèn)地，fieldset 元素的寬度會等于其內(nèi)容的寬度。在 Chrome 的 Computed Styles 面板中，min-width 的值是一個(gè)新的 min-content。 給 min-width 設(shè)置一個(gè)新值來“修復(fù)”它。這個(gè)例子中，min-width: 0 就會讓 max-width 按照我們期望的那樣進(jìn)行工作。 這正是開發(fā)者工具的 Computed Styles 面板中看到的值。記住你寫的代碼不一定是瀏覽器計(jì)算后的。 5 討論 頁面出現(xiàn)異常的原因可能很多并且不盡相同。不同瀏覽器對規(guī)范的實(shí)現(xiàn)存在差異是普遍存在的現(xiàn)象。相比于編寫一個(gè)瘋狂的瀏覽器 bug 目錄，解決問題的最有效流程還是始終保持條理性?？偨Y(jié)來看有效的措施包括：
|
|
|
