console.log()

CSS Escapes

| 1 Kommentar

Eine ziemlich verrückte Welt sind CSS Escapes: Sollte jemand mal in die Verlegenheit kommen mit der CSS Regel #♥ { color: blue }  die id=“♥“  anzusprechen wird sich dabei in den Finger schneiden. Um eine ID so anzusprechen muß das Zeichen escaped werden:

CSS represents escaped characters in a different way. To represent a character, start with a backslash followed by the hexadecimal number that represents the character’s Unicode code point value.

Das würde für unsere CSS Regel so ausschauen: #\2665 { color: blue; }

Eine praktischere Anwendung für Sonderzeichen in CSS ist das Content Element, z.B. könnten externe Links mit dem Pfeilsymbol „→“ gekennzeichnet werden. Die CSS Regel könnte so aussehen:

a:after {
  content: "→";
}

Jetzt ist es natürlich lästig diesen Pfeil  konvertieren (\2192 ist korrekt) zu müssen, deswegen haben sich schlaue Developer etwas überlegt – Das SASS Unicode Plugin.

Im Zusammenspiel mit SASS und oder Compass hilft dieses Plugin Sonderzeichen zu konvertieren:

a:after {
  content: getUnicode("→");
}

generiert

a:after {
  content: "\2192";
}

Nice! Wie wäre es mit leckeren Burgern statt Bullet Points? There you go*:

ul {
  list-style: none;
}
li {
  before: "\1f354  ";
}

*installierte Emoji Font vorausgesetzt

Quellen

Autor: Bernhard Benke

Ich bin Webdeveloper und interessere mich besonders für Frontend Themen. Mittlerweile bin ich ein großer SASS und Compass Fanboy geworden.

Ein Kommentar

  1. ich werde zukünftig jedem unserer Kreativen Burger als Bullet Points vorschlagen 😉

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.