[译]CSS @supports实现的级联网页设计

最新推荐文章于 2022-04-21 15:57:43 发布
最新推荐文章于 2022-04-21 15:57:43 发布
阅读量191 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/100070060
版权
CSS @supports规则允许开发者检测浏览器对CSS属性的支持，从而实现渐进增强的网页设计。文章介绍了@supports的基本使用、布尔操作以及级联网络设计的概念，展示了如何在现代浏览器中利用新特性的同时，确保在旧浏览器中的兼容性。
摘要由CSDN通过智能技术生成

作者 | 董雨

原文：https://24ways.org/2017/cascading-web-design

特性查询，即@supports规则，作为CSS2的扩展被引入CSS Conditional Rules Module Level3中，它在2011年首次作为工作草案发布。它是一个条件组规则，用来检测浏览器UA是否支持CSS的属性值，条件由逻辑与,逻辑或,逻辑非组合而成。

设计该功能的动机是允许作者在浏览器支持时使用新特性编写样式，同时在不支持的情况下优雅降级。即使CSS本身已经允许优雅降级，例如只要不破坏样式表中的其它样式，忽略不支持的属性值即可。但有时我们需要更多的东西。

说到底CSS是一种整体技术，即使你可以单独使用属性，但CSS充满力量的闪光点在组合使用时。在构建Web布局时尤其明显。在CSS中进行原生特性检测，使在最新浏览器使用尖端CSS技术，同时支持旧浏览器更为方便。

浏览器支持情况

Opera在2102年11月首次实现了特性查询，Chrome和Firefox在2013年5月紧随其后。多年来已有多篇关于特性查询的文章，但是，对其已经被广泛支持的现状似乎并不是众所周知的。早期对特性查询的大部分报道都不是用英文写的，也是这是其中一个限制因素。

  • @supports― CSSのFeature Queries by Masataka Yakura, August 8 2012

  • Native CSS Feature Detection via the @supports Rule by Chris Mills, December 21 2012

  • CSS @supports by David Walsh, April 3 2013

  • esponsive typography with CSS Feature Queries by Aral Balkan, April 9 2013

  • How to use the @supports rule in your CSS by Lea Verou, January 31 2014

  • CSS Feature Queries by Amit Tal, June 2 2014

  • Coming Soon: CSS Feature Queries by Adobe Web Platform Team, August 21 2014

  • CSS feature queries mittels @supports by Daniel Erlinger, November 27 2014

截止2017年12月，所有当前主流浏览

