带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(13)

简介: 带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(13)

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(12)https://developer.aliyun.com/article/1340884?groupCode=taobaotech


请注意, 元素的背景颜色是如何根据是否启用了深色模式而改变的,它遵循了开发者在页面上提供的内联样式表的规则。它要么是gainsboro,要么是darkslategray。

image.png

上图是亮色模式(light)下,由开发者和用户代理指定的样式。根据用户代理的样式表,文本是黑色的,背景是白   色的。元素的背景颜色是gainsboro,由开发者在内联的式表中指定的颜色。

image.png

上图是暗色模式(dark)下,由开发者和用户代理指定的样式。根据用户代理的样式表,文本是白色的,背景是黑色的。元素的背景色是darkslategray,由开发者在内联样式表中指定的颜色。

 

按钮元素的外观是由用户代理样式表控制的。它的颜色被设置为ButtonText系统颜色,其背景颜色和边框颜色被设置为ButtonFace系统颜色。

 

现在注意元素的边框颜色是如何变化的。border-top-color和border-bottom-color的计算值从rgba (0,0,0,.847)(偏黑)切换到rgba(255, 255, 255, .847)(偏白),因为用户代理根据颜色方案动态地更新ButtonFace。同样适用于元素的color属性,它被设置为相应的系统颜色ButtonText。

 

 

 

image.png


看上去不错,但这也引出另一个新的概念,系统颜色(地址:https://drafts.csswg.org/css-color/#css-sys- tem-colors)。

 image.png

 

 

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(14)https://developer.aliyun.com/article/1340882?groupCode=taobaotech

相关文章
|
3天前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
13 2
|
4天前
|
SQL 安全 数据库
如何构建一个安全的Web应用:技术与策略的全面指南
【6月更文挑战第12天】构建安全Web应用的全面指南:了解SQL注入、XSS等威胁,采用输入验证、安全编程语言,配置安全服务器和数据库,使用HTTPS,实施会话管理、访问控制,正确处理错误和日志,定期进行安全审计和漏洞扫描。确保用户数据和应用安全。
|
5天前
|
编解码 前端开发 JavaScript
响应式Web设计:适应所有屏幕的艺术与科学
【6月更文挑战第11天】响应式Web设计是适应各种屏幕尺寸和分辨率的网站设计方法,利用CSS3媒体查询、流动布局、弹性图片和JavaScript等技术实现。其原则包括灵活性、可用性和可访问性。最佳实践包括优先考虑移动设备体验、简化布局、优化资源、多设备测试和遵循Web可访问性标准。随着设备多样化,响应式设计成为现代Web设计的关键趋势。
|
7天前
|
缓存 前端开发 数据库
构建高性能Web应用的关键技术
本文将介绍构建高性能Web应用所需的关键技术。我们将探讨前端、后端、数据库等多个方面的技术,并提供实用的建议,帮助开发者优化应用性能并提升用户体验。
|
14天前
|
前端开发 JavaScript 开发者
Web技术标准是如何定义网页的?
【6月更文挑战第2天】Web技术标准是如何定义网页的?
30 2
|
14天前
|
JavaScript 前端开发 开发者
Web技术标准
【6月更文挑战第2天】Web技术标准
16 4
|
15天前
|
XML 网络协议 Java
XML Web 服务技术解析:WSDL 与 SOAP 原理、应用案例一览
XML Web服务是基于WSDL、SOAP、RDF和RSS等标准的网络应用程序组件技术。WSDL描述服务接口和消息格式,SOAP用于结构化信息交换,RDF描述网络资源,RSS则用于发布网站更新。Web服务特点是自包含、自描述,基于开放协议,可重用且能连接现有软件。WSDL文档包含`types`、`message`、`portType`和`binding`元素,定义服务操作和协议。SOAP协议规定消息格式,通过HTTP等传输。
476 1
|
16天前
|
前端开发 JavaScript Java
Java语言在Web前端开发中的技术应用
Java语言在Web前端开发中的技术应用
|
19天前
|
SQL 缓存 监控
基于Java的Web应用性能优化技术
基于Java的Web应用性能优化技术
27 3
|
22天前
|
开发框架 前端开发 .NET
web技术
【5月更文挑战第25天】web技术
25 2