小红花·文摘
  • 首页
  • 广场
  • 排行榜🏆
  • 直播
  • FAQ
Dify.AI
如何使用 CSS 容器查询构建响应式设计和滚动效果

容器查询允许根据父元素的尺寸应用样式,实现可定制的响应式设计。与媒体查询不同,容器查询关注的是容器的大小。文章介绍了容器查询、滚动状态和粘性元素的样式变化,并提供示例代码以帮助理解。这项技术在主流浏览器中的支持率高达95%。

如何使用 CSS 容器查询构建响应式设计和滚动效果

freeCodeCamp.org
freeCodeCamp.org · 2026-06-02T23:25:47Z

本文介绍了CSS中的contrast-color()函数,旨在提高无障碍访问的色彩对比度。该函数根据提供的颜色自动返回最适合的黑白对比色,以确保文字的可读性。尽管主流浏览器已支持此功能,但在中国,前端开发者对无障碍特性的关注仍不足。作者认为该函数需改进,若能自动识别背景色和图片,将更具实用性。

CSS contrast-color()函数简介

张鑫旭
张鑫旭 · 2026-06-01T14:54:42Z
算法主题引擎:构建自我校正的颜色系统与 `contrast-color()`

文章讨论了CSS中的contrast-color()函数,该函数自动选择文本颜色,以确保与背景颜色的对比度符合WCAG标准。它在样式计算阶段进行对比度计算,消除了对JavaScript库的依赖,提升了性能和响应速度。目前支持黑色或白色输出,未来可能扩展到更多颜色选项。

算法主题引擎:构建自我校正的颜色系统与 `contrast-color()`

Articles on Smashing Magazine — For Web Designers And Developers
Articles on Smashing Magazine — For Web Designers And Developers · 2026-05-28T13:00:00Z

本文介绍了CSS属性text-align: match-parent的作用,该属性使元素的对齐方式与父元素一致,解决了特定布局中获取textAlign计算值的问题。尽管使用频率低,但兼容性良好。建议在需要使用text-align: inherit的地方替换为match-parent,以提升代码表现力。

1分钟速度了解text-align match-parent声明

张鑫旭
张鑫旭 · 2026-05-25T08:41:37Z
高级树计数:使用`sibling-index()`和`sibling-count()`的数学布局

本文介绍了CSS中的新函数sibling-index()和sibling-count(),这两个函数简化了复杂的动画和布局,使开发者能够轻松实现元素的动画延迟和自动宽度分配,提升了CSS的灵活性和性能。文章还讨论了这些函数的潜在问题及未来的扩展计划。

高级树计数:使用`sibling-index()`和`sibling-count()`的数学布局

Articles on Smashing Magazine — For Web Designers And Developers
Articles on Smashing Magazine — For Web Designers And Developers · 2026-05-21T08:00:00Z

本文介绍了CSS的新属性caret-shape和caret-animation,用于改变光标形状和控制光标闪烁效果。caret-shape支持条形、方块和下划线等多种形状,caret-animation可自定义光标的闪烁。虽然可以将这三个属性缩写为caret属性,但不建议使用以避免兼容性问题。目前仅Chrome浏览器支持这些特性。

光标的形状也能设置了,就是CSS caret-shape属性

张鑫旭
张鑫旭 · 2026-05-18T07:50:42Z
网络周刊 #192 (#博客文章)

本文讨论了新HTML元素<install>的实验性功能,允许用户在无需JavaScript的情况下安装Web应用。还提到Firefox和Safari在不同网站上的表现差异,强调开发者应在多个浏览器中测试网站以确保兼容性。此外,介绍了CSS中的round()函数和AbortSignal.timeout的使用,以提升开发效率和用户体验。

网络周刊 #192 (#博客文章)

Stefan Judis Web Development
Stefan Judis Web Development · 2026-05-17T22:00:00Z

作者分享了从Tailwind迁移到更语义化的HTML和原生CSS的经验,强调了CSS结构的重要性。文章探讨了重置样式、组件化CSS、颜色管理、字体大小、实用类、基础样式、间距、响应式设计和构建系统等实践,旨在提升CSS的灵活性和可维护性,并探索更多CSS特性。

从Tailwind迁移,学习如何结构化我的CSS

Julia Evans
Julia Evans · 2026-05-15T00:00:00Z
Tailwind CSS v4.3:滚动条、新颜色及更多功能

Tailwind CSS v4.2和v4.3发布了多项新功能。v4.2新增了四种颜色调色板、webpack插件和逻辑属性工具,提升了性能和布局适应性。v4.3引入了滚动条样式、@container-size工具、zoom-*和tab-*工具,增强了CSS的灵活性和可用性。用户可通过npm安装最新版本,体验新功能。

Tailwind CSS v4.3:滚动条、新颜色及更多功能

Tailwind CSS Blog
Tailwind CSS Blog · 2026-05-08T20:00:00Z
Safari技术预览版243发布说明

Safari技术预览版243于2026年5月7日发布,适用于macOS。此次更新修复了多个无障碍功能和CSS相关问题,增强了性能和兼容性,并新增了对CSS新特性的支持,包括contain样式和文本自动间距属性。

Safari技术预览版243发布说明

WebKit
WebKit · 2026-05-07T22:06:53Z

