Handling common HTML and CSS problems

HTML和CSS的麻煩

HTML和CSS的一些麻煩在于這兩種語(yǔ)言都相當(dāng)簡(jiǎn)單，并且開(kāi)發(fā)人員通常不會(huì)認(rèn)真對(duì)待它們，因?yàn)樵诖_保代碼是精心設(shè)計(jì)，高效和語(yǔ)義描述的目的方面， 功能。 在最壞的情況下，JavaScript用于生成整個(gè)網(wǎng)頁(yè)內(nèi)容和樣式，這使得您的網(wǎng)頁(yè)無(wú)法訪問(wèn)，性能較差(生成DOM元素很昂貴)。 在其他情況下，不支持跨瀏覽器一致的新生功能，這可能使某些功能和樣式不適用于某些用戶。 響應(yīng)式設(shè)計(jì)問(wèn)題也很常見(jiàn) - 在桌面瀏覽器中看起來(lái)不錯(cuò)的網(wǎng)站可能會(huì)在移動(dòng)設(shè)備上提供可怕的體驗(yàn)，因?yàn)閮?nèi)容太小，無(wú)法閱讀，或者網(wǎng)站由于昂貴的動(dòng)畫(huà)而緩慢。

讓我們來(lái)看看如何減少HTML / CSS導(dǎo)致的跨瀏覽器錯(cuò)誤。

第一件事:固定一般問(wèn)題

我們?cè)?a href="/webstart/Cross_browser_testing/Introduction#Testingdiscovery">本系列的第一篇文章中說(shuō)，開(kāi)始的一個(gè)好策略是在桌面設(shè)備/移動(dòng)設(shè)備上的幾個(gè)現(xiàn)代瀏覽器中進(jìn)行測(cè)試， 在繼續(xù)專(zhuān)注于跨瀏覽器問(wèn)題之前，請(qǐng)確保您的代碼正常工作。

在我們的調(diào)試HTML 和調(diào)試CSS 文章中，我們提供了一些關(guān)于 調(diào)試HTML / CSS - 如果你不熟悉基本知識(shí)，你應(yīng)該肯定的學(xué)習(xí)這些文章，然后繼續(xù)。

基本上，這是一個(gè)問(wèn)題，檢查你的HTML和CSS代碼是否正確，并且不包含任何語(yǔ)法錯(cuò)誤。

驗(yàn)證

對(duì)于HTML，驗(yàn)證涉及確保所有代碼正確關(guān)閉和嵌套，您使用的是DOCTYPE，并且您正在使用代碼的正確目的。 一個(gè)好的策略是定期驗(yàn)證您的代碼。 可以執(zhí)行此操作的一項(xiàng)服務(wù)是W3C 標(biāo)記驗(yàn)證服務(wù)，可讓您指向代碼 ，并返回錯(cuò)誤列表:

CSS有一個(gè)類(lèi)似的故事 - 您需要檢查您的屬性名稱(chēng)拼寫(xiě)正確，屬性值拼寫(xiě)正確，并對(duì)它們使用的屬性有效，您不會(huì)丟失任何花括號(hào)，等等。 為此，W3C還提供了 CSS Validator 。

短絨

另一個(gè)很好的選擇是所謂的Linter應(yīng)用程序，它不僅指出錯(cuò)誤，而且還可以在CSS中標(biāo)記有關(guān)壞做法的警告，以及其他點(diǎn)。 通?？梢远ㄖ泼藁?，以在其錯(cuò)誤/警告報(bào)告中更嚴(yán)格或更輕松。

有許多在線linter應(yīng)用程序，其中最好的可能是臟標(biāo)記(HTML，CSS，JavaScript)和 CSS Lint (僅限CSS)。 這些允許您將代碼粘貼到窗口中，它會(huì)標(biāo)記任何錯(cuò)誤的十字架，然后可以被徘徊以獲得錯(cuò)誤消息通知您的問(wèn)題是什么。 臟標(biāo)記還允許您使用清除按鈕修復(fù)您的標(biāo)記。

0px auto; width:1204px;" alt ="">

