前言
但凡能够用 JavaScript 来写的利用，最终都会用 JavaScript 来写。——Atwood定律
尽管万物都能够是JavaScript，但某种程度css的运行效率会比JavaScript高，所以笔者认为:能用CSS实现的就不必麻烦JavaScript。
两种语言都有不同的用处随着浏览器版本个性和属性的减少，CSS正成为一种功能强大的语言，可能解决咱们以前依赖JavaScript实现的性能。
平滑滚动
已经有一段时间，咱们不得不依附JavaScript的window.scrollY来实现来执行此操作，如果想平滑滚动还要依赖定时器减少一个动画。 随着scroll-behavior属性的新增，咱们能够应用一行CSS代码来解决网站上的平滑滚动！浏览器反对约为75％，兼容性还是挺不错的。
html { scroll-behavior: smooth;}残缺代码
滚动捕抓
幻灯片、图片库这些也是前端高频应用性能，上一代CSS能力无限，咱们不得不依赖JavaScript来实现这性能。当初只有几行代码就能够实现此性能。
从某种意义上说，它与Flexbox或CSS Grid的工作原理相似，即您须要一个容器元素，在该容器元素上设置scrolln-snap-type和多个为其设置了scroll-snap-align的子元素，如下所示：
<main class=”parent”> <section class=”child”></section> <section class=”child”></section> <section class=”child”></section></main>.parent { scroll-snap-type: x mandatory;}.child { scroll-snap-align: start;}残缺代码
CSS动画
已经某个期间，大多数开发者应用 JavaScript(或者jQuery) 给浏览器中的元素增加动画。让这个淡化，让那个扩充，很简略。随着互动的我的项目越来越简单，挪动设施的大量减少，体现性能变得越来越重要。Flash 被摈弃，有天才的动画开发者应用 HTML5 去实现过来从未实现的成果。他们须要更好的工具去开发简单的动画序列并取得最好的性能。JavaScript(或者jQuery) 并不可能做到。浏览器日渐成熟的同时也开始提供了一些解决方案。最被宽泛承受的计划是应用 CSS 动画。
残缺代码
表单验证
html5 丰盛了表单元素，提供了相似 required , email , tel 等表单元素属性。同样的，咱们能够利用 :valid 和 :invalid 来做针对html5表单属性的校验。
- :required 伪类指定具备required 属性的表单元素
- :valid 伪类指定一个通过匹配正确的所要求的表单元素
- :invalid 伪类指定一个不匹配指定要求的表单元素
利用 CSS 的 content 属性 attr 抓取材料
想必大家都想到了伪元素 after ，然而文字怎么取得呢，又不能用 JavaScript 。
CSS 的伪元素是个很強大的货色，咱们能够利用他做很多使用，通常为了做一些成果， content:" " 多半会留空，但其实能够在外面写上 attr 抓材料哦！
<div data-msg="这里是获取content的内容"> hover</div>div{width:100px;border:1px solid red; position:relative;}div:hover:after{content:attr(data-msg);position:absolute;font-size: 12px;width:200%;line-height:30px;text-align:center;left:0;top:25px;border:1px solid green;}鼠标悬浮时显示
鼠标悬浮的场景非常常见，例如导航的菜单：
个别要把暗藏的货色如菜单作为hover指标的子元素或者相邻元素，才不便用css管制，例如下面的菜单，是把menu当作导航的一个相邻元素：
<!--menu为相邻的li--><li class="user">用户</li><li class="menu"> <ul> <li>账户设置</li> <li>登出</li> </ul></li>menu在失常态下是暗藏的：
.menu{ display: none;}而当导航hover时显示：
/*应用相邻选择器和hover*/.user:hover + .menu{ display: list-item;}留神这里应用了一个相邻选择器，这也是下面说的为什么要写成相邻的元素。menu的地位能够用absolute定位。
同时menu自已自身hover的时候也要显示，否则鼠标一来到导航的时候，菜单就隐没了：
.menu:hover{ display: list-item;}这里会有一个小问题，即menu和导航须要挨着一起，否则两头有空隙的话，下面增加的菜单hover就不能发挥作用了，然而理论状况下从好看的角度，两者是要有点间隔的。这个其实也好解决，只有在menu下面再画一个通明的区域就好了，如下蓝色的方块：
能够用before/after伪类用absoute定位实现：
ul.menu:before{ content: ""; position: absolute; left: 0; top: -20px; width: 100%; height: 20px; /*background-color: rgba(0,0,0,0.2);*/}如果我既写了css的hover，又监听了mouse事件，用mouse管制显示暗藏，双重成果会有什么状况产生，如果按失常套路，在mouse事件外面hover的时候，增加了一个display: block的style，会笼罩掉CSS的设置。也就是说，只有hover一次，css的代码就不论用了，因为内联款式的优先级会高于外链的。然而理论状况下会有意外产生，那就是在挪动端iphone下面，触摸会触发CSS的hover，并且这个的触发会很高概率地先于touchstart事件，在这个事件外面会判断以后是显示还是暗藏的状态，因为css的hover施展了作用，所以判断为显示，而后又把它暗藏了。也就是说，点一次不进去，要点两次。所以最好别两个同时写。
第二种场景，应用子元素，这个更简略。把hover的指标和暗藏的对象当作同一个父容器的子元素，而后hover写在这个父容器下面就能够了，不必像下面那样，暗藏元素也要写个hover：
.marker-container .detail-info{ display: none}.marker-container:hover .detail-info{ display: block}最初
这里展现也只是一些罕用的性能，其实还有很多能够通过CSS实现的性能，有趣味的同学持续钻研一下更多不依赖JavaScript实现的CSS性能。