Tauchen in einem Design Pfeile auf, sollte geprüft werden, ob diese ohne Grafiken darstellbar sind. Mit der folgenden Technik spart man sich ggf. einige HTTP-Requests und erhöht damit die Performance der Website. Der Trick ist nicht neu. Gerade deshalb möchte ich diese sinnvolle Technik mit zusätzlichen Infos weiterverbreiten.
Technik
Die grundsätzliche Technik bedient sich der Rahmeneigenschaft von Elementen: border. Außerdem wird der Pfeil über ein Pseudo-Element generiert, um zusätzliches Mark-up zu vermeiden.
Beispiel 1 – Theorie
CSS
[prism field=css-arrow-example-1-css language=css class=line-numbers]
Die Technik nutzt das Rendering der border-Eigenschaft durch die Browser aus. Die Eckpunkte der Rahmenseiten werden mit Gehrung zusammengefügt, sodass bei einer Elementgröße von 0 × 0 Pixeln vier Dreiecke entstehen. Die Größe des Pseudo-Elements wird daher allein durch die Rahmenstärke bestimmt (vgl. Beispiel 1: Höhe = 2 × border-width = 6 rem).
Beispiel 2 – Praxis
Beliebiges Element
HTML
[prism field=css-arrow-example-2-html language=markup class=line-numbers]
CSS
[prism field=css-arrow-example-2-css language=css class=line-numbers data_line=17,19]
Im zweiten Beispiel wurde der Pfeil verkleinert und neu positioniert. Das Element wurde durch den Display-Typen inline-block in der Breite an den Inhalt angepasst. Der neue Innenabstand erzeugt an der rechten Seite Raum für den Pfeil. Oft wird man nur eine Rahmenseite in der gewünschten Farbe benötigen, die restlichen sollten daher transparent sein.
Tipp: Das Pfeil-Objekt kann auf seine tatsächliche Größe beschränkt werden, indem die Breite der gegenüberliegende Seite auf Null gesetzt wird (siehe CSS – Zeile 17). Das macht das Positionieren etwas einfacher.
Die vertikale Zentrierung wird ebenfalls über eine Standardtechnik gelöst. Das absolut positionierte Objekt wird zunächst mit seiner Oberkante an der Mitte des Bezugselements ausgerichtet und dann mit einem negativen Außenabstand um die Hälfte seiner Höhe nach oben verschoben.
Rendering im Firefox
In einigen Versionen vom Mozilla Firefox Browser werden die Pfeile mit sehr harten bzw. ausgefransten Kanten dargestellt, was wie ein Darstellungsfehler aussieht. Um dieses Verhalten zu umgehen kann das Pfeil-Element nicht sichtbar skaliert werden (siehe CSS – Zeile 19). Brett Hoffman hat sich die Mühe gemacht weitere mögliche Workarounds zu diesem Problem aufzulisten.
Weitere Formen
Die Form des Pfeils kann über entsprechende Rahmenbreiten für die einzelnen vier Seiten ziemlich genau gesteuert werden. Für eine „Ecke“ können z. B. auch zwei Rahmenseiten zusammen genutzt werden.
Beispiel 3 – Ecke
CSS
[prism field=css-arrow-example-3-css language=css class=line-numbers]
Beispiel 4 – Pfeile mit Schenkeln
In abgewandelter Form kann auch eine andere Form erzeugt werden, die man häufiger sieht. Das Pseudo-Element muss nicht unbedingt die Größe Null haben, sondern die Rahmen können auch direkt als Schenkel für den Pfeil genutzt werden.
CSS
[prism field=css-arrow-example-4-css language=css class=line-numbers]
Wichtig: Obige Methode funktioniert nur in den Browsern, die die CSS3-Eigenschaft transform (ggf. mit Prefix) unterstützen.
Weitere Nutzen
Die so generierten Pfeile können natürlich auch in Kombination mit anderen Elementen genutzt werden. So ist es nicht verwunderlich, dass mit dieser Technik sehr gerne Sprechblasen erzeugt werden. cssarrowplease stellt hierfür einen praktischen Generator bereit.
Vorsicht bei Schatten-Effekten und gemusterten Hintergründen
Die box-shadow Eigenschaft funktioniert an den hier vorgestellten Pfeilen nicht, da immer die komplette Box den Schatten erhält. Ebenso kann der Pfeil nur eine solide Farbe annehmen und kein Grafik-Muster oder einen Farbverlauf. Dies ist ggf. relevant für die Sprechblasen-Technik.
Fazit
Man muss im Hinterkopf haben, dass diese Technik letztlich ein CSS-Hack ist, der das Browser-Verhalten ausnutzt. Glücklicherweise verhalten sich hier alle Browser weitgehend gleich. Kommen die Hersteller aber irgendwann auf die Idee das Rendering von Rahmen umzustellen, sehen die Pfeile ggf. nicht mehr wie Pfeile aus.
Ob eine Nutzung der Technik möglich ist, hängt immer davon ab in welchem Kontext und mit welchem Design die Pfeile eingesetzt werden sollen. Grundsätzlich würde ich diese Pfeile immer dann Grafiken vorziehen, wenn sie ohne Einschränkungen dasselbe darstellen. Gerne helfen wir, wenn es Probleme gibt!
Kommentare