现代 CSS 解决方案:accent-color 强调色
accent-color
是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候,更深入的了解了一下这个属性。
简单而言,CSS accent-color
支持使用几行简单的 CSS 为表单元素着色,是的,只需几行代码就可以将主题颜色应用到页面的表单输入。
表单元素一直被吐槽很难自定义。而 accent-color
就是规范非常大的一个改变,我们开始能更多的自定义原生的表单的样式了!
如何使用 accent-color
OK,我们一起来学习一下,我们应该如何使用 accent-color
。
首先,我们来实现这么一个简单的表单界面:
<div class="wrapper">
<form action="">
<fieldset>
<legend>Accent-color Demo</legend>
<label>
Strawberries
<input type="checkbox" id="berries_1" value="strawberries">
</label>
<label>
Radio Buttons
<div>
<input type="radio" name="accented-demo" checked>
<input type="radio" name="accented-demo">
<input type="radio" name="accented-demo">
</div>
</label>
<label>
Range Slider
<input type="range">
</label>
<label>
Progress element
<progress max="100" value="50">50%</progress>
</label>
</fieldset>
</form>
</div>
只需要最简单的布局 CSS,与 accent-color
关系不大,我就不列出来了,这样,我们的 DEMO 大致如下:
可以看到,表单控件的主题颜色是蓝色,在之前,我们是没办法修改这个颜色的。
而现在,我们可以简单的借助 accent-color
,修改表单的主题色:
:root {
accent-color: rgba(250, 15, 117);
}
其中,rgba(250, 15, 117)
表示粉色,此时,整体的效果就变成了:
当然,这个 accent-color
也支持传入 CSS 变量,配合更多的其他颜色一起进行修改。
我们可以对上述的 DEMO 再简单改造:
:root {
--brand: rgba(250, 15, 117);
accent-color: var(--brand);
}
fieldset {
border: 1px solid var(--brand);
}
legend {
color: var(--brand);
}
我们设置了一个 CSS 变量 --brand: rgba(250, 15, 117)
,除了把这个颜色赋值给表单的 accent-color
,还能赋值给其它更多元素。譬如这里,我们赋值给了 <fieldset>
的边框色和 <legend>
的文字颜色。
这样,当我们修改 CSS 变量值时,整个主题色会一起发生变化:
完整的 DEMO,你可以戳这:CodePen Demo -- Accent-color with custom property
通常而言,更多的时候,我们会将 accent-color
应用于:
与 color-scheme 配合使用,适配日间夜间模式
还有一个容易忽略的细节点。accent-color
还支持和 color-scheme 一起使用。
OK,什么是 color-scheme 呢?color-scheme 是 CSS 的一个属性,用于指定网页的颜色方案或主题。它定义了网页元素应该使用哪种颜色方案来呈现内容。
color-scheme 属性有以下几个可能的取值:
- auto:表示使用用户代理(浏览器)的默认颜色方案。这通常是浏览器自动根据操作系统或用户设置选择的方案。
- light:表示使用浅色颜色方案。这通常包括浅色背景和深色文本。
- dark:表示使用深色颜色方案。这通常包括深色背景和浅色文本。
通过指定适当的 color-scheme 值,开发者可以为网页提供不同的颜色方案,以适应用户的偏好或操作系统的设置。这有助于提供更好的可访问性和用户体验。
譬如,我们可以将页面的 color-schema
设置为 light dark
:
body {
color-scheme: light dark;
}
上述代码表示页面将同时支持浅色和深色颜色方案。它告诉浏览器,网页希望适应用户代理(浏览器)的默认颜色方案,并同时支持浅色和深色模式。
当使用 color-scheme: light dark
时,浏览器会根据用户代理的默认颜色方案来选择适当的颜色方案。如果用户代理处于浅色模式,网页将使用浅色颜色方案来呈现内容;如果用户代理处于深色模式,网页将使用深色颜色方案来呈现内容。
此时,我们的代码可以这样改造:
:root {
--brand: rgba(250, 15, 117, 1);
accent-color: var(--brand);
}
@media (prefers-color-scheme: dark) {
:root {
--brand: rgba(3, 169, 244, 1);
}
body {
background: #000;
color: #fff;
}
}
body {
color-scheme: light dark;
}
下面是我在手机上调整日间模式和夜间模式的效果图:
通过 @media (prefers-color-scheme: dark) {}
媒体查询,在黑夜模式下,展示不同的 accent-color
。
可能有人对
@media (prefers-color-scheme: dark)
还不太了解,可以看看我的这篇文章 -- 使用 CSS prefers-* 规范,提升网站的可访问性与健壮性
完整的 DEMO,你可以戳这:CodePen Demo -- Accent-color with custom property
最后
怎样,学会了吗。并且,根据规范描述,后续 accent-color
将会应用于更多的元素。将未来的 CSS 中会逐渐变得更加重要。早点掌握不是坏事。
好了,本文到此结束,希望本文对你有所帮助
想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 -- iCSS前端趣闻
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
现代 CSS 解决方案:accent-color 强调色的更多相关文章
- 现代 CSS 解决方案:CSS 数学函数
在 CSS 中,其实存在各种各样的函数.具体分为: Transform functions Math functions Filter functions Color functions Image ...
- css系列教程--color direction line-height letter-spacing
css标签:colorcolor:用法color:指定文本的颜色color:red/#fff/unicode; direction:用法 direction:定义文本的方向.dirction:ltr/ ...
- CSS border gradient color All In One
CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...
- css text gradient color, css fonts gradient color
css text gradient color, css fonts gradient color css 字体渐变色 demo https://codepen.io/xgqfrms/pen/OJya ...
- 现代 CSS 解决方案:Modern CSS Reset
在早年间(其实也不是很早),写过几篇关于 CSS Reset 的文章 - reset.css 知多少. 详细描述了当时业界比较常用的,两个 CSS reset 方案:reset.css 与 Norma ...
- 字体大小自适应纯css解决方案
viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width ...
- js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
- css学习之color: window和color: currentColor
一.易被忽略的属性 color: currentColor color: window 看完之后感觉眼前一亮,有的我之前根本没有用过,甚至都不知道有color: currentColor这么个东西 ...
- css解决方案之css布局
固定宽度布局解决方案 固定宽度的居中布局 首先我们这里探讨的是我们常用的固定宽度的居中布局,这应该是目前实战中应用的最多的了. 然后从考虑是否应用大背景上我们分为两种,一种是允许整体有一个大背景,一种 ...
- 宽度设置百分比 高度跟宽度一样css解决方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- [转帖]Xargs用法详解
https://www.cnblogs.com/cheyunhua/p/8796433.html 1. 简介 之所以能用到这个命令,关键是由于很多命令不支持|管道来传递参数,而日常工作中有有这个必要, ...
- [转帖]Strace + pstack发现耗时点
https://www.jianshu.com/p/10ea6fff562c 如何使用strace+pstack利器分析程序性能 本文摘抄自如何使用strace+pstack利器分析程序性能 程序说明 ...
- mysql8 initialize 命令 初学版 lower_case_table_names
1. 今天开发找我跟我说 我安装的mysql 不对. 比较蛋疼. 需要修改一个参数 但是数据库已经初始进去了 重装起来比较麻烦. 硬着头皮搞. 2. 参数的名字为: lower_case_tabl ...
- 【APP 逆向百例】Frida 初体验,root 检测与加密字符串定位
声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容.敏感网址.数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 本文章未经许 ...
- mac中virtualBox添加主机网络报错VBoxNetAdpCtl: Error while adding new interface: failed to open /dev/vboxnetctl: No such file or directory
mac中virtualBox添加主机网络报错 现场复原 解决方法 参考 mac中virtualBox添加主机网络报错 现场复原 virtual box添加主机网络报错 VBoxNetAdpCtl: E ...
- Apache Typecho框架启用地址重写
地址重写有利于SEO优化,开启地址重写可以去掉Typecho框架中的index.php后缀,该后缀如下. 第一步,进到apache配置文件目录下cat /etc/httpd/conf/httpd.co ...
- Redis安装及使用详解篇
一.什么是Redis? Redis(Remote Dictionary Server ),即远程字典服务. Redis是是现在最受欢迎的NoSQL数据库之一,是一种支持key-value等多种数据结构 ...
- ProTab(高级表格)的使用
一. params 和 request 属性的使用 例子如下: import React, { useState } from 'react'; import { ProTable } from '@ ...
- Hive中Lateral view用法
1. lateral view 简介 hive函数 lateral view 主要功能是将原本汇总在一条(行)的数据拆分成多条(行)成虚拟表,再与原表进行笛卡尔积,从而得到明细表.配合UDTF函数 ...
- JOISC 2021 记录
Day1 T1 Aerobatics 神秘的提交答案题. Day1 T2 IOI 熱の感染拡大 我们可以通过移动+旋转坐标系,使得第 1 个宫殿在 \((0,0)\) 处,且方向为 \(x\) 轴正方 ...