For many years, interaction on the web has been about using JavaScript. Whether it’s vanilla JS or a library like jQuery or React, the language is the gateway to building elements that users can interact with.
And while JavaScript is still very useful in these situations – it’s no longer a requirement. A lot can be accomplished these days with a combination of HTML and CSS. Each standard has been expanded to include features that were once exclusive to other languages.
This evolution has several advantages. First, the complexity of building these elements is greatly reduced. You don’t need to load external libraries or worry about mastering JavaScript syntax. In turn, this boosts performance and ensures browser compatibility.
Sound interesting? Today, we’ll show you a handful of popular interactive elements that you can build with nothing but HTML and CSS.
Interface Box Interface
Music boxes have long been built with the help of JavaScript. Even the element is included in the jQuery UI library. This simplified the creation and styling processes, but it’s not the most active code.
Especially when you consider that HTML is now at the details and summary built-in tags. With some markup and styling basics, it is possible to create attractive and functional UIs. It is also compatible with all major browsers.
It is worth mentioning that this mode does not offer the full range of special effects. As MDN notes:
Unfortunately, at this time there is no built-in way to animate the transition between open and closed.
Minus that caveat, this is a very viable alternative to loading a JavaScript library.
Below is a basic example of what can be done with a few lines of HTML and CSS.
Using Simple HTML Box <details> by Eric Karkovack
See the Pen A Simple HTML Accordion Using
Advanced Navigation Menus
Making navigation that works across browsers and devices was a big challenge. Especially when creating multi-level or mega menus. Complex features often required fallbacks to keep things working on legacy browsers.
And that’s not even taking small screens into account. It may be necessary to implement an entirely separate menu to ensure ease of use on mobile devices.
Thankfully, much progress has been made in this area. By combining HTML nav tag, unordered lists, and CSS, we can support the entire spectrum of devices. Not only can they look as good as the JavaScript-heavy menus of the past, but they can also perform more efficiently.
Responsive Mega Menu & Dropdown Menu Using only HTML & CSS by Muhammad Fadzrin Madu
Check out Responsive Pen Mega Menu and Dropdown Using Only HTML & CSS by Muhammad Fadzrin Madu
Games
Web-based games have been around for a long time – dating back to the days of (gulp!) Flash. And even after that platform went down, the process of building them was still complicated.
Creating smooth animations, processing mathematical calculations, and allowing user input has traditionally required advanced scripting and library usage. But that doesn’t have to be the case anymore.
Now, CSS can be combined with things like HTML canvas, SVG, and other items to create amazingly powerful results. While you won’t mistake these pure CSS games for the flagship titles playing on your console, they are impressive nonetheless.
At the very least, they make for a compelling waste of time!
Pure CSS Ghost Bustin’ game with CSS Variables at Jhey
Check out the Pen Pure CSS ghost game w/ CSS variables 👻🕹#CodePenChallenge by Jhey
Media Players
Much like games, multimedia on the web was once in browser-plugin territory. Part of that was due to proprietary formats, as vendors wanted to gain market share for their encoders. Content providers (and thus, designers) were forced to choose one or more formats to make available to users. And users had the right software installed to play the media. It was a mess.
But even when formats like MP4 became open standards, playback remained complicated. However, transitioning to HTML5 has placed much of the functionality burden on browsers. The IS video and audio features use a built-in media player with various optional features.
And while JavaScript is still recommended for more custom UIs, it’s no longer necessary. Some basic styles can be achieved with CSS. In addition, the compatibility of the browser for the native elements is strong.
CSS Audio HTML5 Style by Dani Castaños
Check out the HTML5 Audio CSS Pen style by Dani Castaños
Building the Foundation and Beyond
Advances in CSS and HTML have done wonders for pushing the web forward. We no longer need to resort to huge code libraries or overly complex processes to deliver basic interactivity. These natively supported staples can get the job done.
That’s good news, because web designers need to account for an ever-increasing range of devices. Features such as navigation and media players that simply work without the need for third-party libraries are key to that cause.
Sure, there’s still JavaScript and the like to take things to the next level. But the basics can now be built without them.
