Viewport-Größe in CSS berechnen

Eine Methode zur Berechnung der Breite und Höhe des Viewports ohne JavaScript, präsentiert von Temani Afif drüben bei CSS Tip

@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw; 
}
@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh; 
}
:root {
  --w: tan(atan2(var(--_w),1px)); /* screen width */
  --h: tan(atan2(var(--_h),1px)); /* screen height*/
  /* The result is an integer without unit  */
}

Der Ausschnitt ist eine Anspielung auf Jane Ori, die ihn ursprünglich veröffentlicht und einen Erklärtext dazu verfasst hat. Ich bin kein Mathegenie, aber ich erkenne die Funktion tan() aus meiner Schulzeit wieder als Methode zur Berechnung eines Verhältnisses für die gegenüberliegende und die anliegende Seite eines rechtwinkligen Dreiecks basierend auf einem gegebenen Winkel.

Mit anderen Worten: tan() teilt die Höhe (gegenüberliegend) des Dreiecks durch die Breite (anliegend), um einen Winkel zu erzeugen. Wir müssen ihm nur den Winkel übergeben, z.B. tan( <Winkel> ).

Warum zum Teufel sollten wir das tun, wenn wir calc() haben, richtig? Das Problem ist, dass calc() die Art von Division, die wir brauchen, nicht durchführen kann. Also hat Jane Ori clever die Funktion atan() hineingeschachtelt: tan(atan()).

Der Clou ist, dass atan() die Umkehrfunktion von tan() ist, bei der wir ihm ein Verhältnis aus Breite und Höhe übergeben: atan( <Verhältnis> ). Auf diese Weise werden die Breite und Höhe des Dreiecks als separate Argumente genommen, die berechnet werden, bevor die Funktion tan() ihre Arbeit tut und ihr das gibt, was sie benötigt, um den Tangens eines Winkels zu berechnen.

Ich überlasse das Wort Jane

Was dieser Trick also tut, ist in den meisten Fällen etwas albern (und wahrscheinlich der Grund, warum niemand es vorher bemerkt hat), da wir zwei trigonometrische Funktionen anstelle einer Division verwenden, die calc()-Implementierungen noch nicht durchführen können.

atan2( Höhe, Breite ) = Winkel

tan( Winkel ) = Höhe / Breite

tan( atan2( Höhe, Breite ) ) = Höhe / Breite

Jane Ori, „CSS Type Casting to Numeric: tan(atan2()) Scalars“

Sie sollten sich Jane's vollständige Erklärung ansehen, die ein weiteres Beispiel enthält, das die font-size eines Elements berechnet.