首页
AI Coding
数据标注
NEW
沸点
课程
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
有趣又实用的 CSS 特性
linpengteng
创建于2023-09-20
订阅专栏
分享讲解有趣又实用的 CSS 特性,例如 @container、@layer、@counter-style、@property、@supports、@scope、css 函数 等
等 7 人订阅
共8篇文章
创建于2023-09-20
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
讲解 CSS At Rules 分页媒体 — @page
分页媒体 @page,和媒体查询一样,同属于 At Rules 大家庭中其中一员。它可以用来指定页面框的各个方面,例如其尺寸、方向和边距等 (不仅限于打印使用)。
讲解 CSS 过渡和动画 transition/animation (很全面 🥳)
目前浏览器实现动画的方式有如下两种 JS 动画 和 CSS 动画,本篇详细讲解 CSS 动画:CSS Transition过渡 和 CSS Animation 动画。
讲解 CSS Nesting 原生嵌套语法 🥳
本篇主要讲解了 CSS Nesting 原生嵌套语法的定义和使用。并相比于 CSS 预处理器,简述了它们的区别和优势。
讲解 CSS At Rules 原生作用域 — @scope
CSS 社区模块化方案 `OOCSS`、`BEM`、`SMACSS`、`ITCSS`、`CSS Modules` 、`CSS-In-JS` 以及 `CSS 原生作用域@scope`。
讲解 CSS At Rules 特性查询 — @supports
由于不同浏览器对 Web 标准的支持度各有不同,所以在使用较新的语法或特性时,我们通常使用特性查询,即 `@supports` 来应用支持或不支持某个属性-值对的样式。
讲解 CSS At Rules 级联层 — @layer
级联层提供了一种结构化的方式来组织和平衡单个源中的关注点。单个级联层内的规则级联在一起,而不与层外的样式规则交错。
讲解 CSS At Rules 媒体查询 — @media
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其应用特定的 CSS 样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
讲解 CSS At Rules 容器查询 — @container
容器查询 即 `@container` 规则,它可以使你能够根据元素容器不同的大小尺寸,对其内部元素进行特定样式的设置和布局。完美解决了组件根据父容器尺寸进行不同的适配和布局的需求。