关于javascript:每个前端都需要知道这些面向未来的CSS技术

前端技术突飞猛进，咱们须要一直学习来更新本人的前端常识并使用到本人的我的项目中。这次笔者整顿一些将来遍及或者当初同学们可能曾经用到的 CSS 个性，包含 SVG 图标、滚动个性、CSS 自定义属性、CSS 古代伪类、JS in CSS、Web Layout、混合模式和滤镜、CSS 计数器等等。

在能用 CSS 实现的就不必麻烦 JavaScript 文章提及到滚动捕获的个性，更多有对于容器滚动方面的 CSS 新个性其实还有有很多个，比方：

自定义滚动条的外观
scroll-behavior指容容器滚动行为，让滚动成果更丝滑
overscroll-behavior优化滚动边界，特地是能够帮忙咱们滚动的穿透

默认的 window 外观和 mac 外观

windows

mac

在 CSS 中，咱们能够应用 -webkit-scrollbar 来自定义滚动条的外观。该属性提供了七个伪元素：

::-webkit-scrollbar：整个滚动条
::-webkit-scrollbar-button：滚动条上的按钮（下下箭头）
::-webkit-scrollbar-thumb：滚动条上的滚动滑块
::-webkit-scrollbar-track：滚动条轨道
::-webkit-scrollbar-track-piece：滚动条没有滑块的轨道局部
::-webkit-scrollbar-corner：当同时有垂直和程度滚动条时交汇的局部
::-webkit-resizer：某些元素的交汇局部的局部款式（相似 textarea 的可拖动按钮）

html {
    --maxWidth:1284px;
    scrollbar-color: linear-gradient(to bottom,#ff8a00,#da1b60);
    scrollbar-width: 30px;
    background: #100e17;
    color: #fff;
    overflow-x: hidden
}

html::-webkit-scrollbar {
    width: 30px;
    height: 30px
}

html::-webkit-scrollbar-thumb {background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60));
    background: linear-gradient(to bottom,#ff8a00,#da1b60);
    border-radius: 30px;
    -webkit-box-shadow: inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25);
    box-shadow: inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25)
}

html::-webkit-scrollbar-track {background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17)
}

通过这几个伪元素，能够实现你本人喜爱的滚动条外观成果，比方上面这个示例：

残缺演示

你大略曾经据说过 CSS 自定义属性，也被称为 CSS 变量，预计相熟 SCSS、LESS 就会很快上手，概念大同小异，都是让咱们的 CSS 变得可保护，目前 Edge 最新版都曾经反对这个个性了，这阐明当初 CSS 自定义属性曾经能用在理论我的项目中了，置信不久以后开发者们将大大依赖这个个性。但还请在应用之前请先检查一下本文附录中 Postcss 对于 CSS 自定义属性的反对状况，以便做好兼容。

什么是自定义属性呢？简略来说就是一种开发者能够自主命名和应用的 CSS 属性。浏览器在解决像 color、position 这样的属性时，须要接管特定的属性值，而自定义属性，在开发者赋予它属性值之前，它是没有意义的。所以要怎么给 CSS 自定义属性赋值呢？这倒和习惯无异

.foo {
  color: red;
  --theme-color: gray;
}

自定义元素的定义由 — 结尾，这样浏览器可能辨别自定义属性和原生属性，从而将它俩离开解决。如果只是定义了一个自定义元素和它的属性值，浏览器是不会做出反馈的。如下面的代码，.foo 的字体色彩由 color 决定，但 --theme-color 对 .foo 没有作用。

你能够用 CSS 自定义元素存储任意无效的 CSS 属性值

.foo {
  --theme-color: blue;
  --spacer-width: 8px;
  --favorite-number: 3;
  --greeting: "Hey, what's up?";
  --reusable-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.85);
}

如果自定义属性只能用于设值，那也太没用了点。至多，浏览器得能获取到它们的属性值。

应用 var() 办法就能实现：

.button {background-color: var(--theme-color);
}

上面这段代码中，咱们将 .button 的 background-color 属性值赋值为 --theme-color 的值。这例子看起来自定义属性也没什么了不起的嘛，但这是一个硬编码的状况。你有没有意识到，--theme-color 的属性值是能够用在任意选择器和属性上的呢？这可就厉害了。

.button {background-color: var(--theme-color);
}
 
.title {color: var(--theme-color);
}
 
.image-grid > .image {border-color: var(--theme-color);
}

如果开发者并没有定义过 –theme-color 这个变量呢？var() 能够接管第二个参数作为缺省值：

