Tailwind CSS v3.4 引入了许多新特性和改进，包括：

1. 动态视口单位：新增 dvh, lvh, 和 svh 单位，以适应移动设备上浏览器的变化，支持全高度元素。
2. :has() 伪类支持：允许根据子元素来样式化父元素，为 CSS 添加强大的新功能。
3. `` 变体：用于从父元素使用实用类样式化直接子元素，提高样式的灵活性和可用性。
4. 新的 size-* 实用工具：允许同时设置元素的宽度和高度，简化了尺寸设置。
5. 平衡标题和文本包裹实用工具：通过 text-wrap: balance 和 text-pretty 实用工具，自动优化文本折行和标题布局。
6. Subgrid 支持：让元素可以继承其父元素的网格列或行，使子元素能够放置在父网格中。
7. 扩展的最小宽度、最大宽度和最小高度比例尺：包括完整的间距比例尺，使诸如 min-w-12 这样的类成为可能。
8. 扩展的不透明度比例尺：包括每隔 5% 的步长，减少了自定义值的需求。
9. 扩展的网格行比例尺：将内置的网格行数从 6 增加到 12。
10. 新的强制颜色模式变体：为强制颜色模式调整样式，提供更细致的控制。
11. 新的强制颜色调整实用工具：控制强制颜色模式如何影响设计，用于在关键情况下确保特定颜色的渲染。

#CSS #Tailwindcss

https://tailwindcss.com/blog/tailwindcss-v3-4

StyleX 介绍:

- StyleX 是一个表达性强、确定性高、可靠且可扩展的样式系统，专为大型应用程序设计。
- 它汲取了之前样式库的优点，创造了既熟悉又独特的新体验。
- StyleX 结合了 CSS-in-JS 库的开发者体验，通过编译时工具实现了静态 CSS 的性能和可扩展性。

StyleX 特点:

性能：编译时和运行时都非常快。Babel 转换不会显著降低构建速度。运行时避免了使用 JavaScript 插入样式的成本，主要是高效地合并类名字符串。
优化：生成的 CSS 优化了大小，确保即使是最大的网站也能被浏览器快速解析。
适用于大型代码库：可扩展到极大的代码库，如 Meta 所拥有的。Babel 插件通过原子构建和文件级缓存处理成千上万的组件。
最小化 CSS 包大小：通过生成原子 CSS 类名，帮助最小化 CSS 包的大小。随着应用中组件数量的增长，CSS 包的大小开始趋于稳定。
自动管理 CSS 选择器的特异性：保证生成规则之间不会发生冲突。

StyleX 使用:

易于组合：不仅可以有条件地应用多个本地样式，还可以跨文件和组件传递样式。
类型约束：可以使用 TypeScript 或 Flow 类型来限制组件接受的样式。
与组件共同编写：鼓励在同一文件中编写样式和组件，这有助于提高样式的可读性和可维护性。
调试：可以配置 StyleX 以输出调试类名，而不是功能性原子类名。

StyleX 工具:

- StyleX 包含一组协同工作的工具，其中最重要的是 Babel 插件。它在编译时找到并提取源代码中定义的所有样式，转换为原子类名。
- 支持使用本地常量和表达式定义样式的各种静态模式。
- 预计算最终类名以消除运行时成本，即使是合并类名。

StyleX 背景:

- Facebook 的旧网站使用类似 CSS 模块的东西，遇到了各种问题，激发了对 CSS-in-JS 的初始想法。
- 在重建 facebook.com 时，团队意识到需要更好的东西，于是创建了 StyleX。
- StyleX 在 Meta 使用多年，证明了其可扩展性。在 Meta 内部，StyleX 成为了样式组件的首选方式，被用于 Facebook、WhatsApp、Instagram、Workplace 和 Threads 等主要产品。

#CSS #前端

https://github.com/facebook/stylex

12 种现代 CSS 一行升级方法。主要强调通过一些简单的 CSS 属性改变，可以在应用程序中实现显著的提升。

