这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>