-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCodeMirror url() Bug.html
137 lines (137 loc) · 3.71 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
127
128
129
130
131
132
133
134
135
136
137
<!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" />
<script type="speculationrules">
{
"prerender": [{ "urls": ["."] }],
"prefetch": [
{
"where": { "selector_matches": "a[target='_blank']" },
"eagerness": "moderate"
}
]
}
</script>
</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>