HTTP-Requests sparen: Pfeile ohne Grafiken

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

.css-arrow-example-1:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 3rem solid black;  
  border-left-color: lime;
  border-right-color: red;
}

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

<div class="css-arrow-example-2">Beliebiges Element</div>

CSS

.css-arrow-example-2{
  position: relative;	
  border: 1px solid lightgray;
  padding: 1rem 2.5rem 1rem 1rem;
  display: inline-block;
}

.css-arrow-example-2:after{
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 1rem;
  top: 50%;
  margin-top: -.5rem;
  border: .5rem solid transparent;
  border-right: 0;  
  border-left-color: black;
  -moz-transform: scale(0.9999);
}

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

.css-arrow-example-3:after{
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border: 3rem solid transparent;
  border-top-color: black;  
  border-left-color: black;
  -moz-transform: scale(0.9999);
}

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

.css-arrow-example-4:after{
  content: "";
  width: 2rem;
  height: 2rem;
  position: absolute;
  border: 0 solid transparent;
  border-right: .5rem solid black; /* Im unteren Beispiel .0625rem */
  border-bottom: .5rem solid black; /* Im unteren Beispiel .0625rem */
  transform: rotate(-45deg);
}

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.

Weiterlesen im Web

Kommentare

  1. Komplexe Tooltips mit Schatten erstellen (CSS + HTML)

    […] die auch am Zeiger einen korrekten Schatten haben. Bei Tooltips werden die Zeiger gerne über den Border-Trick generiert. Bei diesem Trick sieht das Element zwar dreieckig aus, ist aber tatsächlich weiterhin […]

    Antworten

Kommentar abgeben

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.