CSS新特性

目录

1. CSS 2023 新特性

2. CSS 2024 新特性


前言:这些新特性通常兼容性较差,在生产环境中谨慎使用!!!

1. CSS 2023 新特性

  • 容器查询(Container Queries):允许在容器尺寸而非视口尺寸的基础上应用不同的样式,提升了响应式设计的灵活性。
    /* 定义一个容器查询 会根据 .container 的宽度是否超过 500px 来切换 .item 的背景色。*/
    .container {container-type: inline-size;
    }.container > .item {background-color: lightblue;
    }@container (min-width: 500px) {.container > .item {background-color: lightcoral;}
    }
    

  • 子网格(Subgrid):进一步增强了网格布局,使嵌套网格继承父级网格的轨道,从而解决了复杂布局中的对齐问题。
    .container {display: grid;grid-template-columns: 1fr 2fr 1fr;
    }.subgrid-container {display: grid;grid-template-columns: subgrid; /* 子网格继承父网格 */
    }
    /* .subgrid-container 会继承 .container 的列定义,使布局更加一致。 */

  • @scope 规则:通过限制样式影响范围,避免样式意外污染其他区域,增强组件的可维护性。
    @scope (.card) {.title {color: blue;}
    }
    /* .title 样式仅在 .card 内生效,其他地方不会被影响 */

  • 样式查询(Style Queries):结合容器查询,允许基于样式属性(如字体、颜色)进行查询,丰富了响应式设计的条件。
    @container style(color-scheme: dark) {.container {background-color: black;color: white;}
    }/* 根据父容器的 color-scheme 是否为 dark 模式来调整 .container 的背景色和字体颜色。 */

