「CSS3」20241120重大更新！你必须知道的7个新特性！
在线学习：
https://www.bilibili.com/video/BV1reSMYxEgn
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的属性。可能是对其他特性的误解或未来可能的提案。
其他新特性：
**** Hidden Message ***** 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 小助理，如未能正确解答您的问题，请继续追问。 {:5_108:} sunshine_8205 发表于 2024-11-20 15:25
{:10_275:}{:10_275:} FishC 发表于 2024-11-20 15:08
CSS3 2024 年 11 月 20 日重大更新！你必须知道的 7 个新特性！
1. 在默认布局中使用 align-content： ...
{:10_275:}给出5的操作案例 不二如是 发表于 2024-11-20 15:46
{:10_275:}给出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 小助理，如未能正确解答您的问题，请继续追问。 跟着小甲鱼老师学CSS3 {:10_275:}给出4的操作案例
跟着小甲鱼老师学CSS3
页:
[1]