生活中犯错误是正常的,没有人不会犯错误,更何况是开发人员呢?今天我们就来卡看看开发人员在编写 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;
}
图片来源: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;
}

猜你喜欢
联络方式:
深圳 · 龙岗 · 大运软件小镇22栋302-308
电话:400 1828 580
邮箱:szhulian@qq.com



-
留白手法网站设计 创造更好的用户体验
留白设计可以给网站一个更为干净简洁的界面,创造更好的用户体验。下面跟大家分享留白网站设计,这些网站通过留白可以有效的突出了某些主体的特征、让一些消息或者图片在页面更吸人眼球
-
有哪些免费的网络推广方法?效果怎么样?
互联网营销已被企业广泛应用,很多企业的订单主要来源于互联网,至此做好网络营销对于企业的生存至关重要。要想做好企业网络营销,必须掌握正确的网络营销推广渠道以及相关推广方式。现在互联网有很多的推广渠道,并不是每一个渠道都适合每一个企业网络营销,很多企业都没有做具体分析,就直接做推广,后面没一个推广渠道做好了,,,,,,
-
ApiCloud 动态生成dom元素绑定事件在IOS端失效的问题
使用touchstart或者touchend代替click事件。触屏事件问题,如果触发了touchmove,touchend就不会被触发了,而且touchmove没有持续触发。在touchstart的时候调用下event.preventDefault(); 阻止冒泡事件,即可让其他事件都正常被触发。
-
Nginx为什么比apache快?
Nginx 是一个免费的,开源的,高性能的 HTTP 服务器和反向代理,以及 IMAP / POP3 代理服务器。Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名。本文从底层原理分析...
-
【网站建设】解决方案下载注意事项
动态网页技术根据程序运行的地点不同,又分为客户端动态技术和服务器端动态技术。动态网页一般涉及数据库操作,例如注册、登录、查询、购物等,都需要设计强大的服务器端动态程序...