Components using only HTML and CSS

First things first, I want to start saying that i am really an enthusiastic about CSS, I really enjoy to push further what we can do with just a couple lines of HTML & CSS.

When I started working in web development, I remember spending some days just researching jquery plugins to help me build some components such as modals, dropdowns, tabs, accordions etc., etc … It was as easy as adding the plugins script, initialise the plugin, add the css to it and voila it was working.

And it was this way until we started caring about performance. So we started replacing those jquery plugins to native javascript. At that point I started wondering, how it would be if we could do that with just pure HTML & CSS?

The answer to that is a big yes, yes you can do a lot of HTML & CSS only components, and even if you have to care about some old browsers the answer still remains a big yes

For example you can build a nice modal:

This example consists in having an anchor to our modal.

<a href="#modalDialog">Open Modal!</a>

Then and with the help of :target pseudo class we match if the url is the same as the modal id, and if it is we show up the modal.

<section id=”modalDialog” class=”modalDialog” role=”dialog” aria-labelledby=”modal-label” aria-hidden=”true”>

And this is the css that is triggered when we click the anchor link.

.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}

What about tooltips? Yes. And yes you read it right, you can build tooltips just with HTML & CSS:

If you look at the HTML we have a data-attribute that is called ‘data-tooltip’, where we put the content that will show up in our tooltip.

<span class="tooltip" data-tooltip="I found what I need. And it's not friends, it's things." data-tooltip-pos="right" data-tooltip-length="medium">Hover Me</span>

We also have two others data-attributes, one is the tooltip position ‘data-tooltip-pos=”right”’, and the other one is the tooltip width ’data-tooltip-length=”medium”’.

But how does it displays the tooltip content from the data attribute?

You can access that title attribute from the content property, as you can see in the code below:

.tooltip:after {
 content: attr(data-tooltip);
}

Modals and Tooltips were just two examples of what you can do, using css pseudo classes like :target, or :checked along with checkboxes and radio buttons, you can do a lot of plugins using only HTML & CSS like the one’s above without any line of javascript code.

And well there is a lot more to coming with CSS Selectors Level 4.