The author provides an history about the base, reset ,normalize and classless stylesheets.

The page itself is a demo of base.css, a classless stylesheet, and document itself.

Each topic is covered by a description, the rules and the relying css implementation. Each rule is well meant for accessibility such as "You should read a caption without having to scrol". It starts with the CSS Properties.

Use CSS properties for customization. There is the root style rules:

1. Set customization options on the the root element for all elements
2. Use native properties for font family and font size options.a
3. For font size, CSS has font relative units to create variations from the root or parent value.
4. For font family, it's useless to use custom property. Its value, a string value, can't create variations. Variation of font family would be by, if possible, using font variant alternates. a
5. Use custom property for line height. This maintains unitless value while creating automatic variations for blocks. b
6. Use custom property for pseudo content. This enables fallback trick for its native counterpart. c
7. Use custom property for the others due to lack of native properties. d
8. Prevent adjustments of font size orientation changes in iOS
9. Remove padding and margin, use box model of border box, and inherit color and font on all elements.

The library defines carefully the font-family, font-size, line-height, line-length, color, styles, blocks, mixes and phrases.

A font family declaration is a set of typefaces to create safer designs. Using multiple typefaces requires a sound knowledge of type pairings: space, type (sans, serif, cursive), wight, width, style normal and italic, cases: smalls, caps and smapp caps, roles: caption, body and display.

Font-sizes are defined with the em unit and relative calculations based on a --font-scale value.

The line height is computed based on the element around it. For example the paragraph following a hgroup with a heading. It creates a cohesive design.
All line height are derived from a --line-height value.

To respect the support of dark and light mode, developers must use the light-dark() function. Prefer human-based color mdoels such as LCH or OKLCH. The primary color component is Hue. Lightness and Chroma creates variations. Variations for one hue is a monochromatic pallete; for 2 hues is diadic; for 3 hues is triadic; and so on. CSS can programmatically create a live pallete from one hue using calc(). A 90deg deviation creates a complementary scheme; a type of diadic.

The web is filled with unsemantic styles: the absence of styles, the misuse of styles, the lack of unique styles. This can be seen through the lens of base stylesheets, as of writing.
All components — blocks, mixes, and phrases of media and forms — should have unique styles.

Blocks define region in the HTML document. Subsections uses one _ for each nesting level.

Mixes use all-round borders to define the boundary of their content

Phrases is all about content and forms. They are inline content, so their block content is maintained within a line height. Each phrase is clearly identified

No event listeners. No state tracking. No ARIA updates handled in JavaScript. I focused the button, and the tooltip appeared. I pressed the Esc key, and it disappeared.

• popovertarget connects the button to a popover element
• popovertargetaction specifies what should happen (show, hide, toggle as default)
• popover declares an HTML element can be targeted by popovertarget (ou .showPopover())

Note Floating UI already solves many of these issues. CSS anchor positioning should solve most of the layout stuff

A decision tree: https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/getting-started-popover-api/5-popover-api-browser-support.png

It feels wrong to write HTML that way, but maybe I am too used to the HTML we daily use as web developer.

I like the research though.

Des définitions avec des exemples de locales.

i18n: The design and development of a product that is enabled for target audiences that vary in culture, region, or language.
i10n: The tailoring of a system to the individual cultural expectations of a specific target market or group of individuals.
Locale: an identifier for a set of international preferences
international

Ainsi que les RFCs les définissant, avec notamment l'exemple de l'en-tête HTTP "Content-Language", "Accept-Language".
Les locales sont aussi utilisées via l'attribut lang, la spécificité de translate, dir, hreflang en HTML; et les possiblités d'usages en CSS via les sélecteurs

<details>  
  <summary class="video-summary">
    <!-- Video Placeholder Image -->
    <img src="https://lab.n8d.studio/htwoo/htwoo-core/images/videos/big-bug-bunny.webp" class="video-thumbnail">
    <!-- Play Button -->
    <svg class="video-playicon" data-id="icon-play-filled" viewBox="0 0 32 32" data-icontype="filled"><path d="m11.167 5.608 16.278 8.47a2.169 2.169 0 0 1 .011 3.838l-.012.006-16.278 8.47a2.167 2.167 0 0 1-3.167-1.922V7.529a2.167 2.167 0 0 1 3.047-1.981l-.014-.005.134.065z"></path></svg>
  </summary>

  <!-- we'll get here... -->
</details>

When a visitor decides to watch the video and clicks on the thumbnail, the open attribute will be placed by the browser on the details attribute, which means the video summary can be hidden.

1. unsystematic
2. valid
3. semantic
4. Accessible
5. Required-only
6. hyper-optimized

a thing you absolutely cannot do is nest one interactive control inside another

it has few examples.

Shadcn makes the radio button overly complex, even if <input type="radio" name="beverage" value="coffee" /> with 30 lines of CSS is enough.
The library uses 3 imports (and 2 components) and 45 lines of code and ARIA.

Text rotating at the borders of an image

Use cases for HTML only:

• Accordions
• input with Autofilter suggestions dropdown (<datalist>)
• modals / popover with popover and popovertarget

Selon le besoin ou une question, le service propose un tag HTML dédié: button, a, output,. ...

The website author is available in different format than HTMLz

The contrary of HTMLHell, a page full of tips: HTML Heaven.

Documents will be available in HTML!

Lessons from maintaining an open source tool:

1. Simplicity is a feature
2. Real users reveal problems
3. open source is a marathon

Yet through all these changes, the need for efficient HTML delivery remains constant. That's perhaps the most interesting lesson: fundamental problems persist even as technologies evolve.

An example of semantic class names and a teaser on server of Kelp to have dynamic HTML through WebComponents.

Not read yet.

It was one of those moments where something you once knew suddenly clicks again with fresh significance. Here was a URL doing far more than just pointing to a page. It was storing state, encoding intent, and making my entire setup shareable and recoverable. No database. No cookies. No localStorage. Just a URL.

Good candidates for URL state:

• Search queries and filters
• Pagination and sorting
• View modes (list/grid, dark/light)
• Date ranges and time periods
• Selected items or active tabs
• UI configuration that affects content
• Feature flags and A/B test variants --> I never though about this one

Anti-Patterns to avoid:

• state only in memory SPAs
• sensitive Data in URLs
• inconsistent or opaque naming
• overloading URLs with complex state
• breaking the back button