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

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

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


image.pngprefers-contrast


prefers-contrast媒体查询主要用于检测用户是否要求系统增加或减少相邻颜色之间的对比度。比如一些喜欢阅读电子书的用户,在阅读与文本背景对比度相差不大的文本时会遇到困难,他们更喜欢较大的对比度,利于阅读。

image.png

比如像下面这个示例:

.contrast {
background-color: #0958d8; color: #fff;
}
@media (prefers-contrast: high) {
.contrast {
background-color: #0a0db7;
}
}

 

image.png其他与用户偏好有关的媒体特性

从W3C规范中不难发现,规范中提供了六个有关于用户偏好的媒体查询特性:

image.png

 

 

 

我们来看一个 forced-colors 的示例,该示例来自于 Eric 的 《Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties》一文:

image.png

Modal dialog with Forced Color mode tweaks@smashingmagCodePen

(地址:https://codepen.io/smashingmag/pen/zYPVjPa

(地址:https://codepen.io/smashingmag

(地址:https://codepen.io/

 

提取使用 forced-colors 的示例代码:

// SCSS
.c-dialog__content {
background-color: var(--dialog-color-background); box-shadow: 0 1rem 2rem 0 #00000099;
outline: var(--dialog-border-width) solid var(--dialog-border-color); padding: var(--dialog-padding-outer);
width: min(90vw, 38rem);
z-index: 1;
@media (forced-colors: active) {
--dialog-border-width: var(--size-300);
}
}

 

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(16)https://developer.aliyun.com/article/1340879?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技术标准
17 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