Astro Accelerator adds specific classes to the document body to help you style elements based on the user’s input method and whether JavaScript is available.
Input types
The user’s current input method causes a class to be added to the document body.
- Keyboard:
input-keyboard - Mouse:
input-mouse - Touch:
input-touch
Only one of these classes will be present at any time.
This allows you to adjust styles to suit different input types, for example adding more prominent focus indicators for keyboard users:
.input-keyboard :focus {
outline: 2px dashed aqua;
border-radius: 5px;
}JavaScript detection
You may want to conditionally style elements based on whether the JavaScript modules are loaded. This allows fallback mechanisms to remain visible until it’s certain the JavaScript enhancements are working.
The js-enabled class is added to the <body> element when the JavaScript modules are loaded.
You might use this to hide a fallback mechanism, for example:
body.js-enabled .site-nav {
display: none;
}