這15個HTML/CSS錯誤我不信你沒犯過(網站規範02)

5.合理内容和對齊項如何使使用者遭受損失

當我們解決對齊問題時，我們喜歡使用對齊屬性，如合理内容或對齊項目。但很少有人知道這些屬性會導緻資料丢失，尤其是在垂直對齊時。

這是因為這些屬性的工作原理。此過程包括兩個術語。第一，對齊容器是您聲明對齊屬性的一個元素。

第二，對齊主體是對齊容器内的元素。對齊屬性會影響它們。

是以，當對齊主體的尺寸大于對齊容器的大小時，就會出現這種情況。在預設的對齊模式下，它會導緻資料溢出和丢失。是以，使用者将看到裁剪的元素。

我建立了一個具有模式元素的示例來顯示此行為。起初，文本很短。但是，當我們使它更多，我們失去了标題和關閉按鈕。

我們可以使用自動邊距修複它，因為它使用額外的空間來對齊元素，不會導緻溢出。看看元素是如何不再丢失的。

别這樣

<div class="modal">
  <div class="modal__main"></div>
</div>      

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}      

您可以使用此代替

<div class="modal">
  <div class="modal__main"></div>
</div>
.modal {
  display: flex;
}
.modal__main {
  margin: auto;
}      

6.您使文本不可用

現在，我們經常使用自定義字型，使我們的界面看起來更加獨特。自定義字型不在我們的系統中，是以我們必須加載它們，但這需要一些時間，問題是此時要顯示什麼。

預設情況下，浏覽器在加載字型時等待，是以它不顯示任何内容。但是，我們可以更改浏覽器使用回退顯示文本。

有字型顯示描述符，根據是否下載下傳并準備使用字型表臉來确定字型臉的顯示方式。

我們可以使用交換值訓示浏覽器使用回退顯示文本，直到自定義字型完全下載下傳。

此技巧可幫助使用者更快地開始與界面互動并實作其目标。

@font-face {
  font-family: "Baloo Tamma";
  src: url("balotamma.woff2") format("woff2"),
       url("balotamma.woff") format("woff");
}      

@font-face {
  font-family: "Baloo Tamma";
  src: url("balotamma.woff2") format("woff2"),
       url("balotamma.woff") format("woff");
  font-display: swap;
}      

7.您的SVG圖示會破壞您的界面

當您在 HTML 文檔中使用 SVG 圖示時，請注意設定寬度和高度屬性。如果你不這樣做，你依靠你設定的寬度和高度屬性在CSS你的界面将被打破。

您的CSS可能未加載，此時，圖示将嘗試填充所有可用空間。是以錯誤發生了。隻需設定寬度和高度屬性，即可輕松入睡。您的接口将是防彈的！

<svg xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 448 512">
  <path fill="currentColor" d="..."></path>
</svg>
svg {
  width: 0.875rem;
  height: 1rem;
}      

<svg xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 448 512"
    width="0.875rem"
    height="1rem">
  <path fill="currentColor" d="..."></path>
</svg>      

8.您不需要為任何類型的裝置使用重圖像

我們的使用者在檢視網站時會面臨過重的圖像。如果他們有高速網際網路不是一個重要的問題，但使用者往往留在有網際網路的問題。可能是地鐵、大自然或者别的國家我認為我們必須幫助使用者使用我們的應用程式。

好主意是幫助浏覽器不加載沉重的圖像與手機或其他移動裝置。我想分享的解決方案，将做到這一點。

此解決方案稱為圖檔元素，允許定義一組圖像的源路徑，以便浏覽器可以加載裝置最合适的圖像。

例如，我們可以建立 2 個源元素并定義寬度媒體功能以檢測墊和桌面。此外，我們将使用手機的img元素。然後浏覽器将選擇最适合使用者的圖像。

注意，我使用移動第一的方法，是以如果圖檔沒有浏覽器支援或使用者使用手機來顯示小圖像。

<img 
  src="ferrari-1920x1080.jpg"
  alt="yellow ferrari F8 spider on the background of the ocean">      

<picture>
  <source 
    srcset="ferrari-1200x960.jpg"
    media="(min-width: 641px) and (max-width: 1200px)">
  <source 
    srcset="ferrari-1920x1080.jpg"
    media="(min-width: 1201px)"> 
  <img 
    src="ferrari-640x480.jpg"
    alt="yellow ferrari F8 spider on the background of the ocean">
</picture>      

1

2

3

4

5

6

7

8

9

10

11

此外，您還可以使用顯示密度描述符和 scrset 屬性來建議哪個圖像更适合特定裝置，同時考慮像素密度。

例如，如果手機的像素密度為 2 倍或更多，浏覽器将使用 2x 描述器加載法拉利-640x480-2x.jpg圖像。但是，如果它有1倍像素密度法拉利-640x480-1x圖像将被加載。此外，此規則将适用于墊和桌面裝置。

<img 
  src="ferrari-1920x1080.jpg"
  alt="yellow ferrari F8 spider on the background of the ocean">      

<img 
  src="ferrari-1x.jpg"
  srcset="ferrari-2x.jpg 2x"
  alt="yellow ferrari F8 spider on the background of the ocean">
 
<!-- or -->
<picture>
  <source 
    srcset="ferrari-1200x960-1x.jpg,
            ferrari-1200x960-2x.jpg 2x"
    media="(min-width: 641px) and (max-width: 1200px)">
  <source 
    srcset="ferrari-1920x1080-1x.jpg,
            ferrari-1920x1080-2x.jpg 2x"
    media="(min-width: 1201px)"> 
  <img 
    src="ferrari-640x480-1x.jpg,
         ferrari-640x480-2x.jpg 2x"
    alt="yellow ferrari F8 spider on the background of the ocean">
</picture>      

9.缺少主要元素

每個網頁都有主要内容，但開發人員會以某種方式忘記它。他們不使用主要元素。是以，輔助技術認為網頁沒有主要内容。

<div class="main-content">

 <!-- main content is here -->

</div>

您可以使用它代替

<main class="main-content">

</main>

10.使用标題太多

使用 h1-h6 元素進行副标題有一種不良做法。當您這樣做時，您忘記了标題可以幫助螢幕閱讀器的使用者更快地在網頁上導航。如果你有标題太多，它阻止人們。是以，在需要的地方使用标題。

<h2>iPhone 11</h2>
<h3>Just the right amount of everything.</h3>      

<h2>
  <span>iPhone 11</span>
  <span>Just the right amount of everything.</span>
</h2>