然而，將代碼復(fù)制并粘貼到網(wǎng)頁(yè)上以檢查其有效性幾次并不是很方便。 你真正想要的是一個(gè)linter，將適合你的標(biāo)準(zhǔn)工作流程，最少的麻煩。

許多代碼編輯器都有l(wèi)inter插件。 例如，Github的 Atom 代碼編輯器有一個(gè)豐富的插件生態(tài)系統(tǒng)可用，有許多l(xiāng)inting選項(xiàng)。 為了向您展示這些插件通常如何工作的示例:

1. Install Atom (if you haven't got an up-to-date version already installed) — download it from the Atom page linked above.
2. Go to Atom's Preferences... dialog (e.g. by Choosing Atom > Preferences... on Mac, or File > Preferences... on Windows/Linux) and choose the Install option in the left hand menu.
3. In the Search packages text field, type "lint" and press Enter/Return to search for linting-related packages.
4. You should see a package called lint at the top of the list. Install this first (using the Install button), as other linters rely on it to work. After that, install the linter-csslint plugin for linting CSS, and the linter-tidy plugin for linting HTML.
5. After the packages have finished installing, try loading up an HTML file and a CSS file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.

alt =""> "。 alt ="">

其他流行的編輯有類(lèi)似的linting包可用。 例如，請(qǐng)參閱:

• SublimeLinter for Sublime Text
• Notepad++ linter

瀏覽器開(kāi)發(fā)工具

大多數(shù)瀏覽器中內(nèi)置的開(kāi)發(fā)工具還提供了有用的工具來(lái)捕獲錯(cuò)誤，主要是CSS。

例如，在Firefox中，CSS檢查器將顯示未應(yīng)用的CSS聲明，并帶有警告三角形。 懸停警告三角形將提供一個(gè)描述性的錯(cuò)誤消息:

alt ="">

其他瀏覽器devtools有類(lèi)似的功能。

常見(jiàn)的跨瀏覽器問(wèn)題

現(xiàn)在讓我們繼續(xù)看看一些最常見(jiàn)的跨瀏覽器HTML和CSS問(wèn)題。 我們將關(guān)注的主要領(lǐng)域是缺乏對(duì)現(xiàn)代功能和布局問(wèn)題的支持。

舊版瀏覽器不支持現(xiàn)代功能

這是一個(gè)常見(jiàn)的問(wèn)題，特別是當(dāng)您需要支持舊的瀏覽器(如舊的IE版本)或您使用的功能使用CSS前綴實(shí)現(xiàn)。 一般來(lái)說(shuō)，大多數(shù)核心的HTML和CSS功能(例如基本HTML元素，CSS基本顏色和文本樣式)可以在大多數(shù)瀏覽器中使用; 當(dāng)您開(kāi)始使用較新的功能(例如 Flexbox 或 -CN / docs / Web / Apps / Fundamentals / Audio_and_video_delivery"> HTML5視頻/音頻，甚至更新生， CSS網(wǎng)格或 -webkit-background-clip:text 。

一旦確定了您將使用的潛在問(wèn)題技術(shù)列表，最好研究其支持的瀏覽器，以及相關(guān)技術(shù)是否有用。 請(qǐng)參見(jiàn)下面的查找?guī)椭?/a>。

無(wú)法識(shí)別的HTML元素被瀏覽器視為匿名內(nèi)聯(lián)元素(實(shí)際上沒(méi)有語(yǔ)義值的內(nèi)聯(lián)元素，類(lèi)似于 span"> < span> 元素)。 你仍然可以通過(guò)他們的名字引用它們，并用CSS樣式，例如 - 你只需要確保它們是你想要的，例如設(shè)置 display:block; 在所有 的新語(yǔ)義元素(例如 < article> / a>， < aside> ， 等等)，但只在舊版本的IE不能識(shí)別它們(所以，IE 8和更低)。 這樣新的瀏覽器可以正常使用的代碼，但舊的IE版本將能夠?qū)@些元素進(jìn)行風(fēng)格。

更復(fù)雜的元素，如HTML < video> ， < audio> 和 > < canvas> (以及其他功能) 添加的回退的自然機(jī)制，其工作原理與上述相同。 您可以在開(kāi)始和結(jié)束標(biāo)記之間添加后備內(nèi)容，而不支持的瀏覽器將有效地忽略外部元素并運(yùn)行嵌套內(nèi)容。

例如:

<video id="video" controls preload="metadata" poster="img/poster.jpg">
  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
  <!-- Flash fallback -->
  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
     <param name="allowfullscreen" value="true" />
     <param name="wmode" value="transparent" />
     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
  </object>
  <!-- Offer download -->
  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
</video>

此示例(摘自創(chuàng)建跨瀏覽器視頻播放器)包括 不僅是老版本的Flash視頻回退，還有一個(gè)簡(jiǎn)單的鏈接，允許您下載視頻，即使Flash播放器不工作，因此至少用戶仍然可以訪問(wèn)視頻。

HTML5表單元素還會(huì)顯示回退質(zhì)量 - HTML5引入了一些特殊的 < input> / a> 類(lèi)型，用于將特定信息輸入到表單中，例如時(shí)間，日期，顏色，數(shù)字等。這些非常有用，特別是在移動(dòng)平臺(tái)上，其中提供輸入數(shù)據(jù)的無(wú)痛方式非常重要 為用戶體驗(yàn)。 支持平臺(tái)在使用這些輸入類(lèi)型時(shí)提供特殊的UI小部件，例如用于輸入日期的日歷小部件。

以下示例顯示日期和時(shí)間輸入:

<form>
  <div>
    <label for="date">Enter a date:</label>
    <input id="date" type="date">
  </div>
  <div>
    <label for="time">Enter a time:</label>
    <input id="time" type="time">
  </div>
</form>

該代碼的輸出如下:

label {
        float: left;
        width: 30%;
        text-align: right;
      }

      input {
        float: right;
        width: 65%;
      }

      label, input {
        margin-bottom: 20px;
      }

      div {
        clear: both;
        margin: 10px;
      }

      body {
        width: 400px;
        margin: 0 auto;
      }

<form>
      <div>
        <label for="date">Enter a date:</label>
        <input id="date" type="date">
      </div>
      <div>
        <label for="time">Enter a time:</label>
        <input id="time" type="time">
      </div>
    </form>

如果您在支持的瀏覽器(如桌面/ Android Chrome或iOS Safari)上查看示例，您會(huì)在嘗試輸入數(shù)據(jù)時(shí)看到特殊的小部件/功能。 在諸如Firefox或Internet Explorer的不支持的平臺(tái)上，輸入將僅回退到正常文本輸入，因此至少用戶仍然可以輸入一些信息。

注意:當(dāng)然，這可能不是一個(gè)偉大的解決方案為您的項(xiàng)目的需要 - 視覺(jué)呈現(xiàn)的差異不是很大，加上很難保證數(shù)據(jù)將以您想要的格式輸入。對(duì)于跨瀏覽器窗體， 它可能更好地依賴(lài)于簡(jiǎn)單的表單元素，或選擇性地使用高級(jí)表單元素只支持瀏覽器，或使用一個(gè)庫(kù)提供體面的跨瀏覽器窗體小部件，如 class ="external"> jQuery UI 或 Bootstrap datepicker 。

CSS fallback behaviour

CSS可以說(shuō)是更好的回退比HTML。 如果瀏覽器遇到一個(gè)聲明或規(guī)則，它不明白，它只是跳過(guò)它，而不應(yīng)用它或拋出一個(gè)錯(cuò)誤。 這可能會(huì)讓你和你的用戶感到沮喪，如果這樣的錯(cuò)誤滑向生產(chǎn)代碼，但至少這意味著整個(gè)網(wǎng)站不會(huì)崩潰，因?yàn)橐粋€(gè)錯(cuò)誤，如果巧妙地使用你可以使用它的優(yōu)勢(shì)。

讓我們來(lái)看一個(gè)例子 - 一個(gè)簡(jiǎn)單的CSS樣式的CSS，它有一些樣式由各種CSS3功能提供:

alt ="">

該按鈕有許多樣式的聲明，但我們最感興趣的兩個(gè)如下:

button {
  ...

  background-color: #ff0000;
  background-color: rgba(255,0,0,1);
  box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4),
              inset -1px -1px 3px rgba(0,0,0,0.4);
}

