html – 是否有理由不将ARIA州和角色用作CSS中的选择器?

前端之家收集整理的这篇文章主要介绍了html – 是否有理由不将ARIA州和角色用作CSS中的选择器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在努力使一个可访问的网站使用,其中包括ARIA标签。在我看来,诸如aria无效的属性将是我的CSS的良好选择器,而不是使用.error类。

这样做的好处是更精简,更有意义的HTML,这更容易让我从CSS(和JS)挂钩。也就是说,我没有在其他地方看到这样做,所以我很怀疑利用无障碍标签进行样式的缺点。我怀疑使用无约束属性选择器使CSS性能降低,但还有其他缺点我没有考虑过?

解决方法

属性选择器是管理大型CSS样式的非常灵活的方式,因为属性选择器将始终为 specificity of 0-0-1-0

[aria- *]选择器完全可以用作样式钩子,我还建议使用自定义[data- *]属性来填充可能需要一次性的空白。当然,应该继续使用类选择器,但是您可以使用属性选择器来做一些非常优雅的样式扩展:

[data-foo] {
    color: red;
}
[data-foo="bar"] {
    color: blue;
}
[data-foo="fizz"] {
    color: green;
}

这些选择器中的每一个具有相同的特异性,并且级联将允许适当地应用样式。

如果需要,可以使用[attr〜=“value”]选择器创建自己的类的形式。

使用“attribute contains” selector可用于a technique that I call “classy images”

在类中使用属​​性的一个隐藏的好处是JavaScript中的性能提升。不必检查元素上的类的存在(这是非常容易出错的),浏览器已经支持很长时间的getAttribute,hasAttribute和setAttribute。

猜你在找的HTML相关文章