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

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

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


自 2010 年 @Ethan Marcotte首次提出 响应式Web设计(RWD)(地址:https://alistapart.com/article/re- sponsive-web-design/)的设计理念(概念),Web设计就进入现代Web布局时代。开发者可以根据 CSS 媒体查询特性 (通常是视窗宽度、媒体设备特性等)来为Web页面定制不同的表现形式,比如可以根据用户浏览内容的设备特性来呈现不同的布局、不同的字体大小和不同的图片等。

image.png

 

 

 

但对于 Web 设计师或Web开发者来说,在现代Web设计或布局中仍然缺少一特性,页面的设计不能够响应其容器的宽度(或其他特性)。也就是说,如果Web开发者能够根据容器宽度来改变UI样式,那就更好了。容器查询将在 很大程度上帮助 Web 开发者更好的完成他们的工作,在为Web开发基于组件代码时,其遗漏(容器查询特性的缺失)是一个巨大的限制。

 

正因此,有关于容器查询的特性在社区中的探讨就没有停止过。

 

早在2019年底,@ZachLeatherman在寻找容器查询起源(地址:https://www.zachleat.com/web/ori- gin-container-queries/)时,找到的最早有关于容器查询的解决方案是 @Andy Hume的基于 JavaScript 的选择器查询和响应式容器的解决方案(地址:https://github.com/ahume/selector-queries)。

 

2015 年, @Mat ‘WiltoMarquis在响应式图片社区小组引入了 > 元素,将响应式图片带到了响应式Web 设计的世界,他在《Container Queries: Once More Unto the Breach》(地址:https://ali- stapart.com/article/container-queries-once-more-unto-the-breach/)一文中概述了元素查询的挑战和使用 案例演示了容器查询的特性。

 

然后,在2 017年,@EthanMarcotte写了一篇关于容器查询相关的文章(地址:https://ethanmar- cotte.com/wrote/on-container-queries/),并提出了这样的看法:

 

在他最初关注的响应式 Web 设计的文章之后的几年里,Web设计师和开发人员的工作越来越集中在组件上,而不是整个页面,这使得媒体查询不那么理想。

 

从那时起,虽然有很多人主张使用媒体查询,但容器查询向前推进的速度还是不够理想。@L. David Baron在

《Thoughts on an implementable path forward for Container Queries》(地址:https://github.com/dbar- on/container-queries-implementability)中简明扼要地解释了容器查询向前推进慢的问题出在哪?

 

容器查询要求样式取决于组件的大小,但考虑到 CSS 的工作原理,组件中的样式会影响其大小。任意打破这个循环,既会产生奇怪的结果,又会干扰浏览器的工作,还会增加浏览器优化的成本。

 

除了 @David Baron 之外,2018年6月, @Greg Whitworth在荷兰阿姆斯特丹举办的 CSS Day + UX Special

(地址:https://noti.st/events/elQrNX/css-day-ux-special)活动上的主题分享《Over the moon for container queries》(地址:https://noti.st/gregwhitworth/UDul7E/over-the-moon-for-container

-queries)中也解释了容器查询在Web平台上推进慢的相关原因。更重要的是,@Greg Whitworth还提供了使用

 

 

 

新的 JavaScript API 和 CSS 的新技术来实现容器查询的特性。@David Barrrron 也提出了一个可以避免这种困境的策略(地址:https://github.com/dbaron/container-queries-implementability),更重要的是@Miriam Suzanne在@David Baron的策略基础上提出了@container方法(地址:https://github.com/oddbird/css

-sandbox/blob/main/src/rwd/query/explainer.md)(地址:https://github.com/oddbird/css-sandbox/blob/- main/src/rwd/query/explainer.md)。

 

@container 方法通过对被查询的元素应用大小和布局的限制来实现。任何具有尺寸和布局限制的元素都可以通过一个新的 @container规则进行查询,其语法与现有的媒体查询类似。

 

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

相关文章
|
1月前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
40 3
|
13天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
26 6
|
1月前
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
55 1
|
1月前
|
负载均衡 监控 算法
论负载均衡技术在Web系统中的应用
【11月更文挑战第4天】在当今高并发的互联网环境中,负载均衡技术已经成为提升Web系统性能不可或缺的一环。通过有效地将请求分发到多个服务器上,负载均衡不仅能够提高系统的响应速度和处理能力,还能增强系统的可扩展性和稳定性。本文将结合我参与的一个实际软件项目,从项目概述、负载均衡算法原理以及实际应用三个方面,深入探讨负载均衡技术在Web系统中的应用。
57 2
|
2月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
2月前
|
存储 安全 数据库
后端技术在现代Web开发中的实践与创新
【10月更文挑战第13天】 本文将深入探讨后端技术在现代Web开发中的重要性,通过实际案例分析展示如何利用先进的后端技术提升用户体验和系统性能。我们将从基础架构设计、数据库优化、安全性保障等方面展开讨论,为读者提供清晰的指导和实用的技巧。无论是新手开发者还是经验丰富的技术人员,都能从中获得启发和帮助。
42 2
|
2月前
|
机器学习/深度学习 移动开发 JavaScript
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
274 0
|
1月前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
47 0
|
1月前
|
消息中间件 监控 Kafka
Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面
随着大数据技术的发展,Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面,方便管理和监控 Kafka 集群。本文详细介绍了 Kafka Manager 的部署步骤和基本使用方法,包括配置文件的修改、启动命令、API 示例代码等,帮助你快速上手并有效管理 Kafka 集群。
43 0
|
2月前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术