Die Arbeit für eine große Agentur hat viele Vorteile. Einer davon ist es, dass man mit vielen Menschen zusammenarbeitet, die sehr viel mehr über sehr viele Dinge wissen. Ich lese daher oft Commits von anderen und schaue mir an, was sie so machen. In einem Commit habe ich eine CSS-Eigenschaft entdeckt, sie ich noch nie zuvor gesehen hatte: text-underline-offset ?
Links gestalten
In den frühen Tagen des World Wide Web waren alle Links unterstrichen. Mit dem Aufkommen von CSS und modernen Design wollten Leute dann aber andere Styles für Links haben. Die Farbe und Position der text-decoration: underline wurde aber von der Schrift und ihrer Farbe vorgegeben und daher wurde sie oft durch einen border-bottom ersetzt. Das hatte aber mehrere negative Folgen, nicht zuletzt in vielen Fällen eine Verschlechterung der Barrierefreiheit von Links. Mit modernem CSS gibt es nun aber viele verschiedene CSS-Eigenschaften, um Links zu stylen … und von vielen davon habe ich noch nie gehört:
- text-decoration-color
- text-decoration-line
- text-decoration-skip (experimentell)
- text-decoration-skip-ink
- text-decoration-style
- text-decoration-thickness
- text-underline-offset
- text-underline-position
Auf den verlinkten MDN Web Docs Seiten könnt ihr viele der oben erwähnten CSS-Eigenschaften direkt selbst ausprobieren. Ich könnte euch sicher auch viele Bespiele nennen, wie man diese einsetzen kann und wie es dann aussehen würde, aber ich möchte spoilern und euch den Spaß nehmen, es selbst herauszufinden ?
Fazit
Bei der Entwicklung von Websites gibt es eine unumstößliche Wahrheit: Du kannst nicht alles kennen. Daher kann ich es nur allen empfehlen, den Code von anderen zu lesen und sich von deren Arbeit inspirieren zu lassen. Diese CSS-Eigenschaften mögen für eine von euch bereits bekannt sein, für mich waren die überragend!