We've got used to writing JavaScript for common UI element functionality like accordions, tooltips, text truncation, etc. But as HTML and CSS got new features and older browsers were no longer supported, we've been able to use less and less JavaScript for creating UI elements and focusing it more on logic part of the code (validation, data processing, etc.).

Some solutions do still feel hacky and not flexible, but these are useful on smaller projects and if those are single-instance elements. Why write JavaScript function (or use jQuery if you feel nostalgic) for a single accordion on your website? That was my thought process when adding an accordion on the footer for mobile-only on my personal website.

Here are some examples of elements you can create with no JavaScript.

Responsive text truncation

CSS text truncation is very simple to implement and is very performant since we are not editing the HTML content of the text, only its render. While single-line text truncation is well supported in older browsers, multi-line text truncation is only supported on newer browsers.

Star rating input

Star ratings are a must-have element of most review forms and functionalities. There are many ways of implementing this with CSS: using a background image, JavaScript, icons, etc. The most accessible way of implementing this is with icons and native radio inputs.

The downside of this implementation is that the input HTML radio inputs are in the reverse order (from 5 to 1 rating value) because we need to select all the starts up to and including the checked input which is not possible to select with CSS. That's why we reverse the order and select inputs from the checked input to the first input.

This implementation is very flexible and can be easily customized.

Tooltip / dropdown menu

This is a very flexible element because it's CSS logic can be used for both tooltips and dropdown menus, because they work in a similar way and both support the hover and click (touch) functionalities.

Something that can be considered an issue with this implementation is that due to it's focus styles, the tooltip (dropdown) will remain open on click until the user clicks away from the element (element uses focus).

Modal

This a bit of a hacky implementation that relies entirely on the query string of the URL. Id in the URL needs to match the modal element that we need to open.

Floating label input

I've covered floating label inputs implementation in a separate article since this implementation is a bit more complex.

Let's create a floating label input with HTML and CSS only

Adrian Bece ・ Nov 6 '19

#webdev #tutorial #css #html

Toggle / Accordion

Recently, HTML got its native accordion (toggle) element with <details> and <summary> elements, but the downside of using those elements is that they don't have many styling options, so developers still continue to use their own implementation. Luckily, with checkbox or radio input logic we can create toggleable elements and accordions without relying on JavaScript.

The downside of using this implementation is that it relies on input HTML element and it's logic resulting in extra HTML code needed, but also on the flip side, this results in a very accessible element.

Conclusion

As you can see, these CSS-only implementations rely on CSS selector logic like :focus and :placeholder-shown to replace JavaScript logic. Some of these CSS solutions can be considered hacky, but they are performant, flexible and don't rely on JavaScript.

I've used some of those CSS solutions in my projects, so I can avoid adding any extra JavaScript or avoid using JavaScript entirely for visual presentation.

Of course, there are many more CSS-only solutions out there, but I've found these ones most interesting. If you are using any other solutions, please do let me know in the comments.

These articles are fueled by coffee. So if you enjoy my work and found it useful, consider buying me a coffee! I would really appreciate it.

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.