Hallo Merlin,

Was bringt mir das Data- gegenüber einer einfachen klasse?

kommt drauf an, was Du auf der Seite alles tust. Eine Klasse v0, v3, v45 etc musst Du erstmal übersetzen, wenn Du aus der Klasse die Zeit ermitteln willst. Im Data-Attribut steht die Zeit direkt drin. Es KÖNNTE in der Gesamtlösung Nutzen bringen, aber die kenne ich natürlich nicht.

Im JavaScript greifst Du auf data-delay übrigens über die dataset-Eigenschaft zu und bekommst den im Attribut gespeicherten String.

elem.dataset.delay

In <h1>- - - - GROẞBUCHSTABEN - - - - Normalschrift - - - -</h1> wird es ziemlich spannend. Die - - - - möchtest Du nicht vorgelesen haben, die sind rein dekorativ. Ich würd's vermutlich so machen:

<h1><em>Großbuchstaben</em> Normalschrift</h1>

Man möchte nun meinen, mit text-transform:uppercase für den Selektor h1 em wäre man fein raus, aber leider nicht. Korrektes Ergebnis wäre GROẞBUCHSTABEN (was nicht gleich GROßBUCHSTABEN IST!), aber die Browser liefern GROSSBUCHSTABEN. Zumindest hab ich nicht 'raus, wie man dem Browser stecken kann, dass Unicode das Zeichen ẞ (ẞ) kennt. Aber als Notlösung geht's.

Das CSS wäre dann

h1::before {
  content: '-\A0-\A0-\A0-\A0';
}
h1::after {
  content: '\A0-\A0-\A0-\A0-';
}
h1 em {
  font-style:inherit;
  font-weight: inherit;
  text-transform:uppercase;
}
h1 em::after {
  content: '\A0-\A0-\A0-\A0-';
}

um die Strichelung zu zeigen. \A0 ist die CSS-Form von   (siehe auch Zeichen maskieren im Wiki).

Das em (emphasize) Element macht von Hause aus kursiv, vielleicht auch mal fett, deshalb sollte man diese beiden Font-Eigenschaften auf inherit setzen (vom h1 übernehmen), weil die Betonung hier ja durch Uppercase erzielt wird.

Rolf