Capture input from the user’s camera.
The capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.
- MDN
- HTML Media Capture
- HTML Media Capture Syntax Examples - addpipe.com
- HTML Media Capture | Michael Gearon
Programmatically open the picker of form controls that have one (color pickers, date inputs etc).
The HTMLInputElement.showPicker() method displays the browser picker for an input element.
API to more easily extract and manipulate form data values via JS
The FormData() constructor creates a new FormData object.
Stylable, customizable dropdown control. Previously and .
- Customizable Select Element (Explainer) (open-ui.org)
- State of CSS 2022 (web.dev)
- The selectmenu HTML Tag | CSS-Tricks - CSS-Tricks (css-tricks.com)
- Advanced Form Control Styling With Selectmenu And Anchoring API — Smashing Magazine (smashingmagazine.com)
- Two levels of customising (hidde.blog)
- Open UI's selectmenu demos (microsoftedge.github.io)
Permits editing of the element's raw text, but not rich text formatting.
The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.
- MDN
- HTML Standard (html.spec.whatwg.org)
The EditContext interface represents the text edit context of an element that was made editable by using the EditContext API.
The EditContext interface represents the text edit context of an element that was made editable by using the EditContext API.
The caretPositionFromPoint() method returns the caret's character offset.
For dialog boxes or other interactive components, such as a dismissible alerts, or subwindows.
The HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
- MDN
- HTML Standard (html.spec.whatwg.org)
A disclosure widget that can be toggled to hide or show content interactively.
The HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the element.
- MDN
- HTML Standard (html.spec.whatwg.org)
Group
- Add name attribute for grouping details elements into an exclusive accordion by dbaron · Pull Request #9400 · whatwg/html · GitHub (github.com)
- Exclusive accordion () · Issue #866 · w3ctag/design-reviews · GitHub (github.com)
- Exclusive Accordion (Explainer) | Open UI (open-ui.org)
- Chrome Platform Status (chromestatus.com)
HTML syntax and JS API facilitating popovers such as overlays, popups, menus etc.
The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.
- MDN
- HTML Standard (html.spec.whatwg.org)
- The Popover API (previously Popup) · Issue #743 · w3ctag/design-reviews · GitHub (github.com)
- Popover API (Explainer) | Open UI (open-ui.org)
Attribute to make an element and its descendants non-interactive, and invisible to assistive technology.
The inert global attribute is a Boolean attribute indicating that the browser will ignore the element. With the inert attribute, all of the element's flat tree descendants (such as modal s) that don't otherwise escape inertness are ignored. The inert attribute also makes the browser ignore input events sent by the user, including focus-related events and events from assistive technologies.
- MDN
- HTML Standard (html.spec.whatwg.org)
- Introducing inert - Chrome Developers (developer.chrome.com)
- The "inert" attribute is finally coming to the web | Stefan Judis Web Development (stefanjudis.com)
Provides the ability to respond to clipboard commands (cut, copy, and paste), as well as to asynchronously read from and write to the system clipboard.
The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste), as well as to asynchronously read from and write to the system clipboard.
Load certain resources only when needed.
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
- MDN
- HTML Standard (html.spec.whatwg.org)
- Browser-level image lazy loading for the web (web.dev)
Attributes that allow providing several source images with hints to help the browser pick the right one.
The HTML element embeds an image into the document.
- MDN
- HTML Standard (html.spec.whatwg.org)
Begin work on certain resources early to improve performance. Syntax: .
There are many reasons why your website should perform as well as possible. Below is a quick review of best practices, tools, APIs with links to provide more information about each topic.
- MDN
- Understanding CSS preload and other resource hints - LogRocket Blog (blog.logrocket.com)
An added layer of security that helps to detect and mitigate XSS and other attacks.
Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft, to site defacement, to malware distribution.
Allows specifying a hint to help the browser prioritize fetching various resources.
The fetchPriority property of the HTMLImageElement interface represents a hint given to the browser on how it should prioritize the fetch of the image relative to other images.
- MDN
- Priority Hints (obsolete) (wicg.github.io)
- Priority Hints API · Issue #704 · w3ctag/design-reviews · GitHub (github.com)
- Priority Hints (github.com)
- Chrome Platform Status (chromestatus.com)
- Optimizing resource loading with the Fetch Priority API (web.dev)
Specify that resources (scripts, stylesheets etc) should block rendering until loaded.