带你读《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

相关文章
|
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