And if without JavaScript?

In our world without JavaScript anywhere! A lot of frameworks, libraries and other joy! jQuery tightly entered our lives. React with Angular pave the way to a brighter future. And support for ES6 browsers without Babel is just around the corner.

But if the topic is about a regular site with standard functionality, it is not uncommon for JavaScript to start to “misuse”. And everything, in principle, is normal ... But sometimes you ask yourself the question: “What if without JavaScript?”.

Therefore, I want to share with you the options for implementing this or that functionality, using only html and css. Perhaps, some of you have already seen, or even use in your projects, but here I decided to collect all the useful (and not so) developments that can replace js.

All examples are adaptive and easily extensible. The logic of work is built on the checkbox and radiobutton, with which the label by id is associated. Id can be generated on the server side.
')
But at once I want to note that this code serves only as an example of implementation, and I did not add vendor prefixes to the properties.

Let's go from simple solutions to more interesting ones.

1. Tabs / Tabs


label - tab;
p - container for text (can be replaced by a div, for example).
To add a new tab, you need to add the tags input + label + p to html.

2. Accordion


Works on the same principle as 1 example.

3. Modal window


The modal window is open when input: checked.

Now, anywhere in the document, you can place the label [for = zayavka] button, clicking on which will open a modal window. “Zayavka” is the id of the modal window, or rather the input id that “opens” it. Those. to add 1 more modal window, you need to copy input + div.modal and replace the input input id and for the label associated with it.

4. Navigation / menu


This is a variant of the implementation of the mobile menu with sub-items. You can, of course, adapt through media requests to the desktop version.

5. Slider with image preview


The size of the slider and the number of images in it can be made any. To add a new image, you need to copy the construction input + (. Item> img) + label> img (again, this can be generated automatically on the server side). The first img is the main image, the second img is the preview. If desired, flex can be replaced by inline-block or float.

6. Carousel with “lazy” loading images


The size of the carousel and the number of images in it can be made any. You can also modify the css and display several images in a row. “Lazy” loading here is achieved by the fact that the images are written in the background-image for the div, and in css there is a line that interrupts this property for the div, which are not displayed on the screen. As a result, images will be loaded only when the user starts flipping through the carousel.

A background-image div can be replaced with a regular <img>, but then lazy loading will not work. To add a new image, add the tags + input> div> label + .item to html. Moreover, for the label should lead to the input before the previous image (for an example, see the code above).

Total

All examples are not tied to the id elements and their number! Those. no need to go into css when adding a slide to the carousel, or a new tab tab. Id elements can be set any - everything will work!

I also want to add that, for example, “sticking” the menu to the top of the screen when scrolling can be done by setting the position: sticky property for the menu. But this property is not supported by all browsers .

I hope this article was useful for you! Thus, many more different elements can be implemented on the site without JavaScript. One of the advantages of such implementations is the work in browsers with JavaScript turned off (if in our time someone uses such a thing).

Thanks for attention!