Frontend Focus #534

2022/3/25

(opens new window)

CSS 联合设计者:“!important存在的原因只有一个:美国的法律” (opens new window) —— 这条推文在本周得到了很多关注 —— Steven Pemberton 分享了由于美国法律“要求某些文字必须使用特定的字体大小”,!important 是如何被加入进规范中的。他补充说到,其他任何用法都可能是 “误用”。Ernie Smith 也对这个问题进行了更多的挖掘 (opens new window)

Steven Pemberton

用 HTML 的方式(而不是 XHTML 的方式)编写 HTML (opens new window) — 当然,你可能早已不再使用 XHTML,但当写 HTML 时,你受 XHTML 的影响可能比你想象中多。你很可能在用 XHTML 的方式写 HTML。 比如常见的错误:我们仍然喜欢 <br /> 元素。

Jens Oliver Meiert

(opens new window)

用 Cypress 测试你的 Web 应用 (opens new window) — 加入 Steve Kinney 这个涵盖 Cypress 的详细课程:为你的客户端应用程序编写端到端测试的一种快速又简单的方法。学习选择器引擎、测试运行器、断言库等内容。

Frontend Masters sponsor

使用谷歌分析4 为未来做准备 (opens new window) — 你是谷歌分析的用户吗?通用分析将在明年结束服务,并将在 2023 年 7 月 1 日停止处理新的点击。以下是如何通过迁移至到谷歌的下一代解决方案,即谷歌分析4,来从现在就做好准备。此举无疑是受近年来数据保护法(如GDPR)和用户对隐私期望的广泛变化所驱动的。

Russell Ketchum (Google)

Windows 高对比度模式、强制颜色模式和 CSS 自定义属性 (opens new window) — CSS 自定义属性的用途远远超过了一点有趣的颜色主题。Eric 在这里解释了这种现代的 CSS 是如何成为一种强大的辅助技术,可以帮助创建灵活、可维护和自适应的数字体验。

Eric Bailey

# ⚡️ 快报:

# 📙 教程、文章和观点

(opens new window)

构建一个加载条组件 (opens new window) — 简要介绍了如何使用 <progress> 元素建立一个颜色自适应的易访问的加载条。

Adam Argyle

电子邮件中的 HTML 和 CSS 在 2022 年的效果如何? (opens new window) — 深入研究了哪些 HTML 和 CSS 功能适用于电子邮件模板,以及我们应如何使它们来适配所有电子邮件客户端。

Daniel Schwarz

利用 Shortcut 简化和改进你的工作流程 (opens new window) — 我们为您软件团队的工作流程带来新的产品:使用 Shortcut 进行计划、协作、构建和衡量成功。

Shortcut (formerly Clubhouse.io) sponsor

将 SVG 模式优化到最小的尺寸 (opens new window) — 一些优化 SVG 模式的激进方法,使其在不影响整体图像质量的情况下尽可能少地包含代码。

Bence Szabó

(opens new window)

Claymorphism 是否能坚持下去? (opens new window) — This design trend has been picking up steam (you may have noticed the rising popularity of colorful inflated 3D graphics in web illustrations), so here’s a look at the idea in more detail, and how you can recreate the effect with CSS. 这种设计趋势一直在不断升温(你可能已经注意到网络插图中五颜六色的充气 3D 图形越来越受欢迎),所以本文概述了此想法的更多细节,以及你如何用 CSS 来创造这种效果。

Adrian Bece

用 JS 实现 Cookie 同意横幅的延迟 (opens new window) — 本文是关于如何去创建一个 “理想的” cookie 同意横幅 -- 主要是实现一个不会导致累积布局转移(CLS)问题的横幅。

Dariusz Więckiewicz

Wix 在建立超级 CI 管道时面临的 6 个挑战 (opens new window)

Buildkite sponsor

▶  用微软 FrontPage 98 制作一个90年代风格的网站 (opens new window) — 啊,满满的回忆。。 Michael MJD

在 JavaScript 中建立表的排序和分页 (opens new window)
Raymond Camden

# 🔧 源码、工具和资源

(opens new window)

Master UI Styles:一个 “虚拟 CSS” 引擎 (opens new window) — 这个小型的 CSS 框架(不到13KB)刚刚发布了1.0 (opens new window)。它声称不需要“记住神秘的类名”,允许你用无限的 CSS 样式变体来设计 HTML。

Master

sysend.js: 在同一浏览器中打开的页面或标签之间发送消息 (opens new window) — 一个小型库,它抽象了一个机制,用于在同一浏览器中打开的页面之间发送消息。支持跨域通信,基于 localStorage 和 BroadcastChannel API。这里有一个 Demo (opens new window)(请你打开两个标签。)

Jakub T. Jankiewicz

Chrome 扩展 CLI:用于构建下一个(或第一个)Chrome 扩展 的 CLI (opens new window) — 想尽快为 Chrome 建立一个扩展?这个工具旨在让你尽快走上正确的道路。

Dutiyesh Salunkhe

prettier-plugin-tailwindcss:一个用于 Tailwind C 的Prettier 插件 (opens new window) — 来自 Tailwind 的官方 Pretier 插件,根据 Tailwind 的推荐类顺序 (opens new window)自动排序。

Tailwind Labs