CSS的@supports标记是CSS3中新增的一个特性，它允许开发者检查浏览器是否支持某一项或多项CSS属性或者值。这个特性对于开发者来说非常重要，因为它帮助我们能够灵活地使用CSS新特性而不影响那些尚未支持这些新特性的浏览器的用户体验。
我们来介绍@supports的基本用法。其基本语法和@media查询语句类似，你可以通过它来检测特定的CSS属性和值是否被当前浏览器所支持。@supports后面跟随一对括号，括号内写上需要检测的属性和值，比如：
```css
@supports (display: flex) {
/* 当浏览器支持flex布局时应用的样式 */
}
```
如果浏览器支持`display: flex`属性，那么在@supports声明内的样式规则会被应用。如果不支持，那么这些样式规则会被忽略。
另外，@supports还可以与`not`关键字组合使用，这样可以用来检测浏览器是否不支持某个CSS特性。例如：
```css
@supports not (display: flex) {
/* 当浏览器不支持flex布局时应用的样式 */
}
```
这样就可以为不支持flex布局的浏览器设置一些回退的样式。
接着我们来看多属性检测和条件检测。@supports可以进行更复杂的检测，比如同时检测多个条件，使用`and`来表示多个条件同时满足。例如：
```css
@supports (display: flex) and (-webkit-appearance: caret) {
/* 同时满足display: flex和-webkit-appearance: caret时应用的样式 */
}
```
此外，还可以使用`or`来检测多个条件中至少有一个满足。例如：
```css
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
/* 当浏览器支持-webkit-flex、-moz-flex或flex中的至少一种时应用的样式 */
}
```
在实际开发中，@supports常常需要与JavaScript结合使用来实现更复杂的逻辑判断。在JavaScript中，可以通过`window.CSS.supports`方法来进行检测。`CSS.supports`可以接收两个参数，第一个是属性名称，第二个是属性值；或者接收一个字符串参数，这个字符串包含了需要检测的条件。例如：
```javascript
if (CSS.supports('display', 'flex')) {
// 浏览器支持flex布局
} else {
// 浏览器不支持flex布局
}
if (CSS.supports("(transform-origin:5% 5%)")) {
// 浏览器支持transform-origin属性
}
```
@supports的实际使用场景非常广泛，尤其是在页面布局方面。现代浏览器普遍支持了flexbox布局，但是仍然有一些旧浏览器不支持这一特性。使用@supports，可以先检查浏览器是否支持flexbox，如果支持则使用flexbox布局；如果不支持，则可以设置回退的布局方式，如float布局。例如：
```css
.section {
float: left;
}
@supports (display: flex) or (display: -webkit-flex) or (display: -moz-flex) {
.section {
display: flex;
}
}
```
上面的代码就是先为不支持flexbox的浏览器设置了float布局，然后通过@supports检测，一旦浏览器支持flexbox，则应用flexbox布局。
总结一下，CSS的@supports标记是一个非常有用的特性，它帮助开发者能够利用CSS的最新特性进行开发，同时又能确保在老式浏览器上不会出现样式问题。使用@supports，可以让我们的网页布局和样式更加灵活和强大，让开发人员可以为用户呈现出更好的用户体验。