关键要点列表

1. 📐 使用 aspect-ratio 属性: 用于定义元素的宽高比，如视频嵌入，代替旧的 "padding hack" 方法。

2. 🖼 object-fit 属性的应用: 控制图片或其他替换元素的大小调整行为，类似于 background-size。

3. 📏 margin-inline 属性: 简化设置水平书写模式下的左右边距。

4. 🎨 text-underline-offset 属性: 允许自定义文本基线与下划线之间的距离。

5. 🌟 outline-offset 属性: 用于调整元素聚焦时轮廓线的位置。

6. 📜 scroll-margin 属性: 在滚动位置上下文中为元素添加偏移量。

7. 🌗 color-scheme 属性: 适应浏览器 UI 元素的暗模式或亮模式。

8. 🎨 accent-color 属性: 自定义复选框和单选按钮的颜色。

9. 📦 width: fit-content: 允许元素根据内容大小调整宽度。

10. 🔄 overscroll-behavior: contain: 控制滚动行为，使其限于特定区域内。

11. 📝 text-wrap 属性: 用于平衡文本行或避免孤立的单词。

12. 🚧 scrollbar-gutter 属性: 在布局中保留滚动条空间，避免布局变动。

#前端 #CSS

https://moderncss.dev/12-modern-css-one-line-upgrades/

该文章是关于如何使用现代 CSS 构建高度可配置的开关组件。尽管 Safari Technology Preview 最近增加了原生的开关组件，但作者认为在等待原生开关支持的同时，我们可以使用 :has(), 容器查询、逻辑属性和自定义属性建立一个高度可配置的开关组件。

核心构建元素是 HTML，主要包括一个 `<label>` 元素作为组件的根元素，以及用于状态切换和视觉效果的附加元素。开关的开启、关闭状态由屏幕阅读器朗读。同时，作者使用了 3 个仅用于装饰的元素。

关于开关组件的形状、颜色等属性的自定义设置，文章中主要通过 CSS 自定义属性进行配置。所有属性值的设置都在 `:root {}` 里，读者可以根据需要更改。

作者强调了 CSS 的功能和发展，比如 `:root` 属性的使用，`container-type: inline-size; 样式的设定等。最后，作者提出了用 :has()` 代替 JavaScript 改变开关背景和文字颜色的建议。这样可以根据组件的子 :checked 状态，更改开关的背景和文字颜色。同时，也可以更改滑块（thumb）的位置。

总的来说，该文主要向读者展示了如何使用现代 CSS 技术创建一个可配置的开关组件，在诸如装饰性文本，焦点可见性等方面都有较深入的剖析。

#前端 #CSS #教程

https://piccalil.li/blog/a-highly-configurable-switch-component-using-modern-css/

CSS 近期新增了多个数学函数，这些函数为我们在排版和动画设计中提供了更多的灵活性。以下是新增函数的概要：

新增的 CSS 数学函数

1. CSS 添加了一系列新的数学函数来补充传统的 calc() 等函数。
2. 这些函数在 Edge、Chrome、Safari 和 Firefox 的最新版本中可用。

pow() 函数

1. 在数学中，幂次可以让我们指定一个数自乘的次数。
2. CSS 中的 pow() 函数接受两个参数：初值和指数。
3. 与 JavaScript 中的 Math.pow() 功能相似，但只能处理纯数字，不接受带有单位的参数。
4. 例子：`line-height: pow(3, 2);` 将返回 `9`。

sqrt() 函数

1. 类似于 JavaScript 的 Math.sqrt()`，CSS 的 `sqrt() 用于计算数字的平方根。
2. 它接受单一参数，只工作于数字。
3. 例子：`line-height: sqrt(4);` 将返回 `2`。

使用新数学函数的实践

