-
Notifications
You must be signed in to change notification settings - Fork 22
/
hidden.is.a.lie.html
101 lines (97 loc) · 2.78 KB
/
hidden.is.a.lie.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>[hidden] is a lie</title>
<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
background:white;
}
body {
padding: 2em 2em;
max-width: 600px;
margin: 0 auto;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-font-smoothing: antialiased;
font-weight: 400;
padding: 0;
}
h1 {
text-align: center;
}
code {
font-family: monospace;
font-size: 1.2em;
color: #E91E63;
background-color: #FCE4EC;
padding: 2px 4px;
border-radius: 4px;
word-wrap: break-word;
}
pre {
font-size: 0.9em;
background-color: #F5F5F5;
overflow-x: auto;
overflow-y: hidden;
padding-left: 20px;
}
pre code {
color: #283593;
background: transparent;
}
section {
padding: 20px 0;
line-height: 1.5;
}
footer {
border-top: 3px solid #FCE4EC;
margin: 30px 0;
padding: 10px 0;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<h1>fyi: [hidden] is a lie</h1>
<section>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden"><code>hidden</code></a> is a Boolean attribute often used to hide elements, since browsers will (theoretically) not show elements with <code>hidden</code> set, like this:
<pre>
<code>
<div hidden>I am not displayed</div></code>
</pre>
</section>
<section>
This is unfortunately a <b>lie</b>: the <code>hidden</code> rule is a User Agent style, which means it's less specific than a moderate sneeze
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=566168#c10">[ref]</a>. This means that your favourite <code>display</code> style will override it:
<pre>
<code>
<style>
div { display: block; }
</style>
<div hidden>
lol guess who's not hidden anymore
hint: it's this thing
</div></code>
</pre>
</section>
<section>
The solution is tragic and it's to either not use <code>hidden</code> (because it's a lie), or to
pepper your apps with
<pre>
<code>
[hidden] { display: none !important}</code>
</pre> and they both suck, so have fun!
</section>
<footer>
<p>made with 😭 by <a href="https://twitter.com/notwaldorf" target="_blank">monica</a></p>
</footer>
</body>
</html>