button:hover {
  background-color: rgba(255,0,0,0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4),
              inset -1px -1px 3px rgba(255,255,255,0.4);
}

在這里，我們提供 RGBA /developer.mozilla.org/zh-CN/docs/Web/CSS/background-color"> background-color ，可更改懸停時(shí)的不透明度，以向用戶提示按鈕 是交互式的，以及一些半透明插圖 box-shadow / a>陰影給按鈕一些紋理和深度。 麻煩的是，RGBA顏色和盒子陰影不擔(dān)心IE版本9以上 - 在舊版本的背景只是不會(huì)顯示出來(lái)，所以文本將是不可讀的，沒(méi)有什么好！

alt ="">

為了對(duì)此進(jìn)行排序，我們添加了第二個(gè) background-color 聲明，它只是指定了一個(gè)十六進(jìn)制顏色 - 這在真正的舊瀏覽器中是支持的，如果現(xiàn)代閃亮的特性 不工作。 發(fā)生什么是瀏覽器訪問(wèn)此頁(yè)面首先應(yīng)用第一個(gè) background-color 值; 當(dāng)它到達(dá)第二個(gè) background-color 聲明時(shí)，如果它支持RGBA顏色，它將用此值覆蓋初始值。 如果沒(méi)有，它將忽略整個(gè)聲明并繼續(xù)。