最低0.47元/天 解锁文章
大转转FE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html多级下拉菜单链接代码,js实现网页多级级联菜单代码
weixin_36279637的博客
06-03 392
本文实例讲述了js实现网页多级级联菜单。分享给大家供大家参考。具体如下：这是大家在网页上经常会见到的级联菜单特效，不过这一个代码是由JS来实现，将级联菜单中的内容保存在了JS数组中，为了页面美观，本次还美化了一下表格边框，整体看上去更和谐实用了，多级的下拉菜单对网页设计来说比较实用。运行效果如下图所示：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/html...
EasyCVR视频融合平台国标级联编辑页面的样式优化
EasyCVR视频融合云平台的技术博客
03-10 95
EasyCVR视频融合平台部署轻快、功能灵活，可支持多协议、多类型设备接入，在视频能力上，可实现视频直播、录像、回放、检索、云存储、告警上报、语音对讲、集群、智能分析以及平台级联等。
页面做级联效果
03-25
NULL 博文链接：https://daisdon.iteye.com/blog/1181543
web页面实现省份和城市的级联
12-23
web页面实现省份和城市的级联, 免费 可以使用的
Django学习11 -- Admin页面级联选择
Rolei的博客
10-20 3240
Django学习11 -- Admin页面级联选择
详解CSS中@supports的用法
09-25
主要介绍了详解CSS中@supports的用法,是CSS入门学习中的基础知识,需要的朋友可以参考下
使用CSS的@supports标记来检测浏览器的兼容情况
01-21
CSS @supports标记在CSS代码里跟@media查询语句的语法相似： CSS Code复制内容到剪贴板 @supports(prop:value) { /* 各种样式 */  }  CSS @supports允许程序员用多种不同的方法来探测当前浏览器是否支持某...
自定义元素宽高比例（aspect-ratio）与@supports兼容支持和图片裁剪（object-fit）的用法
11-01
这两个特性提供了更为灵活的网页设计方法，使得元素的尺寸和图片的显示更加符合预期。同时，@supports规则则为这些新特性的兼容性提供了解决方案。 首先，让我们深入了解一下`aspect-ratio`属性。这个属性允许我们...
Ajax的常用技巧（2）---实现Web页面中的级联菜单
Bad Boy
08-12 4271
在网络上显示数据，往往只显示数据中的一部分信息，如文章标题，产品名称等。如果浏览器要查看所有信息，只需点击相关链接即可。在web技术中，可以采用级联菜单完成上述操作。根据用户的选择，动态展开，并显示出对应选项子菜单的内容。 在传统的web实现方式中，一般是在页面初始化时动态获取到服务端数据库中对应的所有子菜单中的信息，放置到页面中对应的位置，然后再结合CSS层叠样式表动态控制对应子菜单的显示或者
javaScript实现级联效果的两种写法
03-30
NULL 博文链接：https://vera-sq.iteye.com/blog/1319965
web页面三级联动菜单
11-26
三级联动菜单.........................
页面中下拉列表级联操作
H&B Blog
07-22 719
在页面中我们经常看到下拉多选框，当我们点击不同项时它后面的多选框会显示不同的数据，下面我们来完成这项工作。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>级联</title> <script> //添加数据 ...
ajax实现级联列表,AJAX实现web页面中级联菜单的设计
weixin_31302909的博客
08-05 131
小弟花了一点时间搞了个级联菜单，贴上来请大家看看。本例中只要你选择成员分类名称就会自动显示成员名称：首先在eclipse中建一个项目，名称你自己做主了，这里为Easyjf-menu，对应的浏览器页面代码为：Easyjf-menu.jsp：……..var XMLHttpReq;var currentSort;//创建xmlhttprequset对象function createXMLHttpRequ...
H5的兼容性问题
weixin_40579884的博客
09-08 311
1.H5的new Date('2020-05-02')在IOS环境报错valid Date 在IOS中，new Date中指定的字符串有格式限制，‘-’短横线连接时间，在ios中不支持， 在IOS中，支持‘/’斜线连接的时间格式，即：new Date('2020/05/02')可正常使用，且‘/’在安卓和web浏览器也完美兼容， 可使用replace替代，如：new Date("2020-05-02").replace(/-/g,"/") 2.H5在IOS安全区适配 推荐使用@supports ..
CSS学习心得
lxy13608322474的博客
03-14 429
目录一、什么是 CSS二、CSS1、语法说明2、选择器3、外部样式表4、盒子模型5、定位6、溢出7、浮动 一、什么是 CSS CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。 网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。 二、CSS 1、语法说明 一条CSS样式规则由两个主要的部分构成：选择器，
AJAX实现web页面中级联菜单的设计
zgqtxwd的专栏
05-01 465
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
如何在h5和小程序中适配iphone X全面屏底部的安全区
机智的奎哥的博客
04-21 2011
1、第一步： h5需要设置页面属性： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover"> 2、在属性样式上加一段判断覆盖样式： .load-more { color: #0080ff; padding-bottom: 32px; } @supports (bottom: const
ROS安装配置与语法介绍文档、ROS代码文档、树莓派与ROS结合使用等相关文档
最新发布
07-08
ROS安装配置与语法介绍文档、ROS代码文档、树莓派与ROS结合使用等相关文档
css - @supports无法从SASS编译为CSS css-loader
06-03
在 Sass 中使用 @supports 嵌套时可能会遇到编译错误，原因是 Sass 中的 @supports 嵌套语法与 CSS 中略有不同，不能直接编译为 CSS。 解决这个问题的方法是使用 PostCSS 或 postcss-preset-env 插件将 @supports 嵌套语法转换为 CSS 中的 @supports 语法。具体的步骤如下： 1. 安装 PostCSS 或 postcss-preset-env 插件： ``` npm install postcss postcss-preset-env --save-dev ``` 2. 在 webpack 配置文件中添加 PostCSS loader，并指定 postcss-preset-env 插件： ```js module.exports = { // ... module: { rules: [ { test: /\.scss$/, use: [ { loader: 'css-loader', options: { importLoaders: 2 } }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('postcss-preset-env')() ] } } }, { loader: 'sass-loader' } ] } ] } } ``` 3. 在 Sass 中使用 @supports 嵌套语法： ```scss @supports (display: flex) { .my-class { display: flex; } } ``` 4. 编译 Sass 文件，@supports 嵌套语法会被自动转换为 CSS 中的 @supports 语法： ```css @supports (display: flex) { .my-class { display: flex; } } ``` 通过这种方式，就可以在 Sass 中使用 @supports 嵌套语法，同时又能够将代码正确地编译为 CSS。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值