z-indexバトル観戦

　こんにちは、 id:hogashi です。 whywaita Advent Calendar 2022 - Adventar 3日目です。

z-index バトル

　id:whywaita さんの好きなアルファベットは流石に Y ということでした。ありがとうございます。

　やはり僕も id:whywaita さんの id を眺めていて、 w とか y とかから z-index を想起しまして、世の中の z-index バトルがどのように繰り広げられているのか見たいと思い、 GitHub で language が css と scss のコードを検索しました。 API でバリバリ検索したら 1000件しか検索できないということだったので、運良く 1000件にひっかかったコードの中から z-index のみなさまを雑に集計してみました。
　ちなみに z-index とはスタイルシートのプロパティで、 z 方向つまり画面に垂直な方向の高さを示すようなものです。値が大きいほど手前に見え、値が小さいものが隠れる、といった具合。 z-index - CSS&colon; Cascading Style Sheets | MDN

z-index が 100 より小さいもの

　まず z-index が 100 より小さいものを見てみるとこう。 z-index 、負の数使えるんですね。 MDN にも "Negative values to lower the priority" って書いてある。バトルでいくと、 0 〜 5 では熾烈な戦いがありますね。人類は十進法を採用しました*1ので、なんとなく 10 ごとに山があるようにも見えます。

z-index が正の値のもの

　1 〜 100 は上と被りますが、まとめて全部見ます。読者のみなさまのご想像通り、でかい値はでかいです。

　対数グラフだと分かりづらいけど、 css での一位は 9999999 (10^7 - 1) 、 scss の一位は 999999 (10^6 - 1) ということで、桁がひとつ違う。まあ冒頭でも書いた通り雑に 1000件検索してるだけなので、まだ見ぬ巨大な z-index はあるかもしれないですね。値を眺めていくと、大体は十進数でキリの良い値だけど、変な値がちょこちょこあっておもしろい (666 とか)。いや〜バトルですね、これが見たかった。

実際の数字を見る

css

z-index の値	数
9999999	1
5000000	5
500000	2
100000	3
99999	2
65536	2
10100	1
10000	18
9999	233
9998	4
5000	2
3214	1
2020	1
2000	2
1900	1
1100	1
1009	1
1001	3
1000	23
999	236
997	1
996	1
895	1
643	1
600	3
500	18
416	1
301	1
300	5
250	2
240	5
233	1
214	1
200	6
199	2
197	3
190	1
150	2
145	2
139	2
110	1
102	2
101	5
100	29
99	2
98	1
86	1
80	2
74	3
57	2
52	2
51	2
50	3
45	2
42	1
40	2
37	2
33	1
32	4
31	2
30	6
25	4
23	1
20	15
19	2
15	3
14	3
13	3
12	5
11	1
10	27
9	16
8	10
7	8
6	41
5	282
4	41
3	293
2	327
1	403
0	289
-1	22
-2	4
-5	1
-9	1
-60	34

scss

z-index の値	数
999999	7
100001	42
100000	1
99999	12
50000	2
9999	95
9998	2
5000	9
2010	1
2000	1
1500	1
1400	1
1300	1
1020	2
1000	4
999	102
998	8
700	1
666	1
500	6
400	4
300	2
250	1
200	1
110	1
100	26
99	5
98	8
90	1
70	1
69	1
60	1
50	2
49	1
40	4
39	1
30	7
28	1
27	1
22	2
21	1
20	6
15	1
10	32
9	13
8	3
7	3
6	4
5	111
4	16
3	128
2	181
1	335
0	134
-1	27
-6	1
-19	1
-20	1

統計

　雑な統計をとるとこうなるっぽいです。スプレッドシートにすべてを任せているので分散がめちゃくちゃになっているの本当か？という気持ちになるけど、多分本当です。 (追記 2022/12/05: 計算するデータを間違えてたので直しました。引き続き分散はすごい)

	css	scss
合計	39506402	13753297
平均	15727.07086	10053.57968
中央値	3	3
分散	89591078363	5432903256

z-index バトルの頂点はどこか

　stackoverflow で「ブラウザは 32bit 使ってるだろうし −2147483648 〜 2147483647 だと思う」って言ってる人はいます (html - Minimum and maximum value of z-index? - Stack Overflow) が、 MDN からたどって CSS の integer の定義を見に行くと、特に最大値などは書かれていないようでした https://w3c.github.io/csswg-drafts/css-values/#integers 。これからも z-index は高みを目指して切磋琢磨していくことでしょう *2。

あそびかた

　こういう感じで雑に検索/集計しました。 GitHub の API は 1分おきに 30件取れて、 1000件取れるので、 34 回やると十分そうでした。 awk で TSV にして、スプレッドシートに貼り付けてグラフにしています。
　ちなみにこれを書いている 2022/11/29 時点では、 GraphQL API にはコードの検索が実装されていませんでした。無念。

for page in {1..40}; do
  sleep 65
  gh api -H "Accept: application/vnd.github.text-match+json" "/search/code?q=z-index+in:file+language:css&page=${page}" | tee ${page}.json
done

cat *.json | jq .items[].text_matches[].fragment | perl -pe 's|z-index|\nz-index|g' | perl -pe 's|^.*?(z-index\s*:\s*[\-0-9]+)\s*;.*$|$1|g' | awk '{print $2}' | grep -vE '[^-0-9]' | sort -nr | uniq -c | awk '$2 ~ /-?[0-9]+/{ print $2 "\t" $1 }'