6 Punkte von xguru 2022-04-26 | 1 Kommentare | Auf WhatsApp teilen
  • Derzeit liegt ein inoffizieller Entwurf vor, und Chromium will bald mit dem Prototyping beginnen
  • Ein Mechanismus, der den Zustand von DOM-Objekten wie Checkboxen/Radio-Buttons mit CSS verknüpft
html {  
  toggle-root: lightswitch; /* Toggle erzeugen. 0 (deaktiviert, Standardwert) und 1 (aktiviert) */  
}  
  
button {  
  toggle-trigger: lightswitch; /* Toggle beim Klick auf den Button */  
}  
  
html:toggle(lightswitch) {  
  /* Stil, der angewendet wird, wenn das lightswitch-Toggle aktiviert ist */  
}  
  • Es können mehrere Toggles erzeugt werden. Sie können mehr als einen aktiven Zustand haben und müssen nicht zwingend Zahlenwerte wie 0/1 verwenden
  • Der Standardwert ist 0, kann aber überschrieben werden
  • Ein einzelnes Element kann sowohl toggle-root als auch toggle-trigger sein
  • Über toggle-visibility können Elemente abhängig vom Toggle-Wert ein- oder ausgeblendet werden
  • Gruppierung über toggle-group möglich (nützlich für Tab-Interfaces)

1 Kommentare

 
joyfui 2022-04-26

Es gibt zwar eine Möglichkeit, mit Radiobuttons ganz ohne JavaScript und nur mit CSS ein Tab-Menü zu bauen, aber wenn das kommt, wird es noch einfacher.