When HTML & CSS Replace Javascript: A Simple Element Cheatsheet
There’s a tendency to think that JavaScript is clearly superior to HTML & CSS in every aspect. However, as I will show you in this short, code-ridden article, that’s not the case for all elements.
Why Bother With HTML & CSS?
Too much Javascript can slow down your website.
Generally speaking, as a developer in an experienced React company, I’m a firm believer in HMTL and CSS. I believe that whenever you don’t need to use JavaScript – you shouldn’t. There are plenty of cases where instead of JS you can use pure HTML & CSS achieving the same result with lighter code.
In this article, I’m going to show you a couple of elements you can create without JavaScript.
Feel free to copy-paste the code to your editor!
1: Accordion
There are quite a few ways we can build accordions without writing a single line of JS. Here I’m going to show you two quick and pain-free ways you can get it done with just HTML & CSS.
1. The first one is based on natively embedded HTML5 tags:
- <details>
- <summary>
Disclaimer: Unfortunately, these tags are not supported by the Internet Explorer browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<details class="accordion">
<summary class="accordion__head">
<h3 class="accordion__title">
How will we conduct IEP and 504 meetings?
</h3>
</summary>
<div class="accordion__content">
<p>All meetings will be held remotely.</p>
</div>
</details>
</body>
</html>
There are two widely-occurring issues with default summary styling. But there are also easy fixes that take care of the problem.
- The first issue lies with the cursor. By default, the hover pointer in the summary tag is set to a text cursor which may be confusing to the user. In order to fix this, we’ve simply added a cursor: pointer to the summary tag.
- The second is that the headings are set to {display: block;} by default. If we want to use headings as text tags in the summary tag, we need to set {display: inline;} to all elements inside the summary tag.
You can use the above code in a Q&A section, for example. This is what it’s going to look like:
2. The second way to create an accordion without using JS is based on input, either radio or checkbox. This method is a little bit more complex but works with all browsers.
Here is all code that you need to make it work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="accordion">
<input
class="accordion__input"
type="radio"
name="question"
id="question1"
/>
<label class="accordion__title" for="question1"
>Why React is better than Angular?</label
>
<p class="accordion__content">:)</p>
</div>
<div class="accordion">
<input
class="accordion__input"
type="radio"
name="question"
id="question2"
/>
<label class="accordion__title" for="question2"
>Why React is better than Angular?</label
>
<p class="accordion__content">:)</p>
</div>
</div>
</body>
</html>
As mentioned before, this method relies on the use of inputs that give us control over the opening and closing of accordions.
Get your code clean
2. Modal and Popup
Other cool stuff we can create with just HTML and CSS are modals and popups. It is possible to do this thanks to the pseudo-class :target, which joins the URL hash with the id of an element (e.g. href=”#popup” and id=”popup”).
Keep in mind that when dealing with this modal and popup, the biggest issue is that when you open a modal/popup, the website will jump to a given element.
- Take a look at this modal first. It’s turned on and off by pressing the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<a class="button" href="#modal">Open modal</a>
<div class="modal" id="modal">
<div class="modal__inner">
<a class="modal__close" href="#">Close modal</a>
<div class="modal__content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
</body>
</html>
- The next thing you can use the :target for, is the popup window, which can be disabled by clicking outside the content of our popup window.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<a class="button" href="#popup">Open modal</a>
<div class="popup" id="popup">
<a href="#" class="popup__close"></a>
<div class="popup__inner">
<div class="popup__content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
</body>
</html>
Quick poll
What do you prefer to code with?
3. Tooltip
Next is the tooltip. It works a bit like the modal and popup examples above. However, the tooltip shows up on the hover. To show the content that we put into aria-label, we pass it in the CSS attribute content with the value content: attr(aria-label).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<p>
This is how a
<a
href="#"
class="tooltip"
aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
>tooltip</a
>
works without JS
</p>
</div>
</body>
</html>
4. Star Rating
The last thing will be the functionality useful for ratings (e.g. dishes/hotels), i.e. star rating. The code will be based on radio inputs and labels.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<input type="radio" class="star" name="rating" id="star-5" />
<label class="star-label" for="star-5">*</label>
<input type="radio" class="star" name="rating" id="star-4" />
<label class="star-label" for="star-4">*</label>
<input type="radio" class="star" name="rating" id="star-3" />
<label class="star-label" for="star-3">*</label>
<input type="radio" class="star" name="rating" id="star-2" />
<label class="star-label" for="star-2">*</label>
<input type="radio" class="star" name="rating" id="star-1" />
<label class="star-label" for="star-1">*</label>
</div>
</body>
</html>
Summary
As you can see, JavaScript can easily be replaced with just HTML & CSS.
Pseudo-classes such as target, focus, checked, can replace JS functions making your code lighter. Some of these CSS examples can be considered tricky, but are efficient, flexible, and well worth it.
The examples above are only a couple of cool things you can do. In reality, you can use HTML & CSS to replace dozens of different functions.
What are your thoughts on replacing JS with HTML and CSS? Feel free to share your opinion and any examples of your work down in the comments.