「CSS3」20241120重大更新！你必须知道的7个新特性！

不二如是

在线学习：



align-content属性在块级布局中的应用： align-content属性最初用于Flexbox和Grid布局中，控制交叉轴上的内容对齐方式。

在2024年，浏览器开始支持在默认布局（flow layout）中使用align-content，从而实现了使用单一CSS属性即可实现垂直居中的效果。

CSS Houdini 和 @property规则： @property是CSS Houdini的一部分，允许开发者在CSS中显式定义自定义属性，包括类型检查、默认值设置以及是否继承等功能。

@starting-style规则： 截至目前，CSS规范中尚未引入名为@starting-style的规则。可能是对其他特性的误解或未来可能的提案。

新增数学函数： CSS中引入了新的数学函数，如round()、rem()和mod()，增强了在样式计算中的灵活性。

明暗模式的简化支持： CSS中引入了color-scheme属性，允许开发者指定页面的颜色方案，浏览器会根据用户的系统设置自动调整页面的明暗模式。

表单验证伪类： CSS中新增了:user-valid和:user-invalid伪类，这些伪类仅在用户与表单元素交互后触发，提供了更好的用户体验。

动态尺寸插值（interpolate-size）： 目前，CSS中尚未引入名为interpolate-size的属性。可能是对其他特性的误解或未来可能的提案。

其他新特性：

游客，如果您要查看本帖隐藏内容请回复

FishC

CSS3 2024 年 11 月 20 日重大更新！你必须知道的 7 个新特性！

1. 在默认布局中使用 align-content：  
align-content 属性不仅用于 Flexbox 和 Grid 布局，现在也支持在默认布局中使用，实现垂直居中更简单。

2. CSS Houdini 和 @property 规则：  
@property 规则是 CSS Houdini 的一部分，它允许开发者定义自定义属性，并进行类型检查和设置默认值。

3. 新增数学函数：  
引入了新的数学函数，如 round()、rem() 和 mod()，让样式计算更灵活。

4. 明暗模式的简化支持：  
使用 color-scheme 属性指定页面的颜色方案，浏览器会根据系统设置自动调整明暗模式。

5. 表单验证伪类：  
新增 :user-valid 和 :user-invalid 伪类，增强用户交互后表单验证体验。

6. 动态尺寸插值（interpolate-size）：  
这个特性尚不存在，可能是对其他属性的误解或未来提案。

7. 其他新特性：  
- 容器查询（Container Queries）：  
  根据容器大小应用样式，提高响应式设计的灵活性。  
- 子网格（Subgrid）：  
  让子元素继承父网格的布局，适合复杂设计。  
- :has()选择器：  
  选择包含特定子元素的父元素，使选择器更强大。  

注：@starting-style 和 interpolate-size 尚未被正式采纳。  
纪念颜色 Rebecca Purple：#663399 - 向 Eric Meyer's 女儿致敬。  

学习这些新特性可以让你的网页设计更加现代和富有表现力！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

sunshine_8205

不二如是

sunshine_8205 发表于 2024-11-20 15:25

不二如是

FishC 发表于 2024-11-20 15:08
CSS3 2024 年 11 月 20 日重大更新！你必须知道的 7 个新特性！

1. 在默认布局中使用 align-content：   ...

给出5的操作案例

FishC

不二如是 发表于 2024-11-20 15:46
给出5的操作案例

表单验证伪类的操作案例：

1. **基本设置**：我们有一个简单的表单，其中包含一个输入框要求用户输入电子邮件地址。

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <input type="submit" value="Submit">
</form>

2. **使用 CSS 验证伪类**：通过 `:user-valid` 和 `:user-invalid` 伪类，可以在用户输入验证通过或不通过时应用不同的样式。

input:required:user-invalid {
    border: 2px solid red;
    background-color: #fdd;
}

input:required:user-valid {
    border: 2px solid green;
    background-color: #dfd;
}

3. **操作说明**：
   - 当用户开始在输入框中输入，并且输入的值不符合电子邮件格式，边框将变为红色，背景变为淡红色。
   - 当用户输入的电子邮件格式正确时，边框将变为绿色，背景变为淡绿色。
   - 这种效果提升了用户体验，使他们能直观地了解输入的有效性。

这种实现方案可以在用户与表单交互时提供即时反馈，提升用户友好性。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

sunshine_8205

跟着小甲鱼老师学CSS3