:focus-visible
可以让我们知道元素的聚焦行为到底是鼠标触发还是键盘触发,从而可以更有效地控制浏览器中因为focus行为触发的outline轮廓样式,解决了我一个困扰我多年的难题。
2019年03月 存档
伪类匹配列表数目实现微信群头像CSS布局的技巧
2019年03月11日,星期一子元素数量不同布局效果也不一样,这样的需求还比较常见,其中借助CSS伪类,我们可以纯CSS判断子元素项的个数,从而智能实现我们需要的布局,无需额外的标签指定,很有意思。
DOM小测28期 – DOM节点文档前后位置判断
2019年03月2日,星期六本题主要考察如何判断DOM节点文档前后位置,父子关系等。我看了下最后的回答,近9成的回答使用了非常啰嗦的方法,比例之高,实在出乎意料。实际上,本题答案只需寥寥数行,因为有原生的API,contains()
可以判断节点是否有包含关系;compareDocumentPosition()
可以判定任意位置关系。
深入Node.compareDocumentPosition API
2019年03月2日,星期六Node.compareDocumentPosition()方法可以用来对比两个HTML节点在文档中的位置关系,包括前后,父子,自身以及跨文档。不仅是DOM节点,文本节点,注释节点甚至属性节点的位置关系都可以判定,很强。