Daten und Semantik ins css

Die Möglichkeiten css sind riesen groß und ermöglichen es strukturierte Daten darzustellen. Allerdings nur wen man diese sich auch identifizieren und damit ansteuern lassen. Entweder nativ kaskadierend oder, wenn das nicht möglich ist oder man zu faul, per Selektoren ('class' oder 'id) oder Attribute ('title'). {DIV(align=>left, width=>25%, float=>right, class="umijabox")}{DIV}

Die zu verändernden Elemente müssen aber auch definiert sein. Vor allem in fertigen ContentManagementSystemen ist es aber oft von erheblichen Programmieraufwand diese auch zu deklarieren. Außerdem erhöht sich der code-overhead.

Definiert man nun das grundsätzliche Element body mit einer identifizierenden Klasse oder ID der aktuellen Seite, kann fast jeder Inhalt auf einer Seite kaskadierend von dieser aus angesteuert werde. So kann die Struktur dem Inhalt folgen. {CODE(colors=HTML)}<body class="ns_de page_impressum" >...{CODE}

Bei links würde es sich anbieten das Ziel anzugeben, diese sind aber schon standardmäßig ansteuerbar.

Struktur

Prinzipiell kann man jede logischen metainformation ins css bringen: * die ID (auch autolemma) * Seitentitel * Namensraum oder hierarchische Untergruppen * Selbst primitive ContentManagemnetSysteme haben die Möglichkeit den Inhalt in Kategorien einzuteilen. Diese Kategorisierung kann nicht nur als lesebaren Text dargestellt werden, sondern ins css übergeben werden.
* Zwar ist es unüblich eine Website unter mehreren domains Servernamen zu betreiben, aber Lösungen für Whitelabels, unterschiedliche Organisationsteile kann diese Anwendung sinnvoll machen. Hier sollte auch das css ganz anderes reagieren können.

Anwendung

  • unterschiedliche Hintergrundbilder je Seite oder Namensraum
  • Darstellung
  • komplette Whitelabellösungen auf ein und der selben Seite
  • kleine Sprachswitche

aktuelle Seite

Mit css selbst kann man link auf die aktuell angezeigte Seite nicht greifen, da das css ja gar nicht weiss auf welcher Seite man ist. Allerdings wird dies immer gefordert, da es in der Navigation unheimlich hilft wenn man weiss wo man gerade ist (Das Pseudoformate active wirkt nur während des klicks.)

Jetzt kann man mit data2css alle Seiten mit einem eben auf den eigene Titel referenzierenden Selektor (''body.HIER ahead stylesheets eintragen. Oder hier sinnvoll mit [http://de.selfhtml.org/html/transit/stylesheets.htm).

{CODE(colors=HTML)}<style>body.<?php echo $title ; ?> … a[title="<?php echo $title; ?>"] { color: red; }</style>{CODE}

Gegebenenfalls: * einzelne Menüzonen extra ansprechen. * '.html' hinten anfügen oder etc. * je nach CMS: str_replace (':' , ' ' , $ID)

Praktische Anwendung

  • Tools wie ticketsysteme können dabei jedem Projekt, Priorität oder Arbeitsbereich eine eigenes Aussehen geben. Alle mit 'Prio:Sauwichtig' kann so einfach rot werden. Der Rest babyblau. Alles was man im Garten erledeigen sollte grün, alles was ind erWerkstatt blau, so sieht man gleich wo ein Ticket hingehört

Konflikte

Performance

Wirklich performant ist das natürlich nicht. Den der Browser liest css von rechts nach links und muss bei der Angabe <code>body.page-mein_haus a</code> alle links (<code>a</code>) bis zum body hoch gehen und testen ob diese in auf der Seite 'mein Haus' liegen.

Natürlich ist es sinnvoll bestehden tiefer liegende classes und ids zu nutzen, wenn vorhanden...

Prefix

Bei fertigen CMS sind oft viele class-names vordefiniert, ist der Seitentitel oder der Namensraum gleich benannt, kollidieren diese. Vordefiniert sind oft 'generische' classen wie .mail, .extern , .content, .main ect

Hier helfen Prefixe vor den neuen namen (z.B. ns_, page_, d2c_, etc).

Implementierung

Ein Einbau ist meist recht einfach auch mit rudimentären Programmierkenntnissen als kleinen fix möglich. Allerdings sind native Lösungen vorzuziehen.

Das bodytag ist, da es immer gebraucht wird, meistens in einer zentralen Datei des benutzten templates eingebaut. Dort kann man eine existierenden variable welche den Titel, Namensraum etc beinhaltet als class in den bodytag schreiben. Sonder- und Leerzeichen müssen aber entfernt werden. Je nach Variable mit einem ''string replace'' oder encoding css konform angepasst werden.

Alternative JS

Kommt man gar nicht an das body tag ran, kann man den titel auch aus der location.pathname bekommen. (leider gibt es kein location.file), aber mit etwas regexp geht das

<code> window.location.pathname.split('/').pop() // filename.php window.location.pathname.split('/').pop().split('.')[0] // filename </code>

Ähnliches