Tests zukünftiger Features #

Auf dieser Seite werden lediglich einige Eigenschaften aus HTML5 und CSS3 eingesetzt, die noch keine große Unterstützung durch die gängigen Browser erfahren. Diese Seite dient mehr als Spielwiese, um testen zu können, wie weit die Unterstützung durch bestimmte Browser bereits fortgeschritten ist.

CSS Transitions #

W3C: Opera 12, Firefox 17
Mozilla: Firefox 14
Webkit: Chrome 20, Opera 12
Opera: Opera 12
MS

Neue Typen für <input> #

Kein Zeilenumbruch in <textarea> #

Normalerweise wird Text in einem <textarea>-Element am rechten Rand umgebrochen. Dieses Verhalten ist aber unter Umständen unerwünscht, beispielsweise wenn man in dieses Feld Quelltext eingibt, der durch einen Zeilenumbruch unübersichtlich wird. Man kann sich behelfen, indem man dem Element das Attribut wrap='off' zuweist, was allerdings kein valides HTML mehr darstellt.

Die Spezifikation für HTML5 enthält das Attribut wrap für <textarea>, aber leider nur die Werte soft und hard.

Es gibt dazu eine Diskussion bei whatwg.org.

Die CSS-Eigenschaft white-space:nowrap; funktioniert in allen Browsern, außer in Firefox. Beim MSIE funktioniert es nur mit zusätzlichem overflow:auto;:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    <form action='test.htm' method='post'>
      <div>
        <textarea wrap='off' style='float:left;margin-right:10px;font-family:monospace;' rows='4' cols='60' name='eingabe'>wrap=&#39;off&#39;</textarea>
      </div>
    </form>

    <form action='test.htm' method='post'>
      <div>
        <textarea style='white-space:nowrap;float:left;margin-right:10px;font-family:monospace;' rows='4' cols='60' name='eingabe'>white-space:nowrap;</textarea>
      </div>
    </form>

    <form action='test.htm' method='post'>
      <div>
        <textarea style='overflow:auto;white-space:nowrap;margin-bottom:20px;font-family:monospace;' rows='4' cols='60' name='eingabe'>white-space:nowrap; overflow:auto;</textarea>
      </div>
    </form>

Dieser Code bewirkt folgende Darstellung:

font-effect #

Mit font-effect lassen sich neue Auszeichnungsstile auf Text anwenden:

• engrave
• emboss
• outline

W3C Entwurf

Firefox ≤ 4
Opera ≤ 11
Chrome ≤ 10
Safari ≤ 5
MSIE ≤ 9

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.