emailconfirmed, nsInternRO, nsInternRW, Administrators
3,356
edits
(added advanced section) |
|||
Line 178: | Line 178: | ||
** rgba(0, 1.0 , 0 , 0.75) | ** rgba(0, 1.0 , 0 , 0.75) | ||
== Advanced CSS | == Advanced CSS == | ||
=== Attribut-Selektoren === | === Attribut-Selektoren === | ||
Line 205: | Line 205: | ||
More informations here: [http://www.intensivstation.ch/css/selectors/attribute-selectors/ intensivstation.ch] | More informations here: [http://www.intensivstation.ch/css/selectors/attribute-selectors/ intensivstation.ch] | ||
=== | === Browser- & Konfigurationsweichen mit CSS === | ||
Einige Beispiele, wie man unterschiedliche Geräte mit CSS erkennen kann. | Einige Beispiele, wie man unterschiedliche Geräte mit der @media Direktive per CSS erkennen kann. | ||
<source="CSS"> | <source lang="CSS"> | ||
/* | @media only screen and (max-device-width: 480px) { ... } /* official iPhones media query! */ | ||
@media | @media screen and (min-width:400px) and (max-width:800px) { ... } | ||
@media all and (orientation:portrait) { ... } | |||
} | @media handheld and (orientation:landscape) { ... } | ||
@media screen and (min-resolution: 300dpi) or (min-resolution: 118dpcm) { ... } | |||
@media tv and (scan: progressive) { ... } | |||
</source> | </source> | ||
Line 218: | Line 219: | ||
Weitere Browserweichen für CSS, Javascript und Herstellerabhängige Varianten findet man z.B. hier: | Weitere Browserweichen für CSS, Javascript und Herstellerabhängige Varianten findet man z.B. hier: | ||
* [http://www.w3.org/TR/css3-mediaqueries/#media1 w3.org Media Queries Overview] | |||
* [http://www.css4you.de/wsbw/index.html css4you Browserweichen] | * [http://www.css4you.de/wsbw/index.html css4you Browserweichen] | ||
Line 224: | Line 226: | ||
Es gibt eine große Menge an CSS Hacks, die alle vornehmlich dem Ziel dienen, bestimmte Unzulänglichkeiten von Browsern auszugleichen, ohne ein Extra Stylesheet für jeden Browser anlegen zu müssen. | Es gibt eine große Menge an CSS Hacks, die alle vornehmlich dem Ziel dienen, bestimmte Unzulänglichkeiten von Browsern auszugleichen, ohne ein Extra Stylesheet für jeden Browser anlegen zu müssen. | ||
Ein klassischer Hack ist zum Beispiel die Verwendung von <tt>!important</tt>. Jeder Browser außer dem IE beachtet die !important Auszeichnung und überschreibt vorangegangene Anweisungen: | |||
<source lang="CSS"> | |||
color="red" !important; | |||
color="green"; | |||
</source> | |||
Überlicherweise werden vorangehende Anweisungen von nachfolgenden überschrieben. D.h. wäre im Beispiel oben das <tt>!important</tt> nicht vorhanden, würde die Farbe zuerst auf Rot gesetzt und dann in der nächsten Zeile vom Wert Grün überschrieben. Damit wäre die Farbe also Grün. Die Anweisung <tt>!important</tt> in der ersten Zeile verursacht nun, dass sich diese Anweisung nicht mehr überschreiben lässt (also auch nicht mehr von Subklassen, es sei denn, auch hier findet sich die Anweisung <tt>!important</tt>)! | |||
Der Hack liegt nun darin, dass <tt>!important</tt> vom Internet-Explorer nicht beachtet wird, deshalb gilt: | |||
* IE: Element ist Grün | |||
* Alle anderen Browser: Element ist Rot | |||
Viele weitere Hacks sind u.a. hier zu finden: | |||
* [http://de.selfhtml.org/css/layouts/browserweichen.htm SELFHTML: CSS-Browserweichen und HTML-Hacks] | |||
* [http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html Umfassende Übersicht welche Browser welche CSS-Eigenschaften interpretieren] | |||
* [http://www.evolt.org/ten-css-tricks-you-may-not-know 10 CSS Tricks you may not know] | |||
== Editieren von Stylesheets == | == Editieren von Stylesheets == |