npx skills add https://github.com/paulirish/dotfiles --skill modern-css本技能为编写现代、健壮且高效的 CSS 提供参考。
.card {
container: --my-card / inline-size;
}
@container --my-card (width < 40ch) {
/* 基于组件的响应式设计 */
}
@container (20ch < width < 50ch) {
/* 范围语法 */
}
容器单位: cqi, cqb, cqw, cqh - 相对于容器尺寸的大小
锚定容器查询: 基于锚定回退状态为定位元素设置样式
.tooltip {
container-type: anchored;
}
@container anchored(top) {
/* 当定位在顶部时的样式 */
}
@media (width <= 1024px) { }
@media (360px < width < 1024px) { }
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
display: grid-lanes 用于 Pinterest 风格的布局,并具有逻辑 Tab 键顺序。(之前提议为 grid-template-rows: masonry)。:root {
color-scheme: light dark;
--surface-1: light-dark(white, #222);
--text-1: light-dark(#222, #fff);
}
/* OKLCH:均匀亮度,P3+ 色彩 */
.vibrant {
background: oklch(72% 75% 330);
}
/* 用于 HDR 显示器的 Display-P3 */
@media (dynamic-range: high) {
.neon {
--neon-red: color(display-p3 1 0 0);
}
}
/* 在 oklch 中使用更好的渐变 */
.gradient {
background: linear-gradient(
to right in oklch,
color(display-p3 1 0 .5),
color(display-p3 0 1 1)
);
}
/* color-mix() */
.lighten {
background: color-mix(in oklab, var(--brand), white);
}
/* 相对颜色语法 */
.lighter {
background: oklch(from blue calc(l + .25) c h);
background: oklch(from blue 75% c h); /* 设置为特定亮度 */
}
.semi-transparent {
background: oklch(from var(--color) l c h / 50%);
}
.complementary {
background: hsl(from blue calc(h + 180) s l);
}
:root {
accent-color: hotpink; /* 为复选框、单选按钮、范围输入着色 */
}
h1 {
text-wrap: balance; /* 平衡的多行标题 */
max-inline-size: 25ch;
}
p {
text-wrap: pretty; /* 避免孤行 */
max-inline-size: 50ch;
}
h1, p, button {
text-box: trim-both cap alphabetic; /* 视觉垂直居中 */
}
.heading {
font-size: clamp(1rem, 1rem + 0.5vw, 2rem); /* 尊重用户偏好 */
}
dvh / dvw - 动态(考虑移动浏览器 UI)svh / svw - 小(最小可能的视口)lvh / lvw - 大(最大可能的视口)/* 根据滚动位置进行动画 */
.parallax {
animation: slide-up linear both;
animation-timeline: scroll();
}
/* 根据视口交叉进行动画 */
.fade-in {
animation: fade linear both;
animation-timeline: view();
animation-range: cover -75cqi contain 20cqi;
}
状态: 基线新可用(同文档)。跨文档过渡处于有限可用状态(Chrome/Safari 18.2+)。
@view-transition {
navigation: auto; /* 自动动画页面过渡(MPA) */
}
nav {
view-transition-name: --persist-nav; /* 保持特定元素 */
view-transition-class: --site-header; /* 使用类分组过渡 */
}
/* 为活动过渡设置样式 */
html:active-view-transition {
overflow: hidden;
}
嵌套视图过渡组: 在过渡期间保留 3D 变换和裁剪。
.springy {
--spring: linear(
0, 0.14 4%, 0.94 17%, 1.15 24% 30%, 1.02 43%, 0.98 51%, 1 77%, 1
);
transition: transform 1s var(--spring);
}
.dialog {
transition: opacity .5s, scale .5s;
@starting-style {
opacity: 0;
scale: 1.1;
}
}
类型安全、可动画的自定义属性:
@property --gradient-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.animate {
transition: --gradient-angle 1s ease;
&:hover {
--gradient-angle: 360deg;
}
}
新可用: calc-size() 允许对固有尺寸(auto, min-content)进行计算和过渡。
/* 终于可以:动画到自动高度! */
.accordion-content {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.accordion-item.open .accordion-content {
height: calc-size(auto);
}
.radial-layout {
--_angle: calc(var(--sibling-index) * var(--_offset));
translate:
calc(cos(var(--_angle)) * var(--_circle-size))
calc(sin(var(--_angle)) * var(--_circle-size));
}
.staggered {
animation-delay: calc(sibling-index() * .1s);
background-color: hsl(sibling-count() 50% 50%);
}
.dynamic {
color: if(
style(--theme: dark),
white,
black
);
}
@layer reset, design-system, components, utilities;
@import "open-props/colors" layer(design-system);
@import "components/nav/base.css" layer(components.nav);
@layer components.nav.primary {
nav {
position: sticky;
inset-block-start: 0;
}
}
优点:
<dialog id="modal">
<form method="dialog">
<button value="cancel">取消</button>
<button value="confirm">确认</button>
</form>
</dialog>
<button commandfor="modal" command="showModal">打开</button>
<button commandfor="modal" command="close">关闭</button>
新增: closedby 属性启用轻量关闭行为
<button popovertarget="menu">显示菜单</button>
<div popover id="menu">...</div>
popover=hint: 临时性工具提示,不会关闭其他弹出层
[popover] {
transition:
display .5s allow-discrete,
overlay .5s allow-discrete,
opacity .5s;
@starting-style {
&:popover-open {
opacity: 0;
}
}
}
.tooltip-anchor {
anchor-name: --tooltip;
}
.tooltip[popover] {
position-anchor: --tooltip;
position-area: block-start;
position-try-fallbacks: flip-block;
position-try-order: most-height;
}
伪元素: anchor(), ::scroll-button(), ::scroll-marker()
<details name="accordion">...</details>
<details name="accordion">...</details>
<!-- 一次只能打开一个 -->
select {
appearance: base-select; /* 完全 CSS 控制 */
}
/* 使用丰富的 HTML 样式化选项 */
select option::before {
content: ""; /* 可以包含图像、图标 */
}
<search>
<form>
<input type="search" name="q">
<button type="submit">搜索</button>
</form>
</search>
textarea, select, input {
field-sizing: content; /* 根据内容自动增长 */
}
textarea {
min-block-size: 3lh; /* 行高单位 */
max-block-size: 80dvh;
}
/* 在显示错误前等待用户交互 */
:user-invalid {
outline-color: red;
}
:user-valid {
outline-color: green;
}
label:has(+ input:user-invalid) {
text-decoration: underline wavy red;
}
<select>
<option>选项 1</option>
<hr>
<option>选项 2</option>
</select>
.custom-scrollbar {
scrollbar-color: hotpink transparent;
scrollbar-width: thin;
}
.complex-clip {
clip-path: shape(
from 0% 0%,
curve by 50% 25% via 25% 50%,
line to 100% 100%
);
}
.fancy-corners {
corner-shape: squircle;
corner-shape: notch;
corner-shape: scoop;
corner-shape: superellipse(0.7);
}
@supports (animation-timeline: view()) {
.fade-in {
animation: fade linear both;
animation-timeline: view();
}
}
@supports (container-type: inline-size) {
.responsive-card {
container-type: inline-size;
}
}
@media (prefers-reduced-motion: no-preference) {
.animated {
animation: slide 1s ease;
}
}
@media (prefers-color-scheme: dark) {
:root {
--surface: #222;
}
}
@media (prefers-contrast: more) {
.text {
font-weight: 600;
}
}
什么是 Baseline? 一种统一的方式来理解跨浏览器功能的可用性。功能被标记为:
请记住: 始终检查 Baseline 状态,对前沿功能使用 @supports,并通过媒体查询尊重用户偏好。现代 CSS 是关于渐进增强和构建适用于所有人的弹性界面。
这是一个使用了许多现代 CSS 功能的卡片组件:
/* 用于组织的级联层 */
@layer components.card {
/* 使用 @property 的自定义属性 */
@property --card-hue {
syntax: "<number>";
inherits: false;
initial-value: 200;
}
.card {
/* 用于响应式设计的容器 */
container: card / inline-size;
/* 逻辑属性 */
inline-size: 100%;
padding-inline: var(--space-md);
padding-block: var(--space-lg);
/* 现代色彩系统 */
background: light-dark(
oklch(98% 0.02 var(--card-hue)),
oklch(20% 0.02 var(--card-hue))
);
/* 使用相对颜色的边框 */
border: 1px solid oklch(from var(--surface) calc(l * 0.9) c h);
/* 平滑圆角 */
border-radius: var(--radius-md);
/* 视图过渡 */
view-transition-name: --card;
/* 滚动驱动动画 */
animation: fade-in linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
/* 工具提示的锚点 */
anchor-name: --card-anchor;
/* 过渡自定义属性 */
transition: --card-hue 0.5s var(--ease-spring-3);
&:hover {
--card-hue: 280;
}
/* 容器内的响应式排版 */
@container card (width > 30ch) {
.card__title {
font-size: clamp(1.5rem, 3cqi, 2.5rem);
text-wrap: balance;
}
}
@container card (width < 30ch) {
.card__image {
aspect-ratio: 16 / 9;
object-fit: cover;
}
}
}
.card__title {
/* 用于视觉对齐的文本框修剪 */
text-box: trim-both cap alphabetic;
text-wrap: balance;
/* 逻辑边距 */
margin-block-end: var(--space-sm);
}
.card__body {
text-wrap: pretty;
max-inline-size: 65ch;
}
.card__cta {
/* 继承字体 */
font: inherit;
/* 强调色 */
accent-color: var(--brand);
/* 字段尺寸调整 */
field-sizing: content;
/* 逻辑属性 */
padding-inline: var(--space-md);
padding-block: var(--space-sm);
/* 使用相对语法的现代颜色 */
background: oklch(from var(--brand) l c h);
color: oklch(from var(--brand) 95% 0.05 h);
&:hover {
background: oklch(from var(--brand) calc(l * 1.1) c h);
}
&:user-invalid {
outline: 2px solid light-dark(red, #ff6b6b);
}
}
/* 锚定到卡片的弹出层工具提示 */
.card__tooltip[popover] {
position-anchor: --card-anchor;
position-area: block-start;
position-try-fallbacks: flip-block;
/* 进入动画 */
@starting-style {
opacity: 0;
scale: 0.9;
}
transition:
opacity 0.2s,
scale 0.2s,
display 0.2s allow-discrete,
overlay 0.2s allow-discrete;
}
/* 滚动状态容器查询 */
@supports (container-type: scroll-state) {
.card__sticky-header {
container-type: scroll-state;
position: sticky;
inset-block-start: 0;
@container scroll-state(stuck: top) {
box-shadow: 0 2px 8px oklch(0% 0 0 / 0.1);
}
}
}
/* 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
.card {
animation: none;
transition: none;
}
}
@media (prefers-contrast: more) {
.card {
border-width: 2px;
}
}
}
/* 滚动动画的关键帧 */
@keyframes fade-in {
from {
opacity: 0;
scale: 0.95;
}
to {
opacity: 1;
scale: 1;
}
}
<article class="card">
<img
class="card__image"
src="image.jpg"
alt="描述"
loading="lazy"
>
<h2 class="card__title">卡片标题</h2>
<p class="card__body">
卡片描述,具有漂亮的文本换行,避免孤行。
</p>
<button
class="card__cta"
popovertarget="card-tooltip"
>
了解更多
</button>
<div
class="card__tooltip"
popover="hint"
id="card-tooltip"
>
附加信息显示在此处
</div>
</article>
优先考虑稳定性:
@supports。或者询问用户希望如何处理。使用 Web 平台:
代码风格:
oklch)。每周安装量
174
仓库
GitHub 星标
4.3K
首次出现
2026 年 1 月 23 日
安全审计
安装于
opencode148
gemini-cli145
github-copilot140
codex137
cursor123
amp117
This skill provides a reference for writing modern, robust, and efficient CSS.
.card {
container: --my-card / inline-size;
}
@container --my-card (width < 40ch) {
/* Component-based responsive design */
}
@container (20ch < width < 50ch) {
/* Range syntax */
}
Container units: cqi, cqb, cqw, cqh - size relative to container dimensions
Anchored container queries: Style positioned elements based on anchor fallback state
.tooltip {
container-type: anchored;
}
@container anchored(top) {
/* Styles when positioned at top */
}
@media (width <= 1024px) { }
@media (360px < width < 1024px) { }
display: grid-lanes for Pinterest-style layouts with logical tab order. (Previously proposed as grid-template-rows: masonry).:root {
color-scheme: light dark;
--surface-1: light-dark(white, #222);
--text-1: light-dark(#222, #fff);
}
/* OKLCH: uniform brightness, P3+ colors */
.vibrant {
background: oklch(72% 75% 330);
}
/* Display-P3 for HDR displays */
@media (dynamic-range: high) {
.neon {
--neon-red: color(display-p3 1 0 0);
}
}
/* Better gradients with in oklch */
.gradient {
background: linear-gradient(
to right in oklch,
color(display-p3 1 0 .5),
color(display-p3 0 1 1)
);
}
/* color-mix() */
.lighten {
background: color-mix(in oklab, var(--brand), white);
}
/* Relative color syntax */
.lighter {
background: oklch(from blue calc(l + .25) c h);
background: oklch(from blue 75% c h); /* Set to specific lightness */
}
.semi-transparent {
background: oklch(from var(--color) l c h / 50%);
}
.complementary {
background: hsl(from blue calc(h + 180) s l);
}
:root {
accent-color: hotpink; /* Tints checkboxes, radios, range inputs */
}
h1 {
text-wrap: balance; /* Balanced multi-line headings */
max-inline-size: 25ch;
}
p {
text-wrap: pretty; /* No orphans */
max-inline-size: 50ch;
}
h1, p, button {
text-box: trim-both cap alphabetic; /* Optical vertical centering */
}
.heading {
font-size: clamp(1rem, 1rem + 0.5vw, 2rem); /* Respects user preferences */
}
dvh / dvw - Dynamic (accounts for mobile browser UI)svh / svw - Small (smallest possible viewport)lvh / lvw - Large (largest possible viewport)/* Animate on scroll position */
.parallax {
animation: slide-up linear both;
animation-timeline: scroll();
}
/* Animate on viewport intersection */
.fade-in {
animation: fade linear both;
animation-timeline: view();
animation-range: cover -75cqi contain 20cqi;
}
Status: Baseline Newly Available (Same-document). Cross-document transitions are in Limited Availability (Chrome/Safari 18.2+).
@view-transition {
navigation: auto; /* Automatically animate page transitions (MPAs) */
}
nav {
view-transition-name: --persist-nav; /* Persist specific elements */
view-transition-class: --site-header; /* Group transitions with classes */
}
/* Style the active transition */
html:active-view-transition {
overflow: hidden;
}
Nested View Transition Groups: Preserve 3D transforms and clipping during transitions.
.springy {
--spring: linear(
0, 0.14 4%, 0.94 17%, 1.15 24% 30%, 1.02 43%, 0.98 51%, 1 77%, 1
);
transition: transform 1s var(--spring);
}
.dialog {
transition: opacity .5s, scale .5s;
@starting-style {
opacity: 0;
scale: 1.1;
}
}
Type-safe, animatable custom properties:
@property --gradient-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.animate {
transition: --gradient-angle 1s ease;
&:hover {
--gradient-angle: 360deg;
}
}
Newly Available: calc-size() allows calculations and transitions on intrinsic sizes (auto, min-content).
/* Finally: Animate to auto height! */
.accordion-content {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.accordion-item.open .accordion-content {
height: calc-size(auto);
}
.radial-layout {
--_angle: calc(var(--sibling-index) * var(--_offset));
translate:
calc(cos(var(--_angle)) * var(--_circle-size))
calc(sin(var(--_angle)) * var(--_circle-size));
}
.staggered {
animation-delay: calc(sibling-index() * .1s);
background-color: hsl(sibling-count() 50% 50%);
}
.dynamic {
color: if(
style(--theme: dark),
white,
black
);
}
@layer reset, design-system, components, utilities;
@import "open-props/colors" layer(design-system);
@import "components/nav/base.css" layer(components.nav);
@layer components.nav.primary {
nav {
position: sticky;
inset-block-start: 0;
}
}
Benefits:
<dialog id="modal">
<form method="dialog">
<button value="cancel">Cancel</button>
<button value="confirm">Confirm</button>
</form>
</dialog>
<button commandfor="modal" command="showModal">Open</button>
<button commandfor="modal" command="close">Close</button>
New: closedby attribute enables light-dismiss behavior
<button popovertarget="menu">Show Menu</button>
<div popover id="menu">...</div>
popover=hint: Ephemeral tooltips that don't dismiss other popovers
[popover] {
transition:
display .5s allow-discrete,
overlay .5s allow-discrete,
opacity .5s;
@starting-style {
&:popover-open {
opacity: 0;
}
}
}
.tooltip-anchor {
anchor-name: --tooltip;
}
.tooltip[popover] {
position-anchor: --tooltip;
position-area: block-start;
position-try-fallbacks: flip-block;
position-try-order: most-height;
}
Pseudo-elements: anchor(), ::scroll-button(), ::scroll-marker()
<details name="accordion">...</details>
<details name="accordion">...</details>
<!-- Only one can be open at a time -->
select {
appearance: base-select; /* Full CSS control */
}
/* Style options with rich HTML */
select option::before {
content: ""; /* Can include images, icons */
}
<search>
<form>
<input type="search" name="q">
<button type="submit">Search</button>
</form>
</search>
textarea, select, input {
field-sizing: content; /* Auto-grow to content */
}
textarea {
min-block-size: 3lh; /* Line-height units */
max-block-size: 80dvh;
}
/* Wait for user interaction before showing errors */
:user-invalid {
outline-color: red;
}
:user-valid {
outline-color: green;
}
label:has(+ input:user-invalid) {
text-decoration: underline wavy red;
}
<select>
<option>Option 1</option>
<hr>
<option>Option 2</option>
</select>
.custom-scrollbar {
scrollbar-color: hotpink transparent;
scrollbar-width: thin;
}
.complex-clip {
clip-path: shape(
from 0% 0%,
curve by 50% 25% via 25% 50%,
line to 100% 100%
);
}
.fancy-corners {
corner-shape: squircle;
corner-shape: notch;
corner-shape: scoop;
corner-shape: superellipse(0.7);
}
@supports (animation-timeline: view()) {
.fade-in {
animation: fade linear both;
animation-timeline: view();
}
}
@supports (container-type: inline-size) {
.responsive-card {
container-type: inline-size;
}
}
@media (prefers-reduced-motion: no-preference) {
.animated {
animation: slide 1s ease;
}
}
@media (prefers-color-scheme: dark) {
:root {
--surface: #222;
}
}
@media (prefers-contrast: more) {
.text {
font-weight: 600;
}
}
What is Baseline? A unified way to understand cross-browser feature availability. Features are marked as:
Remember: Always check Baseline status, use @supports for cutting-edge features, and respect user preferences with media queries. Modern CSS is about progressive enhancement and building resilient interfaces that work for everyone.
Here's a card component using many modern CSS features:
/* Cascade layer for organization */
@layer components.card {
/* Custom properties with @property */
@property --card-hue {
syntax: "<number>";
inherits: false;
initial-value: 200;
}
.card {
/* Container for responsive design */
container: card / inline-size;
/* Logical properties */
inline-size: 100%;
padding-inline: var(--space-md);
padding-block: var(--space-lg);
/* Modern color system */
background: light-dark(
oklch(98% 0.02 var(--card-hue)),
oklch(20% 0.02 var(--card-hue))
);
/* Border with relative color */
border: 1px solid oklch(from var(--surface) calc(l * 0.9) c h);
/* Smooth corners */
border-radius: var(--radius-md);
/* View transition */
view-transition-name: --card;
/* Scroll-driven animation */
animation: fade-in linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
/* Anchor for tooltips */
anchor-name: --card-anchor;
/* Transition custom property */
transition: --card-hue 0.5s var(--ease-spring-3);
&:hover {
--card-hue: 280;
}
/* Responsive typography in container */
@container card (width > 30ch) {
.card__title {
font-size: clamp(1.5rem, 3cqi, 2.5rem);
text-wrap: balance;
}
}
@container card (width < 30ch) {
.card__image {
aspect-ratio: 16 / 9;
object-fit: cover;
}
}
}
.card__title {
/* Text box trim for optical alignment */
text-box: trim-both cap alphabetic;
text-wrap: balance;
/* Logical margin */
margin-block-end: var(--space-sm);
}
.card__body {
text-wrap: pretty;
max-inline-size: 65ch;
}
.card__cta {
/* Inherit font */
font: inherit;
/* Accent color */
accent-color: var(--brand);
/* Field sizing */
field-sizing: content;
/* Logical properties */
padding-inline: var(--space-md);
padding-block: var(--space-sm);
/* Modern color with relative syntax */
background: oklch(from var(--brand) l c h);
color: oklch(from var(--brand) 95% 0.05 h);
&:hover {
background: oklch(from var(--brand) calc(l * 1.1) c h);
}
&:user-invalid {
outline: 2px solid light-dark(red, #ff6b6b);
}
}
/* Popover tooltip anchored to card */
.card__tooltip[popover] {
position-anchor: --card-anchor;
position-area: block-start;
position-try-fallbacks: flip-block;
/* Entry animation */
@starting-style {
opacity: 0;
scale: 0.9;
}
transition:
opacity 0.2s,
scale 0.2s,
display 0.2s allow-discrete,
overlay 0.2s allow-discrete;
}
/* Scroll state container queries */
@supports (container-type: scroll-state) {
.card__sticky-header {
container-type: scroll-state;
position: sticky;
inset-block-start: 0;
@container scroll-state(stuck: top) {
box-shadow: 0 2px 8px oklch(0% 0 0 / 0.1);
}
}
}
/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
.card {
animation: none;
transition: none;
}
}
@media (prefers-contrast: more) {
.card {
border-width: 2px;
}
}
}
/* Keyframes for scroll animation */
@keyframes fade-in {
from {
opacity: 0;
scale: 0.95;
}
to {
opacity: 1;
scale: 1;
}
}
<article class="card">
<img
class="card__image"
src="image.jpg"
alt="Description"
loading="lazy"
>
<h2 class="card__title">Card Title</h2>
<p class="card__body">
Card description with pretty text wrapping that avoids orphans.
</p>
<button
class="card__cta"
popovertarget="card-tooltip"
>
Learn More
</button>
<div
class="card__tooltip"
popover="hint"
id="card-tooltip"
>
Additional information appears here
</div>
</article>
Prioritize Stability:
@supports. Or ask the user how they want to handle it.Use the web platform:
Code Style:
oklch) for new palettes.Weekly Installs
174
Repository
GitHub Stars
4.3K
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode148
gemini-cli145
github-copilot140
codex137
cursor123
amp117
HeroUI v2 到 v3 迁移指南:破坏性变更、复合组件、Tailwind v4 升级
490 周安装