CSS: mit :first-of-type das erste Element mit bestimmter Klasse ansprechen

Die allermeisten Webentwickler durften die Pseudoklasse :first-child kennen. Damit kann man innerhalb eines Elternelements das erste genannte Element ansprechen. Mit #inhalt p:first-child würde man die ersten Absätze von #inhalt und seinen Kind-Elementen ansprechen.

CSS: :first-of-type

So weit so gut. Was mache ich aber, wenn ich nicht das erste bestimmte Element ansprechen möchte, sondern das erste Element mit einem bestimmten Klassenwert. Hier bietet sich dann die Pseudoklasse :first-of-type zum Einsatz an.

Weiterlesen …

Genericons: das schlanke Icon-Font

Icon-Fonts sind seit einer längeren Zeit ein wichtiges Stilmittel geworden um auf den Websites Bereiche hervorzuheben und optisch aufzulockern. Daher war es naheliegend, dass ich auch hier auf dieser Website Fonticons einsetzen würde. Die Frage die zu beantworten war: welche Icon-Sammlung wird zum Einsatz kommen?

Der bekannteste Vertreter in diesem Segment ist Font Awesome. Dieses Icon-Font verfügt momentan über 420 Icons. Alleine im letzten Update sind 420 neue Zeichen hinzugekommen:

Neue Fontawesome-Icons

Will man solche Icons zum Beispiel in Backend eines CMS einbinden, dann ist das eine interessante Alternative um für viele Einsatzzwecke ein passendes Zeichen bieten zu können. Möchte man aber wie ich lediglich maximal ein dutzend Icons zurückgreifen, dann ist das einfach zu viel des Guten. Viele Icons verursachen eine große Schrift-Datei und auch die CSS-Datei ist dem entsprechend größer. Daher musste eine schlanke Alternative daher.

Weiterlesen …