Translucent Accordions

Animating details-summary revisited

Update history

Update 2021:

  • Replaced key detection with KeyboardEvent API to resolve event.which deprecation issues
  • Negative values enabled on the range inputs
  • Cut & Paste enabled on input fields
  • Multi-keyboard types accomodated: Qwerty, Dvorak, Azerty, etc
  • Numeric keypad enabled
  • Added a comment referencing the tools' url
  • A few Accessibility improvements.

Update 2020:

  • Variable property name
  • CSS clamp option
  • CSS min/max option
  • Safari resize fix option
  • Longhand calculation option
  • Settings preserved with localStorage
  • Improved HTML form semantics
  • Prevention of non-numeric inputs
  • Grid and Flexbox layout
  • Limited to 4 decimal places.

Check no side-effects on links and buttons