<main> via CSS ansprechen

[<nick>]

Hey,

wie nutze ich Elemente wie main, header usw denn wenn ich sie mit CSS ansprechen möchte. Habe jetzt u.a diese Möglichkeiten gesehen:

<div role="main"><main> content </main></div>

<div role="main"> content </div>

<main> content </main>

Bis jetzt spreche ich sie ganz normal an mit main {, header { usw... vermutlich ist das auch richtig? Sofern es "richtig" gibt. Allerdings lese ich wie oben angesprochen mal dies und mal das...

gruss

<nick>

 

[Trüffelkrieger]

Das was du an Code gepostet hast ist aber kein CSS. Das letzte ist HTML5. Das wird per main{} angesprochen. Das erste ist unnötig, da sollte mMn entweder das main-Element gewählt werden, oder ein div mit role-main. Das zweite ist einfach "auf Sicherheit", weil es keine Probleme mit alten Browsern gibt, die das Element nicht kennen und deshalb falsch interpretieren (IE).

 

[MrMurphy]

Hallo,

da bringst du etwas durcheinander.

role=

hat nichts mit css zu tun, sondern erfüllt andere Funktionen.

In HTML5 wäre vollständig

<main role="main">
   content
</main>

Im CSS würde es dann mit

main {
    ...;
}

formatiert.

Gruss

MrMurphy

 

[<nick>]

Danke für die schnellen antworten.

Da habe ich mich wohl falsch ausgedrückt, das ich HTML Beispiele gepostet habe weiß ich, auch das role= nicht CSS dient, sondern eine landmark role ist und im "zusammenhang" mit WAI-ARIA steht. Trotzdem ist meine eigentliche Frage beantwortet.

Eine Frage bleibt trotzdem,

<main role="main">: liest in diesem fall auch ein Browser der <main> nicht ,oder noch nicht als eigenes Attribut kennt das role="main"? (um vorzubeugen das er nur <main> nicht kennt) Oder sollte ich um sicherzugehen ein div mit role="main" nutzen. <div role="main">.

Habe ein wenig das Gefühl es ist eine kleine Glaubensfrage, oder Sache des Geschmacks ob ich variante eins oder zwei nutze. Variante 1 ist "neu" und das gleiche in grün. Variante 2 in Hinsicht auf ältere Browser sicherer, aber in HTML5 "überholt" oder abgelöst durch <main> <header> und Konsorten... ?