#dialogelement — Public Fediverse posts

Fun with browser #CSS.

I am tinkering with <dialog>, and the the need to style it to be nearly as wide as the page. I could go so far, but not further. Some pixels were seemingly arbitrarily subtracted from the intended width.

Until I checked the browser default style

dialog:modal {
max-width: calc(100% - 2em - 6px);
}

Interestingly it is the same in #firefox and #chromium. 🤷

#webdev #browser #style #dialogelement

#Development #Explainers
The difference between popovers and dialogs · Let’s finally clear up the confusion between the two https://ilo.im/160ja6

_____
#HTML #PopoverAttribute #DialogElement #Tooltip #Accessibility #ARIA #WebDev #Frontend

#Development #Explainers
The difference between popovers and dialogs · Let’s finally clear up the confusion between the two https://ilo.im/160ja6

_____
#HTML #PopoverAttribute #DialogElement #Tooltip #Accessibility #ARIA #WebDev #Frontend

Heute bin ich auf der #unkonf in Mannheim, veranstaltet von @bitexpert .

In den letzten Jahren waren dort wenige Frontend-Entwickler. Ein guter Grund einmal wichtige Neuerungen im Frontend der letzten Jahre zu zeigen.

Ich hoffe, ich schaffe alle Themen.

https://grochtdreis.de/vortraege/neues-frontend-2024/index.html#/

@unKonf

#frontend #DialogElement #popover #selektoren #customproperties

Heute bin ich auf der #unkonf in Mannheim, veranstaltet von @bitexpert .

In den letzten Jahren waren dort wenige Frontend-Entwickler. Ein guter Grund einmal wichtige Neuerungen im Frontend der letzten Jahre zu zeigen.

Ich hoffe, ich schaffe alle Themen.

https://grochtdreis.de/vortraege/neues-frontend-2024/index.html#/

@unKonf

#frontend #DialogElement #popover #selektoren #customproperties

#Development #Comparisons
HTML dialog element vs. popovers · A look at their similarities, differences, and use cases https://ilo.im/1609qs

_____
#DialogElement #Popover #Modal #Accessibility #Browser #WebDev #Frontend #HTML #CSS #JavaScript

#Development #Comparisons
HTML dialog element vs. popovers · A look at their similarities, differences, and use cases https://ilo.im/1609qs

_____
#DialogElement #Popover #Modal #Accessibility #Browser #WebDev #Frontend #HTML #CSS #JavaScript

#Development #Techniques
No page scrolling when HTML ‘dialog’ is open · A CSS one-liner to perfect your coding https://ilo.im/15z6j0

_____
#DialogElement #Scrolling #WebDev #Frontend #HTML #CSS

#Development #Techniques
No page scrolling when HTML ‘dialog’ is open · A CSS one-liner to perfect your coding https://ilo.im/15z6j0

_____
#DialogElement #Scrolling #WebDev #Frontend #HTML #CSS

📢 Not a #frontend guy but check out the <dialog> element now available in all modern web browsers, no more shenanigans for a modal window 👉 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog 🚀
#HTML #WebDevelopment #DialogElement #WebDesign

#Development #Releases
New in Chrome 112 · The Chrome browser now supports CSS nesting rules https://ilo.im/1249vt

_____
#Chrome #Browser #WebDevelopment #WebDev #Frontend #CSS #CssNesting #DialogElement #ServiceWorker

#Development #Releases
New in Chrome 112 · The Chrome browser now supports CSS nesting rules https://ilo.im/1249vt

_____
#Chrome #Browser #WebDevelopment #WebDev #Frontend #CSS #CssNesting #DialogElement #ServiceWorker

#Development #Techniques
Building a lightbox with the Dialog element · A lightbox solution that doesn’t require extensive JavaScript https://ilo.im/10ypd6

_____
#WebDevelopment #WebDev #Frontend #JavaScript #CSS #Lightbox #DialogElement

#Development #Techniques
Building a lightbox with the Dialog element · A lightbox solution that doesn’t require extensive JavaScript https://ilo.im/10ypd6

_____
#WebDevelopment #WebDev #Frontend #JavaScript #CSS #Lightbox #DialogElement