我们经常会在博客、文档中看到类似这样的侧边导航目录，例如这种导航也被称为“电梯导航”（当然可能还有其他叫法，知道是这个交互就行）。它会随着内容的滚动而自动切换当前选中态，点击任意目录也会自动滚动到对应标题，就像这样通常要实现这样一个交互肯定少不了JS，常规的做法是监听滚动事件，也可以用IntersectionObserver监听元素的滚动位置状态，下面有一篇关于用IntersectionObserver的实现尝试使用JS

0;}示意效果如下有关这个具体实现可以参考之前这篇文章：CSS和SVG实现文字渐变、描边、投影不过现在，你也可以像SVG一样，直接通过paint-order来改变层级了.txt{

always;}这样无论滚动有多快，都不会跳过任何一屏了还有一点，现在是有滚动条的，显然是多余的这里可以用::-webkit-scrollbar去除滚动条::-webkit-scrollbar{

介绍一个比较常见的动画效果。在日常开发中，为了强调凸显某些文本或者元素，会加一些扫光动效，起到吸引眼球的效果，比如文本的或者是一个卡片容器，里面可能是图片或者文本或者任意元素除此之外，还有那种不规则的图片，比如奖品图案这些是如何实现的呢？一起看看吧一、CSS

介绍一个和主题密切相关的CSS特性：light-dark，有了它，可以更灵活的适配各种主题模式。一、prefers-color-scheme一般来讲，网站会有三种主题模式，白天、黑夜、自动跟随系统，比如下面的

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

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

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

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

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

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

20px));/*等同于?*/这就不得了了，如果此时的1rem是16px，那么浏览器会根据1rem的真实长度和20px做对比，相当于让两个带单位的长度做除法运算/*等同于*/transform:

实现Chrome标签栏的技巧（跳转公众号）这次再来介绍一个比较简单、实用的“切图”方式。通过前面两个例子，可能你已经猜到要怎么做了。没错，就是先补全然后在设计软件中将黑色部分单独“切”出来然后在

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

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

在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的但很多时候是不需要展示这个滚动条的，也就是这样的效果，如下你可能想到直接设置滚动条样式就可以了，就像这样::-webkit-scrollbar

(codepen.io)[4]三、总结一下非常简单、非常轻松的一篇分享，相信可以给大家带来一些启发，下面总结一下绘制要点：复杂的图像先拆解，先实现简单的部分x

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

flex中，可以直接通过order进行排序，order越大，元素越靠后。https://developer.mozilla.org/zh-CN/docs/Web/CSS/order比如，我们将第

0)效果如下看到没，仅仅只有一个颜色，就完整的实现所有颜色的渐变，是不是非常方便？如果用锥形渐变(conic-gradient)，就能轻易实现一个色相环，无需定义一堆中间颜色background:

之前在项目中做了一个图片对比的工具，演示如下有一些有趣实用的小细节，一起看看如何实现的吧一、布局布局比较简单，两张图片上下重叠在一起就行了 这里可以只给第一个图片设置绝对定位，有几个好处第1张图片层级自动就高了第1张图片仍在原处，也无需设置

(codepen.io)另外，还可以将animation-range合并到同一个动画中，在关键帧前面加上entry这些关键词，这样就无需指定animation-range中了，示意代码如下div{

➕image-20230629190245242这种图形就可以直接用「纯色渐变」进行绘制了，单纯的背景色可实现不了，关键点就是控制background-size，实现如下background:

::marker是通过list-style生成，所以要去除就很简单了旧版本浏览器需要通过专门的伪元素修改，::-webkit-details-marker和::-moz-list-bullet

颜色处理函数了，有了它，再也不需要用LESS、SASS等预处理工具了，还可以实现颜色动态更新，一起了解一下吧一、color-mix语法首先来看语法，比较简单color-mix(in

jump-none)表示不跳过，有多少帧就运行多少帧image-20230612101507944动画效果就是正常的1、2、3依次变化，1→2→3→1→2→3...Kapture

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下面盘点我用过的一些方法一、透明度这应该是最容易想到的方式。将一个元素透明度降低不就颜色变浅了吗？假设

red;}在不设置任何偏移的情况下，可以看到，绝对定位元素始终跟随在文本后面，也就是说，现在仍然处于文档流中，如下image-20230223233946644如果仅设置一个方向，比如leftp{

在平时开发中，经常会碰到一些需要判断高度的场景，比如当超过一定高度后，需要自动出现展开折叠按钮，如下传统的思路肯定是通过JS去动态计算容器的高度，但这样就涉及到加载时机的问题，获取早了可能元素还没渲染好，晚了又会有明显的卡顿感，或者会引起页面的闪烁。那有没有仅通过CSS的方法呢？当然也是有的！要实现上面这个例子的效果，需要解决以下几个问题：如何判断不同的高度？如何在不同的高度下展示隐藏点击按钮？如何点击切换？花几分钟一起看看吧😁一、先思考一下布局明确来讲，CSS现在已经有相关方法可以判断高度了，那就是CSS容器查询[1]。不过这个特性太高级了，目前几乎还不能实战，我们这次介绍一种更加传统的方式。如何判断不同的高度？换句话来说，什么样的布局在不同的高度下会有截然不同的效果？思考一下🤔🤔绝对定位？位置完全固定了，不行。flex布局？好像也只能控制水平方向上grid布局？这个水太深，没来得及研究（可能也行？）等等，除了以上，还有一个现在都避而不谈的浮动布局，为啥现在都很少用了呢，原因在于浮动布局非常脆弱，细小的尺寸变化都能引起整个布局的坍塌。我记得以前用浮动布局的时候，都需要尺寸精确，稍微出一点差错就导致浮动元素不知道跑哪去了...既然对尺寸非常敏感，是不是和本文的临界高度有一定联系呢？没错，今天要用到的方式就是浮动布局。二、浮动布局的奥妙一步一步，来搭建我们所需要的页面雏形。我们先来看一个有趣的现象，这里有一个容器，里面有3个子节点，分别为A、B、C，其中A左浮动，B、C右浮动

*/}效果如下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

大家好，欢迎关注前端侦探在不声明容器类型的情况下，cqw等同于vw，也就是相当于把整个页面当成容器，这里希望将这个div作为参考对象，需要提前声明container-type，如下.con

https://www.zhangxinxu.com/wordpress/2017/11/css3-radial-gradient-syntax-example/[6]

''这样去除之后，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