-
Notifications
You must be signed in to change notification settings - Fork 0
/
CodeMirror url() Bug.html
126 lines (126 loc) · 3.49 KB
/
CodeMirror url() Bug.html
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="hsl(0, 0%, 96%);" />
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="hsl(0, 0%, 8%);"
/>
<meta name="author" content="鬼影233" />
<meta
name="description"
content="CodeMirror 的空 url() Bug 以及如何解决。"
/>
<meta
name="keywords"
content="CodeMirror, url(), Bug, url, Chromium, Chrome, Edge, content, background-image, @import, CSS, 解决方案, 解决方法"
/>
<meta property="og:title" content="CodeMirror url() Bug" />
<meta property="og:locale" content="zh_CN" />
<meta
property="og:url"
content="https://gui-ying233.github.io/Nest/CodeMirror%20url()%20Bug"
/>
<meta property="og:site_name" content="鬼影的基地" />
<meta
property="og:description"
content="CodeMirror 的空 url() Bug 以及如何解决。"
/>
<meta property="og:type" content="article" />
<meta property="article:author" content="鬼影233" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="CodeMirror url() Bug" />
<link
rel="canonical"
href="https://gui-ying233.github.io/Nest/CodeMirror%20url()%20Bug"
/>
<link rel="icon" type="image/x-icon" href="src/asset/favicon.ico" />
<link rel="apple-touch-icon" href="src/asset/favicon.ico" />
<title>CodeMirror url() Bug - 鬼影的基地</title>
<script async src="src/js/clarity.js"></script>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-ZMHY61ZCQE"
></script>
<script async src="src/js/gtag.js"></script>
<script
async
src="https://hm.baidu.com/hm.js?abdce5cc5a81bdfb51506edb4641e824"
></script>
<link rel="stylesheet" href="src/css/base.css" />
</head>
<body>
<h1>CodeMirror <code>url()</code> Bug</h1>
<h2>前言</h2>
<p>
CodeMirror 等，甚至 Chromium 下的 inspector-stylesheet
等地方，如果使用空的
<code>url()</code> 值，会导致后续的内容出现高亮异常。
</p>
<p>
曾经在某些未知的情况下（Chromium
中）会导致后续的代码直接失效的情况，但无法复现。
</p>
<h2>复现</h2>
<pre data-lang="CSS">
* {
background-image: url();
color: #FF0;
}</pre
>
<p>将此段代码放入 inspector-stylesheet 中，即可复现。</p>
<figure>
<picture>
<source
srcset="
src/asset/image/url()%20highlighting%20error%20in%20light.webp
"
media="(prefers-color-scheme: light)"
/>
<source
srcset="
src/asset/image/url()%20highlighting%20error%20in%20dark.webp
"
media="(prefers-color-scheme: dark)"
/>
<img
src="src/asset/image/url()%20highlighting%20error%20in%20light.webp"
/>
</picture>
<figcaption>
inspector-stylesheet
中出现了高亮异常，后续字符变为字符串的高亮颜色。
</figcaption>
</figure>
<h2>解决方案</h2>
<pre data-lang="CSS">
* {
background-image: url("");
color: #FF0;
}</pre
>
<h2>后记</h2>
<p>
本 Bug 在
<a
href="https://issues.chromium.org/issues/348675992"
target="_blank"
>Chromium Issue Tracker</a
>
和
<a
href="https://github.com/codemirror/dev/issues/1402"
target="_blank"
>GitHub</a
>
上都进行了提报，现在已得到了解决。
</p>
<footer>
<a href=".">鬼影的基地</a>
</footer>
</body>
</html>