Artikel-Schlagworte: „safari“

CSS mit Particular Attributes (Elemente mit “besonderer” Eigenschaft)

Freitag, 6. Juni 2008

Was 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.

  1. <!– Beispiel - der Link, der das Attribute href enthält bekommt einen grünen Rahmen –>
  2. <style>
  3.   #test1 a{border:1px solid red;padding:5px}
  4.   #test1 a[href]{border:1px solid green}
  5. </style>
  6. <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>
  7. <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.

  1. <!– Beispiel - der Link, der als href genau den Wert "http://www.pyades.com" hat, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test2 a{border:1px solid red;padding:5px}
  4.   #test2 a[href="http://www.pyades.com"]{border:1px solid green}
  5. </style>
  6. <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.

  1. <!– Beispiel - der Link, der als href mit dem Wert "http://" beginnt, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test3 a{border:1px solid red;padding:5px}
  4.   #test3 a[href^="http://"]{border:1px solid green}
  5. </style>
  6. <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.

  1. <!– Beispiel - der Link, der als href mit dem Wert ".com" endet, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test4 a{border:1px solid red;padding:5px}
  4.   #test4 a[href$=".com"]{border:1px solid green}
  5. </style>
  6. <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.

  1. <!– Beispiel - der Link, der als href den Wert "pyades" enthält, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test5 a{border:1px solid red;padding:5px}
  4.   #test5 a[href*="pyades"]{border:1px solid green}
  5. </style>
  6. <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.

  1. <style>
  2.   #test6 a[href^="http://"]{background:url(/examples/offsite.gif) no-repeat scroll right center;padding-right:8px;}
  3.   #test6 a[href^="http://www.pyades.com"]{background:transparent;padding-right:0px;}
  4. </style>
  5. <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
Römerstr. 4 L
55232 Alzey

Tel: +49 (0) 67 31.998 78 66
Mob: +49 (0) 163.680 35 64
Fax: +49 (0) 67 31.998 78 67

Webseite: www.pyades.com

Amtsgericht: Mainz HRB 41299
Geschäftsführer: Florian Becker

Schlagworte:, , , , , , , , , , , , , , , , ,
Veröffentlicht in css, html | Keine Kommentare »