[css] tips and tricks

7 Tricks Highly Browser Support in 2026

弹窗

<button popovertarget="id" />
<div id="id" popover />

元素位置锚定

.anchor {
anchor-name: --foo;
}
.anchor-ele {
position: absolute;
position-anchor: --foo;
position-area: right span-bottom;
}

currentColor

.element {
color: #000000;
border-color: currentColor;
}
.element svg {
fill: currentColor;
}

text-wrap: blance;

.parent:has(.child-feature) {
// ...
}

.select:not() {
// ...
}

@poperty

@property --myColor {
syntax: "<color>";
inherits: true;
initial-value: rebeccapurple;
}

@property --myWidth {
syntax: "<length> | <percentage>";
inherits: true;
initial-value: 200px;
}

p {
background-color: var(--myColor);
width: var(--myWidth);
color: white;
}

relativeColor

background-color: oklch(from currentColor calc(l + 1) c h)

Pixels to Rem

html {
font-size: 62.5%;
}

body {
font-size: 1.6rem;
}

.button {
padding: .3em; // 这里采用 em，即随着 font-size 值变化而保持等比缩放、无需手动调整
font-size: 1rem;
}

为什么用 rem/em 替换 pixel

pixel写法在改变浏览器字体大小的时候，不会变化

clip-path

perspective

aspect-ratio

CSS Filters(Blur, Gray Scale etc.)

Inputs Styling

input {
caret-color: red; // 光标
}
input::placeholder {
// ...
}

div :is(h1, h3, h5) {
// ...
}

<video src="path/to/video.mp4" controls>
<track type="captions" label="En" src="/captions.vtt"/>
</video>

video {

}

css doodle