Bedingter Randradius in CSS

Ahmad Shadeed dokumentiert einen echten CSS-Trick aus der Facebook-CSS-Codebasis. Die Idee ist, dass ein Element, wenn es die volle Breite des Viewports hat, keinen border-radius besitzt. Andernfalls hat es 8px border-radius. Hier ist der Code

.card {
  border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));
}

Eine Zeile! Super schick. Der Kern ist der Vergleich zwischen 100vw und 100%. Im Wesentlichen ergibt sich der border-radius meistens zu 8px. Aber wenn die Komponente die gleiche Breite wie der Viewport hat (innerhalb von 4px, aber ich würde sagen, dieser Teil ist optional), dann wird der Wert von border-radius zu 0px, da die Gleichung eine negative (ungültige) Zahl ergibt.

Die Multiplikation mit 9999 bedeutet, dass Sie niemals kleine positive Zahlen erhalten. Es ist ein Schalter. Sie erhalten entweder 8px oder 0px und nichts dazwischen. Versuchen Sie, diesen Teil zu entfernen, die Größe des Bildschirms zu ändern und zu sehen, wie er sich quasi verwandelt, wenn sich die Viewport-Größe der Komponenten-Größe nähert.

Warum das so machen und nicht über eine @media-Abfrage? Frank, der Entwickler hinter der Facebook-Entscheidung, sagt

Es ist keine Media Query, die den Viewport mit einer festen Breite vergleicht. Es ist effektiv eine Art Container-Abfrage, die den Viewport mit seiner eigenen variablen Breite vergleicht.

Frank Yan

Und

Dies ist eine allgemeinere Lösung, da sie die Größe der Karte nicht kennen muss. Eine Media Query wäre abhängig von der Breite der Karte.

Naman Goel

Die Technik wird anscheinend die "Fab Four" Technik genannt, die in E-Mails nützlich ist.