Bert Bos,
Style Activity LeiterCopyright © 1994–2021 W3C® Privacy policy
Dies ist eine Übersetzung. Es ist möglich, daß sie Fehler enthält oder veraltet ist im Vergleich zur englischen Version. Übersetzer: Axel Friedrich ( BBTec GmbH )
Die CSS Level 2 Spezifikation und die verschiedenen Module des CSS Level 3 besitzen ein spezielles Mark-up, welches über HTML hinausgeht. Dieses Mark-up erlaubt es verschiedene Arten von Informationen (Namen von Eigenschaften, informative Notizen, Beispiele, etc.) entsprechend zu gestalten, aber darüber hinausgehend erlaubt es verschiedenen automatischen Werkzeugen die Spezifikation zu lesen. Diese Werkzeuge können einen Index aller Eigenschaften anlegen, maschinen-lesbare Grammatik extrahieren, Beispiele überprüfen, etc. Die folgenden Abschnitte beschreiben diese genauer.
Das Mark-up von CSS2 und CSS3 ist nicht gleich. Das CSS3 Mark-up ist einige Jahre neuer und ist eine Weiterentwicklung des CSS2 Mark-up. Es ist sowohl kompakter als auch umfangreicher in der Semantik.
Das Mark-up in den veröffentlichten Texten der CSS ist ebenfalls nicht genau dasselbe wie das Mark-up, das Autoren nutzen wenn sie Text schreiben. Letzteres enthält Abkürzungen, welche automatisch ausgeschrieben werden bevor das Dokument veröffentlicht wird. Zum Beispiel erzeugen Autoren fast nie Verweise. Stattdessen fügen sie ein Schlagwort oder einen speziellen Buchstaben ein, der die Bedeutung eines Wortes anzeigt (Name einer Eigenschaft, technischer Begriff, bibliographische Referenz, etc.) und jedes dieser Wörter wird automatisch mit seiner Definition verbunden.
Weniger zu schreiben bedeutet weniger Fehler zu machen und dafür mehr Zeit zu haben um sich auf den Inhalt zu konzentrieren. Und da der Computer die Verweise und die meisten anderen Mark-ups erstellt, ist das erstellte Dokument in sich konsistent. Das Dokument, an welchem die Autoren arbeiten, bleibt dabei ein vollständiges HTML Dokument, welches editiert und mit jedem beliebigen HTML Anzeigeprogramm betrachtet werden kann. Es hat lediglich weniger Verweise und weniger Farben als das endgültige Dokument.
Derart konsistente Dokumente haben verschiedene Vorteile. Zum Beispiel werden das Inhaltsverzeichnis, der Index und die Liste der Eigenschaften alle automatisch generiert. Ebenso können verschiedene automatische Überprüfungen vor Veröffentlichung des Dokumentes ausgeführt werden, z.B.: sind alle Eigenschaften, welche im Text vorkommen, auch definiert? sind die Grammatiken komplett? sind alle Beispiele gültig? sind alle bibliographischen Verweise definiert?
Die Art, in welcher Autoren CSS3 Module schreiben, ist nicht immer die Art wie die Dokumente aussehen nach dem sie veröffentlicht wurden. Das Mark-up, welches die Autoren verwenden, ist vorhanden, obwohl die Leser es niemals sehen.
Zwei wichtige Merkmale diese Mark-ups (und der Anwendungen, welche es benutzen) sind:
Properties sind einzelne Worte eingeschlossen in einfachen Anführungszeichen, z.B.
'font' 'text-indent'
Und das ist schon alles was der Autor einzutippen hat. Diese zitierten Worte werden automatisch in ein <a> Element der class “property” eingefasst, welche auf die Definition der Property verweist:
<a class=property href="#font0">'font'</a> <a class=property href="#text-indent">'text-indent'</a>
Alle Vorkommen von Property Namen werden wie dargestellt aufbereitet, außer wenn sie in einem Beispiel oder in CSS Code vorkommen. Die Definition der Property wird ebenfalls nicht in einfache Anführungszeichen eingeschlossen.
Eingebettetes CSS wird auch in einfache Anführungszeichen eingeschlossen oder aber in zwei Paaren von einfachen Anführungszeichen, z.B.:
'color: blue' ''display: none''
Der Autor muss nur die Anführungszeichen eintippen und der Text wird während der Veröffentlichung automatisch in ein <span> Element mit der class “css” eingebettet. Wenn zwei Paare von Anführungszeichen benutzt wurden, wird automatisch ein Paar entfernt:
<span class=css>'color: blue'</span> <span class=css>'display: none'</span>
CSS Schlüsselworte (im Gegensatz zu Property Namen) müssen vom Autor mit zwei Paaren einfacher Anführungszeichen eingegeben werden um sie von Properties unterscheiden zu können:
''none''
Daraus ergibt sich im veröffentlichten Dokument ein Wort mit einfachen Anführungszeichen und einem <span> Element wie oben:
<span class=css>'none'</span>
Typen für Werte sind in eckigen Klammern in einem <var> Element eingeschlossen, z.B.:
<var><integer></var> <var><color></var> <var><percentage></var>
[Das Mark-up der Definitionen dieser Typen wurde bisher noch nicht festgelegt.]
Die definierende Instanz eines Terminus wird in einem <dfn> Element eingeschlossen (womit es ebenfalls in einem alphabetischen Index vorkommen wird):
<dfn>dog</dfn>
Um sich auf die Definition zu beziehen muss der Autor nur die Verwendung in einem eingebetteten Element einschließen (<em>, <span>, etc.) und die Verwendung wird automatisch in ein <a> Element eingebettet, welches auf die definierende Instanz verweist.
Wenn Verwendung und Definition nicht wortwörtlich dasselbe sind, dann kann das title Attribut verwendet werden um den genauen Terminus anzugeben:
<dfn title="dog">dogs</dfn> <em>dog</em> <span title="dog">dog</span>
Das Ergebnis sieht dann so aus:
<dfn id=dogs0 title="dog">dogs</dfn> <em><a href="#gogs0">dog</a></em> <span title="dog"><a href="#dogs0">dog</a></span>
Property Definitionen bestehen aus einer Tabelle wie der folgenden:
| Name: | padding |
|---|---|
| Value: | [ <length> | <percentage> ]{1,4} |
| Initial: | (see individual properties) |
| Applies to: | all elements |
| Inherited: | no |
| Animatable: | yes |
| Percentages: | width* of containing block |
| Media: | visual |
| Computed value: | see individual properties |
| Canonical order: | N/A |
| *) if the containing block is horizontal, otherwise the height | |
Welche wie folgt erstellt wird:
<table class=propdef>
<tr>
<th>Name:
<td><dfn>padding</dfn>
<tr>
<th>Value:
<td>[ <var><length></var>
| <var><percentage></var> ]{1,4}
<tr>
<th>Initial:
<td>(see individual properties)
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Animatable:
<td>yes
<tr>
<th>Percentages:
<td>width* of containing block
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>see individual properties
<tr>
<th>Canonical order:
<td>N/A
<tr>
<td colspan=2 class=footnote>*) if the
containing block is horizontal, otherwise
the height
</table>
Die Tabelle besitzt eine class “propdef” und den Namen der Property, deren Definition in eingeschlossenen <dfn> steht (nicht jedoch in einfachen Anführungszeichen). Wenn das Dokument veröffentlicht wird, wird in der Regel automatisch eine ID zu dem <dfn> Element hinzugefügt und der Name der Property wird zum alphabetischen Index und dem Index für Properties hinzugefügt.
Die Definition von Deskriptoren (Eigenschaften von Schriftarten, in einer @font-face Regel) sind ähnlich. Sie sehen so aus:
| Name: | x-height |
| Value: | <number> |
| Initial: | undefined |
| Media: | visual |
Die Tabelle enthält eine class “descdef” und sieht so aus:
<table class="descdef"> <tr><td>Name: <td><dfn>x-height</dfn> <tr><td>Value: <td><number> <tr><td>Initial: <td>undefined <tr><td>Media: <td>visual </table>
Es gibt zwei Arten von bibliographischen Referenzen: normative und informative. Der Autor schreibt Erstere als
[[!CSS3BOX]] [[!UNICODE4]]
wobei “CSS3BOX” und “UNICODE4” die Bezeichner für Einträge sind, welche in einer externen refer(1) Datenbank definiert sind. Informative Referenzen werden ebenso angegeben, jedoch mit einem Ausrufezeichen:
[[SELECT]] [[MEDIAQ]]
Es ist auch möglich bibliographische Eintrage ohne die Angabe von korrespondierenden eckigen Klammern [[…]] im Text zu machen, dabei wird der Bezeichner in geschweifte Klammern {{…}} in einem Kommentar gesetzt:
<!-- {{CSS3BG}} -->
Im veröffentlichten Dokument werden [[…]] Referenzen wie folgt zu Referenzen zum Literaturverzeichnis erweitert:
<a href="#CSS3BOX"
rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a>
<a href="#UNICODE4"
rel=biblioentry>[UNICODE4]<!--{{UNICODE4}}--></a>
<a href="#SELECT"
rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>
<a href="#MEDIAQ"
rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>
Der Grund, warum der Kommentar mit eingebunden wird, ist, dass er es erlaubt das endgültige Dokument zu editieren ohne, dass das <a> Element entfernt werden muss, und ohne dass das Literaturverzeichnis neu generiert werden muss, trotz Fehlens der doppelten eckigen Klammern. (Theoretisch werden veröffentlichte Spezifikationen nie wieder geändert, nur sind Praxis und Theorie nicht immer dasselbe…)
Die Bibliographie wird automatisch aus den bibliographischen Referenzen und den Daten der externen bibliographischen Datenbank generiert. Das Ergebnis wird anstelle der folgenden zwei Kommentare im Source Code eingefügt:
<!--normative--> <!--informative-->
Der erste Kommentar ist für die Liste der normativen Referenzen und der letzte Kommentar ist für die Liste der informativen Referenzen. Im veröffentlichten Dokument sieht das dann so aus:
<!--begin-normative-->
<!-- Sorted by label -->
<dl class=bibliography>
<dt style="display: none">
<!-- keeps the doc valid if the DL is empty -->
<!---->
<dt id=CSS3LINE>[CSS3LINE]
<dd>Michel Suignard; Eric A. Meyer. <cite>CSS3
module: line.</cite> 15 May 2002. W3C Working
Draft. (Work in progress.) URL: <a
href=".../WD-css3-linebox-20020515">
.../WD-css3-linebox-20020515</a>
</dd>
<!---->
<dt id=CSS3SYN>[CSS3SYN]
<dd>L. David Baron. <cite>CSS3 module:
Syntax.</cite> 13 August 2003. W3C
Working Draft. (Work in progress.) URL: <a
href=".../WD-css3-syntax-20030813">
.../WD-css3-syntax-20030813</a>
</dd>
<!---->
</dl>
<!--end-normative-->
Das einfachste Mark-up, welches ein Wort oder einen Satzteil in den alphabetischen Index einfügt ist ein <span> Element mit der class “index”:
<span class=index>containing block</span>
Soll der Terminus im Index anders dargestellt werden als im Text, wird das title Attribut genutzt um den Text für den Index anzugeben:
<span class=index title="box">boxes</span> <span class=index title="inherited value">inherit a value</span>
Soll der Terminus im Index unter zwei verschiedenen Einträgen erscheinen, so werden die verschiedenen Einträge im title Attribut getrennt durch senkrechte Striche angegeben:
<span class=index title="outer edge|margin edge"> outer (margin) edge</span>
Soll der Terminus als Untereintrag eines anderen Terminus erscheinen, gibt man im title Attribut den Haupt- und Untereintrag, getrennt durch Ausrufezeichen, an:
<span class=index title="edge!!outer"> outer edge</span> <span class=index title="edge!!inner"> inner edge</span>
Natürlich können Untereinträge und Mehrfacheinträge kombiniert werden:
<span class=index title="edge!!outer|edge!!margin"> outer edge</span>
Bei dem Vorkommen des Terminus, welches die Definition des Terminus sein soll, wird das <dfn> Element anstelle des <span> Elementes verwendet und die class weggelassen:
<dfn>padding</dfn>
Das title Attribut kann für ein <dfn> Element genauso angegeben werden wie für ein <span> Element.
Alle Index Termini erhalten automatisch ein ID Attribut.
Der alphabetische Index, welcher aus den Index Termini generiert wird, wird automatisch anstelle des folgenden Kommentars eingesetzt:
<!--index-->
Das Ergebnis, nach Ersetzung, sieht so aus:
<!--begin-index--> <ul class=indexlist> <li>anonymous, <a href="#anonymous0"><strong>#</strong></a> <li>'writing-mode', <a href="#writing-mode"><strong>#</strong></a> </ul> <!--end-index-->
Beispiele werden durch die class “example” gekennzeichnet und können entweder <div> oder <pre> Elemente sein. Ersteres wird verwendet wenn das Beispiel erklärenden Text oder Bilder enthält, Letzteres wenn es nur ein Code Beispiel ist:
<div class=example> ... </div> <pre class=example> ... </pre>
Bilder haben normalerweise eine Bildunterschrift. Das Bild und die Unterschrift werden in einem <div> Element mit der class “figure” wie folgt eingeschlossen:
<div class="figure"> <p><img src="box.png" alt="Boxes have four sides [schema]"> <p class=caption>Relation between four… </div>
Die class “note” kennzeichnet eine nicht-normative Notiz. Sie wird typischerweise für <p>, <div> oder <span> Elemente verwendet.
<p class=note>Note that the…
Nummern von Abschnitten werden gewöhnlich automatisch hinzugefügt. Sie sind in ein <span> Element der class “secno” eingeschlossen und sehen wie folgt aus:
<span class=secno>1. </span>
Unterabschnitte werden mit 1.1., 1.1.1, usw. nummeriert.
Ein CSS3 Modul hat lediglich ein <h1> Element, welches dasselbe wie ein <title> Element ist (mit Ausnahme von Satzzeichen und Abkürzungen).
Das Inhaltsverzeichnis wird automatisch generiert und anstellte des folgenden Kommentars eingefügt:
<!--toc-->
Das Ergebnis sieht so aus:
<!--begin-toc--> <ul class=toc> <li><a href="#dependencies"><span class=secno>1. </span>Dependencies on other modules</a> <li><a href="#introduction"><span class=secno>2. </span>Introduction</a> </ul> <!--end-toc-->
[To do]
Die CSS WG verwendet eine Vielzahl privater Anwendungen um Spezifikationen mit den oben beschrieben Mark-ups zu verarbeiten, zu testen und anderweitig zu nutzen. Einige Anwendungen sind CGI Skripte, manche sind Perl Programme oder sed Skripte. Am Häufigsten wird jedoch eine Kombination aus den C Anwendungen in den HTML-XML utilities für die Verarbeitung genutzt.
Bert Bos,
Style Activity Leiter