开发人员在编写 HTML 和 CSS 时最常犯的六大错误技术頭條網

开发人员在编写 HTML 和 CSS 时最常犯的六大错误

2019-11-16 10:29:43 CSDN

生活中犯错误是正常的，没有人不会犯错误，更何况是开发人员呢？今天我们就来卡看看开发人员在编写 HTML 和 CSS 时最常犯的六大错误有哪些。

作者 | Stas Melnikov

出品 | CSDN（ID：CSDNnews）

用placeholder属性代替label元素

开发人员经常用placeholder属性代替label元素。但是，在这种写法下，使用屏幕阅读器的用户无法填写字段，因为屏幕阅读器无法从placeholder属性中读取文本。

<code>
/<code>

因此，我建议用label元素显示字段名称，而placeholder应该作为例子显示在用户需要填充的数据中。

<code><label>
Enter your email
.com">
/<label>
/<code>

用img元素标记装饰用的图片

我经常看到开发人员混淆装饰图片和内容图片。例如，他们会使用img元素来显示社交图标。

<code>
/<code>

然而，社交图标是装饰性图标，其目的是帮助用户迅速理解元素的含义，而无需阅读文本。即便我们删除这些图标，元素的含义也不会消失，所以我们应该使用background-image属性。

<code>

<code>.social::before {
background-image: url("twitter.svg");
}
/<code>

使用resize属性

如果利用resize属性来禁止textarea调整大小，那么你就破坏了可访问性。因为用户无法舒适地输入数据。

<code>textarea {
width: 100%;
height: 200px;
resize: none;
}
/<code>

你应该使用min-width、max-width、min-height以及max-height属性，这些属性可以限制元素的大小，而且用户也可以舒舒服服地输入数据。

<code>textarea {
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 400px;
}
/<code>

同时使用display: block和position: absolute（fixed）

我经常看见开发人员像下面这样使用display和position属性：

<code>.button::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
}
/<code>

但是，浏览器会默认设置block。因此，你无需为absolute或fixed的元素设置这个值。也就是说，以下代码的结果与上述代码完全相同。

<code>.button::before {
content: "";
position: absolute;
top: 0;
left: 0;
}
/<code>

Outline属性的none值

无法通过键盘访问网站；链接打不开；无法注册等等。出现这些情况是因为开发人员将outline属性设置成了none值，因此元素无法聚焦。

<code>.button:focus {
outline: none;
}

/* or */

.button:focus {
outline: 0;
}
/<code>

如果你需要禁用默认的聚焦，那么也别忘了指定取而代之的聚焦状态。

<code>.button:focus {
outline: none;
box-shadow: 0 0 3px 0 blue;
}
/<code>

空元素

开发人员经常使用HTML空元素来调整元素的样式。例如，利用空div或span元素来显示导航栏菜单。

<code><button>



/<button>/<code><code>
.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;
}
/<code>

其实，你可以使用 ::before和 ::after伪元素达成同样的效果。

<code><button> 


dden">Open menu

/<button>/<code><code>
.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;
}
/<code>