Your website does not need JavaScript - Amy Kapernick - NDC Oslo 2024

Many JavaScript functionalities can be replaced with pure HTML/CSS solutions:

• Accordions using details/summary elements
• Form validation using native HTML attributes like required and pattern
• Theme toggles using CSS custom properties and radio inputs
• Content targeting via URL hash values
• Range sliders with input type="range" and datalist

Modern CSS features reduce the need for JavaScript:

• Native CSS nesting eliminates preprocessor dependency
• The :has() selector enables parent-child relationship queries
• CSS Grid and Flexbox handle complex layouts
• CSS custom properties (variables) manage theming

Before adding JavaScript, consider:

• If HTML elements could provide the functionality
• Whether CSS animations could replace JS animations
• If the JavaScript actually improves user experience
• Whether existing JS code is still necessary
• If tracking scripts are truly needed

Common components can be built without JavaScript:

• Theme toggles using radio inputs and CSS
• Testimonial sliders using form inputs and CSS Grid
• Accordion components with details/summary
• Form validation using HTML5 attributes
• Single page navigation using URL hash targeting

Browser support considerations:

• Most modern HTML form elements have broad support
• CSS Grid and Flexbox are well-supported
• Newer features like :has() have growing support
• Graceful degradation works for older browsers