Ein ganz genialer Tipp von www.webdesign-in.de mit der recht unbekannten Pseudoklasse :not alle externen Links zu kennzeichnen. Sobald ich Zeit hab kommt das in mein Theme….
Das Pseudoelement :not erlaubt in CSS Regeln zu definieren, auf welche Elemente CSS Anweisungen nicht angewendet werden. So sind z.B. div:not(.main) {…} alle divs, die nicht die Klasse main haben. Ich kannte das Pseudoelement, dachte aber bisher es dient schlechtem Design 😉 Also dass man z.B. nachträglich eine Regel einfügt, feststellt, dass man diese in einem bestimmten Bereich nicht will und so wieder Ausnahmen macht. Eindeutig eine unsaubere Lösung die die Lesbarkeit der Seite nicht erhöht.
Aber jetzt wurde ich eines besseren belehrt. Die Möglichkeiten sind gewaltig. So fand ich auf webdesign-in.de einen Trick externe Links kenntlich zu machen. Diesen hab ich noch etwas adaptiert.
|
1 2 3 4 5 6 7 |
div.main a[href^='http']:not([href^='http://www.codefreaks.net']):before { content: ""; padding-left:1em; background:url(images/external_link.png) no-repeat; background-size:contain; background-position:left center; } |
Vor jedem externen Link wird eine kleine Grafik mit einem Pfeil eingeblendet.
- Info:
- Pseudoklasse :not und Kennzeichnen externer Links ist Beitrag Nr. 92
- Autor:
- codingFreak am 19. Mai 2014 um 13:08
- Category:
- CSS
« Werbung im WordPress Artikel automatisch einblenden - Eigenes WordPress Theme erstellen – Tutorial – Teil 1 »
