Andere Perspektiven auf den bedingten Border-Radius Trick

Erinnern Sie sich, als Ahmad Shadeed über diesen border-radius „Schalter“ schrieb, den er in Facebooks CSS gefunden hat? Das war interessant! Ich habe darüber berichtet. Einige Wochen nach diesem Link-Schub erschienen ein paar Artikel, die sich etwas tiefer damit beschäftigten.

In „Evaluating Clever CSS Solutions“ fragt sich Michelle Barker, wie clever ist zu clever?

Obwohl zweifellos clever und super interessant zu lesen, stimme ich Robin Rendle im CSS-Tricks Newsletter zu, wenn er sagt:

Ich kann nicht anders, als das Gefühl zu haben, dass es ein bisschen zu schlau ist.

Dem kann ich nur zustimmen. Solche Tricks haben ihren Platz, und Facebook (das sich eindeutig die besten CSS-Entwickler leisten kann) mag einer davon sein. Aber ganz persönlich, wenn ich zwischen einem Trick wie diesem und einer, wenn auch geringfügig weniger optimalen, aber weitaus besser lesbaren Lösung (z. B. einer Media Query) wählen müsste, würde ich in 99 % der Fälle Letztere bevorzugen.

Michelle ist sich bewusst, dass eine Media Query hier nicht die gleiche Lösung ist. Eine nicht-clevere Lösung wäre eine Container-Abfrage. Dem stimme ich auch zu. Ich bevorzuge in der Produktion fast nie clevere Lösungen, denn selbst wenn sie zu funktionieren scheinen, mache ich mir Sorgen über die langfristige Wartung und manchmal auch über die Zerbrechlichkeit der Lösung.

Stefan Judis untersuchte, wie wir die gleiche „bedingte Border-Radius“-Idee mit der kommenden Container-Queries-Syntax umsetzen könnten.

/* If the container's width is equal to or greater than 
   the viewport width, remove the border-radius */
@container (width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}

Das ist für mich ziemlich klar. Stefan erwähnt auch, dass es noch klarer sein könnte, wenn wir die theoretisch kommende @when Funktion verwenden könnten.

@when container(width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}
@else {
  .conditional-border-radius {
    border-radius: 1em;
  }
}

Das ist ein großes Vielleicht, da es keine Anzeichen dafür gibt, dass sich diese brandneuen Spezifikationen auf diese Weise überschneiden. Ich hoffe es aber. CSS ist im Laufe der Jahre viel logischer und lesbarer geworden, und dies würde diesen Zug weiter vorantreiben.

---

Ach ja, und das habe ich im letzten Artikel erwähnt…

Die 9999-Multiplikation bedeutet, dass Sie niemals niedrig-positive Zahlen erhalten. Es ist ein Schalter. Sie erhalten entweder 8px oder 0px und nichts dazwischen. Versuchen Sie, diesen Teil zu entfernen, die Bildschirmgröße zu ändern und zu sehen, wie sie sich irgendwie verwandelt, wenn die Ansicht nahe an der Komponentengröße liegt.

Aber ich bereute es, kein Video eingefügt zu haben, um das Konzept klarer zu machen, also werde ich das hier nachholen.