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

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

作者 | Stas Melnikov

译者 | 弯月，责编 | 刘静

出品 | CSDN（ID：CSDNnews）

以下为译文：

用placeholder属性代替label元素

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

<input type="email" placeholder="Enter your email">

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

<label><span>Enter your email</span><input type="email" placeholder="e.g. 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属性

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

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: block和position: absolute（fixed）

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

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

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

.button::before {content: "";position: absolute;top: 0;left: 0;
}

Outline属性的none值

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

.button:focus {outline: none;
}/* or */.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;
}

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

本文为 CSDN 翻译，转载请注明来源出处。

【END】

大牛告诉你0基础转行学Python的发展前景！

https://edu.csdn.net/topic/python115?utm_source=csdn_bw

热文 推荐

☞

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

汉堡菜单_开发人员在编写汉堡菜单时犯的错误
汉堡菜单 by Jared Tong 汤杰(Jared Tong) 开发人员在编写汉堡菜单时犯的错误 (The mistake developers make when coding a hambur ...
初级测试开发面试题_初级开发人员在编写单元测试时常犯的错误
初级测试开发面试题自从我编写第一个单元测试以来已经有10年了. 从那时起,我不记得我已经编写了成千上万的单元测试. 老实说,我在源代码和测试代码之间没有任何区别. 对我来说是同一回事. 测试代码是源 ...
初级开发人员在编写单元测试时常犯的错误
自从我编写第一个单元测试以来已经有10年了. 从那时起,我不记得我已经编写了成千上万的单元测试. 老实说,我在源代码和测试代码之间没有任何区别. 对我来说是同一回事. 测试代码是源代码的一部分. 在过 ...
F12 开发人员工具调试 HTML 和 CSS
IE调试网页之六:使用 F12 开发人员工具调试 HTML 和 CSS (Windows) F12 开发人员工具可帮助你查找和修复 HTML 和级联样式表 (CSS) 代码中的错误.如果不使用这些工具 ...
css html 对错号,网页开发人员常见的HTML和CSS错误
初级程序员在编写Html和CSS时在高级语言上总是犯错误,原因可能是粗心大意或缺乏足够的经验.开发者长期书写干净.整洁的代码更有助于提高其未来的开发技能,同时代码的可读性能保证以后修改编辑原程序更加方 ...
c语言程序框一点数字就消失,你用C语言编程时，会犯下面的错误吗？
原标题:你用C语言编程时,会犯下面的错误吗? C编译的程序对语法检查并不像其它高级语言那么严格,这就给编程人员留下"灵活的余地",但还是由于这个灵活给程序的调试带来了许多不便,尤其 ...
域名该怎样选_给项目选择域名时我们常犯的几个错误我们应该如何正确选择域名...
互联网创业,域名先行.业界传说这句话是由京东掌门人刘强东总结出来的,其实在我看来,不管刘总是不是说了这句话,这句话目前都俨然已经成为了大家在做互联网项目的时候的金科玉律.换句话说,一个互联网项目的组成 ...
2020年面向前端开发人员的10个最佳CSS框架
" NASA已将机器人降落在火星上,并且一些开发人员仍在他们网站中div的中心对齐方面苦苦挣扎." 这个笑话包含很多真相.对于UI / UX设计人员来说,要制作一个在每个浏览器上看 ...
开发人员避免编写测试的2个最常见原因
This post was originally published on Medium 这篇文章最初发表于Medium Writing tests represents one of those f ...

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

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

最新文章

热门文章