:focus-visible
可以让我们知道元素的聚焦行为到底是鼠标触发还是键盘触发,从而可以更有效地控制浏览器中因为focus行为触发的outline轮廓样式,解决了我一个困扰我多年的难题。
伪类匹配列表数目实现微信群头像CSS布局的技巧
2019年03月11日 by 阅读 34307 次, 今日 19 次子元素数量不同布局效果也不一样,这样的需求还比较常见,其中借助CSS伪类,我们可以纯CSS判断子元素项的个数,从而智能实现我们需要的布局,无需额外的标签指定,很有意思。
DOM小测28期 – DOM节点文档前后位置判断
2019年03月2日 by 阅读 18876 次, 今日 17 次本题主要考察如何判断DOM节点文档前后位置,父子关系等。我看了下最后的回答,近9成的回答使用了非常啰嗦的方法,比例之高,实在出乎意料。实际上,本题答案只需寥寥数行,因为有原生的API,contains()
可以判断节点是否有包含关系;compareDocumentPosition()
可以判定任意位置关系。
深入Node.compareDocumentPosition API
2019年03月2日 by 阅读 20919 次, 今日 21 次Node.compareDocumentPosition()方法可以用来对比两个HTML节点在文档中的位置关系,包括前后,父子,自身以及跨文档。不仅是DOM节点,文本节点,注释节点甚至属性节点的位置关系都可以判定,很强。
link rel=alternate网站换肤功能最佳实现
2019年02月25日 by 阅读 56322 次, 今日 21 次大多数前端开发人员实现网站换肤功能要么使用一个全局class控制样式切换,要么改变皮肤link元素的href地址。实际上,浏览器中有HTML属性原生支持网站换肤功能,兼容性好,语义化,体验也好,可谓是换肤功能最佳实现了。
使用document.scrollingElement控制窗体滚动高度
2019年02月22日 by 阅读 49518 次, 今日 24 次介绍一个更加兼容、更加标准的设置窗体滚动高度的方法,那就是document.scrollingElement,兼容性足矣在实际项目中应用。JS基础API,人人必须了解的特性,学到就是赚到。
快速了解CSS新出的列选择符双管道(||)
2019年02月11日 by 阅读 26307 次, 今日 20 次列选择符是规范中刚出现不久的新选择符,写作双管道||
,是两个字符,和JavaScript语言中的逻辑或写法一致,这个选择符可以让选择所有属于某一列的对应单元格,哪怕这个单元格元素横跨多列。
写给自己看的CSS shapes布局教程
2019年02月2日 by 阅读 42284 次, 今日 21 次本文详细介绍CSS Shapes布局,兼容性不错,移动端项目和中后台项目都可以使用,可以实现很多很棒的布局效果,需要和浮动配合使用。不仅支持基础图形,还支持PNG,SVG图像,以及渐变图形的环绕效果。是非常值得学习的一种布局方式。
写给自己看的CSS columns分栏布局教程
2019年01月31日 by 阅读 43567 次, 今日 29 次本文详细介绍了CSS columns分栏布局的各个CSS属性的语法以及一些细节,所有效果都可以实时体验,同时还介绍了一些间接相关的CSS属性,例如break-inside等。
DOM基础小测27期答疑文字版-窗体滚动二三事
2019年01月26日 by 阅读 19367 次, 今日 17 次本次小测借一个简单案例跟大家讲讲CSSOM视图模式(CSSOM View Module)相关的一些API及其特性,适用场景等,总结出一些最佳实践,明确一些技术细节,让技术更加精纯。