以下为译文:
用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=" <img class="social__icon" src="twitter.svg" alt /> <span class="social__name">Twitter</span> </a>
然而,社交图标是装饰性图标,其目的是帮助用户迅速理解元素的含义,而无需阅读文本。即便我们删除这些图标,元素的含义也不会消失,所以我们应该使用background-image属性。
<a href=" <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: 003px0 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">Openmenu</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