Verwendung der `outline`-Eigenschaft als kollabierbarer Rand

Die CSS-Eigenschaft `outline` (in diesem Artikel: Die `outline`-Eigenschaft in CSS) zeichnet eine Linie um das Äußere eines Elements. Dies ist dem border-Eigenschaft sehr ähnlich, mit dem Hauptunterschied, dass outline nicht Teil des Box-Modells ist. Sie wird oft zum Hervorheben von Elementen verwendet, zum Beispiel für den :focus-Stil.

In diesem Artikel wollen wir uns darauf konzentrieren, was outline gut kann.

1. Sie können miteinander kollabiert werden (Trickerei!), da sie technisch gesehen „keinen Platz einnehmen“.
2. Das Anzeigen und Verbergen von Umrissen oder das Ändern von outline-width löst keine Layout-Änderungen aus (was gut für performante Animationen und Übergänge ist).

Einfachere gefälschte Tabellenzellen-Ränder

Unten ist ein Beispiel für eine Liste, die als Raster angeordnet ist, sodass sie ein wenig wie ein Tabellenlayout aussieht. Jede Zelle hat eine Mindestbreite und wird breiter/schmaler, wenn sich der Container weitet/verengt.

Wir könnten border verwenden, um dies zu erreichen, wie hier:

Aber um einen gleichmäßigen Rand um jede Zelle zu erzeugen – der niemals doppelt aufeinander liegt oder fehlt – ist dies ein umständlicher Prozess. Oben habe ich einen Rand auf allen Seiten jeder „Zelle“ verwendet, dann negative Abstände, um sie zu überlappen und eine Verdopplung zu verhindern. Das bedeutete, den Rand auf zwei Seiten abzuschneiden, sodass die Ränder dort auf dem übergeordneten Element wieder angewendet werden mussten. Zu viel Fummelei, wenn Sie mich fragen.

Selbst das Verstecken von overflow ist eine große Bitte, was Sie tun müssen, denn andernfalls lösen Sie Scrollbalken aus, es sei denn, Sie greifen zu noch dickeren Tricks, wie z. B. absolut positionierten Pseudo-Elementen.

Schauen Sie sich das gleiche Ergebnis visuell an, nur mit outline stattdessen:

Der Code ist hier viel sauberer. Es gibt keine wirkliche Trickerei. Jede „Zelle“ hat einfach eine Umrandung und das war's.

Rand in Animation

Das Ändern von border-width löst immer eine Layout-Änderung aus, egal ob es tatsächlich benötigt wird.

Zusätzlich lässt aufgrund der speziellen Behandlung von Subpixeln für Randbreiten durch Chrome das Animieren der border-width-Eigenschaft den gesamten Rand wackeln (was ich seltsam finde). Firefox hat dieses Problem nicht.

Beim Animieren von Rändern gibt es Vor- und Nachteile. Schauen Sie sich den Beitrag von Stephen Shaw an von vor einiger Zeit für ein Beispiel der Leistungseinbußen.

Es gibt einige Fallstricke

Natürlich gibt es welche. Wie die meisten anderen CSS-Eigenschaften gibt es einige „Fallstricke“ oder Dinge, die man wissen muss, wenn man mit der outline-Eigenschaft arbeitet.

1. Abgerundete Umrandungen werden zum Zeitpunkt der Erstellung dieses Artikels nur in Firefox unterstützt. Ich stelle mir vor, dass andere Browser sie schließlich auch unterstützen werden.
2. Eine Umrandung geht immer um *alle* Seiten. Das heißt, es ist keine Kurzschreibweise wie z. B. border; also kein outline-bottom und so weiter.

Aber wir können diese Einschränkungen umgehen! Zum Beispiel können wir eine box-shadow ohne Weichzeichnungsradius als Alternative hinzufügen. Aber denken Sie daran: box-shadow hat höhere Leistungskosten als die Verwendung von outline und border.

Das ist alles!

Sie werden wahrscheinlich nicht immer an etwas arbeiten, das eine Tabelle mit einer ungeordneten Liste fälscht. Aber die Tatsache, dass wir outline und dessen mangelnde Beteiligung am Box-Modell nutzen können, macht es interessant, insbesondere als border-Alternative in einigen Fällen.

Vielleicht könnte etwas wie dieses Tic-Tac-Toe-Feld, das Chris vor vielen Jahren zusammengestellt hat, von outline profitieren, anstatt auf individuell gestaltete Zellränder zurückzugreifen. Herausforderung angenommen, Herr Coyier? 😉