ТОП-6 рецептов на чистом HTML и CSS без использования JS

Не нужен JS для создания крутых эффектов. Доказываем и показываем трюки на чистом HTML и CSS, чтобы сэкономить время на разработку.

Самая ожидаемая и интересная особенность. Неважно, нужен вам липкий заголовок, футер, сайдбар или любой другой компонент.

До появления position: sticky нужен был JavaScript код для обработки «липкости» и положения, связанного со страницей.

Теперь с position: sticky можно легко вставить компонент в любом месте на странице. Пока не все браузеры полностью поддерживают этот функционал (см. таблицу ниже), но разметка HTML и CSS стили не стоят на месте и «Москва не сразу строилась».

ТОП-6 рецептов на чистом HTML и CSS без использования JS

Прокрутка всегда выполнялась силами JS, независимо от того, галерея это, простая страница или слайдер. В настоящее время с помощью данного свойства CSS можно очень просто привязать содержимое к границам родителя. Добавьте родителю свойство scroll-snap-type: x mandatory/y mandatory или both mandatory (разновидность свойства proximity), а к дочернему элементу добавьте scroll-snap-align: start, end или center, и контент будет привязан к центру/родительской границе.

Поддержка этого свойства составит почти 100%, если немного «допилить» некоторые настройки для каждого браузера:

  • Firefox нуждается в более старой версии.
  • IE / Edge нужен префикс -ms-.
  • Для пользователей iOS необходимо добавить -webkit-overflow-scrolling: touch к родительскому элементу.

Это свойство настолько удобно в использовании, что можно полностью отказаться от использования библиотек для прокрутки.

ТОП-6 рецептов на чистом HTML и CSS без использования JS

С тех пор, как Pinterest вошел в нашу жизнь, одной из самых популярных видов галерей является плиточная раскладка.

ТОП-6 рецептов на чистом HTML и CSS без использования JS

Это очень крутой способ отображения элементов на странице, но для этого нужен язык программирования JavaScript, чтобы рассчитать положение элементов.

Свойство display: grid и grid-auto-flow: dense поможет сделать это гораздо проще.

ТОП-6 рецептов на чистом HTML и CSS без использования JS

Существует множество вариантов реализации плейсхолдеров для формы логин/пароль и т. д. Теперь с помощью псевдокласса CSS под названием placeholder: shown можно управлять появлением подсказки и реагировать на ввод данных в input. Если ничего не происходит – плейсхолдер отображается, а если пользователь начинает печатать – можно изменить положение подсказки или ее дизайн.

ТОП-6 рецептов на чистом HTML и CSS без использования JS

Обычно, когда нужны вкладки (табы), используют несколько вариантов:

  • копируют код JS из сети
  • используют radio buttons с метками
  • применяют псевдо-класс :target

В то время как первый вариант требует JS, второй может вызвать массу неприятностей, а последний – прост в использовании и имеет полную поддержку браузеров.

ТОП-6 рецептов на чистом HTML и CSS без использования JS

В HTML есть отличные теги под названием <details> и <summary>, позволяющие создать аккордеон без единой строчки JS-кода. Эта возможность будет работать некорректно в IE и Edge, но скоро Edge engine будет заменен на chromium engine, и тогда все придет в норму.

ТОП-6 рецептов на чистом HTML и CSS без использования JS

Оригинал

Расскажите нам, какие из этих трюков вы уже использовали, и были ли с ними сложности?

proglib.io

Добавить комментарий

Ваш e-mail не будет опубликован.

десять + 6 =