Versionen dieses Beitrags

<dialog>

Point of2 Matthias Apsel
  • <dialog>
  • Hi!
  • > > > Ein modalen Dialog wäre besser kein `div`, sondern ein [`dialog`-Element](http://w3c.github.io/html/interactive-elements.html#the-dialog-element).
  • Aber welcher Browser unterstützt das wie definiert? Laut [https://developer.mozilla.org/en/docs/Web/HTML/Element/dialog](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](http://w3c.github.io/html/rendering.html#non-replaced-elements-flow-content)
  • > Eventuell noch `dialog { display: block }`{: .language-css} 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:
  • ~~~css
  • 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