持续更新...

# css 使用技巧

# 布局

# 中英文文本换行

注：CJK 指中文/日文/韩文的字符或字符组

触发文本换行因素：
- 空白字符Whitespace，决定文本整体换行规则。如：Tab 换行、LF 换行、行制表 VT 换行等。
  - 由 white-space 控制。
- CJK 单词换行规则。
  - 由 white-space 控制。
- non-CJK 单词换行规则。
  - 由 word-break 控制。
white-space

常使用 white-space: pre-line 将连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子 (line boxes)」时会换行。

word-break

常使用 word-break: break-word 来换行每个 CJK 单词。

overflow-wrap 与 word-wrap

常使用 overflow-wrap: break-word 来换行每个 non-CJK 单词。

与word-break相比，overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

用来表示当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。

注：word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。word-wrap 现在被当作 overflow-wrap 的“别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

参考文献

# 优化

css 压缩（服务端使用 Gzip、前端使用 minify）
通过少写css属性来达到减少 css 字节码的目的
使用复合属性
- font 次序：font-style font-variant font-weight font-size font-family,font-family
- background 次序：background-color background-image background-repeat background-attachment background-position / background-size
- background:#000 url(image.jpg) top left no-repeat; font: font-style font-weight font-size font-familiy; margin:5px 10px 20px 15px; padding:5px; border:2px 5px 10px 3px;
- 使用属性继承（在父容器设置了默认属性，子容器会默认也使用这些属性）
  - 所有元素都可以继承的属性：
    - visibility
    - cursor
  - 内联元素和块元素可以继承的属性：
    - letter-spacing
    - word-spacing
    - white-space
    - line-height
    - color
    - font
    - font-family
    - font-size
    - font-style
    - font-variant
    - font-weight
    - text-decoration
    - text-transform
    - direction
  - 块状元素可以继承的属性：
    - text-indent
    - text-align
  - 列表元素可以继承的属性：
    - list-style
    - ist-style-type
    - list-style-position
    - list-style-image
  - 表格元素可以继承的属性：border-collapse
  - 不可以继承的属性：
    - display
    - margin
    - border
    - padding
    - background
    - height
    - min-height
    - max-height
    - width
    - min-width
    - max-width
    - overflow
    - position
    - left
    - right
    - top
    - bottom
    - z-index
    - float
    - clear
    - table-layout
    - vertical-align
    - page-break-after
    - page-break-before
    - unicode-bidi
抽离原则：抽离公共 css

reflow：当 dom 元素出现隐藏/显示，尺寸变化 ; repaint：当元素的背景颜色，边框颜色变化的时候

减少 repaint 和 reflow：
- css 放在 head 中(当浏览器从上到下一遍下载 html 生成 dom tree，一边根据浏览器默认以及现有 css 生成 render tree 来渲染页面。当遇到新的 css 的时候下载并结合现有 css 重新生成 render tree。则刚才的渲染功能就全废了。当我们把所有 css 放在页面的顶部，就没有重新渲染的过程了。)
避免使用通配符或隐式通配符：visible.
避免层级或过度限制 css（css 是从右向左解析的）
- 尽量使用最具体的类别，避免使用后代选择器，在 css 选择器中，后代选择器非但没有加快 css 查找，反而后代选择器是 css 中耗费最贵的
- 尽量不要用标签限制 class: div .info 不好
- 尽量不要用标签或 class 来限制 id: #test .info
动画
- 事件
- animation 动画只能添加在块状元素上
- will-change 属性：{针对某些行为事件触发提前优化}
  - 如：transfrom、animate、：hover 等
动画
- 过渡

复合写法：

#test1 {
  transition-property: width, background;
  transition-delay: 200ms;
  transition-timing-function: linear;
  transition-duration: 2s;
}
/* 类似于  */
#test2 {
  transition: width 2s linear 200ms, background 2s linear 200ms;
}

1
2
3
4
5
6
7
8
9
10

图片经过效果 + css 混合模式 + mix-blend-mode 用于多个不同标签间的混合模式 + background-blend-mode 用于单个标签间内背景图与渐变背景间的混合模式。

# line-height

在移动端 ios 与 android 上，由于 line-height 有自身的默认之所以在实际开发的时候，我们正常使用 line-height 时会出现像素呈现偏差。

解决方式：

padding: 10px 0;
line-height: normal;

1
2

# 实用属性

# overscroll-behavior

