In der Vergangenheit bin ich schon des öfteren über CSS-Stylesheets gestolpert, die den Befehl
border-left-color-ltr-source: physical;
beinhalteten, ohne dass ich diesem Befehl konkret eine Notwendigkeit zuordnen konnte.
Heute habe ich mir einmal die Zeit genommen, dem ganzen etwas nachzugehen.
Erkenntnis 1:
Ich hatte angenommen, dass die Befehle aus Browserkompatibilitätsgründen aufgenommen wurden. Nach einer CSS-Recherche stellte sich allerdings heraus, dass alle …ltr-source… und …rtl-source… Befehle vielmehr dazu dienen, die HTML-Darstellung für die verschiedenen Kulturkreise zu steuern, sprich Schreibweise von links nach rechts, bzw. rechts nach links.
Erkenntnis 2:
Die zweite Erkenntnis ist ein wahrer Hammer:
Die CSS-Stylesheet Anzeige in der Firefox Developer Toolbar zeigt einem NICHT den eigentlichen CSS-Sourcecode an!
Die Developerbar im Firefox bietet viele Möglichkeiten den Ausgabecode einer HTML-Seite zu untersuchen. Eine Möglichkeit davon (sehr nützlich) ist der Menüpunkt “CSS-Stylesheets”. Aber, das was man nach dem Auswählen des Menüpunktes “CSS-Stylesheets” in der Firefox Devoloper Toolbar anzeigt bekommt, ist NICHT die vom Webdesigner hinterlegte Stylesheetanweisung!
In der folgenden Tabelle steht links der CSS-Originalcode und rechts, der von der Firefox Developer Toolbar angezeigten Code:
| Sourcecode der CSS-Datei | Firefox Developer Toolbar |
|---|---|
| .content h2 { color: yellow; border-color: blue; } |
.content h2 { color: yellow; border-top-color: blue; border-right-color-value: blue; border-bottom-color: blue; border-left-color-value: blue; border-left-color-ltr-source: physical; border-left-color-rtl-source: physical; border-right-color-ltr-source: physical; } |
Wie man sieht, wird der CSS-Code vollkommen aufgebläht dargestellt.
Also Vorsicht: Das Firefox-Developer-Tool zeigt dem Entwickler nicht den eigentlichen Sourcecode!
Da man nicht abschätzen kann, bei welchen Gelegenheiten sonst noch der CSS-Sourcecode verändert wird, kann dies nur bedeuten, dass man in Zukunft bei einem Verdacht der Codeveränderung, es sich durchaus lohnt, sich den CSS-Quellcode anzuschauen.
Nachtrag
Weiteres Beispiel:
| CSS-Source | Firefox Developer Toolbar |
|---|---|
| .anweisung { border-bottom-width: 1px; } |
.anweisung{ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: -moz-use-text-color; } |
Aufruf
Wenn jemand weitere CSS-Befehlen kennt, die durch das Firefox Developer Tool verändert werden, dann bitte ich, diese Beobachtung als Kommentar zu hinterlassen.
Tags: CSS
