Lesetipp: Tabs in HTML?

[Matthias Scharwies]

Guten Morgen,

Erinnert ihr Euch noch an unsere Diskussion im Januar, wie man Tabs (aka Registerkarten) in HTML realisieren könnte? Wir haben es damals mit details gemacht:

Heute ein Artikel:

Tabs in HTML? von Brian Kardell, einem „Developer Advocate“ bei Igalia.

Er verwendet ein <spicy-sections>-custom element. Mal schau'n, ob er die verbleibenden Browserhersteller überzeugen kann, dann könnte man auch gleich das dialog-Element implementieren.

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo,

ich hab dazu eine Frage: Was macht dieses Statement (die Codeauszeichnung schluckt das |)

--const-mq-affordances: [screen and (max-width: 40em) ] collapse | [screen and (min-width: 60em) ] tab-bar;

und wie hängt das hiermit zusammen?

[affordance="collapse"] { ...

[affordance="collapse"] { ...

Oder kurz: wie hängen --const-mq-affordances und affordance zusammen?

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

--const-mq-affordances ist ein custom property, das vom JavaScript-Teil gelesen wird. Es verwendet den Wert für Medienabfragen (matchMedia-Methode).

Ich habe den Code noch nicht auseinandergenommen und weiß deshalb nicht wie das alles genau zusammenspielt.

Eine "affordance" scheint ein hochtrabender Begriff für einen UI Baustein zu sein - ich habe das Wort noch nie gehört, mein Wörterbuch kennt es nicht, aber hier kommt es unter "Methodology" vor. Offenbar ein Buzzword der Informatikprofessoren.

Die CSS Abfragen auf [affordance] suchen dann nach Elementen mit einem affordance-Attribut, das ebenfalls vom JavaScript gesetzt wird.

Aber einen direkten Zusammenhang zwischen custom property und Attribut gibt es nicht. Sie verwenden nur den gleichen Begriff.

Rolf