CSS 性能优化

CSS 性能优化的 8 个技巧：https://juejin.cn/post/6844903649605320711

CSS 的优化方案

01. 启动平滑滚动

添加 scroll-behavior：smooth 到元素中<html>，使整个页面能够平滑滚动。

css

html {
	scroll-behavior: smooth;
}

02. 链接的属性选择器

此选择器以 href 属性以“https”开头的链接为目标。

css

a[href^="https"] {
	color: blue;
}

03. ~用于合并节点

选择作为<h2>同级元素的所有<p>元素。

css

h2 ~ p {
	color: blue;
}

04. :not()伪类

此选择器将样式应用于不具有类“Special”的 li。

css

li:not(.special) {
	font-style: italic;
}

05. 响应式排版的视窗单位 vw

使用视区单位(vw, vh, vmin, vmax)可以使字体大小与视区大小相对应。

css

h1 {
	font-size: 5vw;
}

06. :empty 对于空元素

此选择器以空的<p>元素为目标并隐藏它们。

css

p:empty {
	display: none;
}

07. 自定义特性(变量)

可以定义和使用自定义特性，以便更轻松地创建主题和进行维护。

css

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

h1 {
	color: var(--main-color);
}

08. Object-fit 图像控件的适配性

object-fit 控制替换元素(如<img>)的内容应该如何调整大小。

css

img {
	width: 100px;
	height: 100px;
	object-fit: cover;
}

09. 简化布局的网格

Css 网格提供了一种功能强大的方式来以更直接的方式创建布局。

css

.container {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
}

10. :focus-within 伪类

如果一个元素包含任何带有:focus 的子元素，则:focus-Win 会选择该元素。

css

