А якщо без JavaScript?

В нашому світі без JavaScript нікуди! Купа фреймворків, бібліотек та іншої радості! jQuery щільно ввійшов у наше життя. React з Angular пробивають дорогу до світлого майбутнього. Та й не за горами підтримка браузерами ES6 без Babel.

Але якщо тема заходить про звичайному сайті зі стандартним функціоналом, не рідкісні випадки, коли JavaScript починають «злоупотрелять». І всі, в принципі, нормально… Але деколи задаєшся питанням: «А якщо без JavaScript?».

Тому хочу поділитися з Вами варіантами реалізації того чи іншого функціоналу, використовуючи тільки html і css. Можливо, якісь Ви вже бачили, або навіть використовуєте у своїх проектах, але тут я вирішив зібрати всі корисні (і не дуже) напрацювання, які можуть замінити js.

Всі приклади адаптивні і легко розширювані. Логіка роботи побудована на checkbox і radiobutton, з якими пов'язані label по id. Id можна генерувати на стороні сервера.

Але відразу хочу зауважити, що даний код служить лише прикладом реалізації, і я не додавав до властивостей вендорних префіксів.

Підемо від простих рішень до більш цікавим.

1. Таби / вкладки


label — вкладка;
p — контейнер для тексту (можна замінити на div, наприклад).
Щоб додати нову вкладку, треба додати в html теги input+label+p.

2. Акордеон


Працює за таким же принципом, як і приклад 1.

3. Модальне вікно


Модальне вікно відкрито, коли input:checked.

Тепер в будь-якому місці у документі можна розмістити кнопку label[for=zayavka], натискання на яку буде відкривати модальне вікно. «zayavka» — це id модального вікна, а точніше id input'а, який його «відкриває». Тобто що б додати ще 1 модальне вікно, треба скопіювати input+div.modal і замінити id input'а й for у label, які з ним пов'язані.

4. Навігація / меню


Це варіант реалізації мобільного меню з підпунктами. Можна, звичайно, адаптувати через медіа-запити до десктопної версії.

5. Слайдер з превью зображень


Розмір слайдера і кількість зображень в ньому можна зробити будь-яку. Щоб додати нове зображення, потрібно скопіювати конструкцію input+(.item>img)+label>img (знову ж таки, це можна генерувати автоматично на стороні сервера). Перший img — це основне зображення, другий img — превью. При бажанні, flex можна замінити на inline-block або float.

6. Карусель з «ледачою» завантаженням зображень


Розмір каруселі і кількість зображень в ній можна зробити будь-яку. Також можна доопрацювати css і зробити відображення декількох зображень в ряд. «Ледача» завантаження тут досягається шляхом того, що зображення прописуються в background-image для div, а в css є рядок, яка перебиває цю властивість для div, які не відображені на екрані. В результаті, зображення завантажуються тільки тоді, коли користувач почне гортати карусель.

Div з background-image можна замінити на звичайний <img>, але тоді лінива завантаження працювати не буде. Щоб додати нове зображення, треба додати в html теги input+div>label+.item. Причому, у label for повинен вести на input перед попереднім зображенням (приклад див. у коді вище).

Підсумок
Так само хочу додати, що, наприклад, «прилипання» меню на верхній частині екрану при скролінгу можна зробити, встановивши властивість position: sticky для меню. Але ця властивість підтримується не всіма браузерами.

Сподіваюся, ця стаття виявилася корисною для Вас! Таким чином можна реалізувати ще багато різних елементів на сайті без JavaScript. Один плюс таких реалізацій — це робота в браузерах з вимкненим JavaScript (якщо в наш час хтось таким користується).

Спасибі за увагу!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.