And if without JavaScript?

In our world without JavaScript anywhere! A bunch of frameworks, libraries and other joy! jQuery has firmly entered our lives. React with Angular is paving the way for a brighter future. Yes and not far off support for ES6 browsers without Babel.

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

Therefore, I want to share with you options for implementing this or that functional, using only html and css. Perhaps you have already seen some, or even used 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 checkbox and radiobutton, which are associated with label by id. Id can be generated on the server side.

But I want to note right away that this code is just 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 - a container for text (you can replace it with a div, for example).
To add a new tab, you need to add the input + label + p tags to the html.

2. Accordion


It works on the same principle as 1 example.

3. Modal window


The modal window is open when input: checked.

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

4. Navigation / menu


This is an option for implementing a mobile menu with sub-items. You can, of course, adapt through media queries 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 input + (. Item> img) + label> img construct (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 with 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 refine css and make the display of several images in a row. The "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 divs that are not displayed on the screen. As a result, images will be loaded only when the user starts flipping through the carousel.

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

Total


All examples are not tied to 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” a 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 has been helpful to you! Thus, you can implement many more different elements on the site without JavaScript. One of the pluses of such implementations is work in browsers with JavaScript turned off (if in our time someone uses this).

Thanks for attention!

Also popular now: