WiMu: Welche Zeichen sind im class-Attribut erlaubt?

'nabend,

nur 'ne kleine Frage: dass Leerzeichen nicht in Klassennamen enthalten sein dürfen, ist ja klar, aber so wie's http://de.selfhtml.org/css/formate/zentrale.htm#klassen@title=da steht kann's ja auch nicht wirklich stimmen. Zum einen kommt es mir merkwürdig vor, dass man angeblich "die Namen hinter dem Punkt frei vergeben könne", aber er keine deutschen Umlaute enthalten dürfe. Daraus ließe sich doch schließen, dass alle Sonderzeichen erlaubt sind, nur nicht ä, ö, ü ... ne, kann nicht sein. Zum anderen bin ich schon zigfach über klassenname_mit_unterstrich gestoßen, vor allem auch auf sehr solide programmierten Seiten.

Wo kann man denn wirklich mit Problemen rechnen (bei Umlauten hatte ich bislang z.B. keine)? Und wo wir gerade dabei sind: wie sieht's denn mit IDs aus?

Grüße,

WiMu

  1. Hallo WiMu,

    aus 7.5.2 Element identifiers: the id and class attributes ergibt sich für Attribut class der Inhalt "cdata-list [CS]". Das liest sich dann, folgt man den Verweisen dort, als:

    CDATA is a sequence of characters from the document character set and
       may include character entities. User agents should interpret attribute
       values as follows:

    * Replace character entities with characters,
          * Ignore line feeds,
          * Replace each carriage return or tab with a single space.

    i. V. m.

    CS The value is case-sensitive (i.e., user agents interpret "a" and "A" differently).

    D. h., anders als Du es annimmst, es kann u. a. eben auch Leerzeichen verwendet werden. Das hat ganz praktische Nebenwirkungen:

    .a {background:red}  
    .b {color:yellow}  
    .c {border:blue}
    
    <div class="a">     Test 1</div>  
    <div class="b c">   Test 2</div>  
    <div class="a c">   Test 3</div>  
    <div class="a b c"> Test 4</div>
    

    Für Attribut id ist demgegenüber der Inhalt "name [CS]", was dann bedeutet:

    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
       followed by any number of letters, digits ([0-9]), hyphens ("-"),
       underscores ("_"), colons (":"), and periods (".").

    Gruß aus Berlin!
    eddi

    1. @@Edgar Ehritt:

      nuqneH

      D. h., anders als Du es annimmst, es kann u. a. eben auch Leerzeichen verwendet werden.

      Nein. Die Frage war nicht nach erlaubten Werten von @class, sondern nach Klassennamen.

      An der von dir angeführten Stelle ist auch zu lesen: “Multiple class names must be separated by white space characters.”

      Whitespaces dienen als Separatoren zwischen Klassennamen; Whitespaces dürfen folglich in Klassennamen nicht vorkommen.

      Qapla'

      --
      Volumen einer Pizza mit Radius z und Dicke a: pi z z a
      1. Hallo Gunnar,

        D. h., anders als Du es annimmst, es kann u. a. eben auch Leerzeichen verwendet werden.

        Nein. Die Frage war nicht nach erlaubten Werten von @class, sondern nach Klassennamen. ... Whitespaces dürfen folglich in Klassennamen nicht vorkommen.

        Dann lies bitte die Frage, die in der Überschrift steht!

        Gruß aus Berlin!
        eddi

  2. @@WiMu:

    nuqneH

    Wo kann man denn wirklich mit Problemen rechnen (bei Umlauten hatte ich bislang z.B. keine)?

    In CSS bei Klassenselektoren. Darin sind nämlich bei weitem nicht alle Zeichen erlaubt, die in Klassennamen erlaubt sind. [CSS21 §G]

    Soll per Klassenselektor selektiert werden, müssen ggfs. Zeichen escapet werden:

    '.\+'   (oder auch  '.\2B ') bedeutet dasselbe wie '[class~="+"]'  ('+' ist U+002B)
    '.\31 ' (nicht aber '.\1')   bedeutet dasselbe wie '[class~="1"]'  ('1' ist U+0031)

    Qapla'

    --
    Volumen einer Pizza mit Radius z und Dicke a: pi z z a
  3. Wo kann man denn wirklich mit Problemen rechnen (bei Umlauten hatte ich bislang z.B. keine)? Und wo wir gerade dabei sind: wie sieht's denn mit IDs aus?

    Bei umlauten könnetst du mit Multibyte-Zeichen Probleme bekommen, wenn die Zeichencodierung des HTML-Dokuments nicht mit der des CSS-Dokuments übereinstimmt.

    Bei Groß- und Kleinschreibung kanns unter umständen Probleme geben, da Klassen zwar case-sensitive sind, aber der Internet Explorer in älteren Version bei CSS-Selektoren diesbezüglich gern mal ein Auge zudrückt.

    Auf der sicheren Seite ist man wie immer, wenn man sich auf einen einfache Zeichenauswahl a-z 0-9 sowie konsequente Kleinschreibung beschränkt - das hat den Vorteil, dass man wenig nachdenken muss, wann man wo wie was geschrieben hat.

    Bez. IDs sind die Regeln strenger als bei Klassen:
    http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-cdata

    'ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").'

    Dennoch würde ich auch hier z.B. auf Punkte nud Doppelpunkte verzichten, ansonsten wirds im CSS ggf. etwas verwirrend mit dem Escaping

    <div id="foo:before"></div>

    würde man mit #foo\:before selektieren, #foo:before ist etwas anderes.