首页 > 其他分享 >[CSS] 渐进增强与优雅降级

[CSS] 渐进增强与优雅降级

时间:2024-02-08 16:58:22浏览次数:25  
标签:降级 浏览器 渐进 blur filter backdrop 10px supports CSS

渐进增强和优雅降级

含义

  • 渐进增强:先针对低级浏览器保证基本功能,再针对高级浏览器追加功能;
  • 优雅降级:针对那些最高级、最完善的浏览器来设计网站,一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

@supports

使用@supports可以查询相关的声明是否能被浏览器支持,然后后续可以针对性的使用低级或者高级的CSS语法。

示例代码

/* 来源于 MDN */
@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}
@supports(-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)){
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba($color-black, 0.3);
}

标签:降级,浏览器,渐进,blur,filter,backdrop,10px,supports,CSS
From: https://www.cnblogs.com/feixianxing/p/18011927/css-progressive-enhancement-graceful-degrad

相关文章

  • [CSS] 渐进增强与优雅降级
    渐进增强和优雅降级含义渐进增强:先针对低级浏览器保证基本功能,再针对高级浏览器追加功能;优雅降级:针对那些最高级、最完善的浏览器来设计网站,一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。@supports使用@supports可以查询相关的声明是否能被浏览器支持,然后后续可......
  • [CSS] 级联与特异性
    样式表IMPORTANCE比较优先级由上往下递减,如果重要性一致,则对比选择器的特异性Specificity,也叫“具体程度”.用户声明的!important作者声明的!important作者样式表用户样式表浏览器默认样式表特异性Specificity当有多条冲突的CSS规则指向同一元素,则浏览器会计算特异性......
  • REACT 里面的css文件style不显示
    问题现象在App.jsx同路径下的App.css定义中的style不显示,被上面的样式覆盖了。(使用vite创建的REACTapp)分析点击目前应用的样式右上角的style图标定位到,现在的样式是由引入的bootstrap.css定义的,可看到网页html中自定义css在bootstrap.css上面。由于javascript是从上到下编......
  • nginx改变访问应用端口以及解决css,js或表单提交访问不到的问题
    场景如果原先某个网站是通过ip:8080直接访问的,现在想要加个前缀,并且去掉端口进行访问,比如ip/myapp去访问这个项目,可以通过nginx来实现这个过程。最近有个需求需要变更redmine的访问路径,从ip:8080改成ip/redmine,下面以redmine举例子。配置过程以ip/redmine来访问原先ip:8080的项......
  • Animate.css + Vue2
    Animate.css+Vue2包:https://www.npmjs.com/package/vue2-animate安装:npminstall--savevue2-animate导入:import'vue2-animate/dist/vue2-animate.min.css';使用1:<transitionname="fadeLeft"><pv-if="isShow">he......
  • css的使用
    font连写font-style设置文字是否倾斜font-weight设置文字是否加粗font-family设置文字类型,例如宋体文字连写格式:{font:font-stylefont-weightfont-sizefont-family}例如:p{font:normol70020px"宋体"}text-decoration设置文本划线位置(a标签一般会去掉下划线)underline设......
  • css实现 背景重复线条 实现盒子四个角发光效果 实现内阴影加边框发光效果
     背景重复线条 width:100%;height:100%;//background-color:rgba(51,73,102,1);background-image:linear-gradient(toleft,#3349660.02rem,transparent0.01rem);background-repeat......
  • H3C 设备升级与降级固件版本
    H3C设备升级与降级固件版本华三路由器软件版本为Version7.1.064,Release0809P25可通过华三官网下载中调指定版本版本软件下载地址:https://www.h3c.com/cn/d_202006/1300612_30005_40.html下载账号:yx800密码:01230123降级步骤和升级步骤一样已下载的软件版本文件可通过f......
  • VSCode降级 - VSCode远程开发缺少libc
    VSCode自动升级到1.86后提示MissingGLIBC>=2.28!,可是服务器用的是centos7.9,升级glibc还要和gcc绑定到一起,所以还是对VScode降级比较方便这是最后一个可用版本的[updatenote]https://code.visualstudio.com/updates/v1_85其页面上的下载链接如下,重新安装并覆盖就好了Win......
  • CSS3属性之 text-overflow:ellipsis
    语法:text-overflow:clip|ellipsis默认值为clip不显示省略标记clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。ellipsis:当对象内文本一处时显示省略标记(...)。 一、常见的单行文本溢出显示省略写法:text-overflow:ellipsis;overflow:hidden;white-sp......