Store content that should be accessible. If the content should be seen or read on a page, don’t only put them in data attributes, but make sure that content is in the HTML content somewhere.

A use case is to style components based on their data attribute values.

Data attributes can be accessed in JS with tag.dataset.attributeName. It can also store JSON.

An HTML and CSS only tree.
The final CSS-snippet is also available at the end.

It uses only <ul>, <li>,

Build HTML elements visually

Source code: https://github.com/components-ai/css.gui

Different loading hints:

• async resource is loaded when the browser can
• defer resource is loaded when the DOM is parsed (less priority than async)
• rel=preload load the resource before the parsing and everything else
• fetchpriority with value high, low and auto. They are hints.
• rel=preconnect indicates that a connexion has to be established ASAP.
• rel=dns-prefetch resolves the domain name without fetching the resource.
• loading attribute determine when an image is loaded depending of its value:
  • eager: the image is loaded immediately
  • lazy: the loading is delayed until the user scroll to it.

This is in large part because HTML is a limited hypertext. In particular:

• Only <a> and <form> can make HTTP requests
• Only click & submit events can trigger them
• Only GET & POST HTTP Methods are widely available
• A request must replace the entire screen, leading to a clunky and sometimes jarring user experience

To the last point: the transition API is on its way :)

Je suis twitter et exige ma carte pour chaque lien partageable.

Autant faire un standard !

It’s crazy to think how much bandwidth is being used by metadata tags.

and how much of these are used by the client...

About the <template> element.

More recently, the idea to treat attribute selectors on par with classes as first-class citizens has been proposed more widely. We’re no longer talking about edge cases, but challenging the very defaultness of classes, all while not giving up that sense of structure that many of us look for in CSS naming conventions.

👍‍

And think of aria-selectors too ! This promotes an a11y-first mindset — if there is no attribute or pseudo selector available to represent the state we wish to style, should we add one?

this is the principle that class selectors violate. An element’s classes are never guaranteed to reflect their state

Using data attributes instead seems a good idea to avoid impossible states!

And there’s a reason why

looks attractive — it’s mirroring the APIs we’re used to seeing in design systems and component libraries, but bringing it to vanilla HTML and CSS.
Indeed, it’s a small step from data attribute selectors to custom pseudo selectors or prop-based selectors when using Web Components (think ).

Styling based on ARIA attributes encourages more accessible markup, and styling based on custom data attributes makes it more robust and readable — a better experience for users and developers alike.

Clever and efficient

TL;DR Use HTML attributes with the content: attr() CSS property.

Here is an example with a notification icon with a counter nudge.

Use: <video autoplay loop muted playsinline src="cats.mp4"></video> as Twitter does

About #mp4, #webm, #x264, #x265, #VP9, #VP8, #AV1 containers and codecs

Evilmartian uses the new codec and here is the comparison: "In AV1 it is just 68 KB, similar to the image file. HEVC is 195 KB, and H264 is 512 КB."

Use an image for dark mode only 😯

<picture>
  <source srcset="dark-animation.avifs" media="(prefers-color-scheme: dark)">
  <img src="light-animation.avif" alt="">
</picture>

webkitdirectory multiple to allow a directory and every files in it to be uploaded :)

Limitations and workarounds about the number input.

From the UK government:

You can put the capture attribute on inputs with the type of file, and you can give it a value of “user” or “environment“. The interesting thing about the capture attribute is for users coming to your website on a mobile device. If they interact with that input, instead of opening up the default file picker, it will actually open up one of their cameras.

Read the reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture

Web Content Accessibility Guidelines Success Criterion 2.4.4: Link Purpose (In Context) instructs us to ensure that a link’s accessible name makes sense when separated from its surrounding context. It’s why “learn more about elephants” is a far more effective link name than “click here.”

Cool to know.

This is all about maintaining an equivalent experience by not over-describing something for only a certain subset of people. Here, the goal is to preserve the author’s intentional act of creating a sense of curiosity, regardless of the way someone interacts with technology.

User-facing state is what someone experiences when they interact with (or try to interact with) an element in some capacity. It is reactive, helping to communicate the ways in which something can be manipulated.

It is also worth noting that on the web, the majority of user-facing state can be communicated programatically. This means that there is an HTML attribute or ARIA declaration that can ensure people who can’t see the content can understand the state something has been set to.

It is different from the application state.

The states:

• resting: the status of something before someone has interacted with it, or other content affects it. Oftentimes referred to as “Base” or “Default.”
• hovered
• active
• focused
• visited
• loading / loaded
• disabled
• hidden
• readonly
• enabled
• checked: marked for sending as data to another internal or external resource. Can be focused, but keeps it's selected state after focus is moved
• unchecked
• undeterminate
• selected / deselected
• dragged / dropped
• collapsed / expanded
• resizing
• dirty: an editable element that has been manipulated on one or more occurences
• pristine: editable element has yet to be manipulated by someone
• saving
• overflowing
• scrolling
• playing / paused / stopped
• sticky
• unstuck: sticky element removed from a side of the viewport back it its original position