阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      了解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

      目录
      目录