こんにちは、 
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: 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 とか)。いや〜バトルですね、これが見たかった。
実際の数字を見る
cssz-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 34scss
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 }'
*1:まどろみ消去 MISSING UNDER THE MISTLETOE (講談社文庫) | 森博嗣 | 日本の小説・文芸 | Kindleストア | Amazon
*2:多分そんなことはなくて、バンドラなどが普及した現代では、変数などを使ったりしてちゃんと管理することで、 z-index のインフレを防ぐ工夫などが生まれていると思います
id:polamjag
id:masawada
