DEV Community 👩‍💻👨‍💻

Cover image for You can create these elements without JavaScript
Adrian Bece
Adrian Bece

Posted on • Updated on

You can create these elements without JavaScript

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.

Alt Text

Accordion with no JavaScript!

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.

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.

Buy Me A Coffee

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

Top comments (95)

Collapse
 
moopet profile image
Ben Sinclair

If you think that relying on extra HTML is a downside (and I do, too) then solutions like the "pure CSS" floating label you've included are off the table. That uses extra divs and spans and data attributes.
I know people often say that HTML + CSS is "pure CSS" but it's definitely not!

Collapse
 
vonas profile image
Jonas

Why do you think that it's a downside?

Collapse
 
moopet profile image
Ben Sinclair

If you have a site and want to change its appearance, doing so in a stylesheet makes sense. Why would it make sense to go through the content, which is usually going to be held in a database by a CMS, to change the structure of things? There's no reason I can think of to marry style and content.

Collapse
 
mistermaker profile image
Mohit Aggarwal

Cool Adrian, Nice😍😍 to see that we can make amazing things using only css. i am sure gonna use this Css only tricks in my projects.

Collapse
 
adrianbdesigns profile image
Adrian Bece Author

Awesome, glad you like the article. If you enjoy creating cool stuff with CSS, check out the games that are created with only CSS.

codepen.io/jcoulterdesign/pen/NOMeEb

Collapse
 
devmount profile image
Andreas

Awesome! I recently wrote about CSS games, I will definitely include this! 😍

Collapse
 
mistermaker profile image
Mohit Aggarwal

Wow nice, Css is really awesome i would say.

Collapse
 
tirthaguha profile image
Tirtha Guha

Would these be accessible, with semantic markup and aria attributes? Sorry, posting from mobile, so can't verify.

Collapse
 
adrianbdesigns profile image
Adrian Bece Author

Markup is semantic, but you can add aria tags according to your use case. These examples also work with basic keyboard navigation.

Collapse
 
iamschulz profile image
Daniel Schulz

There are still a few a11ythings to consider.
You don't need to utilize the checkbox hack for the accordion, there's a tag for that: /.
When you use the checkbox hack, the input comes up in the form controls pane of screenreaders, where it doesn't really belong.

Also, giving an an empty href lets browsers consider it as a navigational element, where your example behaves like a button. The contents of a modal will also never be tab-able. The semantic tag for a modal would be , but I wouldn't know how to toggle that without js. I can't really think of a pure css solution that considers these points, though.

Thread Thread
 
khuongduybui profile image
Duy K. Bui

You didn't escape or wrap your tags properly, so we can't see the tag you tried to tell us. From my experience, I guess they are <details> and <summary>.

Collapse
 
simevidas profile image
Šime Vidas

How do you operate the star rating with the keyboard?

Thread Thread
 
cattjames profile image
James Catt

Focus then arrow keys. Trouble is that there's no visible focus indicator. I seem to remember trying an implementation like this a while back but it didn't quite work right if JAWS was running.

Thread Thread
 
konrud profile image
Konstantin Rouda

I've tried to do something similar to the star rating, with the keyboard navigation and accessibility in mind.
It's not ideal but it tries to take into account accessibility and keyboard navigation as far as possible.

Code Example

Collapse
 
cattjames profile image
James Catt

I'm not gonna lie, when I saw the title of this post I thought "oh great, another CSS hackfest that will be totally inaccessible"... but I gotta give you credit that it's not. Kudos. :)

That being said, I still think it's better to encourage people to just use a teeny bit of JS and do things the standard way instead of relying on CSS hacks. Far more robust/reliable for a11y.

Collapse
 
adrianbdesigns profile image
Adrian Bece Author

Thank you, I'm really glad you've enjoyed it.

Collapse
 
adamddurrant profile image
Adam Durrant • Edited on

Nice Adrian, I preach this a lot, I've had plenty of SEO success from reducing on-page JavaScript as Google isn't good at reading it 👌

Collapse
 
mindplay profile image
Rasmus Schultz

Why would on-page JS affect SEO? As long as the content is on the page (with proper semantics) it should be visible to search engines?

Collapse
 
iburn36360 profile image
Anthony Diaz

On-Page JS tends to slow the site down, and speed IS a huge ranking factor (Note that even small amounts of JS can add up to a huge amount of work, especially with DOM mutations since they cannot be pre-composed). That is not to say all JS is bad, but there are plenty of cases where your JS is hurting your ability for your site to perform adequately.

Collapse
 
adrianbdesigns profile image
Adrian Bece Author

Thank you! Glad you found it helpful

Collapse
 
khuongduybui profile image
Duy K. Bui

Another cool HTML5 tag is <datalist> element. Autocomplete without JS.
I haven't figured out how to style the autocomplete control though.

Collapse
 
e4ra7ly profile image
جيم درويد

<a href="https://gmdroid.com/%D8%AA%D8%AD%D9%85%D9%8A%D9%84-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-remini-%D9%85%D9%87%D9%83%D8%B1-2022-%D9%84%D9%84%D8%A7%D9%86%D8%AF%D8%B1%D9%88%D9%8A%D8%AF/" class="mozbar-highlight-followed-wGA7MhRhQ3WS">remini</a>

Collapse
Collapse
Collapse
 
apkrio1 profile image
Collapse
 
thkyrm profile image
Nft Generator

The world of Lost Light abides by the rule of “high risk-high return.” You could either sneak your way around and scavenge for supplies or go out with guns blazing and plunder like a warlord. Upgrading and trading are also essential to build up your strength and keep your enemies at bay.Armed to the teeth or be a minimalist in the next mission? Each decision will affect your chances of survival in Lost Light. And that’s the way warfare is.
gta chinatown wars
westland survival/
heroes strike
chicken gun
critical ops
modern warships/

Collapse
Collapse
Collapse
Collapse
 
apkrio1 profile image
Apkrio

محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد
محترف الاندرويد

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.