作者分享了停止使用Tailwind,转而使用原生CSS的经历,强调了对颜色调色板的需求和可访问性的重要性。推荐了一些调色板和生成器,如uchū、flexoki和合理颜色,并提供了颜色工具的链接,如colorhexa和oklch,以帮助用户理解和使用颜色。

CSS颜色调色板链接

Julia Evans
Julia Evans · 2026-05-04T00:00:00Z
提醒:您可以通过导航将许多小的HTML页面拼接在一起以实现交互

文章讨论了使用HTML和CSS视图过渡构建网站的优点,强调避免使用JavaScript进行页面内交互。通过示例展示了如何通过链接导航到菜单页面,并利用CSS增强用户体验,确保在不同设备和浏览器上的兼容性,同时保持页面简洁和快速。整体设计思路是将浏览器视为文档导航工具,而非执行代码的环境。

提醒:您可以通过导航将许多小的HTML页面拼接在一起以实现交互

Jim Nielsen’s Blog
Jim Nielsen’s Blog · 2026-05-03T19:00:00Z

网页自动化有两种范式:精确指令范式和目标描述范式。前者依赖固定页面结构,执行速度快但维护成本高;后者通过目标描述自我定位,适应性强但速度慢且结果不确定。选择范式取决于任务性质:规则明确的任务用精确指令,需判断的任务用目标描述。两者结合可优化工作流。

从CSS选择器到自然语言:网页自动化的两种范式与取舍框架

暗无天日
暗无天日 · 2026-05-03T00:00:00Z

在使用nginx部署网页时,样式无法加载,原因是nginx默认将css文件解析为`text/plain`类型。解决方法是在`location`模块中添加配置,重启nginx并清理浏览器缓存。

Nginx 代理静态网站 CSS 解析异常

了迹奇有没
了迹奇有没 · 2026-04-30T06:41:37Z

本文介绍了如何使用CSS实现鼠标悬停时人脸表情的变化。通过创建覆盖层和伪元素,用户从不同方向进入时,表情会变为哭丧脸或笑脸。

如何使用CSS判断鼠标从哪个方向进入元素?

张鑫旭-鑫空间-鑫生活
张鑫旭-鑫空间-鑫生活 · 2026-04-27T09:35:21Z
Safari技术预览242版发布说明

Safari技术预览242版已发布,适用于macOS Tahoe和Sequoia。更新包括WebKit的修复和新特性,如CSS attr()函数支持和HTML <dialog>元素的closedby属性,解决了多个可访问性、CSS、JavaScript和媒体相关的问题,提升了用户体验。

Safari技术预览242版发布说明

WebKit
WebKit · 2026-04-23T20:04:50Z
网络周刊 #190

文章讨论了CSS的新特性,包括image-set背景图像、可变字体分析工具Wakamai Fondue,以及无障碍设计的最佳实践。强调模态对话框中的聚焦位置和aria-describedby的使用对可访问性的影响。此外,提到现代Web功能在光影DOM中的表现差异,并推荐CSS课程和工具。最后,表达了对行业质量下降的担忧。

网络周刊 #190

Stefan Judis Web Development
Stefan Judis Web Development · 2026-04-19T22:00:00Z
第十九届软件系统安全赛 CCSSSC 2026 华南区域赛复盘(旅行日记)

2026年华南区域线下赛在湘潭大学举行,比赛中多次更改规则,选手可使用AI工具。比赛题目涉及Web、Crypto、PWN等领域,选手在住宿和交通上也遇到问题,整体赛事存在较多槽点,选手体验丰富。

第十九届软件系统安全赛 CCSSSC 2026 华南区域赛复盘(旅行日记)

GamerNoTitle
GamerNoTitle · 2026-04-19T14:55:53Z

Rust 1.95.0 版本于2026年4月16日发布,新增 cfg_select! 宏和 match 表达式中的 if-let 守卫,稳定化多个 API。Ironpress 是高性能的 Rust PDF 转换工具,支持多种格式和功能。ndatafusion 项目为 Apache DataFusion 提供线性代数和机器学习能力。Zenoh 1.9.x 版本引入区域架构和 QUIC 传输增强,支持复杂网络拓扑。

【Rust日报】2026-04-18 Ironpress - 纯 Rust HTML/CSS/Markdown 转 PDF 工具

Rust.cc
Rust.cc · 2026-04-19T00:36:12Z
Visual Studio Code 1.116

Visual Studio Code 1.116版本更新,新增专用命令和快捷键,改善Agents应用的可访问性,支持CSS @import链接解析,提升用户体验。

Visual Studio Code 1.116

Visual Studio Code - Code Editing. Redefined.
Visual Studio Code - Code Editing. Redefined. · 2026-04-15T17:00:00Z
  • <<
  • <
  • 1 (current)
  • 2
  • 3
  • >
  • >>
👤 个人中心
在公众号发送验证码完成验证
登录验证
在本设备完成一次验证即可继续使用

完成下面两步后,将自动完成登录并继续当前操作。

1 关注公众号
小红花技术领袖公众号二维码
小红花技术领袖
如果当前 App 无法识别二维码,请在微信搜索并关注该公众号
2 发送验证码
在公众号对话中发送下面 4 位验证码
小红花技术领袖俱乐部
小红花·文摘:汇聚分发优质内容
小红花技术领袖俱乐部
Copyright © 2021-
粤ICP备2022094092号-1
公众号 小红花技术领袖俱乐部公众号二维码
视频号 小红花技术领袖俱乐部视频号二维码