開發人員在編寫 HTML 和 CSS 時最常犯的六大錯誤

生活中犯錯誤是正常的,沒有人不會犯錯誤,更何況是開發人員呢?今天我們就來卡看看開發人員在編寫 HTML 和 CSS 時最常犯的六大錯誤有哪些。

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

作者 | Stas Melnikov

出品 | CSDN(ID:CSDNnews)

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

用placeholder屬性代替label元素

開發人員經常用placeholder屬性代替label元素。但是,在這種寫法下,使用屏幕閱讀器的用戶無法填寫字段,因為屏幕閱讀器無法從placeholder屬性中讀取文本。

<code>
/<code>

因此,我建議用label元素顯示字段名稱,而placeholder應該作為例子顯示在用戶需要填充的數據中。

<code><label>
Enter your email
.com">
/<label>
/<code>
开发人员在编写 HTML 和 CSS 时最常犯的六大错误

用img元素標記裝飾用的圖片

我經常看到開發人員混淆裝飾圖片和內容圖片。例如,他們會使用img元素來顯示社交圖標。

<code>
/<code>

然而,社交圖標是裝飾性圖標,其目的是幫助用戶迅速理解元素的含義,而無需閱讀文本。即便我們刪除這些圖標,元素的含義也不會消失,所以我們應該使用background-image屬性。

<code>
<code>.social::before {
background-image: url("twitter.svg");
}
/<code>
开发人员在编写 HTML 和 CSS 时最常犯的六大错误

使用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>
开发人员在编写 HTML 和 CSS 时最常犯的六大错误

同時使用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>
开发人员在编写 HTML 和 CSS 时最常犯的六大错误

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 和 CSS 时最常犯的六大错误

空元素

開發人員經常使用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>

原文:https://dev.to/melnik909/the-6-most-common-mistakes-developers-when-writing-html-and-css-f92

本文為 CSDN 翻譯,轉載請註明來源出處。

【END】


分享到:


相關文章: