使用@supports完美兼容CSS屬性

今天寫微信小程序遇到一個問題：給page加 150rpx 的 padding-bottom 值，我考慮到 iphone X 系列的底部黑線，參考我之前寫的css屬性——env()和constant()設置安全區域；所以我這樣寫：

page{
  padding-bottom: calc( constant(safe-area-inset-bottom) + 150rpx);
  padding-bottom: calc( env(safe-area-inset-bottom) + 150rpx);
}

這樣寫，在開發者工具、安卓手機、iphoneX系列手機都沒問題，都能識別到，然后我用我的古董機（iphone SE 1代，IOS 10.3系統），發現 padding-bottom 無效，嘗試了多次，最后發現可以使用 css 的 @supports，使用方法和 @media 差不多：

page{
  padding-bottom: calc( constant(safe-area-inset-bottom) + 150rpx);
  padding-bottom: calc( env(safe-area-inset-bottom) + 150rpx);
}
/* not 表示不支持括號內的屬性 */
@supports not(constant(safe-area-inset-bottom)){
  page{
    padding-bottom: 150rpx;
  }
}

然后就完美兼容各個手機了。最后附上MDN文檔