IE conditional comments

IE條件注釋是修改的專(zhuān)有HTML注釋語(yǔ)法，其可以用于選擇性地將HTML代碼應(yīng)用于IE的不同版本。 這已被證明是一個(gè)非常有效的機(jī)制，用于修復(fù)跨瀏覽器錯(cuò)誤。 語(yǔ)法如下所示:

<!--[if lte IE 8]>
  <script src="ie-fix.js"></script>
  <link href="ie-fix.css" rel="stylesheet" type="text/css">
<![endif]-->

如果瀏覽頁(yè)面的瀏覽器是IE 8或更高版本，此塊將應(yīng)用IE特定的CSS和JavaScript。 lte 表示"小于或等于"，但您也可以對(duì)NOT和其他邏輯語(yǔ)法使用lt，gt，gte，！。

正如你可以看到，這是特別有用的應(yīng)用代碼修復(fù)舊版本的IE。 我們之前提到的用例(使舊的IE版本中的現(xiàn)代語(yǔ)義元素可以風(fēng)格化)可以使用條件注釋輕松實(shí)現(xiàn)，例如你可以在你的IE樣式表中放置這樣的東西:

aside, main, article, section, aside, nav, figure, figcaption {
  display: block;
}

它不是那么簡(jiǎn)單，但是 - 你還需要?jiǎng)?chuàng)建一個(gè)每個(gè)元素的你想要在DOM中通過(guò)JavaScript風(fēng)格的副本，為他們的風(fēng)格; 這是一個(gè)奇怪的怪癖，我們不會(huì)介紹這里的細(xì)節(jié)。 例如:

var asideElem = document.createElement('aside');
 ...

這聽(tīng)起來(lái)很痛苦，但幸運(yùn)的是有一個(gè) polyfill 可用，為您提供必要的修復(fù)程序等等 - 請(qǐng)參閱 HTML5Shiv 了解所有詳細(xì)信息(請(qǐng)參閱 class ="external">手動(dòng)安裝，以獲得最簡(jiǎn)單的用法)。

Selector support

當(dāng)然，如果您不使用正確的選擇器來(lái)選擇要?jiǎng)?chuàng)建樣式的元素，則不會(huì)應(yīng)用任何CSS功能！ 如果你只是寫(xiě)一個(gè)選擇器不正確，所以造型不是預(yù)期在任何瀏覽器，你只需要排除故障，找出你的選擇器有什么問(wèn)題。 我們發(fā)現(xiàn)，使用瀏覽器的開(kāi)發(fā)工具檢查您嘗試創(chuàng)建的元素是有幫助的，然后查看DOM檢查器傾向于提供的DOM樹(shù)面包屑跟蹤，看看選擇器是否有意義。

例如，在Firefox開(kāi)發(fā)工具中，您會(huì)在DOM檢查器的底部得到這種輸出:

