http://www.highresolution.info/weblog/entry/ein_paar_hinweise_zu_den_regeln_von_css/ Dieser Beitrag ist meinem Freund und Kollegen Ansgar&nbsp; gewidmet. #1 @charset Über die @charset Regel kann optional die Kodierung einer CSS-Datei angegeben werden. Zur Auswahl stehen hier zahlreiche ISO-Kodierungen (z.B. ISO-8859-1), wie auch Unicode-Kodierungen (z.B. UTF-8). Bei der Anwendung gibt es jedoch zwei wichtige Regeln zu beachten: @charset muss immer in der ersten Zeile eines Stylesheets stehen, andernfalls ignorieren Browser wie der Safari den kompletten Inhalt der Datei.Es darf immer nur eine @charset Regel in einer Datei stehen. Andernfalls ignorieren einige Browser alle CSS-Regeln ab dem zweiten Auftreten von @charset. Der zweite Punkt ist besonders wichtig, wenn verschiedene Stylesheets optimiert und zu einer Datei zusammengefasst werden sollen. Die wenigsten CSS-Optimierer beachten die @charset Regel, wodurch diese plötzlich mehrfach vorkommt der Browser das Stylesheet ignoriert. #2 @import Über die @import Regel lassen sich externe Stylesheets in ein anderes Stylesheet. Auf diese Weise lassen sich CSS-Deklaration sauber nach Funktionen in verschiedene Dateien zerlegen und unabhängig pflegen. Auch bei der Verwendung von @import gibt es einige Punkte zu beachten. @import muss immer vor allen anderen Regeln stehen (ausgenommen @charset). Der Aufruf mehrerer @import-Regeln hintereinander ist möglich. Innerhalb einer @media-Regel ist @import nicht zulässig. Das wäre eine Verletzung von Regel 1, weshalb Firefox, Safari, Opera und alle anderen modernen Browser die @import-Regel in diesem Fall ignorieren. So verlockend die optionale Angabe des Ausgabemediums auch ist (z.B. @import (mein.css) screen,projection), der IE6 kommt mit den Ausgabemedien nicht klar und ignoriert das externe Stylesheet. Schade eigentlich, aber solange der IE6 in signifikanter Größenordnung genutzt wird, ist diese Option so gut wie unbrauchbar. Speziell Punkt 3 hat mich vor wenigen Tagen wieder zur Verzweiflung getrieben. Manchmal denke ich, das Internet käme schneller voran, wenn Microsoft den IE8 einstampfen würde und stattdessen damit beginnen würde, das Verständnis für CSS2(.1) des IE6 auf ein annehmbares Niveau zu patchen. Denn dieser Browser klebt der Welt wie Sch**** am Schuh und will einfach nicht verschwinden und so wie Vista nicht XP verdrängt, wird es der IE8 vermutlich auch den IE6+7 nicht endgültig zur Strecke bringen. #3 @media Zum Abschluss noch ein paar Worte zur @media Regel, über welche der Wirkungsbereich von CSS-Deklarationen auf vordefinierte Medientypen beschränkt werden kann. Einer der häufigsten Fehler in der Anwendung dieser Regel ist, dass die schließende geschweifte Klammer vergessen wird, denn die CSS-Eigenschaften jedes Selektors werden ebenso in geschweiften Klammern zusammengefasst. Im ungünstigsten Fall ignorieren Browser wie der Firefox daraufhin den kompletten Inhalt der Regel.Vertrauen Sie nicht dem Medientyp handheld. Zwar wurde es speziell für mobile Geräte in den Standard CSS Mobile Profile 1.0 aufgenommen, doch bis heute wird er von kaum einem Gerät unterstützt. Auch für die Ausgabe auf Mobilgeräten kommt in der Regel der Medientyp screen zum Einsatz.&nbsp; Das war’s. Ich mach dann mal Feierabend. de-de Dirk Copyright 2008 2008-04-30T;20:01:01+00:00 http://www.highresolution.info/weblog/entry/ein_paar_hinweise_zu_den_regeln_von_css/ Mein erster gewidmeter Blog-Eintrag und dann noch ein derart wichtiger - zumindest für meine Spar-Sucht bei CSS wichtig. In der Praxis ist mir kürzlich noch ein weiteres Phänomen in Bezug auf @import und @media aufgefallen: Scheinbar gibt es, abhängig vom Webserver, durchaus Probleme mit dem Einbinden von mehreren Styles über @import / @media. Dann hilft nur noch das separate Einbinden via &lt; link &gt; im head-Bereich. Allerdings konnte ich bisher noch nicht herausfinden, wo der Fehler genau liegt. Mein erster gewidmeter Blog-Eintrag und dann noch ein derart wichtiger - zumindest für meine Spar-Sucht bei CSS wichtig. In der Praxis ist mir kürzlich noch ein weiteres Phänomen in Bezug auf @import und @media aufgefallen: Scheinbar gibt es, abhängig vom Webserver, durchaus Probleme mit dem Einbinden von mehreren Styles über @import / @media. Dann hilft nur noch das separate Einbinden via < link > im head-Bereich. Allerdings konnte ich bisher noch nicht herausfinden, wo der Fehler genau liegt.

]]> 2012-01-18T;11:39:34+00:00 http://www.highresolution.info/weblog/entry/ein_paar_hinweise_zu_den_regeln_von_css/ @Ingo: thx, wertvolle Ergänzung @Ingo: thx, wertvolle Ergänzung

]]> 2012-01-18T;11:39:34+00:00 http://www.highresolution.info/weblog/entry/ein_paar_hinweise_zu_den_regeln_von_css/ Zu @charset Punkt 1 noch eine kleine Ergänzung. Auch ein Tabulator vor dem @charset wirkt als unfreiwillige Browserweiche in Bezug auf Safari. Zu @charset Punkt 1 noch eine kleine Ergänzung. Auch ein Tabulator vor dem @charset wirkt als unfreiwillige Browserweiche in Bezug auf Safari.

]]> 2012-01-18T;11:39:34+00:00