在数据驱动视图的框架下，你最头疼的事情是什么？没错，就是获取dom。大部分业务逻辑都可以在数据层面进行处理，但有些情况就不得不去获取真实的dom，比如获取元素的宽高dom.offsetHeight或者调用某些dom方法等dom.scrollTop

来兜个底。首先我们需要判断一下，也就是检测details到底支不支持name这个特性，这个很简单，我们只需要创建一个details元素，然后看这个属性是否存在就行了，如下'name'

实现多行文本展开收起的小技巧，非常巧妙，有兴趣的可以回顾一下。不过展开收起按钮的隐藏和显示采用了“障眼法”，也就是通过一个伪元素设置和背景相同的颜色覆盖实现的，如下时代在进步，CSS也在不断发展。

特性注定是冷门属性，主要是可替代性太强了，而且不知道什么时候才可以正式投入使用，现在就当提前了解吧。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发

现在已经是“组件化”开发时代了。相信大家平时在vue或者react中都碰到过“跨组件”通信的需求，通常我们需要将数据放在一个公共的父级上，然后用context之类的方式传递下去，或者借用pinia这样的开源库去更好的管理这些数据。不过，大部分项目可能没有那么复杂，可能只有极少部分需要“跨组件”通信或者全局传递的，专门去引入一个全局状态管理库还是有一定成本的，不仅仅是性能开销，还有学习成本。另外，还有一些旧项目，由于前期组件设计未考虑周全，或者由于后期需求迭代，导致需要跨组件通信，此时再引入状态管理库也有很大的改造成本。框架用久了，可能有些都忘了，原生

在移动端应用中，经常会碰到这样的导航栏，导航栏左边通常是一个返回按钮，中间是标题，右边是工具栏，如下值得注意的是，右侧的工具栏是不固定的，有可能有多个，也有可能没有，并且中间的标题是整体居中的，如果标题过长，还能出现省略号，各种适应场景如下这样的自适应标题如何实现呢？一起看看吧一、两种不完美实现假设布局是这样的

组件）https://ant.design/components/select-cn还有个「inline」属性，和「block」是一致的，只是用来定义「水平方向」上的对齐方式，也有

从而不需要手动去输入账号密码https://developers.google.com/identity/passkeys?hl=zh-cnPrivacy

/*淡出动画*/}这也是为什么在使用了document.startViewTransition后整个页面会有淡入淡出的效果了为了让每个元素都有自己的过渡状态，这里需要给每个元素都指定名称.item{

API来实现对悬浮层的控制，相比声明式而言更加灵活控制悬浮层的方法有showPopover、hidePopover、togglePopoverCSS伪类:open可以区分悬浮层的打开状态JS

https://juejin.cn/post/6945023989555134494[8]锥形渐变只能画圆锥吗？conic-gradient

0),}效果如下image-20230514011045132注意观察，两个重叠的部分不就是一个旋转45deg的矩形吗？如下image-20230514011432213可以任意改变角度div{

渐变的强大。下面总结一下复杂的图形需要通过拆分转换成熟悉的形状径向渐变中的closest-side，表示最近的边，可以根据背景尺寸直接控制圆的大小多背景的情况下，前面的背景层级

布局可以很方便的控制各个元素的位置计时器开始和暂停其实就是动画的运行和暂停直接将动画取消就相当于重置了整个动画最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤​参考资料[1]

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradient[2]radial-gradient()

0deg);}像之前这篇文章中的小三角就可以用这个方式来绘制image-20230304141000753二、箭头符号image-20230317210422497将三角形改变一下角度，比如div{

在项目中经常会碰到需要邻近色的场景，比如将一个颜色变深（浅）一点，下面是一个按钮的选中态image-20230304141000753如果出现一种颜色就定义一个变量，每次都要维护多个颜色变量太麻烦了。有没有办法只用一个颜色呢？在这里也就是，如何将一个颜色变浅一点？这样做的好处是，如果需要更换主题色，只用修改一个变量就行了，如下image-20230305133401950下面盘点我用过的一些方法一、透明度这应该是最容易想到的方式。将一个元素透明度降低不就颜色变浅了吗？假设

*/}效果如下image-20230210191607226那么，如何让这些代码高亮呢？这就需要对内容进行关键词分析提取了，我们可以用现有的代码高亮库，比如highlight.js[14]。