.button {background-color: var(--theme-color, gray);
}

留神：如果你想把另一个自定义属性作为缺省值，语法应该是 background-color: var(–theme-color, var(–fallback-color))

传参数时总是传入一个缺省值是一个好习惯，特地是在构建 web components 的时候。为了让你的页面在不反对自定义属性的浏览器上失常显示，别忘了加上兼容代码：

.button {
  background-color: gray;
  background-color: var(--theme-color, gray);
}

这些最新的伪类个性，咱们也须要晓得。

你能够应用 :is() 伪类来删除选择器列表中的反复项。

/* BEFORE */
.embed .save-button:hover,
.attachment .save-button:hover {opacity: 1;}

/* AFTER */
:is(.embed, .attachment) .save-button:hover {opacity: 1;}

此性能次要在未解决的规范 CSS 代码中有用。如果应用 Sass 或相似的 CSS 预处理程序，则可能更喜爱嵌套。

留神：浏览器还反对非标准的 :-webkit-any() 和 :-moz-any() 伪类，它们与 :is() 类似，但限度更多。WebKit 在 2015 年弃用了 :-webkit-any()，Mozilla 已将 Firefox 的用户代理样式表更新为应用 :is() 而不是 :-moz-any()。

:where() 伪类与 :is() 具备雷同的语法和性能。它们之间的惟一区别是 :where() 不会减少整体选择器的特殊性（即某条 CSS 规定特殊性越高，它的款式越优先被采纳）。

:where() 伪类及其任何参数都不对选择器的特殊性有所帮忙，它的特殊性始终为零

此性能对于应易于笼罩的款式很有用。例如，根本样式表 sanitize.css 蕴含以下款式规定，如果短少 <svg fill> 属性，该规定将设置默认的填充色彩：

svg:not([fill]) {fill: currentColor;}

因为其较高的特殊性（B = 1，C = 1），网站无奈应用单个类选择器（B = 1）笼罩此申明，并且被迫增加 !important 或人为地进步选择器的特殊性（例如 .share- icon.share-icon）。

.share-icon {fill: blue; /* 因为特殊性较低，因而不实用 */}

CSS 库和根底样式表能够通过用 :where() 包装它们的属性选择器来防止这个问题，以放弃整个选择器的低特殊性(C=1)。

/* sanitize.css */
svg:where(:not([fill])) {fill: currentColor;}

/* author stylesheet */
.share-icon {fill: blue; /* 因为特殊性较高，实用 */}

其它新伪类个性有情趣同学能够依照导图查阅一下相干文档资料。

残缺演示

后面提到过，应用 CSS 自定义属性的时候，能够通过 JavaScript 来操作自定义属性的值。其实还能够更弱小一点，如果你对 CSS Houdini 相熟的话，能够借助其个性，间接在 CSS 的代码中来操作 CSS 自定义属性

:root {--property: document.write('hello world!');
}

window.onload = () => {const doc = window.getComputedStyle(document.documentElement);
  const cssProp = doc.getPropertyValue('--property');
  new Function((cssProp))();}

残缺演示

对于 Web 布局而言，前端就始终在探讨这方面的最优形式。晚期的 table 布局，接着的 float 和position相干的布局，多列布局，Flexbox 布局和 Grid 布局等。Flexbox 和 Grid 的呈现，Web 布局的灵活性越来越高。

如图不依赖媒体查问实现主动计算

CSS Grid 中提供了很多弱小的个性，比方：

fr单位，能够很好的帮忙咱们来计算容器可用空间
repeat()函数，容许咱们给网格多个列指定雷同的值。它也承受两个值：反复的次娄和反复的值
minmax()函数，可能让咱们用最简略的 CSS 管制网格轨道的大小，其包含一个最小值和一个最大值
auto-fill和 auto-fit，配合repeat() 函数应用，能够用来代替反复次数，能够依据每列的宽度灵便的扭转网格的列数
max-content和min-content，能够依据单元格的内容来确定列的宽度
grid-suto-flow，能够更好的让 CSS Grid 布局时能主动排列

联合这些性能点，布局会变得更轻松。比方咱们要实现一个响应式的布局，很多时候都会依赖于媒体查问（@media）来解决，事实上，有了 CSS Grid Layout 之后，这所有变得更为简略，不须要依赖任何媒体查问就能够很好的实现响应式的布局。特地是当今这个时代，要面对的终端设备只会减少不会缩小，那么心愿布局更容易的适配这些终端的布局，那么 CSS Grid Layout 将会起到很大的作用。

