能用css解决的就不要用JavaScript。16个常用css技巧收集整理（一）中收集了animation-fill-mode、calc()计算值、box-sizing、currentColor，16个常用css技巧收集整理（二）中收集了caret-color、scroll-behavior、::selection、-webkit-overflow-scrolling: touch，本文继续其它收集的css技巧。
object-fit
object-fit只针对替换元素有作用，指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
object-fit属性由下列的值中选择一个关键字来指定。
- fill：被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。也就是说不保证保持原有的比例，也是object-fit的默认值。
- contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象可能会在容器内留下空白。
- cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应即部分区域不可见。
- none：被替换的内容尺寸不会被改变。
- scale-down：内容的尺寸就像是指定了none或contain，最终呈现的是尺寸比较小的那个。
例如下方这张图片原尺寸为212*148，当通过css设置img元素宽和高就是其框的宽高为200*200时
浏览器兼容性：
关于object-fit使用场景实例移步到这里。
@supports
此CSS规则使您能够在使用之前检查浏览器是否支持某些属性（或属性/值组合）。
@supports (display: grid) {
.container {
display: grid;
}
}
@supports (image-rendering) {
img {
image-rendering: pixelated;
}
}您可以使用以下多个属性：
@supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) {
}var()
该var()属性是使用CSS自定义属性的一部分。
CSS变量由作者定义，表示可在文档中多次使用的特定值。该var()函数可以用作任何属性的值，但不能用作属性或选择器。函数的第一个值是自定义属性的名称; 第二个是可选的回退值，如果第一个参数无效，则使用该值。
我们来看看语法：
:root {
--primary-color: #cccccc;
}
body {
color: var(--primary-color);
}具有后备值：
body {
color: var(--primary-color, #cccccc);
}遗憾的是，IE11，Edge 14和Opera mini 不支持自定义属性。Edge 15将获得部分支持。
position: sticky
在浏览网站时，通常会看到HTML元素（如横幅和导航）滚动到一定位置时就固定在浏览器的顶部。之前我们一直采用JavaScript滚动事件来监听滚动到一定位置时给此元素添加position: fixed固定定位。你是知道的固定定位是脱离文档流的哟，因此事先在HTML结构上，不要忘了给这个元素添加一个父元素写上高度占位，不然滚动到一定位置时就会出现页面抖动。
MDN很好地解释了position:sticky：
粘性定位是相对和固定定位的混合体。该元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定位置。
注意：混合体，混合体，混合体哟，我还是担心抖动的问题，自己试一把吧
<div style="background:#f60;height:80px"></div>
<div style="height:60px;background-color:#666;position:sticky;top:-1px;">position: sticky标题</div>
<div style="background-color:#000;height:1000px;color:#fff">检查文字是否像position:fixed一样有抖动</div>
漂亮，确实是相对和固定定位的混合体。
浏览兼容性
关于position:sticky使用场景实例移步到这里。