13.45.13其实这里我是不太建议动画的，弹窗就是要反应快速，加了动画反而会拖累整体。另外，还可以通过:modal伪类来区分是普通弹窗还是模态弹窗dialog:modal{

最近有同事问我这样一个问题：需要绘制一个自适应文本的写作网格线，设计稿是这样的写作网格其实就是一行行虚线，要求如下虚线的纵向间隔要跟随行高自适应，确保文本在每一栏虚线上虚线后面的背景是动态的，可以是纯色，可以是渐变，也可以是图片绘制这样的虚线，看似容易，其实暗藏玄机，下面一起看看有哪些实现方式吧一、纯色背景下的虚线首先来看这种简单情况，大可以通过两层渐变覆盖的方式实现。假设文本行高是2，先绘制水平方向的body{

试验性支持你学会了吗？总的来说，在color-mix到来之前，这样一个小技巧还算是不错的解决方案。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤参考资料[1]CSS

在项目中，经常会碰到背景色不确定的场景，为了让内容文字足够清晰可见，文字和背景之间需要有足够的对比度。换句话说，当背景是深色时，文字为白色，当背景是浅色时，文字为黑色，就像这样：image-20221226102604970通常这种情况，大家可能会通过

最近碰到这样一个问题，在一张封面上直接显示书名，可能会存在书名看不太清楚的情况（容易受到背景干扰），如下image-20221210163633853为了解决这个问题，设计师提了一个“究极”方案，将书名背后的图片模糊一下，这个在

scroll-snap还有一种情况是滚动捕捉：scroll-snap-type[6]，这个属性可以让滚动时自动捕捉临界点。正常情况下，滚动临界点是紧贴滚动容器的，像这样Kapture

''这样去除之后，a就仅仅是一个普通的标签了，也不会被聚焦到了。不过这个方案需要在某处保留a原有的href属性，以便后续还原。如果用inert属性，直接就可以实现全方位的禁用了Kapture

0而不是display:none，还有选中的背景色变化，由于background-image不支持过渡，所以换成了::before，然后单独用opacity控制等等一些细节，效果如下Kapture

无比强大的:has伪类终于来了~，一起看看吧相信大家最近对:has都有所耳闻，规范提及了那么久，却迟迟没有动静，最近浏览器终于开始支持了~🎉🎉:has伪类是一个非常强大的伪类，强大到难以置信，可以做很多梦寐以求的事情，很多以前只能更改

动画设置infinite后配合animationiteration监听可以实现周期性触发效果可以直接通过:hover来控制台动画的暂停和播放当然，可以利用的不仅仅是以上几个案例，任何和

也难以做到（或者说成本更高）的事情，比如过渡动画首先，再改进一下，很多小数都是百分比形式的，也就是0~1范围内，所以前面--percent可能是这样的值0.4869count::before

91+，目前还不太适合外部使用，但可以提前了解当然，自定义计数器的潜力远远不止于此，后面还会进行更多的挖掘与应用。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤参考资料[1]CSS

transparent;}body[scroll]::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{

https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#%E7%B3%BB%E7%BB%9F%E9%A2%9C%E8%89%B2

https://www.zhangxinxu.com/wordpress/2019/05/content-css-var/[3]list-style-type:

在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。比如下面这个例子，注意观察头部阴影作家专区可以看到，只有滚动以后才出现阴影。一般情况下，使用

偶尔在网上看到这样一个设计，当阅读量比较少时，文字呈灰色，当阅读量比较多（>=100）时，文字就变成褐色了，示意效果如下image-20220417223953275是不是非常醒目呢？另外，还有那种可以根据进度自动变色的进度条，如下image-20220421195045775其实通过纯

，现在都统一成了list-styleimage-20220410184100481然后，可以指定自定义的三角图标，展开的样式可以通过details[open]来定义summary{

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-conic-gradient[4]textPath:

中的一个示意效果backdrop-filter是让当前元素所在区域后面的内容模糊，要想看到效果，需要元素本身半透明或者完全透明；而filter是让当前元素自身模糊。有兴趣的可以查看这篇文章：CSS

最近项目中看到这样的一个切角效果，如下所示image-20220317162231279就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？一、自适应方式这种布局一般有两种自适应方式，当然具体需要哪种可以根据实际设计师需求1.

counter(seconds);}image-20220304183029959这里的时、分、秒并没有联动关系，所以各自都需要单独的动画。下面就需要思考一下🤔，如果用

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image?fileGuid=fKc3ePJfifoZewha

decimal-leading-zero;image-20220302202816868回到这里，需要做的就很简单了，补上这个参数就行了，完整代码如下span::before{

点击动画的几个套路和一些案例，其实就是默认执行动画，点击时重置一下就行了。整体来说代码很简单，只是理解起来可能不是特别顺畅，下面总结一下实现要点：简单动画用transition，其他用

16px;}其实还可以用repeating-conic-gradient优化一下（原理是一样的，所以归为同一种方法），后面两个颜色是前面两个重复而来，所以可以只用两个颜色实现.bg{