1. 这些数学函数如何被日常工作使用可能不总是那么明显。
2. pow() 可以用于字体大小和按模块比例排列标题，有助于维护阶段的可读性。
3. 结合 @property 和自定义属性，可以创建感觉像是有缓动效果的线性动画。

其他指数函数

1. exp() 函数接受一个参数，表示将数学常数 e 调至某个幂次，与 JavaScript 中的 Math.exp() 行为相似。
2. log() 函数接受两个参数（第二个是可选的），表示对数。CSS 中 log() 的第二个参数允许我们改变对数的基数，而 JavaScript 需要 Math.log(number) / Math.log(base) 来实现这一点。
3. hypot() 函数可以处理任意数量的参数，并计算这些值的平方和的平方根。这是文中讨论的唯一允许输入单位的函数，前提是所有单位类型相同。

#前端 #CSS

https://danielcwilson.com/posts/mathematicss-powers/?utm_source=CSS-Weekly&utm_campaign=Issue-580&utm_medium=web

CSS 的 `infinity` 常量，一个令人兴奋的特性，尽管它实际上并不代表无限，而只是一个非常大的值。`infinity` 只能在 `calc()` 函数中使用，并且它在不同的浏览器和操作系统中可能解析为不同的值。

主要内容包括：

1. 在 z-index 中使用 infinity`：作者提出使用 `infinity 可以终结 z-index 值的激增战争。例如，将元素的 z-index 设置为 `calc(infinity)`，可确保该元素始终位于页面最上层。
2. 创建 width 和 height 为 infinity 的元素：尝试创建宽度和高度为无限的 <div> 并检查其实际尺寸。结果表明，CSS 中的 infinity 是一个有限的非常大的数值，例如，在作者的一次测试中，元素的总面积约为 33,554,428px 平方，约合 79km²。
3. infinity 在不同环境下的差异：`infinity` 在不同浏览器和操作系统中的值各不相同，即使是在相同浏览器的不同操作系统之间也存在差异。
4. infinity 的动画效果：尝试将 HTML 元素的动画结束点设置为 infinity 时，元素会立即跳到动画的最终位置并保持该状态。动画延时为 infinity 时，动画则不会开始。
5. infinity 的实际应用案例：在某些情况下，你可能真的需要一个非常大的值，`infinity` 可为你提供。对于 border-radius 和屏幕阅读器的内容，`infinity` 可以作为一个很大的值来使用，不过功能上和其他任意大的值如 9999px 没有区别。
6. 除以零和负无限：在 CSS 中，除零会得到 infinity`。也有 `infinity 常量，表示可能的最小值。

文章总结了 infinity 在 CSS 中主要用作特定情况下可能的最大值的简写形式。这个值会根据浏览器、操作系统和 CSS 属性的不同而变化。虽然 infinity 的浏览器支持性很好，且可以使 CSS 更易读，表明了明确的意图，但并不是必须使用的。

#CSS #前端

https://codersblock.com/blog/playing-with-infinity-in-css/

CSS Anchor Positioning API 是一种新的网页开发技术，它允许开发者以一种原生的方式将元素相对于其他元素（称为锚点）进行定位。这个 API 从 Chrome 125 版本开始可用，它简化了诸如菜单、子菜单、工具提示、选择框、标签、卡片、设置对话框等多种界面特性的复杂布局需求。通过在浏览器中内置锚点定位，开发者可以构建分层用户界面，而无需依赖第三方库，这为创造性设计提供了更多可能性。

#CSS #新特性

https://developer.chrome.com/blog/anchor-positioning-api?hl=en

利用 3D CSS 变换和 React，实现逼真的图片折叠效果。通过细致的技巧分析和实际代码演示，展示了从基本折叠效果到无障碍优化再到效果细节打磨的全过程。这种特殊的 3D 动画效果，不仅提升了页面动画的趣味性，而且通过可重用组件的方式使其更容易在未来项目中使用。

#前端 #CSS #实践

https://levix.notion.site/DOM-Folding-the-DOM-4eded5ef95f7456ebfd216e2c450458e?pvs=74