alt ="">

例如，如果您試圖使用此選擇器，您將能夠看到它不會(huì)根據(jù)需要選擇輸入元素:

form > #date

( date 表單輸入不是直接在< form> 內(nèi);你最好使用一般的后代選擇器而不是子選擇器。

然而，在9以前版本的IE中出現(xiàn)的另一個(gè)問(wèn)題是沒(méi)有一個(gè)更新的選擇器(我們主要談?wù)搨晤?lèi)和偽元素，如 .org / zh-CN / docs / Web / CSS /:nth-of-type">:nth-of-type ， mozilla.org/zh-CN/docs/Web/CSS/:not\">:not ， / docs / Web / CSS / :: selection"> :: selection 等)如果你想在CSS中使用這些，你需要支持舊的IE版本，一個(gè)好的舉動(dòng)是 使用Keith Clark的 Selectivizr 庫(kù) - 這是一個(gè)小型JavaScript庫(kù)，可在現(xiàn)有JavaScript庫(kù)(如 "http://jquery.com/"class ="external"> jQuery 或 MooTools 。

1. To try this example, make a local copy of selectivizr-example-start.html. If you look at this running live, you'll see that it contains two paragraphs, one of which is styled. We've selected the paragraph with p:first-child, which won't work in old versions of IE.
2. Now download?MooTools and Selectivizr, and save them in the same directory as your sample HTML.
3. Put the following code into the head of your HTML document, just before the opening <style> tag:

   <script type="text/javascript" src="MooTools-Core-1.6.0.js"></script>
       <!--[if (gte IE 6)&(lte IE 8)]>
         <script type="text/javascript" src="selectivizr-min.js"></script>
       <![endif]-->

如果你試圖運(yùn)行這個(gè)在舊版本的IE，它應(yīng)該工作正常。

margin:0px auto; width:771px;" alt ="">

Handling CSS prefixes

另一組問(wèn)題來(lái)自CSS前綴 - 這些是一個(gè)機(jī)制，或者通常用于允許瀏覽器供應(yīng)商實(shí)現(xiàn)自己的版本的CSS(或JavaScript)功能，而技術(shù)處于實(shí)驗(yàn)狀態(tài)，所以他們可以玩它，并得到它 沒(méi)有與其他瀏覽器的實(shí)現(xiàn)，或最終的無(wú)前綴的實(shí)現(xiàn)沖突。 例如:

• Mozilla uses -moz-
• Chrome/Opera/Safari use -webkit-
• Microsoft uses -ms-

下面是一些示例:

-webkit-transform: rotate(90deg);

background-image: -moz-linear-gradient(left,green,yellow);
background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow));
background-image: linear-gradient(to right,green,yellow);

第一行顯示 transform 屬性，其中包含 > -webkit - 前綴 - 這是需要使轉(zhuǎn)換在Chrome等工作，直到功能被完成，這樣的瀏覽器添加的屬性的前綴免費(fèi)版本(在撰寫(xiě)本文時(shí)，Chrome支持兩個(gè)版本 )。

最后三行顯示了三種不同版本的 linear-gradient() a> 函數(shù)，用于在元素的背景中生成線性漸變:

1. The first one has a -moz- prefix, and shows a slightly older version of the syntax (Firefox)
2. The second one has a -webkit- prefix, and shows an even older, proprietary version of the syntax (this is actually from a really old version of the WebKit engine).
3. The third one has no prefix, and shows the final version of the syntax (included in the CSS Image Values and Replaced Content Module Level 3 spec, which defines this feature).

預(yù)定的功能從來(lái)不應(yīng)該在生產(chǎn)網(wǎng)站中使用 - 它們可能會(huì)被更改或刪除而不會(huì)發(fā)出警告，并導(dǎo)致跨瀏覽器問(wèn)題。 當(dāng)開(kāi)發(fā)人員決定只使用屬性的 -webkit- 版本 - 這意味著網(wǎng)站不能在其他瀏覽器中工作，這是一個(gè)特別的問(wèn)題。 這實(shí)際上發(fā)生了，其他瀏覽器已經(jīng)開(kāi)始實(shí)現(xiàn) -webkit - 各種CSS屬性的前綴版本，所以他們將使用這樣的代碼。 瀏覽器供應(yīng)商對(duì)前綴的使用最近已經(jīng)減少，正是由于這些類(lèi)型的問(wèn)題，但仍有一些需要注意。