残缺示例

Grid 和 flex 都是面向未来的最佳布局计划。咱们不应该探讨谁优谁劣，而是应该舍短取长联合应用。

能用 CSS 实现的就不必麻烦 JavaScript — Part2 一文提到混合模式。CSS 混合模式和滤镜次要是用来解决图片的。相熟 PS 之类软件的同学很容易了解外面的属性。

残缺代码演示

CSS 计数器其实波及到三个属性：counter-increment、counter-reset和 counter()。个别状况都是配合 CSS 的伪元素::before 和::after的 content 一起应用。能够用来计数

残缺演示

对于 SVG 而言，它是一套独立而又成熟的体系，也有本人的相干标准（Scalable Vecgtor Graphics 2），即 SVG2。尽管该标准曾经存在很久了，但很多有对于 SVG 相干的个性在不同的浏览器中失去的反对度也是有所不统一的。特地是 SVG 中的突变和滤镜相干的个性。不过，随着技术的变革，在 Web 的利用当中 SVG 的应用越来越多，特地是 SVG 图标相干的方面的使用。

最早通过 <img> 标签来援用图标（每个图标一个文件）
为了节俭申请，提出了 Sprites 的概念，即 将多个图标合并在一起，应用一个图片文件 ，借助background 相干的属性来实现图标
图片毕竟是位图，面对多种设施终端，或者说更易于控制图标色彩和大小，开始在应用 Icon Font 来制作 Web 图标
当然，字体图标是解决了不少问题，但每次针对不同的图标的应用，须要自定义字体，也要加载相应的字体文件，相应的也带了肯定的问题，比如说跨域问题，字体加载问题
随着 SVG 的反对力度越来越强，大家开始在思考 SVG，应用 SVG 来制作图标。该技术能解决咱们后面碰到的大部分问题，特地是在而对泛滥终端设备的时候，它的劣势越发显著
SVG 和 img 有点相似，咱们也能够借助 <symbol> 标签和 <use> 标签，将所有的 SVG 图标拼接在一起，有点相似于 Sprites 的技术，只不过在此称为 SVG Sprites

<!-- HTML -->
<svg width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">
    <symbol id="half-circle" viewBox="0 0 106 57">...</symbol>
    <!-- .... -->
    <symbol id="icon-burger" viewBox="0 0 24 24">...</symbol>
</svg>

SVG Sprites 和 img Sprites 有所不同，SVG Sprites 就是一些代码（相似于 HTML 一样），预计没有接触过的同学会问，SVG Sprites 对应的代码怎么来获取呢？其实很简略，能够借助一些设计软件来实现，比方 Sketch。当然也能够应用一些构建工具，比如说 svg-sprite。有了这个之后，在该应用的中央，应用<use> 标签，指定 <symbol> 中相应的 id 值即可，比方：

<svg class="icon-nav-articles" width="26px" height="26px">
    <use xlink:href="#icon-nav-articles"></use>
</svg>

应用 SVG 的图标还有一劣势，咱们能够在 CSS 中间接通过代码来管制图标的色彩：

.site-header .main-nav .main-sections>li>a>svg {
    // ...
    fill: none;
    stroke-width: 2;
    stroke: #c2c2c2;
}
.site-header .main-nav:hover>ul>li:nth-child(1) svg {stroke: #ff8a00;}

残缺演示

以上列举都是 CSS 一些优良的个性。还有很多，有工夫再收集更多分享给大家。这些新个性在不同的浏览器中差异性是有所不同的。但这并不是妨碍咱们去学习和摸索的起因所在。咱们应该及时去理解并使用到，才能够做到对我的项目精益求精。

关于javascript:每个前端都需要知道这些面向未来的CSS技术

写在后面

滚动个性

自定义滚动条的外观

css 自定义属性

应用

缺省值

CSS 古代伪类

应用 :is() 缩小反复

应用 :where() 来放弃低特殊性

JS in CSS

Web layout

混合模式和滤镜

CSS 计数器

SVG 图标

写在最初

Just My Socks（注册教程内含优惠码）

关于javascript:每个前端都需要知道这些面向未来的CSS技术

写在后面

滚动个性

自定义滚动条的外观

css 自定义属性

应用

缺省值

CSS 古代伪类

应用 :is() 缩小反复

应用 :where() 来放弃低特殊性

JS in CSS

Web layout

混合模式和滤镜

CSS 计数器

SVG 图标

写在最初

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）