HTML5 — Das Wesentliche

tipps&tricks,web,werkzeuge

Erstellt: 26.01.2014 Lesedauer 1 - 2 Min.

Der Begriff HTML ist erweitert und umfasst HTML, CSS sowie Javascript, und darauf aufsetzende Technologien. Eine grobe Übersicht, aus verschiedenen Quellen (s.u.) zusammengetragen.

HTML-Vereinfachung und Erweiterung

HTML 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"

XHTML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"

HTML5

<!DOCTYPE html>
HTML 4 / XHTMLHTML5
<div id="header"><header>, <hgroup>
<div id="topnav"><nav>
<div id="sidenav"><aside>
<div class="content"><article> <section>
<div id="footer"><footer>
<div class="date"><time datetime="...">

CSS Erweiterungen

Selektoren

 td:first-child{background:#ccc}

Füllt die erste Spalte einer Tabelle mit der Hintergrundfarbe

tr:nth-child⟨odd⟩ {background: #fff;}
tr:nth-child⟨even⟩{background: #ccc;}

Füllt die Zeilen einer Tabelle alternierend (odd, even) mit Farbe.

td:nth-child⟨odd⟩{background: #fff;}
td:nth-child⟨even⟩{background: #ccc;}

Füllt die Spalten einer Tabelle alternierend.

Typisierende Attribute

:invalid {background:red;}
:vaild {background:green;}
div:hover {
    animation-play-state: [running | paused];
}
:not⟨.box⟩{background:red;}
:not⟨span⟩{background:blue;}
input[type="text"]{background:grey;}

Webfonts

@font-face{
       font-family:'DejaVu Sans Mono';}
       src:url⟨fonturl.tld⟩
}
...
body {
     font-family: 'DejaVu Sans Mono';
}

„Runde Ecken“

 .button {
         border:thin solid blue;
         border-radius: 5px;
 }
 .tab {
      border:thin solid red;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 }

Spalten

 .columns {
     -column-count: 2;
    -column-rule: thin dotted #ccc;
    -column-gap: 3em;
}

Weiteres

text-overflow: ellipsis;
Textüberlauf mit Punkten am Ende
rgba(255,0,0,0.82); oder hsla(360,100%,50%,0.82);
Transparenz/Opazität via RGBA oder HSLA
Verläufe
Das muss allerdings browserspezifisch codiert werden
text-shadow, box-shadow
Schatten, mit Farbe, Opazität, Richtung und Dichte einstellbar

box-shadow:rgba⟨0,0,123,0.25⟩ xpx ypx dpx;

Hintergrund
Hintergrundskalierung und mehrere Hintergründe
Animation
Hierfür bieten Webkit-basierte Browser diverse Optionen. Ob und wie sie in anderen Browsern unterstützt werden, ist (beim Schreiben dieses Dokuments) unklar.