如果您堅(jiān)持使用前綴功能，請(qǐng)確保使用正確的功能。 您可以在MDN參考頁(yè)以及 caniuse.com 等網(wǎng)站上查找哪些瀏覽器需要前綴。 如果你不確定，你也可以通過(guò)直接在瀏覽器中進(jìn)行一些測(cè)試來(lái)發(fā)現(xiàn)。

嘗試這個(gè)簡(jiǎn)單的例子:

1. Open up google.com, or another site that has a prominent heading or other block level element.
2. Right/Cmd + click on the element in question and choose Inspect/Inspect element (or whatever the option is in your browser) — this should open up the dev tools in your browser, with the element highlighted in the DOM inspector.
3. Look for a feature you can use to select that element. For example, at the time of writing, the main Google logo had an ID of hplogo.
4. Store a reference to this element in a variable, for example:

   var test = document.getElementById('hplogo');

5. Now try to set a new value for the CSS property you are interested in on that element; you can do this using the style property of the element, for example try typing these into the JavaScript console:

   test.style.transform = 'rotate(90deg)'
   test.style.webkitTransform = 'rotate(90deg)'

當(dāng)您開(kāi)始在第二個(gè)點(diǎn)之后鍵入屬性名稱(chēng)表示時(shí)(請(qǐng)注意，在JavaScript中，CSS屬性名稱(chēng)是以駝峰形式寫(xiě)入的，而不是連字符)，JavaScript控制臺(tái)應(yīng)開(kāi)始自動(dòng)填充瀏覽器中存在的屬性的名稱(chēng) 并匹配到目前為止你寫(xiě)的。 這對(duì)于找出在該瀏覽器中實(shí)現(xiàn)的屬性的哪些版本很有用。

撰寫(xiě)本文時(shí)，F(xiàn)irefox和Chrome都實(shí)現(xiàn)了 ="https://developer.mozilla.org/zh-CN/docs/Web"的 -webkit - 前綴和非前綴版本 / CSS / transform"> transform ！

一旦你找到了需要支持的前綴，你應(yīng)該把它們?nèi)繉?xiě)在CSS中，例如:

-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);

這可以確保所有支持上述任何形式的屬性的瀏覽器都能使該功能正常工作。 這是值得把非前綴的版本最后，因?yàn)檫@將是最新的版本，你會(huì)希望瀏覽器使用，如果可能的話。 如果例如瀏覽器實(shí)現(xiàn) -webkit - 版本和非前綴版本，它將首先應(yīng)用 -webkit - 版本， 前綴版本。 你希望它以這種方式發(fā)生，而不是反過(guò)來(lái)。

當(dāng)然，這樣做對(duì)很多不同的CSS規(guī)則可以得到真的很乏味。 最好使用自動(dòng)化工具為您完成。 并且存在這樣的工具:

免費(fèi)前綴JavaScript庫(kù)可以附加到網(wǎng)頁(yè)上，并且會(huì)自動(dòng)檢測(cè)所擁有的功能 瀏覽器查看頁(yè)面并根據(jù)需要添加前綴。 它真的很容易和方便使用，雖然它有一些缺點(diǎn)(請(qǐng)參閱上面的鏈接的詳細(xì)信息)，可以說(shuō)，解析您的網(wǎng)站中的每個(gè)樣式表，并在運(yùn)行時(shí)添加前綴可能會(huì)耗盡計(jì)算機(jī)的處理能力 為大型網(wǎng)站。

