Elemente auf Webseiten befinden sich hauptsächlich nebeneinander oder untereinander. Aber manchmal erfordert Design überlappende Elemente. Zum Beispiel ein Dropdown-Navigationsmenü, Hover-Vorschaufenster, nutzlose Cookie-Banner und natürlich unzählige Popups, die Ihre sofortige Aufmerksamkeit erfordern.

In diesen Situationen muss der Browser irgendwie entscheiden, welche Elemente "von oben" angezeigt werden sollen und welche Elemente im Hintergrund ganz oder teilweise geschlossen bleiben sollen. Ein relativ komplexes Regelwerk im CSS-Standard definiert die Standard- Mischreihenfolge für jedes Seitenelement (wahrscheinlich kann alles auf der Welt als „relativ komplex“ bezeichnet werden, aber es ist sofort besorgniserregend, dass der Standard eine spezielle Anwendung mit dem Titel „Detaillierte Beschreibung der Mischkontexte“ enthält ).

Wenn die Standardreihenfolge nicht passt, greifen die Entwickler auf die Eigenschaft z-index : Sie gibt die Kontrolle über die virtuelle z-Achse (Tiefe), die konzeptionell durch die Seite verläuft. Somit wird ein Element mit einem höheren z-index „näher“ am Benutzer angezeigt, dh es wird über Elementen mit niedrigeren Indizes gezeichnet.

Eine interessante Eigenschaft der z Achse ist, dass sie keine natürlichen Grenzen hat. Die horizontale und vertikale Achse sind normalerweise durch die erwartete Größe der Anzeige begrenzt. Wir erwarten nicht, dass Elemente auf "1.000.000 Pixel links" oder "-3000 Pixel oben" verschoben werden: Sie werden entweder unsichtbar oder verursachen eine unangenehme Schriftrolle. (Es sei denn, Sie lesen diesen Artikel zu einem Zeitpunkt, an dem die Anzeigen Millionen Pixel breit sind. Wenn ja, fordere ich Sie dringend auf, das Lesen zu beenden und ein Billionen-Dollar-Webseitenprojekt zu starten.)

Die z-index Werte sind jedoch dimensionslos und nur relativ wichtig: Eine Seite mit zwei Elementen sieht gleich aus, wenn die z Indizes 1 und 2 oder −10 und 999 . In Kombination mit der Tatsache, dass Seiten häufig aus isolierten Komponenten zusammengesetzt werden, führt dies zu der merkwürdigen Kunst, die geeigneten Z-Indizes auszuwählen.

Wie können Sie sicherstellen, dass Ihr nerviges Popup genau über allen Elementen auf der Seite angezeigt wird, wenn Sie nicht wissen, wie viele es gibt, wer sie geschrieben hat und wie sehr sie oben sein wollten? Dann setzen Sie Ihren Z-Index auf 100 oder vielleicht 999 oder für alle Fälle auf 99999, um sicherzustellen, dass Ihr Z-Index definitiv gewinnt.

Zumindest schreibe ich so mein CSS. Im Rest dieses Beitrags werden wir uns Millionen von Z-Indizes ansehen und sehen, was andere Webentwickler tun.

Datenabruf

Der erste Schritt bestand darin, eine große Anzahl von Z-Index-Werten von vorhandenen Webseiten zu sammeln. Zu diesem Zweck habe ich mich an Common Crawl gewandt, ein öffentliches, sehr großes und wunderbares Repository mit Seiten aus dem Internet. Daten werden in S3 gehostet, sodass Sie sie sehr effizient von einem AWS-Cluster anfordern können. Glücklicherweise gibt es im Internet mehrere Tutorials, die zeigen, wie das geht.

Bei meinem ausgeklügelten Z-Index-Extraktor wird auf jeder Seite nach Übereinstimmungen des folgenden regulären Ausdrucks gesucht:

 re.compile(b'z-index *: *(-?[0-9]+|auto|inherit|initial|unset)') 

Sobald die Werte bestimmt sind, bleibt die Standardaufgabe zum Reduzieren der Karte für die Anzahl der Vorkommen erhalten. Glücklicherweise bin ich nicht der erste, der das Auftreten aller möglichen Dinge in der Stichprobe zählen wollte, und dies war genug, um eines von vielen Beispielen anzupassen. (Fast mein ganzer persönlicher Code ist ein regulärer Ausdruck oben).

