8 -《不常见的css特性》1. 所有属性（all property) 2. 当前颜色 (currentColor) 在

1. 所有属性（all property)

	- initial 初始值
	- inherit 设置为继承值
	- unset 更改为默认值，即继承值或默认值
	- revert 取决于此属性所在的样式表源
	- revert-layer 与先前的级联层或下一个匹配规则相匹配

2. 当前颜色 (currentColor)

在给相同的元素设置不同的颜色时候非常有用

aside{
	border-left: 5px solid currentColor;
}

.success{
	color:green;
}

.error{
	color:red;
}

3. css计数器（Counters）

大概就是可以通过css可以实现技术，而不用使用js，下面是简单的例子

body {
  max-width: 768px;
  margin: 0 auto;
  padding: 2em;
  line-height: 1.5;
}

article {
  margin-bottom: 2em;
  counter-increment: articles; 
  counter-reset: notes;
}


article h2::before {    
  content: counters(articles, ".") ". ";
}

aside {
   counter-increment: notes; 
  border-left: 5px solid darkgoldenrod;
  padding: 1em;
  margin: 1.5em 0;
  background: #f5f5f5;
}


aside::before {
    content: "Note " counters(articles, ".")"."counters(notes, ".") ": ";
  font-weight: bold;
}

4. 交互的媒体查询（Interaction Media Queries）

通常响应式网站根据屏幕尺寸，如果用户使用带有触摸屏和智能电视屏幕该如何交互？


@media (pointer: fine) {

/* using a mouse or stylus */  
}  
@media (pointer: coarse) {  
/* using touch */  
}  
@media (hover: hover) {  
/* can be hovered */  
}  
@media (hover: none) {  
/* can't be hovered */  
}

5. 尺寸控制（`aspect-ratio`）

轻松创建保持纵横比的元素

button{
	aspect-ratio:1;
}

6. 更好的渐变（Better Gradients）

设置两个值绿色和红色渐变，中间的部分看起来浑浊且褪色，因为浏览器默认使用RGB颜色插值，目前我们无法改变，但将来可以通过新的css功能，在渐变中添加一些中点来解决这个问题

body {
  padding: 2em;
}

h3 {
  margin: 0 0 1em;
}

div {
  width: 768px;
  height: 128px;
  margin: 0 0 1.5em;
}

.rgb {
  background: linear-gradient(90deg, rgba(43,185,75,1) 0%, rgba(255,65,65,1) 100%);
}

.hsl {
  background-image: linear-gradient(
  90deg,
  hsl(134deg 62% 45%) 0%,
  hsl(127deg 62% 46%) 5%,
  hsl(121deg 62% 46%) 10%,
  hsl(114deg 62% 47%) 14%,
  hsl(108deg 62% 48%) 19%,
  hsl(102deg 62% 49%) 24%,
  hsl(95deg 61% 50%) 29%,
  hsl(89deg 63% 51%) 33%,
  hsl(83deg 65% 52%) 38%,
  hsl(76deg 67% 52%) 43%,
  hsl(70deg 69% 53%) 48%,
  hsl(64deg 72% 54%) 52%,
  hsl(57deg 74% 55%) 57%,
  hsl(51deg 76% 56%) 62%,
  hsl(45deg 79% 57%) 67%,
  hsl(38deg 82% 58%) 71%,
  hsl(32deg 84% 58%) 76%,
  hsl(25deg 87% 59%) 81%,
  hsl(19deg 90% 60%) 86%,
  hsl(13deg 93% 61%) 90%,
  hsl(6deg 97% 62%) 95%,
  hsl(0deg 100% 63%) 100%
);
}

7. :where And :is Pseudo-Selecrors

:is选择器的最终特异性与最高的选择器相匹配，类名不会战胜它<ol class="list list-highlight"></ol>
:where将选择器的特殊性设置为零，并允许我们覆盖默认样式`

:is(ol,ul) li {
  margin-bottom: 0.25em;
}

:is(ol,ul) :is(ol,ul) {
  margin: 0.25em 0 1em;
}

.list :where(ol,ul){
	margin:0.25rem 1rem;
}

8. scroll-padding

在实现页面固定头部时候，滚动条会覆盖部分内容，可以使用这个解决

html{
	scroll-padding-top:6rem;
	scroll-behavior:smooth;
}

9. Font Rendering Options

在处理数字从零递增到最终值的时候，由于字符的宽度不同，文本在动画工程中不断左右跳跃，可以使用tabular-nums解决，注意：可用功能取决于字体本身，并且某些功能可能不受支持，有关选项请参阅文档

.normal {
  font-variant-numeric: normal;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

10. 堆叠上下文（`isolate`）

例如：在我们写一个dialog组件的时候，可能因为该组件的z-index低于页面的其它元素，导致显示在下面，通常会采用提高z-index的值来解决这个问题，但会导致设置的值比页面其它地方设置的值低，就又会出现这个问题，可以使用isolate告诉浏览器不要混合这个堆叠组，而不用担心其他元素的值是2、10、100、9999等

.dialog {
  isolation: isolate;
  /* ... */
}

11. 渲染性能优化（Render Performance Optimization）

非常规项目，遇到渲染性能问题，contain可以告诉浏览器在渲染周期中哪些内容不会改变，因此浏览器可以安全的跳过它，谨慎使用！

内容可见属性：content-visibility，可以推迟屏幕外和首屏内容的渲染“延迟渲染”

.container {
  /* child elements won't display outside of this container so only the contents of this container should be rendered*/
  contain: paint;
{
.story {
  content-visibility: auto; /* Behaves like overflow: hidden; */
  contain-intrinsic-size: 100px 1000px;
}

8 -《不常见的css特性》