经常被忽略的有用 CSS 属性caret-color accent-color pointer-events user-

caret-color

caret-color 属性用于指定输入框或任何可编辑文本区域中光标（文本光标）的颜色。它允许你自定义闪烁的垂直线颜色，该垂直线指示将在哪里插入文本。

input {
  caret-color: #ff0000;
}

accent-color

accent-color 属性用于指定元素内某些表单控件（如单选按钮、复选框等）的强调色。此属性会覆盖浏览器默认的主题颜色，并将其替换为开发者指定的颜色。

.input-radio {
  accent-color: #ff0000;
}

pointer-events

pointer-events 属性确定哪些事件可以在元素上触发。例如，当元素的 pointer-events 属性设置为 none 时，在悬停在其上时不会发生任何鼠标活动。

div {
  pointer-events: none;
}

user-select

另一方面，user-select 属性确定元素内文本的可选择性。当设置为 none 时，用户无法选择文本。

p {
  user-select: none;
}

hyphens

hyphens 属性会在行尾自动断开长单词，以提高文本的可读性。如果一个单词超出行的宽度，它会在适当的位置断开并移到下一行。

div {
  hyphens: auto;
}

quotes

quotes 属性用于自定义自动添加到网页上引用文本或 q 元素内文本周围的引号。

q {
  quotes: "“" "”";
}

text-emphasis

text-emphasis 属性用于强调文本块中的某些字符。这些字符通常用于指示文本的含义或重要部分。

p {
  text-emphasis: "★" red;
}

backdrop-filter

backdrop-filter CSS 属性允许你对元素后面的内容应用各种效果。它通常用于模糊背景，更改其颜色或添加阴影，提供一个强大的工具来创建现代网页设计，特别是对于透明或半透明背景。

div {
  backdrop-filter: blur(10px);
}

counter

CSS counter 属性用于自定义数字并自动对 HTML 文档中的特定元素进行编号。此功能可用于向列表项或特定 HTML 元素添加数字。

counter-increment属性用于将CSS Counters的值增加给定值

counter-reset CSS 属性用于创建具名 CSS 计数器，并将其初始化为指定值

body {
  counter-reset: section;
}
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) ". ";
}

伸展一个元素到窗口高度

html, 
body {
    height: 100%;
}

div {
    height: 100%;
}

@supports规则

@supports规则允许你在CSS中进行特性检测，据此应用相应的样式。

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@container

CSS容器查询，这可是响应式设计的新篇章。你的组件样式现在可以基于父容器的大小来调整，而不仅仅是视口尺寸。

@container (min-width: 500px) {
  .card {
    padding: 2rem;
  }
}

:is()伪类

:is() 伪类就像是一把万能钥匙，它可以让你的选择器变得简洁而强大，避免了复杂的选择器嵌套。

:is(.header, .footer, .sidebar) {
  background-color: peachpuff;
}

color-scheme属性

color-scheme属性让我们可以为网页轻松定义一个亮色和暗色模式。让用户的眼睛在夜晚也能享受舒适的浏览体验。

/* 让你的网页跟随系统主题自动切换色彩模式 */
:root {
  color-scheme: light dark;
}

contain属性

contain属性可以对元素的布局、样式和绘制等进行限制，提升页面的性能。

/* 优化滚动列表的性能，避免列表外的渲染影响内部。 */

.scroll-list {
  contain: strict;
  overflow-y: auto;
  height: 200px;
}

CSS变量

统一管理一个网站的主题颜色。

:root {
  --main-color: #3498db;
  --accent-color: #e74c3c;
}

body {
  background-color: var(--main-color);
  color: white;
}

.button {
  background-color: var(--accent-color);
}

CSS Scroll Snap

CSS Scroll Snap允许开发者创建具有“吸附”效果的滚动容器，使得滚动时元素可以停在预定义的位置。

/* 创建一个全屏滚动的幻灯片效果。 */
.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.slide {
  scroll-snap-align: start;
  height: 100vh;
}

aspect-ratio属性

这个新属性允许你在不依赖特定宽高数值的情况下，定义一个盒子的宽高比。

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: black;
}

CSS currentColor

currentColor关键字是一个冷门但非常有用的CSS特性，它允许你引用元素当前颜色（即color属性的值）

div {
  color: #3498db;
  border: 2px solid currentColor; /* 边框颜色将会是#3498db */
}

:focus-within伪类

:focus-within伪类是一个选择器，当元素内部的任何子元素具有焦点时，它可以选中该元素

.form-container:focus-within {
  background-color: lightyellow;
}

input:focus {
  outline: none;
  border-color: #3498db;
}

object-fit和object-position

这些属性工作起来就像background-size和background-position，但是对于和元素。

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片的比例，同时填满容器 */
  object-position: center; /* 图片居中显示 */
}

mix-blend-mode

mix-blend-mode属性，让元素与背景玩起了颜色的混合游戏。

.container img {
  mix-blend-mode: darken;
}

all属性

遇到那些需要从头开始的样式设计时，all属性一键复位所有属性。

/* 在一个组件中重置所有继承来的样式 */
.reset-all {
  all: unset;
}

更改选中文本的背景颜色

使用选择器::selection，可以更改选中文本的背景颜色：

::selection {
  color: #ececec;
  background: #222831;
}

在不使用br的情况下将文本换行

使用属性white-space，并将它的值设置为pre-wrap或pre-line：

element {
  white-space: pre-wrap; /*或 pre-line*/
}