Autoprefixer\">另一種解決方案是在開(kāi)發(fā)過(guò)程中自動(dòng)添加前綴，而且(以及其他一些事情)可以使用 Autoprefixer and PostCSS.\">a>和 PostCSS 。online version that allows you to enter your\">這些工具可以通過(guò)多種方式使用，例如Autoprefixer有一個(gè)在線版本，允許您輸入您的非前綴CSS在左邊，并給你一個(gè)前綴添加版本在右邊。Autoprefixer options;\">您可以使用自動(dòng)填充程序選項(xiàng)中列出的符號(hào)選擇要確保支持的瀏覽器;Browserslist queries, which this is based on, for more detail.\">也可以參閱 Browserslist查詢(xún)(詳細(xì)信息請(qǐng)參閱此鏈接)。例如，以下查詢(xún)將選擇所有主要瀏覽器的最后2個(gè)版本和9以上的IE版本。

last 2 versions, ie > 9

Autoprefixer也可以通過(guò)其他更方便的方式使用 - 請(qǐng)參見(jiàn)自動(dòng)前貼片使用。 例如，您可以使用任務(wù)運(yùn)行程序/構(gòu)建工具(如 Gulp 或 webpack.github.io/"class ="external"> Webpack ，以便在開(kāi)發(fā)完成后自動(dòng)添加前綴。 (解釋這些工作如何超出了本文的范圍。)

您還可以為文本編輯器(如Atom或Sublime文本)使用插件。 例如，在Atom:

1. You can install it by going to Preferences > Install, searching for Autoprefixer, then hitting install.
2. You can set a browser query by pressing the Autoprefixer Settings button and entering the query in the text field in the Settings section on the page.
3. In your code, you can select sections of CSS you want to add prefixes to, open the command pallette (Cmd/Ctrl + Shift + P), then type in Autoprefixer and select the Autoprefixer result that autocompletes.

例如，我們輸入了以下代碼:

body {
  display: flex;
}

我們突出顯示它并運(yùn)行Autoprefixer命令，并將其替換為:

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

布局問(wèn)題

另一個(gè)可能出現(xiàn)的問(wèn)題是瀏覽器之間的布局的差異。 歷史上，這曾經(jīng)是一個(gè)更大的問(wèn)題，但最近，現(xiàn)代瀏覽器傾向于更一致地支持CSS，布局問(wèn)題往往更常見(jiàn)的與:

• Lack of (or differences in) support for modern layout features.
• Layouts not looking good in mobile browsers (i.e. responsive design problems).

Support for new layout features

今天在網(wǎng)絡(luò)上的大部分布局工作都是使用浮動(dòng)廣告完成的 - 這是因?yàn)楦?dòng)廣受支持(回到IE4，盡管有多個(gè) bug，如果你試圖支持IE，那么也需要調(diào)查)。 然而，他們并不是真正意味著布局的目的 - 使用浮動(dòng)我們所做的是真正的黑客 - 他們有一些嚴(yán)重的限制(例如，參見(jiàn) / docs / Learn / CSS / CSS_layout / Flexbox#Why_Flexbox">為什么選擇Flexbox？)

最近，出現(xiàn)了專(zhuān)用布局機(jī)制，如 Flexbox 和 CSS網(wǎng)格 ，這使得常見(jiàn)的布局任務(wù)更容易，并消除這樣的缺點(diǎn)。 然而，這些不是在瀏覽器中支持:

• CSS grids are very new; at the time of writing, they were only supported in the very newest versions of modern browsers.
• Flexbox is well-supported in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see Advanced Cross-Browser Flexbox to get an idea).

布局功能并不像簡(jiǎn)單的顏色，陰影或漸變一樣容易提供優(yōu)雅的回退。 如果忽略布局屬性，則整個(gè)設(shè)計(jì)可能會(huì)碎片化。 因此，您需要使用功能檢測(cè)來(lái)檢測(cè)訪問(wèn)的瀏覽器是否支持這些布局功能，并根據(jù)結(jié)果選擇性地應(yīng)用不同的布局(我們將在后面的文章中詳細(xì)介紹功能檢測(cè))。

例如，您可以將flexbox布局應(yīng)用于現(xiàn)代瀏覽器，然后將浮動(dòng)布局應(yīng)用于不支持flexbox的舊版瀏覽器。

Responsive design problems

