Baseline is a new term that defines a feature broad adoption. There are two stages:

1. The new feature is available in all last versions of the browsers
2. The new feature is widely available after 30 months after the first stage

We can then speak of baseline 2023 that groups all features usable in the considered browsers.

Limitations:

• the browsers considered are Safari, Firefox, Chrome and Edge. The rest is unknown even if they are listed on caniuse.com
• it does not take screen readers and accessibility tools in consideration as part of "availability"

:has has a lot of possibilities with drag'n'drop. Here the developer uses 3 items: mushrooms, potions and .

For example: dragging some items to make parts of the site grow. https://lynnandtonic.com/assets/images/thoughts/case-study-2022-mushroom-header.mp4

See https://lynnandtonic.com/assets/images/thoughts/case-study-2022-david-rose.mp4 for more real interactions.

A potion adds color: https://lynnandtonic.com/assets/images/thoughts/case-study-2022-home-potions.mp4

Let's create a holiday card generator by learning how to get access to a user's webcam and compose a screenshot.

Great explanation of the rel attributes that provide:

• information to the resource linked
• behaviors while navigating

Create an accessible <marquee> tag

Use <button> if you can count on JavaScript being available, and flipping the switch has an immediate effect.
Use <input type="checkbox" if you want to progressively enhance the control, and flipping the switch will only take effect when the user submits it.

The post explains how.

Ja klar, bei manchen Sachen sollte man das mit ARIA Elementen anreichern, aber bei vielem könnte man es verbessern indem man einfach die richtigen HTML Tags/Attribute verwendet.

Use Cases anzeigen und sie durchsuchen können.

Beispielen:

• Accordion: <details>/<summary>
• <dialog>
• Definitionsliste: <dl> / <dt> / <dd>
• Definition steht im Paragraph <dfn>
• Listen: <ol> / <ul>
• Mehr Kontekt <time>,<kbd>, <abbr>
• Separator zwischen Paragraphen: <hr>
• Abkürzung:
• <address>
• <quote> / <blockquote> / <cite>
• semantische Struktur der Seite: <article> / <section> mit o. ohne Heading / <footer> / <header> / <main> / <aside> / <nav>

A section tag start to be a generic région only when it is labelled. It provides semantics, but nothing else out of the box.

As developer it increase readability and allow to quickly set a specific landmark when needed.

Nice to get it right the first time with a minimal example

box-sizing does not work well with details and summary: it is implemented as shadow DOM in Chrome.

Dedicated to HTML :)