HTML5-Handbuch - die neuen Features von HTML5

Abfrage von dpi-Werten des Ausgabegeräts in einer Form wie
(min-resolution: 300dpi)
,
•   
scan
zur Abfrage, ob TV-orientierte Geräte progressiv oder interlaced arbeiten,
•   
grid
zur Abfrage, ob ein Ausgabegerät nicht-grafisch ist, also etwa ältere Computerterminals oder Mobiltelefone mit textbasiertem Display.
13.2.5    @page: Formate für Print-Layouts
    Die
@page
-Regel erlaubt das Definieren von Seitenformaten für Ausdrucke auf Papier. Verwendet werden dabei gewöhnliche CSS-Eigenschaften. Die Besonderheit besteht darin, dass die Formatdefinitionen sich nicht auf HTML-Elemente beziehen, sondern auf ein Blatt Papier.
Beispiel
    @page {
    size: 21cm 29.7cm;
    margin-top: 2cm;
    margin-bottom: 3cm;
    }
    @page :left {
    margin-left: 2cm;
    margin-right: 3cm;
    }
    @page :right {
    margin-left: 3cm;
    margin-right: 2cm;
    }
Erläuterung
    Die
@page
-Regel bildet ähnlich wie die
@media
-Regel einen Block, der durch geschweifte Klammern
{
und
}
markiert wird. Innerhalb davon können Sie Formate für die Seite definieren. Eine spezifische CSS-Eigenschaft dafür ist
size
( size = Größe). Entweder weisen Sie dieser Eigenschaft als Wert wie im Beispiel oben zwei Angaben zu, wobei die erste als Breite und die zweite als Höhe interpretiert wird. Oder Sie notieren eines der beiden Schlüsselwörter
portrait
(für Hochformat) oder
landscape
(für Querformat).
    Eine weitere Besonderheit ist die Möglichkeit, mittels
@page: left
und
@page: right
unterschiedliche Formate für linke und rechte Seiten zu definieren. Das ist dann von Bedeutung, wenn die Druckseiten zu einem Heft gebunden werden sollen. Im obigen Beispiel werden unterschiedliche Werte für
margin-left
(Rand links) und
margin-right
(Rand rechts) notiert, um so einen Heftrand für linke und rechte Seiten zu lassen.
13.2.6    
    h1 {
    font-family: Mido;
    font-size: 180%;
    }
    p {
    font-family: Liberation Sans, Arial, Helvetica, sans-serif;
    font-size: 90%;
    }
Erläuterung
    Die
    Dabei bestimmt der Selektor , für welche HTML-Elemente die Formatdefinitionen gelten, die innerhalb des Blocks notiert werden, der durch
{
und
}
markiert wird. Der Selektor kann der Name eines HTML-Elements sein. Dann gelten die Formatdefinitionen im Block für alle Elemente mit diesem Namen. Es gibt aber auch komplexere Selektoren, beispielsweise um nur Elemente in einer bestimmten Verschachtelungssituation oder Elemente mit bestimmten Klassennamen oder anderen Eigenschaften zu bestimmen. Auch das Adressieren einzelner Elemente, die ein
id
-Attribut haben, ist möglich.
13.2.8    Formate für HTML-Elemente
    In einem
style
-Bereich oder in einer externen CSS-Datei können Sie für alle HTML-Elemente eines bestimmten Namens, zum Beispiel für alle
h1
-Überschriften, alle
td
-Tabellenzellen oder alle
ul
-Listen, CSS-Formate definieren.
Beispiel
    body {
    background-color:#FFFFCC;
    margin-left:100px; }
    * {color:blue;}
    h1 {
    font-size:300%;
    color:#FF0000;
    font-style:italic;
    border-bottom:solid thin black;
    }
    p, li {
    font-size:110%;
    line-height:140%;
    font-family:Helvetica,Arial,sans-serif;
    letter-spacing:0.1em;
    word-spacing:0.3em;
    }
Erläuterung
    Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, notieren Sie als Selektor den Namen des HTML-Elementtyps, und zwar ohne spitze Klammern. Im obigen Beispiel werden
body
(Dokument),
h1
(Überschriften 1. Ordnung),
p
(Textabsätze) und
li
(Listeneinträge) auf diese Weise notiert. Über den Universalselektor
*
haben Sie die Möglichkeit, Eigenschaften für alle Elemente zu definieren, wobei jedem Element nur die jeweils zulässigen Eigenschaften zugewiesen werden.
    Wenn Sie ein Format für mehrere HTML-Elementtypen definieren wollen, geben Sie alle gewünschten Elementtypen an und trennen sie durch Kommata, so wie im obigen Beispiel
p, li
.
    Es bedeutet also das Gleiche, wenn Sie notieren:
    h1 { font-family:Helvetica,sans-serif; }
    h2 { font-family:Helvetica,sans-serif; }
    Oder wenn Sie notieren:
    h1, h2 { font-family:Helvetica,sans-serif; }
    Dahinter folgen die gewünschten Definitionen. Im obigen Beispiel werden dem
body
-Element eine hellgelbe Hintergrundfarbe (
background-color: #FFFFCC;
) und ein linker Randabstand von 100 Pixeln (
margin-left:100px;
) zugewiesen. Über den Universalselektor wird für alle Elemente zunächst eine blaue Schriftfarbe (
color: blue;
) definiert. Überschriften 1. Ordnung (
h1
) erhalten eine Schriftgröße von 300 Prozent (
font-size:300%;
), die abweichende