響應(yīng)式設(shè)計(jì)是創(chuàng)建改變以適應(yīng)不同設(shè)備形狀因素的網(wǎng)絡(luò)布局的實(shí)踐 - 例如不同的屏幕寬度，方向(縱向或橫向)或分辨率。 例如，當(dāng)在移動(dòng)設(shè)備上查看時(shí)，桌面布局會(huì)顯得很糟糕，因此您需要使用 Media_Queries">媒體查詢(xún)，并確保使用視口 >。 您可以在響應(yīng)式設(shè)計(jì)的構(gòu)建塊中找到此類(lèi)實(shí)踐的詳細(xì)帳戶。 a>。

分辨率也是一個(gè)大問(wèn)題 - 例如，移動(dòng)設(shè)備不太可能需要比臺(tái)式機(jī)更大的圖像，并且更可能有較慢的互聯(lián)網(wǎng)連接，甚至可能是昂貴的數(shù)據(jù)計(jì)劃，浪費(fèi)帶寬更多的問(wèn)題。 此外，不同的設(shè)備可以具有一定范圍的不同分辨率，這意味著較小的圖像可能出現(xiàn)像素化。 有許多技術(shù)可以解決這些問(wèn)題，從簡(jiǎn)單的移動(dòng)第一媒體查詢(xún)到更復(fù)雜的 href ="/ webstart / Multimedia_and_embedding / Responsive_images#Resolution_switching_Different_sizes">響應(yīng)式圖像技術(shù)。

可以呈現(xiàn)問(wèn)題的另一個(gè)困難是對(duì)使得上述技術(shù)成為可能的特征的瀏覽器支持。 媒體查詢(xún)不支持在IE 8或更少，所以如果你想使用移動(dòng)第一布局，并具有桌面布局，然后應(yīng)用于舊的IE版本，你必須應(yīng)用媒體查詢(xún) /developer.mozilla.org/zh-CN/docs/Glossary/polyfill"class ="glossaryLink"> polyfill 到您的網(wǎng)頁(yè)，例如 p / css3-mediaqueries-js /"class ="external"> css3-mediaqueries-js 或響應(yīng) .js 。

尋找?guī)椭?/span>

還有許多其他問(wèn)題你會(huì)遇到的HTML和CSS; 最重要的事情，知道真正是如何在網(wǎng)上找到答案。

最好的支持信息來(lái)源是Mozilla開(kāi)發(fā)者網(wǎng)絡(luò)(即您現(xiàn)在的位置！)， stackoverflow.com 和 caniuse.com 。

要使用Mozilla開(kāi)發(fā)者網(wǎng)絡(luò)(MDN)，大多數(shù)人通過(guò)搜索引擎搜索他們正在嘗試查找信息的技術(shù)，加上術(shù)語(yǔ)"mdn"，例如"mdn HTML5 video"。 MDN包含幾種有用的內(nèi)容類(lèi)型:

• Reference material with browser support information for client-side web technologies, e.g. the <video> reference page.
• Other supporting reference material, e.g. Media formats supported by the HTML audio and video elements.
• Useful tutorials that solve specific problems, for example Creating a cross-browser video player.

caniuse.com 提供了支持信息，以及一些有用的外部資源鏈接。 例如，請(qǐng)參見(jiàn) http://caniuse.com/#search=video (您只需輸入 您要在文本框中搜索的要素)。

stackoverflow.com (SO)是一個(gè)論壇網(wǎng)站，您可以在其中提出問(wèn)題，并讓開(kāi)發(fā)人員分享他們的解決方案，查找以前的 帖子，并幫助其他開(kāi)發(fā)人員。 建議您在發(fā)布新問(wèn)題之前查看是否有您的問(wèn)題的答案。 例如，我們?cè)赟O上搜索"跨瀏覽器html5視頻"，很快就提出了 兼容性"class ="question-hyperlink external">具有全面瀏覽器兼容性的HTML5視頻。

除此之外，嘗試搜索您最喜歡的搜索引擎以找到您的問(wèn)題的答案。 搜索特定的錯(cuò)誤消息通常是有用的，如果你有他們 - 其他開(kāi)發(fā)人員可能會(huì)有與你一樣的問(wèn)題。

概要

現(xiàn)在，您應(yīng)該熟悉在Web開(kāi)發(fā)中遇到的跨瀏覽器HTML和CSS問(wèn)題的主要類(lèi)型，以及如何修復(fù)它們。