form:focus-within {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

11. 使用 Flexbox 垂直居中

使用 FlexBox 可轻松地将内容在容器中水平和垂直居中。

css

.container {
	display: flex;
	align-items: center;
	justify-content: center;
}

12. 自定义选定内容的突出显示颜色

自定义在网页上选择文本时的突出显示颜色。

css

::selection {
	background-color: #ffcc00;
	color: #333;
}

13. 设置占位符文本的样式

设置输入字段内占位符文本的样式。

css

::placeholder {
	color: #999;
	font-style: italic;
}

14. 渐变边界

使用 Backback-Clip 属性创建渐变边框。

css

.element {
	border: 2px solid transparent;
	background-clip: padding-box;
	background-image: linear-gradient(to right, red, blue);
}

15. 使用 vw 实现可变字体大小

根据视口宽度调整字体大小，实现更加响应式的排版。

css

body {
	font-size: calc(16px + 1vw);
}

16. 使用锥形渐变创建多彩元素

利用锥形渐变创建丰富多彩且动态的背景。

css

.element {
	background: conic-gradient(#ff5733, #33ff57, #5733ff);
}

17. 使用 clamp()函数实现响应式文本

使用 clamp()函数设置字体大小的范围，确保在不同屏幕尺寸下的可读性。

css

.text {
	font-size: clamp(16px, 4vw, 24px);
}

18. 使用 font-display: swap;优化字体加载

使用 font-display: swap;属性提高网页字体性能，让自定义字体加载时显示备用字体。

css

@font-face {
	font-family: "YourFont";
	src: url("your-font.woff2") format("woff2");
	font-display: swap;
}

19. 自定义滚动吸附点

为了实现更顺畅的滚动体验，特别是在图库或滑块中，实现自定义滚动吸附点。

css

.scroll-container {
	scroll-snap-type: y mandatory;
}

.scroll-item {
	scroll-snap-align: start;
}

20. 使用字体变体设置进行可变字体样式

利用可变字体和 font-variation-settings 属性对字体的粗细、样式等进行精细调节。

css

.text {
	font-family: "YourVariableFont", sans-serif;
	font-variation-settings: "wght" 500, "ital" 1;
}

21. 自定义下划线样式

使用 border-bottom 和 text-decoration 的组合来自定义链接的下划线样式。

css

a {
	text-decoration: none;
	border-bottom: 1px solid #3498db;
}

22. 隐藏无障碍文本

使用 class sr-only 来在视觉上隐藏元素，但保持其对屏幕阅读器的可访问性。

css

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

23. 保持元素纵横比

通过使用 padding 来保持元素（如图片或视频）的纵横比。

css

.aspect-ratio-box {
	position: relative;
	width: 100%;
	padding-bottom: 75%; /* 根据需要调整 */
}

.aspect-ratio-box > iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}

24. 选择偶数和奇数元素

使用:nth-child 伪类来为交替元素设置样式。

css

li:nth-child(even) {
	background-color: #f2f2f2;
}

li:nth-child(odd) {
	background-color: #e6e6e6;
}

25. CSS 计数器

使用 counter-reset 和 counter-increment 属性在列表中创建自动编号。

css

ol {
	counter-reset: item;
}

li {
	counter-increment: item;
}

li::before {
	content: counter(item) ". ";
}

26. 多重背景图片

使用不同属性为元素应用多个背景图片。

css

.bg {
	background-image: url("image1.jpg"), url("image2.jpg");
	background-position: top left, bottom right;
	background-repeat: no-repeat, repeat-x;
}

27. 优化文本流畅性的连字符

通过使用 hyphens 属性允许自动连字符以提高文本的可读性。

css

p {
	hyphens: auto;
}

28. 使用 CSS 变量进行动态样式

利用 CSS 变量创建动态且可重用的样式。

css

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

.element {
	color: var(--main-color);
}

29. 键盘导航的焦点样式

改善焦点样式以提高键盘导航和可访问性。

css

:focus {
	outline: 2px solid #27ae60;
}

30. 平滑渐变过渡

为渐变背景应用平滑过渡效果，增强视觉效果。

css

.gradient-box {
	background: linear-gradient(45deg, #3498db, #2ecc71);
	transition: background 0.5s ease;
}

.gradient-box:hover {
	background: linear-gradient(45deg, #e74c3c, #f39c12);
}

31. 文本描边效果

为文本添加描边，产生独特的视觉效果。

css

h1 {
	color: #3498db;
	-webkit-text-stroke: 2px #2c3e50;
}

32. 纯 CSS 汉堡菜单

创建一个简单的汉堡菜单，无需使用 JavaScript。

css

.menu-toggle {
	display: none;
}

.menu-toggle:checked + nav {
	display: block;
}
/* 在这里添加汉堡菜单图标和菜单样式 */

33. CSS :is()选择器

使用:is()伪类简化复杂的选择器。

css

:is(h1, h2, h3) {
	color: blue;
}

34. CSS 变量中的计算

在 CSS 变量中进行计算，实现动态样式。

css

:root {
	--base-size: 16px;
	--header-size: calc(var(--base-size) * 2);
}

h1 {
	font-size: var(--header-size);
}

35. attr()函数用于内容

使用 attr

()函数检索和显示属性值。

css

div::before {
	content: attr(data-custom-content);
}

36. CSS 遮罩效果

为图像应用遮罩，创造出独特的效果。

css

.masked-image {
	mask: url(mask.svg);
	mask-size: cover;
}

37. 混合模式

尝试使用混合模式创建有趣的色彩效果。

css

.blend-mode {
	background: url(image.jpg);
	mix-blend-mode: screen;
}

38. 纵横比属性

使用纵横比属性简化纵横比盒子的创建。

css

.aspect-ratio-box {
	aspect-ratio: 16/9;
}

39. shape-outside 实现文本环绕

使用 shape-outside 属性使文本围绕指定形状，实现更动态的布局。

css

.shape-wrap {
	float: left;
	width: 150px;
	height: 150px;
	shape-outside: circle(50%);
}

40. ch 单位用于一致的尺寸

ch 单位表示所选字体中字符“0”的宽度，可用于创建一致且响应式的布局。

css

h1 {
	font-size: 2ch;
}

41. ::marker 伪元素

使用::marker 伪元素为列表项标记设置样式。

css

li::marker {
	color: blue;
}

42. element()函数用于背景

使用 element()函数动态引用元素作为背景。

css

.background {
	background: element(#targetElement);
}

43. Flexbox 实现粘性底部

使用 Flexbox 创建粘性底部布局。

css

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
}

44. scroll-padding 实现平滑滚动

通过调整 scroll padding 来改善滚动行为。

css

html {
	scroll-padding: 20px;
}

45. 交互式高亮效果

使用 CSS 变量创建交互式高亮效果。

css

.highlight {
	--highlight-color: #e74c3c;
	background-image: linear-gradient(transparent 0%, var(--highlight-color) 0%);
	background-size: 100% 200%;
	transition: background-position 0.3s;
}

.highlight:hover {
	background-position: 0 100%;
}

46. 自定义单选框和复选框样式

无需图像，样式化单选框和复选框。

css

input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	border: 2px solid #3498db;
}

input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 2px solid #e74c3c;
}

47. textarea 的 resize 属性

使用 resize 属性控制 textarea 的调整大小行为。

css

textarea {
	resize: vertical;
}

48. 文本渐变效果

使用 background-clip 和 text-fill-color 属性为文本创建渐变效果。

css

.gradient-text {
	background-image: linear-gradient(45deg, #3498db, #2ecc71);
	background-clip: text;
	color: transparent;
}

49. 对长单词使用 word-break 属性

使用 word-break 属性控制长单词或没有空格的字符串的断行和换行。

css

.long-words {
	word-break: break-all;
}

50. font-variation-settings 用于可变字体

使用 font-variation-settings 属性微调可变字体样式。

css

.custom-font {
	font-family: "MyVariableFont";
	font-variation-settings: "wght" 600, "ital" 1;
}

51. 混合模式用于创意叠加效果

使用混合模式为元素应用叠加效果，创造出有趣的视觉效果。

css

.overlay {
	mix-blend-mode: overlay;
}

52. 为损坏的图像应用样式

使用:broken 伪类为损坏的图像应用样式。

css

img:broken {
	filter: grayscale(100%);
}

53. CSS 形状

使用 CSS 形状为设计创建有趣的效果。

css

.shape {
	shape-outside: circle(50%);
}

54. 属性选择器用于子字符串匹配

使用*=操作符的属性选择器进行子字符串匹配。

css

[data-attribute*="value"] {
	/* 样式 */
}

55. backdrop-filter 用于模糊背景

使用 backdrop-filter 为背景应用模糊效果，实现毛玻璃效果。

css

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

56. CSS 环境变量

使用 env()函数在 CSS 中访问环境变量。

css

.element {
	margin-top: env(safe-area-inset-top);
}

57. CSS 属性计数器

使用:nth-child 选择器计算特定属性值的出现次数。

css

[data-category="example"]:nth-child(3) {
	/* 第三次出现的样式 */
}

58. CSS 形状实现文本环绕

使用 shape-outside 结合 polygon()函数精确地控制文本围绕不规则形状的布局。

css

.text-wrap {
	shape-outside: polygon(0 0, 100% 0, 100% 100%);
}

59. 自定义鼠标样式

使用 cursor 属性更改鼠标样式。

css

.custom-cursor {
	cursor: pointer;
}

60. HSLA 用于透明颜色

使用 HSLA 值表示透

明颜色，对 alpha 通道进行更精细的控制。

css

.transparent-bg {
	background-color: hsla(120, 100%, 50%, 0.5);
}

61. text-orientation 实现纵向文本

使用 text-orientation 属性将文本垂直旋转。

css

.vertical-text {
	text-orientation: upright;
}

62. font-variant 用于小型大写字母

使用 font-variant 属性应用小型大写字母样式。

css

.small-caps {
	font-variant: small-caps;
}

63. box-decoration-break 用于背景分割

使用 box-decoration-break 属性控制跨多行断开的元素的背景，实现更灵活的文本环绕。

css

.split-background {
	box-decoration-break: clone;
}

64. :focus-visible 用于特定焦点样式

仅在元素处于焦点且焦点不是由鼠标单击提供时应用样式。

css

input:focus-visible {
	outline: 2px solid blue;
}

65. text-rendering 实现最佳字体呈现

通过 text-rendering 属性改善文本呈现效果。

css

.optimized-text {
	text-rendering: optimizeLegibility;
}

66. initial-letter 用于大写字母

使用 initial-letter 为块级元素的第一个字母应用样式。

css

p::first-letter {
	font-size: 2em;
}

67. overscroll-behavior 用于滚动过度

控制用户滚动超出滚动容器边界时的行为。

css

.scroll-container {
	overscroll-behavior: contain;
}

68. writing-mode 实现纵向布局

使用 writing-mode 属性创建纵向布局。

css

.vertical-layout {
	writing-mode: vertical-rl;
}

69. ::cue 用于 HTML5 标题样式

使用::cue 伪元素为 HTML5 字幕文本应用样式。

css

::cue {
	color: blue;
}

70. line-clamp 截断多行文本

使用 line-clamp 属性限制元素中显示的行数。

css

.truncated-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

71. scroll-snap-align

scroll-snap-align 属性控制滚动容器内滚动捕捉点的对齐方式，确保对滚动行为进行精确控制，提升用户体验。

css

.container {
	scroll-snap-type: x mandatory;
}

.item {
	scroll-snap-align: center;
}

72. overscroll-behavior

overscroll-behavior 使您可以定义浏览器在滚动超出范围时的处理方式，从而避免不必要的滚动效果，提升整体滚动体验。

css

.scrollable {
	overscroll-behavior: contain;
}

73. font-kerning

font-kerning 允许对字符间距进行微调，通过调整文本元素中字符之间的间距，确保最佳的可读性。

css

p {
	font-kerning: auto;
}

74. shape-margin

与 CSS 形状一起使用时，shape-margin 指定浮动元素形状周围的边距，可以更精确地控制文本环绕和布局。

css

.shape {
	shape-margin: 20px;
}

75. scroll-margin

scroll-margin 设置滚动容器边缘与滚动内容开始之间的边距，提升用户体验，为滚动提供缓冲空间。

css

.container {
	scroll-margin-top: 100px;
}

76. tab-size

tab-size 属性控制文本区域中制表符的宽度，确保在不同用户代理中一致的显示。

css

pre {
	tab-size: 4;
}

77. text-align-last

text-align-last 决定块级元素中最后一行文本的对齐方式，为多行块文本提供对齐控制。

css

p {
	text-align-last: justify;
}

78. text-justify

此属性控制文本两端对齐的行为，指定是使用单词间还是字符间距进行文本对齐。

css

p {
	text-align: justify;
	text-justify: inter-word;
}

79. column-fill

column-fill 决定如何在多列布局中分配内容，允许内容依次或平衡分布在列中。

css

.container {
	column-count: 3;
	column-fill: auto;
}

80. outline-offset

outline-offset 调整轮廓与元素边缘之间的空间，不影响布局，为轮廓的外观提供更细致的控制。

css

button {
	outline: 2px solid blue;
	outline-offset: 4px;
}

81. font-variant-numeric

此属性允许精细控制数字字体渲染，启用特性如数字大小写和分数、序数指示器等。

css

p {
	font-variant-numeric: lining-nums;
}

82. font-optical-sizing

启用或禁用字体光学大小调整，以调整字符的间距和比例，实现在不同字体大小下更好的视觉和谐。

css

p {
	font-optical-sizing: auto;
}

83. text-decoration-thickness

精确控制文本装饰（如下划线、上划线和删除线）的粗细，实现精细化定制。

css

p {
	text-decoration-thickness: 2px;
}

84. text-decoration-skip-ink

text-decoration-skip-ink 属性控制文本装饰（如下划线）在被墨水遮挡的情况下是否继续绘制，提升可读性。

css

a {
	text-decoration-skip-ink: auto;
}

85. word-spacing

word-spacing 属性控制字词间距，调整文本的紧凑度和可读性。

css

p {
	word-spacing: 2px;
}

86. hyphenation

通过调整断字点和断字行为，提高文本在窄列中的美观度和可读性。

css

p {
	hyphens: auto;
}

87. background-blend-mode

background-blend-mode 属性允许背景图像与其下方的背景颜色进行混合，产生出独特的视觉效果。

css

.element {
	background-image: url("image.jpg");
	background-color: #3498db;
	background-blend-mode: multiply;
}

88. text-decoration-color

text-decoration-color 属性控制文本装饰的颜色，为链接和装饰文本提供更灵活的样式。

css

a {
	text-decoration: underline;
	text-decoration-color: red;
}

89. overflow-anchor

overflow-anchor 属性指定了在容器的滚动范围内滚动时哪些内容应保持可见，提升用户体验。

css

.container {
	overflow-anchor: none;
}

90. contain-intrinsic-size

contain-intrinsic-size 属性定义了内联大小计算函数的大小，实现更精确的布局控制。

css

img {
	contain-intrinsic-size: 200px 300px;
}

91. line-gap

line-gap 属性定义了元素的行间距，可以为文字和其他行内元素提供更大的空间。

css

p {
	line-gap: 1.5;
}

92. text-underline-offset

text-underline-offset 属性控制文本下划线相对于基线的垂直偏移量，实现更加精确的下划线定位。

css

a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

93. text-decoration-line

text-decoration-line 属性指定要绘制的装饰线的类型，可用于单独控制上划线、下划线、删除线等。

css

a {
	text-decoration-line: underline overline;
}

94. text-emphasis

text-emphasis 属性为文本设置强调标志，用于提高关键字的可读性。

css

em {
	text-emphasis: filled circle;
}

95. text-orientation

text-orientation 属性控制文本的方向，适用于纵向文本和日文排版等情况。

css

.vertical-text {
	text-orientation: sideways-right;
}

96. background-origin

background-origin 属性确定背景图片的起始位置，影响背景图片与边框的相对位置。

css

.element {
	background-image: url("image.jpg");
	background-origin: content-box;
}

97. counter-set

counter-set 属性在使用 counter-reset 创建的计数器值基础上，显式设置一个新的值。

css

ol {
	counter-set: section 1;
}

98. hanging-punctuation

hanging-punctuation 属性控制标点符号是否在行框之外悬挂，以提高排版的美观度和可读性。

css

p {
	hanging-punctuation: last allow-end;
}

99. line-break

line-break 属性控制文本换行行为，确保在指定的断点处进行断行。

css

p {
	line-break: anywhere;
}

100. text-justify

text-justify 属性指定如何分配额外的空间，以便充分利用容器的宽度。

css

p {
	text-align: justify;
	text-justify: inter-word;
}

CSS 性能优化 ​

CSS 的优化方案 ​

01. 启动平滑滚动 ​

02. 链接的属性选择器 ​

03. ~用于合并节点 ​

04. :not()伪类 ​

05. 响应式排版的视窗单位 vw ​

06. :empty 对于空元素 ​

07. 自定义特性(变量) ​

08. Object-fit 图像控件的适配性 ​

09. 简化布局的网格 ​

10. :focus-within 伪类 ​

11. 使用 Flexbox 垂直居中 ​

12. 自定义选定内容的突出显示颜色 ​

13. 设置占位符文本的样式 ​

14. 渐变边界 ​

15. 使用 vw 实现可变字体大小 ​

16. 使用锥形渐变创建多彩元素 ​

17. 使用 clamp()函数实现响应式文本 ​

18. 使用 font-display: swap;优化字体加载 ​

19. 自定义滚动吸附点 ​

20. 使用字体变体设置进行可变字体样式 ​

21. 自定义下划线样式 ​

22. 隐藏无障碍文本 ​