DOM小测28期 – DOM节点文档前后位置判断

2019年03月2日 by 张 鑫旭 阅读 4871 次, 今日 3 次

DOM小测头图

本题主要考察如何判断DOM节点文档前后位置,父子关系等。我看了下最后的回答,近9成的回答使用了非常啰嗦的方法,比例之高,实在出乎意料。实际上,本题答案只需寥寥数行,因为有原生的API,contains()可以判断节点是否有包含关系;compareDocumentPosition()可以判定任意位置关系。

阅读全文…

深入Node.compareDocumentPosition API

2019年03月2日 by 张 鑫旭 阅读 3812 次, 今日 5 次

DOM节点树位置对比头图

Node.compareDocumentPosition()方法可以用来对比两个HTML节点在文档中的位置关系,包括前后,父子,自身以及跨文档。不仅是DOM节点,文本节点,注释节点甚至属性节点的位置关系都可以判定,很强。

阅读全文…

link rel=alternate网站换肤功能最佳实现

2019年02月25日 by 张 鑫旭 阅读 12699 次, 今日 16 次

换脸换肤占位图

大多数前端开发人员实现网站换肤功能要么使用一个全局class控制样式切换,要么改变皮肤link元素的href地址。实际上,浏览器中有HTML属性原生支持网站换肤功能,兼容性好,语义化,体验也好,可谓是换肤功能最佳实现了。

阅读全文…

使用document.scrollingElement控制窗体滚动高度

2019年02月22日 by 张 鑫旭 阅读 7060 次, 今日 8 次

介绍一个更加兼容、更加标准的设置窗体滚动高度的方法,那就是document.scrollingElement,兼容性足矣在实际项目中应用。JS基础API,人人必须了解的特性,学到就是赚到。

阅读全文…

快速了解CSS新出的列选择符双管道(||)

2019年02月11日 by 张 鑫旭 阅读 8122 次, 今日 2 次

列选择符封图

列选择符是规范中刚出现不久的新选择符,写作双管道||,是两个字符,和JavaScript语言中的逻辑或写法一致,这个选择符可以让选择所有属于某一列的对应单元格,哪怕这个单元格元素横跨多列。

阅读全文…

写给自己看的CSS shapes布局教程

2019年02月2日 by 张 鑫旭 阅读 10791 次, 今日 7 次

CSS Shapes布局

本文详细介绍CSS Shapes布局,兼容性不错,移动端项目和中后台项目都可以使用,可以实现很多很棒的布局效果,需要和浮动配合使用。不仅支持基础图形,还支持PNG,SVG图像,以及渐变图形的环绕效果。是非常值得学习的一种布局方式。

阅读全文…

写给自己看的CSS columns分栏布局教程

2019年01月31日 by 张 鑫旭 阅读 6980 次, 今日 10 次

columns布局

本文详细介绍了CSS columns分栏布局的各个CSS属性的语法以及一些细节,所有效果都可以实时体验,同时还介绍了一些间接相关的CSS属性,例如break-inside等。

阅读全文…

DOM基础小测27期答疑文字版-窗体滚动二三事

2019年01月26日 by 张 鑫旭 阅读 5534 次, 今日 1 次

小测头图

本次小测借一个简单案例跟大家讲讲CSSOM视图模式(CSSOM View Module)相关的一些API及其特性,适用场景等,总结出一些最佳实践,明确一些技术细节,让技术更加精纯。

阅读全文…

CSS var变量的局部作用域(继承)特性

2019年01月26日 by 张 鑫旭 阅读 4656 次, 今日 2 次

CSS变量缩略图

最近做项目,发现CSS变量一个有意思的特性,那就是变量作用域非全局,于是,我们可以放心大胆使用CSS变量给伪元素传参了。这样,以前一些很啰嗦的实现现在就可以变得非常简洁。

阅读全文…

粉丝群第27期JS基础小测答疑文字版

2019年01月20日 by 张 鑫旭 阅读 6914 次, 今日 2 次

小测头图

讲讲JS正则表达式二三事,以及在这基础上制作的可视化工具,再讲讲不使用正则的傻白甜实现方法,并以此延伸一点关于技术人员职业发展的事情。

阅读全文…