CSS mit Particular Attributes (Elemente mit “besonderer” Eigenschaft)
Freitag, 6. Juni 2008Was sind eigentlich Particular Attributes? Darunter versteht man Attribute in einer Webseite, die spezielle Werte aufweist. Es ist eine unbekanntere Form bei der CSS-Formatierung, da wesentliche Bestandteile auch erst mit CSS 3 vollständig unterstützt werden. Die nahmhaften Browser ab Internet Explorer 7, sowie Firefox, Opera und Safari beherrschen diese Funktion allerdings schon vollständig.
Folgende Formen der Particular Attributes gibt es:
1. Attribute mit Wert
Element[Attribute]
Das Element enthält ein Attribute mit einem Wert.
-
<!– Beispiel - der Link, der das Attribute href enthält bekommt einen grünen Rahmen –>
-
<style>
-
#test1 a{border:1px solid red;padding:5px}
-
#test1 a[href]{border:1px solid green}
-
</style>
-
<div id="test1"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS ebenfalls zutreffend)</a></div>
-
<a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt">Pyades</a>
2. Attribute mit bestimmten Wert
Element[Attribute="Wert"]
Das Element enthält ein Attribute mit einem bestimmten Wert.
-
<!– Beispiel - der Link, der als href genau den Wert "http://www.pyades.com" hat, erhält einen grünen Rahmen –>
-
<style>
-
#test2 a{border:1px solid red;padding:5px}
-
#test2 a[href="http://www.pyades.com"]{border:1px solid green}
-
</style>
-
<div id="test2"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS greift nicht)</a></div>
3. Attribute beginnt mit einem bestimmten Wert
Element[Attribute^="Wert"]
Das Element enthält ein Attribute, welches mit einem bestimmten Wert beginnt.
-
<!– Beispiel - der Link, der als href mit dem Wert "http://" beginnt, erhält einen grünen Rahmen –>
-
<style>
-
#test3 a{border:1px solid red;padding:5px}
-
#test3 a[href^="http://"]{border:1px solid green}
-
</style>
-
<div id="test3"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS ebenfalls zutreffend)</a></div>
4. Attribute endet mit einem bestimmten Wert
Element[Attribute$="Wert"]
Das Element enthält ein Attribute, welches mit einem bestimmten Wert endet.
-
<!– Beispiel - der Link, der als href mit dem Wert ".com" endet, erhält einen grünen Rahmen –>
-
<style>
-
#test4 a{border:1px solid red;padding:5px}
-
#test4 a[href$=".com"]{border:1px solid green}
-
</style>
-
<div id="test4"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS ebenfalls zutreffend)</a></div>
5. Attribute enthält einen bestimmten Wert
Element[Attribute*="Wert"]
Das Element enthält ein Attribute, welches einem bestimmten Wert enthält.
-
<!– Beispiel - der Link, der als href den Wert "pyades" enthält, erhält einen grünen Rahmen –>
-
<style>
-
#test5 a{border:1px solid red;padding:5px}
-
#test5 a[href*="pyades"]{border:1px solid green}
-
</style>
-
<div id="test5"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank" >Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS greift nicht)</a></div>
6. Sonstige Attribute
Es gibt noch zwei weitere Particular Attributes, auf die ich allerdings nur am Rande eingehen möchte:
~= ist ein Wert, aus einer durch Leerzeichen getrennte Liste: “Wert1 Wert2 Wert3″ und
|= ist ein Wert, aus einer durch | getrennten Liste: “Wert1|Wert2|Wert3″
7. Bekannteste Anwendung
Die bekannteste Anwendung ist die Kennzeichnung von externen Links.
-
<style>
-
#test6 a[href^="http://"]{background:url(/examples/offsite.gif) no-repeat scroll right center;padding-right:8px;}
-
#test6 a[href^="http://www.pyades.com"]{background:transparent;padding-right:0px;}
-
</style>
-
<div id="test6"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (interner Link)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (externer Link)</a></div>
Seiten, wie Wikipedia oder Dr. Web nutzen diese Technik bereits seit einiger Zeit.
Vielleicht darf ich Sie einmal bei einer innovativen Webentwicklung oder besonderem Webdesign helfen? Wenn Sie weitere Fragen haben, würde ich mich über Ihren Anruf freuen. Sie erreichen mich natürlich auch per eMail. Ich nehme mir sehr gerne ein wenig Zeit für Ihre Fragen.
Florian Becker
–
Pyades Technologies GmbH
Klosterstr. 3
55232 Alzey
Tel: +49 (0) 67 31.494 878 00
Mob: +49 (0) 163.680 35 64
Fax: +49 (0) 67 31.494 878 01
Webseite: www.pyades.com
Amtsgericht: Mainz HRB 41299
Geschäftsführer: Florian Becker