Dank eines sehr detaillierten Blog-Artikels konnte ich den Code im Elastic Map Reduce- Cluster bereitstellen und begann im März 2019 mit dem Scannen des Seitenarchivs . Dieses spezielle Archiv ist in 56.000 Teile unterteilt, von denen ich zufällig 2.500 oder etwa 4,4% ausgewählt habe. Diese Zahl ist nichts Besonderes, außer dass sie sich grob in dem Preis niederschlägt, den ich bereit war, in dieses Experiment zu investieren. Nach einer schrecklichen Nacht in der Hoffnung, dass ich die Prognosen nicht richtig gemacht habe, habe ich Ergebnisse aus 112,7 Millionen Seiten extrahiert. (Ich muss darauf hinweisen, dass dies alles HTML-Seiten sind. Ich habe mich nicht zu sehr mit dieser Frage befasst, aber Common Crawl scheint keine externen Stylesheets zu indizieren. Daher extrahiere ich nur Werte aus Inline-CSS. Ich überlasse es dem Leser, dies zu bestimmen ob die resultierende Verteilung mit dem übereinstimmt, was Sie von externen Stylesheets erhalten).

Die häufigsten Werte

Mein Scan ergab insgesamt etwa 176,5 Millionen Z-Index-Werte, von denen 36,2 Tausend eindeutig sind.

Was sind die häufigsten?

Die Abbildung zeigt die Top 50. Beachten Sie, dass die y- Achse logarithmisch ist und relative Häufigkeiten anzeigt. Beispielsweise beträgt der häufigste Wert von 1 14,6% aller in der Stichprobe gefundenen Vorkommen. Im Allgemeinen machen die Top 50 etwa alle 80% der gesammelten Werte aus.



Die erste Beobachtung ist, dass positive Werte dominieren. Das einzige negative Element in den Top 50 ist −1 (das zweithäufigste −2 nimmt den 70. Platz ein). Vielleicht sagt uns das, dass die Leute normalerweise mehr daran interessiert sind, Dinge nach oben zu bringen, als sie im Hintergrund zu verstecken.

In der Regel haben die meisten Spitzenwerte eine der folgenden Eigenschaften:

• Sie sind klein: Zum Beispiel sind alle Zahlen von 0 bis 12 in den Top 50.
  
• Dies sind Grade von zehn oder mehreren Zahlen: 10, 100, 1000, 2000, ...
  
• Sie sind der Zehnerpotenz „nahe“: 1001, 999, 10001, ...

Diese Muster stimmen mit der Tatsache überein, dass Menschen große "vertraute" Werte (Grad zehn) wählen und dann möglicherweise die relative Tiefe innerhalb der Komponente anpassen - die Werte sind etwas höher oder niedriger.

Es ist auch interessant, die häufigsten Werte zu betrachten, die in keines dieser Muster passen:

Auf dem 36. Platz sehen wir 2147483647. Viele Programmierer erkennen diese Nummer sofort als INT_MAX , INT_MAX 2 ³¹ −1. Die Leute argumentieren wahrscheinlich so: Da dies der größte Wert für eine (vorzeichenbehaftete) Ganzzahl ist, ist kein Z-Index höher, sodass mein Element mit dem Index INT_MAX immer ganz oben steht. MDN sagt jedoch Folgendes über Ganzzahlen in CSS aus:

Es gibt keinen offiziellen Wertebereich vom Typ <integer> . Opera 12.1 unterstützt Werte bis zu 2 ¹⁵ -1, IE - bis zu 2 ²⁰ -1 und andere Browser sind noch höher. Während der Existenz von CSS3-Werten wurden mehrere Diskussionen über die Festlegung eines unterstützten Mindestbereichs geführt: Die letzte Entscheidung wurde im April 2012 während der LC-Phase getroffen, dann wurde der Bereich angenommen [-2 ²⁷ -1; 2 ²⁷ -1], aber es wurden andere Werte vorgeschlagen, wie 2 ²⁴ -1 und 2 ³⁰ -1. Die derzeitige Spezifikation gibt jedoch nicht mehr den Umfang dieses Datentyps an.

Somit gibt es nicht nur keinen vereinbarten Maximalwert, sondern INT_MAX tatsächlich in jeder dokumentierten Spezifikation oder Standardklausel außerhalb des Bereichs.

