You can create these elements without using JavaScript

We are used to creating some UI elements with JavaScript, such as accordions, tooltips, text truncations, etc. But since HTML and CSS are constantly getting new features and older browsers no longer need to be supported, we can use a lot less JavaScript code to create UI elements and more focus on the logical part (validation, data processing, etc.).

Some solutions still seem hacky and inflexible, but they are useful in small projects and if they are single-use items. Why write a JavaScript function (or use jQuery if you remember) for a single accordion on your website? This was my thought when I was adding the accordion to the mobile footer on my personal website.

Here are some examples of creating elements without JavaScript.

Adaptive text truncation

Truncating text with CSS is very easy to implement, since we are not editing the HTML content of the text, but only its rendering. While truncating single line text is well supported in older browsers, truncating multiline text is only supported in newer ones.

Rating component

The rating is a required element of most forms. There are many ways to implement it with CSS: using a background image, JavaScript, icons, etc. The most accessible way is to implement it using icons and native radio buttons.

The disadvantage of this implementation is that the radio buttons are in reverse order (5 to 1 rating value), because we need to select all the stars, including the selected one, which cannot be selected with CSS. This is why we reorder and paint the stars in reverse order.

This implementation is very flexible and can be easily customized.

Tooltip / dropdown menu

It is a very flexible element because its CSS logic can be used for both tooltips and dropdown menus, since they work the same way and both support hover and click (touch) functionality.

A problem with this implementation is that, due to focus styles, the tooltip (dropdown) will remain open when clicked until the user moves the cursor away from the element (the element uses focus).

Modal windows

This is a bit of a hacky implementation that relies entirely on the URL. The ID in the URL must match the modal that we need to open.

Floating label

I looked at implementing floating-label inputs inseparate articleas this implementation is a little more complicated.

Toggle / Accordion

Recently HTML introduced a native accordion (toggle) element with

and

elements, but the downside to using these elements is that they don’t have many styling options, so developers continue to use their own implementations. Fortunately, with the help of checkbox or radio button logic, we can create toggles and accordions without relying on JavaScript.

The downside of using this implementation is that it relies on the HTML input element and its logic, which requires additional HTML, but on the other hand, it brings us to a very accessible element.

Conclusion

As you can see, these implementations rely on CSS selector logic like: focus and: placeholder-shown to replace JavaScript logic. Some of these solutions can be considered hackish, but they are fast, flexible and do not rely on JavaScript.

I have used some of these solutions in my projects, so I can avoid adding any additional JavaScript code or completely stop using it for the interface.

Of course, there are many other CSS-only solutions out there, but I found these to be the most interesting. If you use any other solutions, let me know in the comments.