Hot New
🔥HTML🔥
Features!
Alex Riviere
Senior Front End Developer
Hygiena
- masto: notacult.social/@fimion
- bsky: @dangitalex.wtf
- blog: alex.party
Slides:
HTML 5
-
WHATWG began Drafting in 2004
-
W3C Recommended Status October 2014
-
HTML Living Standard moved to WHATWG Control in 2019
ES6
Standardized by TC39 in 2015
This talk will cover:
-
<details>/<summary>Elements -
<dialog>Element - the
inertattribute - Popover Api
- attributes and
attr() - Declarative ShadowDom
-
<select>Elements
Details/Summary
(Aka Hide extra information)
Details/Summary
Details Element
Details/Summary
Summary Element
Details/Summary
open Attribute
Details/Summary
Accordion Example
Details/Summary
Accordion example with name attribute
Details/Summary
Baseline Status
Details/Summary
Style the new ::details-content (Author: Adam Argyle)
Details/Summary
Baseline Support
Details/Summary
More Information:
- MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details
- Chrome for Developers (Bramus): https://developer.chrome.com/docs/css-ui/exclusive-accordion
- CSS-Tricks (Geoff Graham): https://css-tricks.com/using-styling-the-details-element/
Dialog Element
(Aka Modals Modals Modals!)
Dialog Element
Basic Dialog
Dialog Element
Basic Dialog with JS
Dialog Element
Basic Dialog with showModal
Dialog Element
Basic Dialog with showModal and close form
Dialog Element
Baseline Support
Dialog Element
More Information:
the inert attribute
(Aka FREEZE!)
inert Attribute
inert demo
inert Attribute
Specific Behaviors
- Prevents the
clickevent from being fired when the user clicks on the element. - Prevents the
focusevent from being raised by preventing the element from gaining focus. - Prevents any contents of the element from being found/matched during any use of the browser's find-in-page feature.
- Prevents users from selecting text within the element — akin to using the CSS property
user-selectto disable text selection. - Prevents users from editing any contents of the element that are otherwise editable.
- Hides the element and its content from assistive technologies by excluding them from the accessibility tree.
inert Attribute
Notice!
Do NOT use inert unless you are sure.
Forms, Inputs, Buttons, Selects should use disabled rather than inert to make them not useable.
Ideally, you should never need to use inert.
inert Attribute
Baseline Support
inert Attribute
More Information:
- MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert
- Web.dev (Emma Twersky): https://web.dev/articles/inert
Popover API
(Aka Menus not Selects)
Popover API
Basic Popover
Popover API
Manual Popover Options
Popover Api
Baseline Support
Popover API
Basic Popover
Popover Api
Popover with Anchor Positioning
Anchor Positioning
Baseline Support
Dialog Element
Basic Dialog with showModal and close form
Dialog Element
Basic Dialog with popover
Dialog Element
Basic Dialog with Invoker Command
Invoker Commands
Baseline Support
Popover API
More Information:
Attributes and attr()
(Aka Styles from your HTML)
attr()
Basic attr() usage
attr()
Advanced attr() usage
attr()
Allowed Types
- <angle>
- <color>
- <custom-ident>
- <image>
- <integer>
- <length>
- <length-percentage>
- <number>
- <percentage>
- <resolution>
- <string>
- <time>
- <transform-function>
Advanced attr()
Baseline Support
attr()
More Information:
Declarative ShadowDOM
(Aka Server Side Rendered
Web Components)
Declarative ShadowDOM
Basic Custom Element Example
Declarative ShadowDOM
Delayed Custom Element Example
Declarative ShadowDOM
Delayed Custom Element Example with Declartive ShadowDOM
Declarative ShadowDOM
Custom Declartive ShadowDOM with default fallback
Declarative ShadowDOM
Please Don't Do This
Declarative ShadowDOM
Baseline Support
Declarative ShadowDOM
More Information:
- MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template
- Web.dev (Jason Miller, Mason Freed): https://web.dev/articles/declarative-shadow-dom
Things Achieved by Humanity Since 1995
- Sequencing of the Human Genome
- 23 missions to mars
- Taken a photo of a black hole
- Proved the existence of the Higgs Boson
- The entire life cycle of the iPod
Styleable Selects
(Aka FREAKING FINALLY)
Styleable Selects
A Basic Select with some style
Styleable Selects
appearance: base-select
Styleable Selects
::picker(select)
Styleable Selects
<selectedcontent>
Styleable Selects
Baseline Support
Styleable Selects
More Information:
- MDN: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
- Chrome for Developers (Adam Argyle): https://developer.chrome.com/blog/a-customizable-select
- OpenUI: https://open-ui.org/components/customizableselect/
Slides:
Deets:
Alex Riviere
- @fimion on GitHub, CodePen
- Masto: @fimion@notacult.social
- Bsky: @dangitalex.wtf
- alex.party
CodePens:
Hot New HTML Features!
By Alex Riviere
