L’avenir de CSS : CSS Toggles

 (bram.us)
6 points par xguru 2022-04-26 | 1 commentaires | Partager sur WhatsApp
  • Un brouillon non officiel a été publié, et Chromium devrait commencer le prototypage
  • Un mécanisme qui relie l’état d’objets du DOM, comme les cases à cocher et les boutons radio, au CSS
html {  
  toggle-root: lightswitch; /* création d’un toggle. 0 (désactivé, valeur par défaut) et 1 (activé) */  
}  
  
button {  
  toggle-trigger: lightswitch; /* toggle au clic sur le bouton */  
}  
  
html:toggle(lightswitch) {  
  /* styles à appliquer lorsque le toggle lightswitch est activé */  
}
  • Il est possible de créer plusieurs toggles. Ils peuvent avoir plus d’un état actif, et ne sont pas forcément limités à des valeurs numériques comme 0/1
  • La valeur par défaut est 0, mais elle peut être surchargée
  • Un même élément peut être à la fois toggle-root et toggle-trigger
  • toggle-visibility permet d’afficher/masquer des éléments selon la valeur du toggle
  • Regroupement possible avec toggle-group (utile pour les interfaces à onglets)

À lire aussi

1 commentaires

 
joyfui 2022-04-26

Il existe déjà une méthode pour créer un menu à onglets uniquement en CSS, sans JavaScript, à l’aide de boutons radio ; avec ça, ce sera encore plus simple.