了解CSS世界中的“未定义行为”

🌙
手机阅读
本文目录结构

了解CSS世界中的“未定义行为”

作者在本节介绍了,W3C-CSS建议规范中没有涉及的内容;

浏览器对于这些,不存在于规范的场景,可能会有不同的不处理;(有些浏览器如果没有做相关处理,可能就会出现一些奇奇怪怪的事情)

举一个"未定义行为"的例子

CSS 世界中有很多伪类,其中一个比较常用的就是:active,在 IE8 及以上版本的浏览器行为表现非常统一,支持非焦点元素 ,鼠标按下,执行:active 伪类对应的CSS 样式,鼠标抬起还原。

通用情况下,:active 的表现都是符合预期的,但是,当遭遇其他一些处理的时候,事情就会变得不一样,具体指什么处理呢?

假设我们现在有一个< a>标签模拟的按钮,CSS 如下:

a:active { background-color: red; }

假设此按钮的 DOM 对象变量名为 button,JavaScript 代码如下:

button.addEventListener("mousedown", function(event) {
    // 此处省略 N 行
    event.preventDefault();
});

也就是鼠标按下的时候,阻止按钮的默认行为,这样设置可以让拖动效果更流畅。

看似平淡无奇的一段代码,最后却发生了意想不到的情况:

  • Firefox 浏览器的:active 阵亡了,鼠标按下去没有 UI 变化,按钮背景没有变红!
  • 其他所有浏览器,如 IE 和 Chrome 浏览器,:active 正常变红,符合预期。

这里,Firefox 和 IE/Chrome 浏览器表现不一样,这是 Firefox 浏览器的 bug 吗?

这可不是bug,而是因为规范上并没有对这种场景的具体描述,所以 Firefox 认为:active 发生在mousedown 事件之后

本例子的参考代码:https://demo.cssworld.cn/2/2-1.php

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了