一份详尽的 CSS 选择器指南，涵盖了我们在 CSS 中用于选择元素的所有不同方法，以及如何使用这些方法来应用样式。

#CSS #前端

https://levix.notion.site/CSS-CSS-Selectors-eba056ed7f5241b288cb8c7f127e5928?pvs=74

不使用 JavaScript 情况下获取屏幕宽度和高度。

@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw; 
}
@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh; 
}
:root {
  --w: tan(atan2(var(--_w),1px)); /* screen width */
  --h: tan(atan2(var(--_h),1px)); /* screen height*/
  /* The result is an integer without unit  */
}

#前端 #CSS #技巧

https://css-tip.com/screen-dimension/

CSS 网格生成器是一款工具，它使得开发者能够更加轻松地设计出个性化的 CSS 网格布局。通过该生成器，用户可以便捷地设定所需的列数、行数以及间距尺寸。

#Tools #CSS #布局 #Grid

https://cssgridgenerator.io/

可换行 <ruby> 标签与 CSS ruby-align 属性

#CSS #前端

https://levix.notion.site/ruby-CSS-ruby-align-Line-breakable-ruby-and-CSS-ruby-align-property-04b48f752a70412bb015c542fad0dfc6

Josh W. Comeau 在其个人网站上分享了他对现代 CSS 重置样式表的见解和实践。他提出了一个精简的 CSS 重置样式表，旨在改善用户体验和 CSS 编写体验。这个样式表包括了如下要点：

1. 盒模型：使用 border-box ，使得元素的宽度和高度包含边框和内边距，简化布局计算。

2. 外边距重置：将所有元素的默认外边距设为 0，以避免不同浏览器的默认样式差异。

3. 可访问性行高：为 body 设置 line-height: 1.5 ，提升文本可读性，符合 WCAG 标准。

4. 文本渲染优化：使用 webkit-font-smoothing: antialiased 改善 macOS 下的文本渲染。

5. 媒体元素默认样式：将 img、picture、video、canvas 和 svg 等元素设置为 display: block 和
`max-width: 100%`，避免溢出容器。

6. 表单控件字体继承：使 input、button、textarea 和 select 等元素继承父元素的字体样式。

7. 避免文本溢出：为 p 和标题元素设置 overflow-wrap: break-word ，防止文本溢出导致滚动条出现。

8. 改进文本换行：为 p 元素使用 text-wrap: pretty ，为标题使用 text-wrap: balance ，改善长单词和 URL 的换行问题。

9. 根堆叠上下文：为应用的顶级元素（如 #root ）设置 isolation: isolate ，避免堆叠上下文问题。

此外，Josh 还提供了一个简洁的 CSS 重置样式表的完整代码，并鼓励开发者根据个人需要对其进行调整和优化。

#CSS

https://www.joshwcomeau.com/css/custom-css-reset/

容器查询是前端开发中一个长期被期待的特性，它允许开发者根据元素的容器尺寸来应用条件性CSS，类似于媒体查询（Media Queries）。这项功能已经在所有主流浏览器中得到了支持近两年。通过容器查询，开发者可以使用熟悉的语法来实现基于容器尺寸的样式调整。

在过去，响应式设计主要依赖于媒体查询，它基于视口的宽度等全局属性来应用 CSS。而容器查询允许基于局部属性，例如元素容器的大小，来应用CSS。例如，可以根据容器的大小自动调整布局。
容器查询的实现涉及到定义容器以及使用@container规则。但需要注意的是，定义容器可能会带来一些意外的后果，比如容器的布局不再依赖于其子元素，这可能会导致布局问题。

CSS 工作组曾认为容器查询是无法实现的，因为 CSS 中的动态特性可能导致无限循环的问题。但随着 Containment API 的引入，这个问题得到了解决。Containment API 允许开发者指定某些 DOM 部分是自包含的，不会影响其他部分的DOM。

