哈Ha！ 我向您介绍Stas Melnikov
撰写的文章“
开发人员在编写HTML和CSS时最常见的6个错误 ”的翻译。
使用占位符属性代替label元素
开发人员通常使用占位符属性而不是label元素。 但是在这种情况下，屏幕阅读器用户（屏幕阅读器）无法填写字段，因为屏幕阅读器无法从占位符属性读取文本。
<input type="email" placeholder="Enter your email">
因此，我建议将label元素用于name字段，并将占位符属性用于用户必须填写的示例数据。
<label> <span>Enter your email</span> <input type="email" placeholder="eg example@gmail.com"> </label>
使用img元素布置装饰图形
我经常看到开发人员将装饰图形与内容图像混淆。 例如，他们使用img元素标记社交图标。
<a href="https://twitter.com" class="social"> <img class="social__icon" src="twitter.svg" alt> <span class="social__name">Twitter</span> </a>
但是社交网络图标是一种装饰性图标，可帮助用户无需阅读文本即可快速理解元素的含义。 如果删除图标，则不会丢失元素的值，因此可以为其使用background-image属性。
<a href="https://twitter.com" class="social"> <span class="social__name">Twitter</span> </a>
.social::before { background-image: url("twitter.svg"); }
使用调整大小属性
当使用resize属性禁用文本区域的大小调整时，可访问性降低。 因此，用户不能以方便的方式输入数据。
textarea { width: 100%; height: 200px; resize: none; }
您可以使用属性min-width，max-width，min-height和max-height来限制元素的大小，并且用户可以方便地填写字段。
textarea { min-width: 100%; max-width: 100%; min-height: 200px; max-height: 400px; }
使用display：块和position：绝对（固定）在一起。
我经常看到开发人员使用display和position属性，如下所示：
.button::before { content: ""; display: block; position: absolute; top: 0; left: 0; }
但是浏览器会设置默认块值。 因此，您无需为绝对或固定位置的元素添加此值。 因此，以下代码给出的结果与上一个相同。
.button::before { content: ""; position: absolute; top: 0; left: 0; }
没有结构属性值
我无法使用键盘使用该网站。 我无法点击链接。 我无法注册。 这是因为开发人员在不向Outline属性添加任何元素时，他们将注意力不再放在元素上。
.button:focus { outline: none; } .button:focus { outline: 0; }
如果您需要默认关闭焦点，请确保将状态设为备用焦点。
.button:focus { outline: none; box-shadow: 0 0 3px 0 blue; }
空物品
开发人员经常使用空的HTML元素来设置元素的样式。 例如，使用空的div或span元素标记汉堡菜单：
<button class="hamburger"> <span></span> <span></span> <span></span> </button>
.hamburger { width: 60px; height: 45px; position: relative; } .hamburger span { width: 100%; height: 9px; background-color: #d3531a; border-radius: 9px; position: absolute; left: 0; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 18px; } .hamburger span:nth-child(3) { top: 36px; }
但是您可以使用伪元素:: before和:: after并获得相似的结果。
<button class="hamburger"> <span class="hamburger__text"> <span class="visually-hidden">Open menu</span> </span> </button>
.hamburger { width: 60px; height: 45px; position: relative; } .hamburger::before, .hamburger::after, .hamburger__text::before { content: ""; width: 100%; height: 9px; background-color: #d3531a; border-radius: 9px; position: absolute; left: 0; } .hamburger::before { top: 0; } .hamburger::after { top: 18px; } .hamburger__text::before { top: 36px; } .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px !important; height: 1px !important; overflow: hidden; }