文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS媒体查询新增的特性怎么使用

2023-07-04 23:04

关注

这篇文章主要介绍了CSS媒体查询新增的特性怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS媒体查询新增的特性怎么使用文章都会有所收获,下面我们一起来看看吧。

CSS @media 规范

prefers-reduced-motion、prefers-color-scheme、prefers-contrast、prefers-reduced-transparency、prefers-reduced-data  都属于 CSS @media 规范中的内容,最新的 CSS @media 规范出到了第五版 - Media Queries Level 5。

它们的用法基本一致,像是这样,与我们常写的视口媒体查询类似,以 prefers-reduced-motion 为例子:

.ele {     animation: aniName 5s infinite linear; }  @media (prefers-reduced-motion: reduce) {     .ele {         animation: none;     }

那么,它们都有什么用呢?

prefers-reduced-motion 减弱动画效果

prefers-reduced-motion 规则查询用于减弱动画效果,除了默认规则,只有一种语法取值 prefers-reduced-motion:  reduce,开启了该规则后,相当于告诉用户代理,希望他看到的页面,可以删除或替换掉一些会让部分视觉运动障碍者不适的动画类型。

使用方法,还是上面那段代码:

.ele {     animation: aniName 5s infinite linear; }  @media (prefers-reduced-motion: reduce) {     .ele {         animation: none;     } }

如果我们有一些类似这样的动画:

CSS媒体查询新增的特性怎么使用

在用户开启了 prefers-reduced-motion: reduce 时,就应该把它去掉。那么该如何开启这个选项呢?MDN --  prefers-reduced-motion 给出的是:

prefers-color-scheme 适配明暗主题

prefers-color-scheme 还是非常好理解的,它用于匹配用户通过操作系统设置的明亮或夜间(暗)模式。它有两个不同的取值:

明亮模式

夜间(暗)模式

语法如下,如果我们默认的是明亮模式,只需要适配夜间模式即可:

body {     background: white;     color: black; }  @media (prefers-color-scheme: dark) {     body {         background: black;         color: white;     } }

prefers-contrast 调整内容色彩对比度

prefers-contrast 该 CSS 媒体功能是用来检测用户是否要求将网页内容以更高或者更低的对比度进行呈现。其中:

以 prefers-contrast: less 为例子,语法如下:

body {     background: #fff; // 文字与背景对比度为 5.74     color: #666; }  // 提升对比度 @media (prefers-contrast: more) {     body {         background: #fff; // 文字与背景对比度为 21         color: #000;     } }

上面只是伪 CSS 代码,具体可能需要对具体的一些元素进行处理,或者使用 filter: contrast()  全局统一处理

可访问性 -- 色彩对比度

颜色,也是我们天天需要打交道的属性。对于大部分视觉正常的用户,可能对页面的颜色敏感度还没那么高。但是对于一小部分色弱、色盲用户,他们对于网站的颜色会更加敏感,不好的设计会给他们访问网站带来极大的不便。

什么是色彩对比度

是否曾关心过页面内容的展示,使用的颜色是否恰当?色弱、色盲用户能否正常看清内容?良好的色彩使用,在任何时候都是有益的,而且不仅仅局限于对于色弱、色盲用户。在户外用手机、阳光很强看不清,符合无障碍标准的高清晰度、高对比度文字就更容易阅读。

这里就有一个概念 --  颜色对比度,简单地说,描述就是两种颜色在亮度(Brightness)上的差别。运用到我们的页面上,大多数的情况就是背景色(background-color)与内容颜色(color)的对比差异。

最权威的互联网无障碍规范 —— WCAG AA规范规定,所有重要内容的色彩对比度需要达到 4.5:1 或以上(字号大于18号时达到 3:1  或以上),才算拥有较好的可读性。

检查色彩对比度的工具

Chrome 浏览器从很早开始,就已经支持检查元素的色彩对比度了。以我当前正在写作的页面为例子,Github Issues 编辑页面的两个按钮:

审查元素,分别可以看到两个按钮的色彩对比度:

CSS媒体查询新增的特性怎么使用

image

可以看到,绿底白字按钮的色彩对比度是没有达到标准的,也被用黄色的叹号标识了出来。

除此之外,在审查元素的 Style 界面的取色器,改变颜色,也能直观的看到当前的色彩对比度:

CSS媒体查询新增的特性怎么使用

prefers-reduced-transparency 减少透明元素

prefers-reduced-transparency 该 CSS 媒体功能是用来检测用户是否要求减少网页中的透明元素:

以 prefers-contrast: reduce 为例子,语法如下:

.ele {     opacity: 0.5; }  // 减少透明元素 @media (prefers-contrast: reduce) {     .ele {         opacity: 1;     } }

不过,这是仍处于实验室的功能,暂时没有任何浏览器支持该媒体查询

prefers-reduced-data 减少数据传输

对于部分网速较差的地区,或者流量很贵的情况,用户会希望减少页面中的流量请求,基于此有了 prefers-reduced-data。

prefers-reduced-data 该 CSS 媒体查询功能是用于告知用户代理,希望减少页面的流量请求。

以 prefers-reduced-data: reduce 为例子,语法如下:

.ele {     background-image: url(image-1800w.jpg); }  // 降低图片质量 @media (prefers-reduced-data: reduce) {     .ele {         background-image: url(image-600w.jpg);     } }

当检测到用户开启了 prefers-reduced-data: reduce,我们将提供压缩度更高,尺寸更小,消耗流量更少的图片。

css的选择器有哪些

css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等

关于“CSS媒体查询新增的特性怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“CSS媒体查询新增的特性怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