通过设置 container-type 属性，开发者可以定义元素的布局是否依赖于其子元素。这使得容器查询成为可能，同时避免了无限循环的问题。

容器查询在所有四个主要浏览器中得到了支持，包括 Safari 16、Chrome/Edge 105 和 Firefox 110。截至 2024 年 11 月，容器查询的浏览器支持率约为 91%。

尽管容器查询功能强大，但许多开发者和设计师尚未充分利用这一特性。开发者需要与设计师分享这些进展，以便他们可以在设计中使用容器查询。

#CSS #容器查询

https://www.joshwcomeau.com/css/container-queries-introduction/

Josh W. Comeau 在其博客中分享了一种高级的磨砂玻璃效果实现技巧，利用 CSS 的 backdrop-filter 属性来创建。这种效果通过在元素背后应用高斯模糊滤镜，模拟了光线穿过磨砂玻璃的视觉效果，为网页设计增添了深度和真实感。他提到，尽管这种效果在许多项目中被广泛使用，但大多数实现都忽略了一些关键的优化。

首先， backdrop-filter 仅考虑直接位于元素背后的像素，而不考虑附近的像素。为了解决这个问题，Comeau 提出了一个巧妙的方法：通过扩展元素的尺寸来覆盖附近的内容，然后使用一个遮罩（mask）来修剪多余的部分，以保持视觉上的原始大小。这种方法需要使用一个绝对定位的子元素，其高度设置为父元素的两倍，并应用 backdrop-filter 和 mask-image 属性。遮罩使用渐变来实现，其中前 50% 为不透明，后 50% 为透明，以确保只有元素的前半部分对模糊算法可见。

此外，为了解决元素扩展后覆盖其他元素导致的点击问题，可以通过设置 pointer-events: none; 来让这些扩展部分在点击事件中变得 “无形”。对于在视口顶部滚动时出现的闪烁问题，可以通过在 backdrop 元素上添加渐变背景来掩盖这种闪烁。

Comeau 还探讨了如何使磨砂玻璃效果更加精致，例如通过增加模糊半径或为 header 元素添加半透明背景色。他强调，`backdrop-filter` 和 mask-image 的浏览器支持度非常高，分别为 97% 和 96.3%，并且大多数 CSS 工具会自动添加必要的浏览器前缀。

最后，他提供了完整的代码示例，包括针对不支持这些 CSS 属性的旧浏览器的功能查询，以确保网站在这些浏览器上仍然可读可用。通过这些优化，Comeau 展示了如何创建一个更加逼真和高级的磨砂玻璃效果，提升了用户体验。“磨砂玻璃效果不仅提升了视觉效果，还增强了网站设计的深度和真实感。” —— Josh W. Comeau

#CSS #前端

https://www.joshwcomeau.com/css/backdrop-filter/

CSS 实现滚动和轮播体验

Chrome 135 开始，开发者可以利用 CSS Overflow 5 规范 中的新特性来创建滚动和轮播体验，而无需使用 JavaScript。这些特性包括 ::scroll-button() 和 ::scroll-marker() ，它们能够帮助开发者更轻松地构建无障碍的轮播组件。

#CSS

https://developer.chrome.com/blog/carousels-with-css?hl=en

一种仅使用 CSS 实现模糊图像占位符（LQIP，Low Quality Image Placeholder）的技术，通过一个自定义 CSS 属性即可实现，无需额外的 HTML 包装元素或 JavaScript 代码。

<img src="…" style="--lqip:483606">

#CSS

https://leanrada.com/notes/css-only-lqip/

WebTUI – 一个将终端 UI 的美带到浏览器的 CSS 库

#CSS #前端

https://webtui.ironclad.sh/

纯 HTML 和 CSS 实现我的世界。

看了一下 HTML 还挺大的，可能运行起来会有点卡帧。

#前端 #CSS

https://benjaminaster.com/css-minecraft/