关注JS时间过长，你会养成用JS实现任何功能的习惯，而忘记了HTML和CSS也有一定的功能特性。其实有些功能用JS实现是吃力不讨好的。我们需要综合使用技术工具，而不是仅仅依赖JS。5件事你不需要Javascript这篇文章从5个例子开始，告诉我们哪些功能不一定要用JS来完成。概述使用css控制svg动画原文画了一个燃放烟花的例子，本质上是使用css控制svg产生动画效果，核心代码：.trail{stroke-width:2;中风-dasharray:11051010530150;动画名称：轨迹；animation-timing-function:ease-out;}@keyframestrail{from,20%{stroke-width:3;笔画偏移量：80；}100%,到{笔画宽度:0.5;笔画偏移量：-150；}}可以看出stroke-dasharray主要是用来控制实线和虚线的样式，然后通过动画效果改变stroke-dashoffset，从而实现起点的位移线，实现“绘制线””，此css样式对svg绘制的路径有效。sidebar可以充分利用css实现hover时才出现的侧边栏：nav{position:'absolute';right:100%;transition:0.2stransform;}nav:hover,nav:focus-within{transform:translateX(100%);}核心是设置transform属性可以让悬停时元素偏移，translateX(100%)可以移动当前元素宽度的位置，另外一个有意思的地方是，如果你用TABS按钮聚焦侧边栏中的元素，侧边栏应该也出来了，可以直接使用:focus-within。如果需要在hover后延迟显示，可以使用transition-delay属性。stickyposition使用position:sticky来粘贴一个元素：.square{position:sticky;top:2em;}这样元素就会一直显示在它的父容器中，但是一旦它出现在窗口中，当top超过2em时就会固定并留在原地。用JS判断比较复杂，你要尽量监听父元素的滚动，定位和切换的时候可能会有一些抖动，因为JS和CSS的执行是异步的。但是当我们只在CSS中描述这种行为时，浏览器有办法解决过渡时抖动的问题。手风琴菜单使用标签实现简单的折叠手风琴效果：title
1
2
标签中标签的内容会一直显示，点击时会切换中其他元素的显示和隐藏。虽然这个不能做特殊的动画效果，但是如果你只是想做一个普通的展开折叠功能，用HTML标签就够了。直观上看，深色主题似乎是一种自定义的业务逻辑，但实际上，由于深色主题非常普遍，操作系统和浏览器都有内置的实现，CSS也实现了相应的方法来确定主题当前系统。是浅色还是深色：prefers-color-scheme。所以如果系统要实现深色主题，最好和操作系统设置保持一致，这样用户体验会更好：@media(prefers-color-scheme:light){/**...*/}@media(prefers-color-scheme:dark){/**...*/}@media(prefers-color-scheme:no-preference){/**...*/}如果你用Checkbox检查是否启用深色主题也可以只通过CSS变量来判断。核心代码为：#checkboxId:checked~.container{background-color:black;}~这个符号表示selector1~selector2是selector1之后满足selector2条件的兄弟节点设置样式。精读除了上面的例子，作者还补充了几个例子。滑动滚动滑动滚动是指每次滚动都有固定的步长，子元素完全显示在可见区域。上下或左右子元素不可能出现部分“分裂”。这个场景除了用浏览器实现幻灯片播放外，在很多网站的首页也经常用到。例如，首页分为5个垂直滚动的块，每个块显示一个产品功能。这时候滚动就不再连续了，而是从一个块到另一个块的完全切换。其实这个效果不需要JS实现：html{scroll-snap-type:ymandatory;}.child{scroll-snap-align:start;}这样会设置页面准确捕捉child的滚动位置元素，触发滚轮，鼠标滚动条松开或键盘上下按下时，scroll-snap-type:ymandatory可以准确捕捉到这种垂直滚动行为，将子元素完全滚动到可见区域。颜色选择器颜色选择器可以使用原生HTML实现：这个选择器的优点是它的性能和可维护性都非常非常好，甚至可以捕获颜色的桌面，缺点是无法自定义颜色选择器。有很多很好的文章总结了CSS可以实现哪些本来就需要JS的，比如：youmightnotneedjs。你不需要JavaScript。在本文的介绍中还有5件不需要Javascript的事情。但并不是说看完这些文章后，我们就应该尝试用CSS来实现我们能做到的一切，那是没有必要的。因为CSS是一种描述性语言，它可以精确控制样式，但很难精确控制交互过程。对于slide滑动、动画等标准的交互行为，可以使用CSS。对于非标准的交互行为，比如在自定义位置弹出Modal，使用svg绘制完全自定义的路径动画或者尽量使用JS。另外，对于交互过程中的状态，如果需要传递给其他元素进行响应，尽量使用JS来实现。虽然CSS伪类可以帮助我们实现大部分的这些能力，但是如果我们要监听状态变化，发送请求，CSS是无能为力的，或者需要用CSS来实现，非常棘手，这也违背了CSS技术选型原意。最后，能否在合适的场景下选择CSS方案，也是一种技术选型能力。不要忘记CSS的适用领域，不要用JS来实现所有的功能。讨论地址为：Jingdu《不再需要 JS 做的 5 件事》·Issue#413·dt-fe/weekly想参与讨论的请戳这里，每周都有新话题，周末或周一发布。前端精读——帮你过滤靠谱的内容。关注前端精读微信公众号版权声明：免费转载-非商业-非衍生保留属性（CreativeCommons3.0License）
