分享一些 CSS 的小技巧(2)

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

不是所有的浏览器都支持所有的功能，之前介绍 grid 布局就不是所有浏览器对其有良好的支持，例如想为不支持 CSS Grid 的浏览器写一个回退功能。那么今天介绍知识点就很有用，可以把支持的 CSS 写在 @supports 块中。

<div class="blocks">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

@supports (display: grid) {
  .blocks {
    display: grid;
    
    grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
    gap: 1rem;
  }
}

.block{
    background: lightblue;
    width:100px;
    height:100px;
}

然后为了测试回退，如何测试呢，只要@supports (display: grid) 随便地添加一些无意义字母，比如在 grid 后面加上一个 x，就可以通过 @supports (display: gridx) ，来测试回退 css 是否正常工作。

可以用 flexbox 来实现同样样式作为回退，因为有一小群浏览器支持 flexbox 而不支持grid ，所谓选择 flexbox 布局来实现在那些不支持 grid 布局浏览器。

@supports (display: grid) {
/* grid 样式 */ 
} 
@supports not (display: grid) { 

.block { margin: 10px } 
}

CSS 条件式

@media (min-width: 600px) { 
/* 满足条件 */ }

在 media query 中支持写一些逻辑，我们可以写条件 min-width:600px。

@media (min-width: 600px) { /* ... */ } @media (max-width: 599px) { /* ... */ }

如果通过条件将屏幕区域划分为两个部分，通过写两个 media query 来实现，不过这样写显然并不优雅，建议通过下面代码让代码看上去更简洁优雅。

@when media(min-width: 600px) { /* ... */ } @else { /* ... */ }

@custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { /* narrow window styles */ } @media (--narrow-window) and (script) { /* special styles for when script is allowed */ }

现在经常使用自定义属性，而自定义属性的简洁性正是我们使用自定义媒体查询的好处之一。