2. CSS 2024 新特性

  • () 伪类支持:使 CSS 能选中包含特定内容的父元素,进一步扩展了选择器的能力,比如为包含错误输入的表单高亮其父元素。
    /* 当 `.form-group` 内有 `.input-error` 时,应用红色边框 */
    .form-group:has(.input-error) {border: 2px solid red;
    }/* 当 `.container` 中包含选中的复选框时,将背景色变为绿色 */
    .container:has(input[type="checkbox"]:checked) {background-color: lightgreen;
    }
    

  • 颜色级联(CSS Color Level 5):支持更多颜色空间(如 Lab、LCH),并引入相对颜色功能,让颜色计算更自然,尤其适用于暗模式。
    /* 使用 Lab 颜色空间来调整颜色的亮度和色调 */
    body {background-color: lab(80% -20 20);color: lch(70% 30 50);
    }/* 使用相对颜色调整:将暗模式下背景色变暗 */
    body {background-color: color-mix(in lch, #fff, #000 30%);
    }
    

  • CSS Nesting:简化样式编写,类似于预处理器,支持嵌套规则,以便管理层级和组件结构。
    /* CSS 原生嵌套 */
    .card {padding: 20px;background-color: #fff;& .title {font-size: 24px;color: #333;}& .content {font-size: 16px;color: #666;}&:hover {background-color: #f5f5f5;}
    }
    

  • 优先级调节:通过引入特定属性控制样式优先级,避免了 !important 滥用,使样式覆盖和继承更合理。
    @layer defaults {.button {background-color: lightgray;color: black;}
    }@layer overrides {.button {color: white;background-color: blue;}
    }
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/15904.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

ssm114基于SSM框架的网上拍卖系统的设计与实现+vue(论文+源码)_kaic

摘 要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势,商品拍卖当然也不能排除在外,随着商品拍卖管理的不断成熟,它彻底改变了过去传统的经营管理方式,不仅使商品…

【Qt聊天室客户端】消息功能--发布程序

1. 获取文件内容 主要目标是实现获取内容二进制数据的接口,主要是为后面的消息功能提供服务 具体实现 客户端发送请求 服务端处理请求,同时支持三种数据类型 客户端处理服务端的响应 2. 发送图片消息 客户端与服务端的通信约定 客户端从服务器中获取图片…

【CSS】opacity 影响 z-index 不生效

准备知识 一般来说,z-index 不生效的原因有: 父元素的 position 属性: z-index 只对 position 属性为 relative、absolute 或 fixed 的元素有效。 其他元素的 z-index: 如果页面中有其他元素也设置了较高的 z-index,…

Elasticsearch基本概念及使用

Elasticsearch 是一个开源的、分布式的全文搜索和分析引擎,基于 Apache Lucene 构建。它提供了快速的搜索能力,支持大规模的数据分析,广泛应用于日志分析、全文搜索、监控系统和商业智能等领域。ES操作指令是基于restAPI构建,也就…

C语言入门到精通(第六版)——第十六章

16、网络套接字编程 16.1、计算机网络基础 计算机网络技术是计算机技术和通信技术相结合的产物,代表计算机的一个重要发展方向。了解计算机的网络结构,有助于用户开发网络应用程序。 16.1.1、IP地址 为了使网络上的计算机能够彼此识别对方,…

Electron教程1-初学入门

玩转Electron Electron 是什么注意事项环境安装安装 vscode安装 git 第一个实例第二个实例第二个实例解读 总结问题解答 Electron 是什么 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个…

柠乐音乐 1.3.87 | 界面优美支持无损音乐下载的音乐播放器

柠乐音乐app提供丰富的音乐资源,涵盖流行、摇滚、古典等多种类型音乐,并且全部免费。支持FLAC无损音质音乐免费高速下载。内置独特推荐算法,可根据用户喜好智能推荐音乐。还包括电台播放资源、歌单同步(支持网易云音乐和QQ音乐&am…

【资料】网络安全风险评估报告,风险管理报告,网络安全风险管理计划,网络安全网络安全能力验证报(Word原件)

一、概述 1.1工作方法 1.2评估依据 1.3评估范围 1.4评估方法 1.5基本信息 二、资产分析 2.1 信息资产识别概述 2.2 信息资产识别 三、评估说明 3.1无线网络安全检查项目评估 3.2无线网络与系统安全评估 3.3 ip管理与补丁管理 3.4防火墙 四、威胁细类分析 4.1威胁…

change buffer:到底应该选择普通索引还是唯一索引

文章目录 引言第一章:普通索引和唯一索引在查询逻辑与效率上的对比1.1 查询逻辑分析1.2 查询效率对比 第二章:普通索引和唯一索引在更新逻辑与效率上的对比2.1 更新逻辑分析2.2 更新效率对比 第三章:底层原理详解 - 普通索引和唯一索引的区别…

软件工程师简历(精选篇)

【#软件工程师简历#】 一份专业而精准的软件工程师简历,不仅能够全面展示技术实力和项目经验,更是赢得理想工作机会的重要敲门砖。那么,如何撰写一份令人印象深刻的软件工程师简历呢?以下是幻主简历整理的软件工程师简历&#xf…

深度学习推荐系统的工程实现

参考自《深度学习推荐系统》——王喆,用于学习和记录。 介绍 之前章节主要从理论和算法层面介绍了推荐系统的关键思想。但算法和模型终究只是“好酒”,还需要用合适的“容器”盛载才能呈现出最好的味道,这里的“容器”指的就是实现推荐系统…

前缀和技巧解析

前缀和技巧解析 前缀和(Prefix Sum)是一种常用的算法技巧,用于高效地处理一系列连续子数组和的问题。通过构建一个额外的数组来存储从数组起始位置到当前位置的累计和,可以在常数时间内快速计算任意区间的和。 前缀和应用的典型…

(undone) MIT6.S081 2023 学习笔记 (Day4: LAB3 page tables)

LAB 网页:https://pdos.csail.mit.edu/6.S081/2023/labs/pgtbl.html 任务1:Speed up system calls 根据网页,操作系统可以通过把部分数据放入用户空间的页表,来使得部分系统调用不用进入内核空间,从而提高速度。我们的…

CSS:怎么把网站都变成灰色

当大家看到全站的内容都变成了灰色,包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢? 有人会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了…

探索Python文档自动化的奥秘:`python-docx`库全解析

文章目录 探索Python文档自动化的奥秘:python-docx库全解析1. 背景:为何选择python-docx?2. python-docx是什么?3. 如何安装python-docx?4. 简单库函数使用方法创建文档添加段落添加标题添加表格插入图片 5. 应用场景自…

OCP证书如何下载?

访问Oracle CertView网站: 打开网址 https://certview.oracle.com/ ,这是Oracle官方提供的证书查询平台 。 登录账号: 使用您的Oracle账号和密码登录CertView。如果您不记得密码,可以通过注册账号时预留的邮箱重置密码 。 查看成…

OBOO鸥柏“触摸屏广告一体机交互”亮相2024中国珠海航展

2024年11月12日,第十五届中国国际航空航天博览会(简称中国航展或珠海航展)在珠海拉开帷幕。展会现场,既有OBOO鸥柏一大批高精尖液晶显示产品集体亮相,也有航天相关科技领域及飞行表演队炫技蓝天等。在中国航展的各个科…

【智能分子动力学】深度学习驱动分子动力学方法概述

深度学习驱动分子动力学(Deep Learning-driven Molecular Dynamics,简称DLDMD)方法是将深度学习技术应用于分子动力学模拟中的一种创新方法。这种方法通过深度学习模型来提升传统分子动力学模拟的效率和精度,尤其是在复杂系统的建…

(69)基于Hilbert(希尔伯特)变换的调相信号解调的MATLAB仿真

文章目录 前言一、希尔伯特变换二、相位调制1.基本原理2.调制特点3.应用 三、使用希尔伯特变换进行相位解调的原理1. 解调原理2.算法优点 四、MATLAB仿真1. 仿真代码2. 仿真结果 总结 前言 本文首先介绍了相位调制技术,然后说明了使用希尔伯特变换进行调相信号解调…

ISUP协议视频平台EasyCVR视频设备轨迹回放平台智慧农业视频远程监控管理方案

在当今快速发展的农业领域,智慧农业已成为推动农业现代化、助力乡村全面振兴的新手段和新动能。随着信息技术的持续进步和城市化进程的加快,智慧农业对于监控安全和智能管理的需求日益增长。 视频设备轨迹回放平台EasyCVR作为智慧农业视频远程监控管理方…