CSS中@support实现渐进式网页设计实例代码

CSS中的@supports规则可以用于探测CSS代码在当前浏览器版本中是否可用。它可以实现渐进式网页设计，即对不同的浏览器或者版本提供不同的CSS样式。下面是一个@supports的渐进式网页设计实例代码的完整攻略：

步骤1：在头部引入CSS代码

首先，在标签下引入CSS代码。假设我们要为三个CSS属性分别设置不同的渐变颜色（gradient-color-1、gradient-color-2和gradient-color-3），但这三个属性都不是所有浏览器都支持的。在这种情况下，我们可以使用@supports规则，为不同的浏览器或版本提供不同的配色方案。

<head>
  <link rel="stylesheet" href="styles.css">
</head>

步骤2：对CSS样式进行支持测试

将最新的CSS语法放进@supports中用法如下：

@supports (属性: 值) {
  /* CSS代码 */
}

例如，我们想要为Webkit浏览器（如Safari或Chrome）提供特定的CSS样式，我们可以使用以下代码：

@supports (-webkit-appearance:none) {
  body {
    background: -webkit-linear-gradient(to bottom, gradient-color-1, gradient-color-2);
  }
}

这会检测当前浏览器中是否支持WebKit框架下的-appearance属性，如果支持，就会将CSS样式应用到HTML页面中。

步骤3：为其他浏览器提供备用样式

如果当前的浏览器版本不支持@supports规则规定的CSS属性和值，我们可以在不同的支持情况下为浏览器提供不同的备用样式，让网页更适应不同的环境。

例如：

@supports (-webkit-appearance:none) {
  body {
    background: -webkit-linear-gradient(to bottom, gradient-color-1, gradient-color-2);
  }
}
@supports not (-webkit-appearance:none) {
  body {
    background: linear-gradient(to bottom, gradient-color-2, gradient-color-3); 
  }
}

这将检查WebKit浏览器是否支持-appearance属性，如果支持，就会使用它，否则将使用CSS3的linear-gradient属性来生成渐变。这种方式，可以使网页更加渐进式，更加适应不同浏览器版本下的需求。

示例1：多列布局

多列布局，在较旧的浏览器中并不是一个很好的方案。在这种情况下，我们可以使用@supports规则来测试一个新的CSS3属性，以便提供自适应支持。我们可以在列样式中使用column-count和column-width来达到自适应布局的效果。下面是由于不同属性的浏览器兼容性问题，所以此例代码采用了对不同浏览器提供备用选择的方式：

/* 先对不支持columns列的浏览器增加备选样式 */
.columns { /* 两列布局 */
  width: 100%;
  float: left;
  margin: 0 0 30px 0;
}
/* 检测是否支持columns列 */
@supports (column-count: 2) {
  .columns { /* 多列布局 */
    width: auto;
    float: none;
    margin: 0 auto;
    column-count: 2;
    column-gap: 0; 
  }
}

这个代码块首先检查是否支持CSS3新属性中的column-count和column-width，如果支持就使用它。否则我们使用一个兼容老版本的CSS属性，它不是列布局，而是简单的两列布局。

示例2：灵活的背景图像

背景图像在各种浏览器版本中，对不同平台（如PC和移动设备）的显示存在很大挑战，我们希望它可以在所有环境中都能有很好的显示效果和适应性。下面示例代码提供了一种使用@supports规则的方法，使背景图像可以灵活适应不同的环境和浏览器版本：

/*先检测是否支持background-size的initial值 */
@supports (background-size: initial) {
  /* 只有支持background-size:initial 的才会走这里 */
  .bg-image { /* 扩展背景图像 */
    background-size: initial;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
}
/* 其他浏览器则直接让背景图像填满整个显示区*/
.bg-image { 
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center center; 
}

在这个代码块中，首先检测是否支持background-size属性中的initial（初始值）属性，如果支持，就使用它来扩展背景图像的大小，以适应不同的浏览器和平台；否则，直接让背景图像填满整个显示区，保证观感一致。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS中@support实现渐进式网页设计实例代码 - Python技术站