你可能不知道的CSS技巧

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

CSS技巧。

:empty 区分空元素

兼容性：:empty

1
2
<div class="item">not empty</div>
<div class="item"></div>
1
2
3
4
5
6
7
8
9
/* 选择空元素 */
.item:empty {
   /* ... */
}

/* 选择非空元素 */
.item:not(:empty) {
  /* ... */
}

让空a标签显示href

1
2
3
a:empty::after {
  content: attr(href);
}

:in-range和:out-of-range

用于在指定范围限制之内和之外设置输入样式。

See the Pen Untitled by ly023 (@ly023) on CodePen.

text-align-last对齐两端文本

兼容性：text-align-last

1
2
3
4
li {
  /*  ...  */
  text-align-last: justify;
}

改变文字书写顺序 direction与unicode-bidi

参考：https://www.cnblogs.com/dolphinX/p/4087816.html

1
2
3
4
.reverse {
  direction: rtl;
  unicode-bidi: bidi-override;
}

英文换行连字符 hyphens: auto

MDN hyphens

See the Pen hyphens-英文换行连字符 by ly023 (@ly023) on CodePen.

文字竖排

writing-mode

兼容性：https://www.caniuse.com/css-writing-mode

1
2
writing-mode: vertical-rl; /* 阅读的顺序是从右往左 */
writing-mode: vertical-lr; /* 阅读的顺序是从左往右 */

text-combine-upright

兼容性：https://www.caniuse.com/mdn-css_properties_text-combine-upright

text-combine-upright: all：将元素内的字符水平排列，使其在竖行中占据单个字符空间。

文字竖向，数字横向：

文本大小写 text-transform

所有主流浏览器都支持text-transform属性。

  • 单词首字母大写：text-transform: capitalize

  • 全大写：text-transform: uppercase

  • 全小写：text-transform: lowercase

:placeholder-shown设置输入框显示placeholder时的样式

:placeholder-shown

兼容性: :placeholder-shown CSS pseudo-class

注意：元素有占位符时才生效，输入文本后样式还原。

See the Pen placeholder-shown-设置输入框展示placeholder时的样式 by ly023 (@ly023) on CodePen.

自适应宽度 width:min-content

元素的宽度根据子元素的最大固定宽度自适应

兼容性：CSS property: width: min-content

1
2
3
.parent {
  width: min-content;
}

控制滚动到边界时的表现 overscroll-behavior

兼容性 CSS overscroll-behavior

MDN overscroll-behavior

overscroll-behavior控制浏览器滚动到边界时的表现。

  • auto: 默认值

  • contain: 当一个元素滚动到边界时，不会再影响临近的滚动元素

  • none: 和contain一样，当一个元素滚动到边界时，不会再影响临近的滚动元素，滚动到边界的表现也会被阻止（例如 Android 炫光或 iOS 回弹）

contain和none的差异主要体现在移动端

可实现当子元素滚动到顶部或底部时，不影响父元素的滚动：

控制滚动锚定行为 overflow-anchor

兼容性 CSS overflow-anchor (Scroll Anchoring)

MDN overflow-anchor

滚动锚定（Scroll Anchoring）：当前视区上方DOM元素高度变化时，浏览器自动改变滚动高度，从而保证视区内容不变。

overflow-anchor：提供一种退出浏览器滚动锚定行为的方法，该行为会调整滚动位置以最大程度地减少内容偏移。

默认情况下，在任何支持滚动锚定行为的浏览器中都将其启用。

关闭滚动锚定行为：overflow-anchor: none

锚点平滑定位 scroll-behavior: smooth

MDN scroll-behavior

1
scroll-behavior: smooth;

See the Pen 锚点平滑定位 （scroll-behavior: smooth） by ly023 (@ly023) on CodePen.

控制滚动停留位置 scroll-snap-type

MDN scroll-snap-type

兼容性 CSS property: scroll-snap-type

See the Pen scroll-snap-type-滚动优化 by ly023 (@ly023) on CodePen.

带阴影三角形箭头 filter: drop-shadow（不规则形状绘制阴影）

兼容性 CSS Filter Effects

1
filter: drop-shadow(5px 5px 10px #000);

See the Pen filter: drop-shadow实现带阴影三角形箭头 by ly023 (@ly023) on CodePen.

网站（全站）置灰（悼念模式）filter: grayscale()

兼容性： CSS filter() function

1
2
3
html {
  filter: grayscale(100%);
}

网站首屏置灰 mix-blend-mode: color + pointer-events: none

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
html {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    background: #fff;
}

html::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 1);
    mix-blend-mode: color;
    pointer-events: none;
    z-index: 10;
}

See the Pen Gray Website By MixBlendMode by ly023 (@ly023) on CodePen.

简单的网页夜间暗模式 filter: invert(1)

1
2
3
4
5
6
7
html {
    filter: invert(1);
}

img {
    filter: invert(1); 
}

See the Pen filter: invert(1) by ly023 (@ly023) on CodePen.

适配深色模式 prefers-color-scheme

兼容性：prefers-color-scheme media query

1
2
3
4
5
6
7
8
9
10
11
@media (prefers-color-scheme: dark) {
    body { 
        background: black; 
    }
}

@media (prefers-color-scheme: light) {
    body { 
        background: white; 
    }
}

See the Pen Untitled by ly023 (@ly023) on CodePen.

图片裁剪矩形镂空效果 outline

1
2
3
4
<div class="box">
    <div class="clipping-region"></div>
    <img src="" alt=""/>
</div>
1
2
3
4
5
6
7
8
9
.clipping-region {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 60px;
  outline: 200px solid rgba(0, 0, 0, 0.5);
  cursor: move;
}

文字环绕shape-outside

MDN shape-outside

定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。

兼容性：CSS property: shape-outside

See the Pen shape-outside by ly023 (@ly023) on CodePen.

标题跨列column-span

多列布局中，通过给标题设置column-span: all，使标题跨列展示：

1
2
3
4
.title {
  column-span: all;
  text-align: center;
}

See the Pen column-span 标题跨列展示 by ly023 (@ly023) on CodePen.

使用表情符号自定义光标

参考文章：Use custom Emoji as a cursor using CSS 😜.

MDN cursor

在SVG标签内添加表情符号，它将把表情符号渲染为光标指针：

1
2
3
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48px' height='48px'><text y='50%' style='font-size: 24'>❄️</text></svg>")
      0 0,
    auto;

使用表情符号自定义favicon

所有现代浏览器都支持SVG格式的favicon，利用这点可以将任何Emoji转换为favicon。

SVG文件：

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<text y=".9em" font-size="90">⛅️</text>
</svg>

使用：

1
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⛅️</text></svg>">