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

2020-03-28 10:15:00 2617 4 编辑:深圳网站建设 来源:互联网

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


1. 用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>


2. 用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");

}


3. 使用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;

}


26.jpg

图片来源:Pexels


4. 同时使用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;

}


5. Outline属性的none值

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

.button:focus {

  outline: none;

}

/* or */

.button:focus {

  outline: 0;

}

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

.button:focus {

  outline: none;

  box-shadow: 0 0 3px 0 blue;

}


6. 空元素

开发人员经常使用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;

}


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通