<dialog>

[Pascal]

Hi!

Ein modalen Dialog wäre besser kein div, sondern ein dialog-Element.

Aber welcher Browser unterstützt das wie definiert? Laut https://developer.mozilla.org/en/docs/Web/HTML/Element/dialog bisher nur Chrome.

Bei Bootcrap wird doch die visuelle Darstellung über Klassen geregelt. Du solltest im Markup div in dialog ändern können, ohne dass sich die visuelle Darstellung ändert.

Das denke ich nicht.... In Browsern die dialog unterstützen bringt das Element eigene Styles mit sich. Die beißen sich wahrscheinlich mit Bootstrap:

http://w3c.github.io/html/rendering.html#non-replaced-elements-flow-content

Eventuell noch dialog { display: block } ins Stylesheet.

Das leuchtet mir nicht ein. Ohne "open" Attribut sollte <dialog> standardmäßig versteckt sein. Man sollte besser "open" setzen, um es zu zeigen. Dazu würde ich die verlinkten Styles benutzen und wenn nötig anpassen:

dialog:not([open]) { display: none; }
dialog { display: block; usw. }

<dialog> ist eine coole Erfindung. Bloß glaube ich nicht dass es sich mit Bootstrap Modals vereinbaren lässt. Dazu müsste Bootstrap die Browserstyles passend überschreiben.

Außerdem setzt Bootstrap tabindex ein damit das Element fokussierbar ist. Nur: "The tabindex attribute must not be specified on dialog elements."

Man sollte vorsichtig damit sein noch nicht unterstützte Elemente statt <div>s zu verwenden. Wenn die Browser sie irgendwann unterstützen, bekommen sie plötzlich eine neue Bedeutung und Styles hinzu.

Wenngleich die Frameworks in Sachen Barrierefreiheit schon besser werden.

Nur am Rande, die Modals in Bootstrap sind barrierefrei soweit ich weiß. Tabindex Fokus, ARIA Rolle, ARIA Label usw.

Mit <dialog> wird das zum Glück bald einfacher aber bis dahin ist das die beste Lösung.

Pascal