css之@media和@supports的区别:

@media 主要用于在不同的媒体环境下应用不同的 CSS 规则。它通常与媒体查询(media queries)一起使用,根据设备的特征(如屏幕尺寸、分辨率、方向等)来应用不同的样式。这使得网站和应用程序能够有响应式和自适应的布局。
例子:
/* 在屏幕宽度小于 768px 时应用这些样式 */
@media (max-width: 767px) {
  .container {
    flex-direction: column;
  }
}
  
@supports 用于检测浏览器是否支持某个 CSS 属性或者值。如果支持,则应用相应的 CSS 规则;如果不支持,则可以提供一个后备方案或者替代样式。这个特性可以让你在编写 CSS 时利用最新的特性,同时又能确保在旧的浏览器中正常工作。
例子:
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

  
    
高级用法:
<button type="button" class="[@media(any-hover:hover){&:hover}]:opacity-100">
  <!-- ... -->
</button>
  
分析：
这段代码使用了 Tailwind CSS 的几个高级特性,让我们来分析一下:

[@media(any-hover:hover){&:hover}]

这是一个 Tailwind 的 arbitrary variants(任意变体)语法。它允许你定义一个新的样式变体,并在类名中使用它。
@media(any-hover:hover) 部分指定了这个新变体只在设备支持 hover 交互时才生效。any-hover 是一个媒体查询,用于检测设备是否支持任何形式的 hover 交互,如鼠标悬停或通过键盘导航悬停。
{&:hover} 部分定义了这个新变体的具体样式,即当元素处于 hover 状态时应用的样式。& 代表当前元素。

:opacity-100

这是一个 Tailwind 的实用程序类,用于设置元素的不透明度为 100%,即完全不透明。
综合这两部分,当鼠标悬停在这个按钮上时(或者在支持 hover 的设备上通过键盘导航悬停在按钮上),按钮的不透明度将变为 100%,即完全不透明。
这种写法的好处是:
 
它利用了 Tailwind 的强大功能,使用简洁的类名就能实现复杂的样式效果。
它实现了渐进增强,只在支持 hover 交互的设备上应用悬停效果,从而提高了可访问性。
它将样式和 HTML 分离,使代码更加模块化和易于维护。
  
这种利用 Tailwind 的任意变体和媒体查询的写法,体现了 Tailwind 在实用程序优先的 CSS 方法中所提供的灵活性和可定制性。