Small, native web tricks worth remembering

值得铭记的小型原生 Web 技巧

Device type in JS 在 JavaScript 中检测设备类型

JS Hide scrollbars CSS 使用 CSS 隐藏滚动条

Empty tags CSS CSS 空标签技巧

Centering in CSS CSS 居中布局

CSS clamp() CSS CSS clamp() 函数

Smooth scrolling CSS CSS 平滑滚动

JS Scroll margin CSS CSS Scroll margin 属性

classList.toggle() JS JavaScript classList.toggle() 方法

Telephone and email links HTML HTML 电话与电子邮件链接

Text selection highlight CSS CSS 文本选中高亮

The :has() relational selector CSS CSS :has() 关系选择器

Styling list markers with ::marker CSS 使用 ::marker 设置列表标记样式

Localized prices with Intl.NumberFormat JS 使用 Intl.NumberFormat 进行本地化价格格式化

Disable a subtree with inert HTML 使用 inert 属性禁用 DOM 子树

The :target pseudo-class CSS HTML CSS :target 伪类

The translate global attribute HTML HTML translate 全局属性

prefers-color-scheme CSS CSS prefers-color-scheme 媒体查询

Container size queries CSS CSS 容器尺寸查询

The dialog element HTML JS HTML dialog 元素

Better wrapping with text-wrap CSS 使用 text-wrap 优化文本换行

Description list alignment HTML CSS HTML/CSS 描述列表对齐

Native form colors with accent-color CSS CSS 使用 accent-color 设置原生表单控件颜色

Custom Highlight API JS CSS 自定义高亮 API (Custom Highlight API)

Detect hover across input types CSS 跨输入类型检测悬停状态

Transparent colors with color-mix() CSS 使用 color-mix() 实现透明色

Scroll snap events JS JavaScript 滚动捕捉事件 (Scroll snap events)

Sort directories by size Bash 使用 Bash 按大小排序目录

light-dark() CSS CSS light-dark() 函数

contrast-color() CSS CSS contrast-color() 函数

Scoped CSS with @scope CSS 使用 @scope 实现作用域 CSS

:where() CSS CSS :where() 选择器

Scroll-driven animations CSS CSS CSS 滚动驱动动画

carousels CSS HTML CSS/HTML 轮播图

corner-shape CSS CSS CSS corner-shape 属性

custom functions CSS CSS CSS 自定义函数

Grid Lanes CSS Popover API HTML CSS 网格轨道与 Popover API

View Transitions API JS CSS 视图转换 API (View Transitions API)

Container style queries CSS CSS 容器样式查询

Exclusive accordions with details name HTML 使用 details 的 name 属性实现互斥折叠面板

Control dialogs with button commands HTML 使用按钮命令控制对话框

Searchable collapsed content with hidden=until-found HTML 使用 hidden=until-found 实现可搜索的折叠内容