Готовы ли вы принять вызов чистого HTML/CSS?
В этой серии я хочу создать несколько общих веб-элементов с помощью простого HTML и CSS. Почему? — можно было бы спросить. Во-первых, мне нравятся сложные задачи, и я думаю, что хорошо поработать над вашей основой HMTL/CSS. Кроме того, не все проекты создаются с использованием современных фреймворков JavaScript, и в этих случаях, я считаю, мы иногда слишком быстро по умолчанию используем решение на основе JavaScript. На этой картинке ниже показано, что мы будем делать:
Давайте посмотрим, как устроен HTML.
Обратите внимание, что кнопка «Подробнее» состоит из флажка и метки. Когда мы нажимаем на метку, ввод флажка будет проверен (выполнено с помощью for на метке, которая соответствует id ввода). По умолчанию мы скроем все элементы ‹li› после флажка. Когда установлен флажок «Читать дальше», мы скрываем нашу «кнопку чтения» и отображаем все элементы «li». Благодаря этому мы эффективно создаем нашу функциональность для чтения. Давайте посмотрим на (важные части) (S)CSS.
CSS ясно показывает, что элементы ‹li› после флажка скрыты. Когда флажок установлен, они отображаются (с гибким дисплеем). Когда флажок установлен, мы прячем метку (стилизованную под кнопку), так как в ней больше нет необходимости.
И это все! Но подождите, что случилось с нашей функцией «меньше чтения»? Не беспокойтесь, HTML/CSS вам в помощь!
Хитрость «меньше чтения» заключается в том, чтобы поместить флажок и метку (стилизованную под кнопку) перед всеми скрытыми элементами ‹li›. При этом мы можем применить ту же логику, но в обратном порядке: когда установлен флажок «Меньше читать», мы скрываем все элементы «li» после флажка «Меньше читать». Затем, используя flexbox, мы визуально переставляем элементы так, чтобы наша кнопка «Читать меньше» отображалась внизу.
Вы можете просмотреть полный пример кода здесь, на CodePen.
У вас есть веб-элемент, для которого вы используете «хак» HTML/CSS? Или есть еще веб-элементы, которые вы хотели бы решить с помощью только HTML и CSS? Хотелось бы услышать ваши мысли.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