Auf dem 39. Platz haben wir 8675309, bei denen ich persönlich nichts Bemerkenswertes gesehen habe. Aber für mehr als eine halbe Million Entwickler ist das natürlich sinnvoll. Ich vermute, dass Sie diese Nummer entweder sofort erkennen oder ihre Bedeutung überhaupt nicht verstehen, je nachdem, wo und wann Sie aufgewachsen sind. Ich werde keine Spoiler herausgeben, die Antwort verbirgt sich hinter nur einer Suche .

Die letzten beiden Zahlen, die etwas unangemessen erschienen, sind 1030 und 1050 auf dem 42. bzw. 45. Platz. Ein weiterer kurzer Blick ergab, dass dies die Standardwerte für den Z-Index für die Klassen navbar-fixed und modal in Bootstrap sind.

Werteverteilung

Obwohl die überwiegende Mehrheit aller z-index Werte aus einer kleinen Anzahl von Optionen stammt, kann es interessant sein, die breitere Verteilung der kompilierten Menge zu betrachten. Zum Beispiel zeigt Abbildung 2 die Häufigkeit aller Werte zwischen -120 und 260.



Zusätzlich zur Dominanz runder Zahlen sehen wir auf mehreren Ebenen eine fast fraktale Qualität von Mustern. Zum Beispiel ist die Mitte zwischen zwei lokalen Maxima oft selbst ein (kleineres) lokales Maximum: Sie ist 5 zwischen 1 und 10, 15 zwischen 10 und 20, 50 zwischen 1 und 100 usw.

Wir können diesen Effekt in einem größeren Bereich bestätigen: Die folgende Abbildung zeigt die Frequenzen aller Werte von -1200 bis 2600, wobei auf einen kleineren Modul auf zehn gerundet wurde, dh Zahlen wie 356 und 359 wurden als 350 gezählt. Die Grafik ist der vorherigen sehr ähnlich. Wie Sie sehen können, bleibt die Struktur hauptsächlich erhalten, wenn Werte um eine Größenordnung größer betrachtet werden.



Schließlich werden in der letzten Abbildung alle positiven z-index Werte von 1 bis 9999999999 nach der ersten Ziffer (horizontale Achse) und der Anzahl der Ziffern (vertikale Achse) gruppiert.


Positive z-index Werte, gruppiert nach erster Ziffer und Anzahl der Ziffern. Die Abmessungen sind proportional zur Gesamthäufigkeit der Gruppe. Klicken Sie auf eine Gruppe, um weitere Informationen zu erhalten.

Wir können jede Gruppe intuitiv als Vorlage für Werte darstellen, z. B. 3xxx für alle vierstelligen Werte, die mit 3 beginnen. Jede Gruppe wird als Rechteck angezeigt, dessen Größe proportional zur Häufigkeit des Musters ist. Die Figur zeigt zum Beispiel, dass für jede Größenordnung, d. H. Eine Anzahl von Gruppen, die Frequenzen einem ähnlichen Trend folgen und die Werte ab 1 am häufigsten sind, dann 9, dann 5.

Der Farbton jeder Gruppe wird basierend auf ihrer Entropie festgelegt. Gelbe Gruppen haben die höchste Entropie, während blaue Gruppen die niedrigste haben. Dies hilft dabei, Muster hervorzuheben, bei denen Entwickler dazu neigen, dieselben Werte zu wählen, oder solche, bei denen die Werte gleichmäßiger verteilt sind (beachten Sie, dass die Entropie unseres gesamten Datensatzes 6,51 Bit beträgt).

Fazit

Obwohl es auf jeden Fall interessant war, diesen Datensatz zu sammeln und zu untersuchen, bin ich sicher, dass es bessere Statistiken, Visualisierungen und Erklärungen gibt, die auf Produktion und Präsentation warten. Wenn Sie es versuchen möchten, können Sie die Datei z-index-data.csv herunterladen und verteilen.

Vielleicht werden Sie dort erfolgreich sein, wo ich versagt habe, und einen Weg finden, den höchsten z-index Wert, den ich gefunden habe, in das Diagramm aufzunehmen, nämlich 10 ¹²⁴² -1.

Ja, die Nummer 9 wird 1242 Mal wiederholt. Ich hoffe wirklich, dass sie endlich ihr <div> oben zeigen konnten.