允许开发者覆盖默认的浏览器滚动行为 auto：其默认值。元素（容器）的滚动会传播给其祖先元素。有点类似 JavaScript 中的冒泡行为一样； contain：阻止滚动链接。滚动行为不会传播给其祖先元素，但会影响节点内的局部显示。例如，Android 上的光辉效果或 iOS 上的回弹效果。当用户触摸滚动边界时会通知用户。注意，overscroll-behavior:contain 在 html 元素上使用，可以阻止导航滚动操作；（类似禁用下拉刷新 pull-to-refresh，可以阻止固定元素的滚动传播） none：和 contain 一样，但它也可以防止节点本身的滚动效果（禁用炫光和回弹效果） -ms-scroll-chaining: none; overscroll-behavior: contain;

# 文字渐变

使用 mask-image: 如：mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
使用 background-cli 与 text-fill-color：

.text-linear {
  background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

1
2
3
4
5

使用 svg 的组合属性（使用 linearGradient、fill）

# text-rendering

CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。

.text__rendering {
  text-rendering: optimizeLegibility; // 可用在 pc 端，wap 端有性能问题
}
/* 着重考虑渲染速度 */
.text__rendering--speed {
  text-rendering: auto;
  text-rendering: optimizeSpeed;
}
/* 着重考虑易读性,在移动设备上会造成比较明显的性能问题 */
.text__rendering--read {
  text-rendering: optimizeLegibility;
}
/* 着重考虑几何精度 */
.text__rendering--precision {
  text-rendering: geometricPrecision;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 当前暂时屏蔽 video 组件的全屏播放按钮

video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

1
2
3

# 对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服

这个设定在 ios 中表现比较明显，在 windows 中表现的不明显。 font-smoothing 不是标准的 CSS3 属性，曾出现在提案中，最终被移除。前缀-webkit 是 chrome 和 safari 的私有属性，-moz 是 Firefox 的私有属性。

-webkit-font-smoothing 有三个值，none，subpixel-antialiased，antialiased。
-webkit-font-smoothing：none，无抗锯齿。
-webkit-font-smoothing：subpixel-antialiased，默认值，效果一般。
-webkit-font-smoothing：antialiased，抗锯齿，字体清晰。
-moz-osx-font-smoothing -moz-osx-font-smoothing，是火狐针对 ios 系统制定的规则，有两个值，inherit，grayscale（字体抗锯齿，比较清晰）。

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

1
2
3
4

# @font-face 引入字体

在移动端引入第三方字体时，由于字体文件较重，页面可能会出现加载卡顿或则引用第三方字体由于字体文件未加载完字体抖动的问题。

对此，可以延迟显示第三方字体效果，等文件加载完再显示

@font-face {
  font-family: "fcustom";
  src: "";
  font-display: swap;
}

1
2
3
4
5

# 字体描边

text-stroke:1px #f00;（1px 是文字宽度，#ff 是文字描边颜色）。大多浏览器已经开始支持该属性，只需要加上前缀-webkit-即可，但兼容性相对较差
text-shadow： #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0; 现代浏览器基本兼容

# scroll-behavior

设置在 html 使其平滑滚动，现代浏览器适用

html {
  scroll-behavior: smooth;
}

1
2
3

# user-select

控制用户能否选中文本。

user-select: none;使文本不能被选中
user-select: all; 双击全选指定文本

详情如下：

/* Keyword values */
/* 元素及其子元素的文本不可选中。 请注意这个Selection 对象可以包含这些元素。 从Firefox 21开始， none 表现的像 -moz-none，因此可以使用 -moz-user-select: text 在子元素上重新启用选择。 */
user-select: none;
user-select: auto;
/* 用户可以选择文本 */
user-select: text;
/* 允许在元素内选择；但是，选区将被限制在该元素的边界之内。 */
user-select: contain;
/* 在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。 */
user-select: all;

/* Global values */
user-select: inherit;
user-select: initial;
user-select: unset;

/* Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

/* WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* Doesn't work in Safari; use only
                             "none" or "text", or else it will
                             allow typing in the <html> container */

/* Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# ::selection

伪元素::selection 主要用于优化 UI 显示，提高界面体验感。

因此我们可以让用户在选中文本后::selection 来高亮显示。如

.jy-selection::selection {
  color: red;
  background: #ddd;
  text-shadow: 0 0 2px red;
}

1
2
3
4
5

# pointer-events

设置时间指定触发状态

兼容性：ie11+、Firefox3.6+、Safari4.3+、Opera46+(除 mini)、及所有现代浏览器

特性：

阻止缺省鼠标指针的显示
阻止由 js 触发或由 css 伪类状态触发的事件

主要属性：

auto: 与 pointer-events 属性未指定时的表现效果相同,事件不会穿透当前层。对于 SVG 内容，该值与 visiblePainted 效果相同。
none: 元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
其他属性与 svg 相关，详情文档。

实用：

在类提交按钮点击后添加，可以防止阻止事件，避免重复提交。

.btn-sumbit.active {
  pointer-events: none;
}

1
2
3

在绝对定位 mask 元素覆盖按钮时，mask 元素点击穿透，因此被覆盖按钮可以被点击，如：页面水印覆盖页面。

.pointer-events {
  pointer-events: none;
}

1
2
3

# `scroll-snap-type` 设置 overflow:auto 后子元素的滚动状态

scroll-snap-type ：https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type>

定义在滚动容器中的一个临时点（snap point）如何被严格的执行。

不能用来指定任何精确的动画或者物理运动效果来执行临时点，而是交给用户代理来处理。

/* 关键值 */
/* 当这个滚动容器的可视的 viewport 是滚动的，它必须忽略临时点。 */
scroll-snap-type: none;
/* 滚动容器只捕捉其水平轴上的捕捉位置。 */
scroll-snap-type: x;
/* 滚动容器只捕捉其垂直轴上的捕捉位置。 */
scroll-snap-type: y;
/* 滚动容器仅捕捉到其块轴上的捕捉位置。 */
scroll-snap-type: block;
/* 滚动容器仅捕捉到其内联轴上的捕捉位置。 */
scroll-snap-type: inline;
/* 滚动容器会独立捕捉到其两个轴上的位置（可能会捕捉到每个轴上的不同元素） */
scroll-snap-type: both;

/* 可选 mandatory | proximity，组合使用*/
/* mandatory: 如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。 */
/* proximity: 如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。 */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* etc */

/* 全局值 */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# caret-color

默认：caret-color: auto

修改 input 元素光标颜色

.inp-caret-red {
  caret-color: red;
}

1
2
3

# prefers-color-scheme

本 CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

prefers-color-scheme 的值有：

light : (默认值)浏览器宿系统使用亮色主题的界面。

浏览器 privacy.resistFingerprinting 被设置为 true 时也返回该值。

dark : 浏览器宿系统使用暗色主题的界面

# 使用 css 操控 `prefers-color-scheme`

/* 暗色模式样式 */
@media not (prefers-color-scheme: light) {
}
@media (prefers-color-scheme: dark) {
}
/* 非暗色模式样式 */
@media (prefers-color-scheme: light) {
}
@media not (prefers-color-scheme: dark) {
}

1
2
3
4
5
6
7
8
9
10

# 使用 javascript 操控 `prefers-color-scheme`

但使用 css 无法满足要求是，可通过 JavaScript 的 window.matchMedia('(prefers-color-scheme: light)').matches 动态获取宿主浏览器主题模式。

/**
 * @description: 获取宿主浏览器主题模式
 * @return {object}
 * @author: liejiayong(809206619@qq.com)
 * @Date: 2022-12-15 16:20:02
 */
function getSysThemeMode() {
  var light = window.matchMedia("(prefers-color-scheme: light)").matches;

  return { light: light, dark: !light };
}

/* 监听宿主浏览器主题模式 */
window.matchMedia("(prefers-color-scheme: dark)").addListener((e) => {
  if (e.matches) {
    // 系统开启暗色模式后做什么
  } else {
    // 系统关闭暗色模式后做什么
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

JyLie

Choose mode

css实用技巧

css实用技巧

# css 使用技巧

# 布局

# 中英文文本换行

# 优化

# line-height

# 实用属性

# overscroll-behavior

# 文字渐变

# text-rendering

# 当前暂时屏蔽 video 组件的全屏播放按钮

# 对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服

# @font-face 引入字体

# 字体描边

# scroll-behavior

# user-select

# ::selection

# pointer-events

# `scroll-snap-type` 设置 overflow:auto 后子元素的滚动状态

# caret-color

# prefers-color-scheme

# 使用 css 操控 `prefers-color-scheme`

# 使用 javascript 操控 `prefers-color-scheme`

# 相关文献

JyLie

css实用技巧

css实用技巧

# css 使用技巧

# 布局

# 中英文文本换行

# 优化

# line-height

# 实用属性

# overscroll-behavior

# 文字渐变

# text-rendering

# 当前暂时屏蔽 video 组件的全屏播放按钮

# 对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服

# @font-face 引入字体

# 字体描边

# scroll-behavior

# user-select

# ::selection

# pointer-events

# scroll-snap-type 设置 overflow:auto 后子元素的滚动状态

# caret-color

# prefers-color-scheme

# 使用 css 操控 prefers-color-scheme

# 使用 javascript 操控 prefers-color-scheme

# 相关文献

# `scroll-snap-type` 设置 overflow:auto 后子元素的滚动状态

# 使用 css 操控 `prefers-color-scheme`

# 使用 javascript 操控 `prefers-color-scheme`