列举一些在下一代 css 技术中我最期待的属性
WARNING
- 这些属性可能还未被大多数浏览器所支持，通过caniuse查询支持情况
- 如果你现在打算使用这些属性，你可以使用 postcss 插件 postcss-preset-env 得倒更好的兼容性
Custom Properties 自定义属性
- 使用
--来定义值 - 使用
var()来获取值 var()可以增加第二个值作为备选值
css
:root {
--textColor: #111;
--bgColor: #eee;
}
.dome {
color: var(--textColor);
background: var(--bgColor, #fff);
}Custom Media Queries 自定义媒体查询
css
@custom-media --phone (max-width: 30em);
@media (--phone) {
/* ... */
}Media Query Ranges
css
@media (480px <= width < 768px) {
/* ... */
}Custom Selectors 自定义选择器
css
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
article :--heading {
/* ... */
}Nesting Rules
css
html {
& body {
background: #fff;
& header {
color: #333;
}
}
}prefers-color-scheme
用来查询操作系统启用的是浅色还是深色模式
css
:root {
--bgColor: #eee;
--textColor: #111;
}
@media (prefers-color-scheme: light) {
:root {
--bgColor: #fff;
--textColor: #000;
}
}
@media (prefers-color-scheme: dark) {
:root {
--bgColor: #000;
--textColor: #fff;
}
}
.dome {
color: var(--textColor);
background: var(--bgColor);
}Hexadecimal Alpha Notation
RGB[A] 或 RRGGBB[AA]
css
.demo {
background-color: #f3f3f3f3;
color: #0003;
}image-set()
css
.demo {
background-image: image-set(
url(bg.jpg) 1x,
url(bg-2x.jpg) 2x,
url(bg-print.jpg) 600dpi
);
}overflow-wrap
当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行
css
p {
width: 200px;
overflow-wrap: break-word;
}Grid Layout
将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系
css
#grid {
display: grid;
height: 200px;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
gap: 20px 5px;
}Gap Properties
gap 属性是用来设置网格行与列之间的间隙，该属性是 row-gap 和 column-gap 的简写形式
html
<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>css
#grid {
display: grid;
height: 200px;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
gap: 20px 5px;
}
#grid > div {
background-color: lime;
}css
/* 或者使用多列布局 */
.dome {
column-count: 3;
gap: 40px;
}:not
css
div:not(.demo) {
color: green;
}:any-link
css
a:any-link {
border: 1px solid #f00;
}:in-range and :out-of-range
当一个 <input> 元素的前值处于属性 min 与 max 之间的范围时触发 :in-range，相反则触发 :out-of-range
css
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
border: 2px solid red;
}Double Position Gradients
css
.pie_chart {
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
}all
将除却 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值
initial该关键字代表改变该元素或其父元素的所有属性至初始值inherit该关键字代表改变该元素或其父元素的所有属性的值至他们的父元素属性的值unset该关键字代表如果该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值revert指定依赖于声明所属的样式表原点的行为
css
a {
all: initial;
}prefers-reduced-motion
用来查询操作系统是否启用最小化动画
css
.animation {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}