L'article présente l'élément <dialog> en HTML, une solution moderne pour créer des modales et des boîtes de dialogue non modales. Cet article explique comment utiliser cet élément natif du navigateur pour simplifier le code et réduire les dépendances. Il couvre l'ouverture et la fermeture des dialogues, ainsi que des fonctionnalités avancées comme la fermeture légère (light dismissal) et la gestion des événements de fermeture.
L'article explique comment utiliser la nouvelle API Invoker Commands pour contrôler les éléments interactifs comme les popovers et les boîtes de dialogue modales sans écrire de JavaScript. Cette API introduit les attributs command et commandfor pour les éléments <button>, permettant d'effectuer des actions comme show-modal, close, request-close pour les dialogues, et show-popover, hide-popover, toggle-popover pour les popovers. L'article détaille également les différences entre les dialogues et les popovers, ainsi que les avantages de cette API pour simplifier le développement web.
L'auteur rappelle le principe de moindre pouvoir : choisir le langage le moins puissant pour un but donné — on permet ainsi de laisser le navigateur la manière d'accomplir ce que l'on souhaite.
Il présente ensuite quelques éléments / fonctionnalités pour lesquelles JavaScript peut être remplacé avantageusement par du HTML / CSS :
- Custom Switches
- Datalist, un composant avec autocomplétion native
- Un Color picker
- Accordions
- Dialog modals
Il rappelle à chaque fois les meilleures pratiques d'accessibilité.
Comment écrire une "bonne" bannière d'acceptation des cookies
Comment ajouter un bouton "fermer" à une modale proprement
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre... Il y en a plein de chouettes (via sebsauvage et le warrior du dimanche)
La liste :
- Typing Effect
- Drop shadow
- Smooth scrolling
- Center
- Cursors
- Truncate text
- Truncate the text to the specific number of lines.
::selectionCSS pseudo-element- Anything resizable
- CSS modals
calc()- Style empty elements
- position: sticky;
- CSS Scroll Snap
- Dynamic Tooltips
- caret-color
- Fancy text
Tout est dans le titre
Kakoune est un éditeur de texte modal, à la vi.
Tout est dans le titre... article très complet et compréhensible :)
Tout est dans le titre (via https://blog.stephaniewalter.fr/la-semaine-en-pixels-16-juin-2017/)
Tout est dans le titre
Tout est dans le titre
Une fenêtre popup modale avec le plugin jQuery Reveal