Вам и не снилось, что можно сейчас сделать на чистых CSS и HTML (С примерами)
745 любопытных
В течение многих лет интерактивность в Интернете означала использование JavaScript. Будь то Ваш JS или библиотеки, такие как jQuery или React, этот язык был единственным путём к созданию элементов, с которыми пользователи могли взаимодействовать.
И хотя JavaScript по-прежнему очень полезен в этих в этих делах, он больше не является обязательным условием. В наши дни многое можно сделать с помощью HTML и CSS. Каждый стандарт был расширен и включает в себя функции, которые когда-то были эксклюзивными для других языков.
Эта эволюция дает несколько преимуществ. Во-первых, значительно снижается сложность создания этих элементов. Вам не нужно загружать внешние библиотеки или беспокоиться об освоении синтаксиса JavaScript. В свою очередь, это также повышает производительность и обеспечивает совместимость с браузерами.
Звучит интересно? Сегодня я покажу вам несколько распространенных интерактивных элементов, которые можно создать, используя только HTML и CSS без использования JS. Погнали.
Рекомендую:
- Тень для элементов на сайте на чистом CSS и совершенно бесплатно
- Крутые кнопки и формы для сайта на CSS
- 10 ретро игр, которые работают на HTML, JS и CSS
Аккордеон без JavaScript
Аккордеоны уже давно создаются с помощью JavaScript. Библиотека jQuery UI даже включает в себя этот элемент. Новые возможности HTML и CSS упростили процессы создания и стилизации, но, правда, это не самый лёгкий код.
See the Pen A Simple HTML Accordion Using <details> by Eric Karkovack (@karks88) on CodePen.
Адаптивное меню для сата на чистых HTML и CSS
Раньше создание навигации, работающей во всех браузерах и устройствах, было довольно сложной задачей. Особенно при создании многоуровневых или мега-меню. Расширенные функции часто требовали не простых и сложных решений, чтобы все работало в устаревших браузерах.
И это еще без учета маленьких экранов. Для обеспечения удобства использования на мобильных устройствах может потребоваться вообще создание отдельного меню. Но с новыми возможностями CSS подобную адаптивную навигацию можно создать вообще без использования JS.
See the Pen Responsive Mega Menu and Dropdown Menu using only HTML & CSS by Muhammad Fadzrin Madu (@fadzrinmadu) on CodePen.
Игра на CSS
Веб-игры существуют уже давно — еще со времен Flash. И даже тогда когда эта платформа умерла, процесс их создания оставался сложным.
Создание плавной анимации, обработка математических расчетов и возможность ввода данных пользователем традиционно требовали использования продвинутых сценариев и библиотек. Но теперь это совершенно не обязательно.
See the Pen Pure CSS ghost bustin’ game w/ CSS variables 👻🕹#CodePenChallenge by Jhey (@jh3y) on CodePen.
Медиа плееры
Как и игры, использовать мультимедиа в интернете когда-то возможно только с помощь специальных плагинов для браузеров. Отчасти это было связано с проприетарными форматами, поскольку создатели боролись за долю рынка для своих кодеков. Создатели контента (а значит, и дизайнеры) были вынуждены выбирать один или несколько форматов для предоставления пользователям. А для воспроизведения медиафайлов пользователям требовалось установить соответствующее программное обеспечение. Это был полный бардак.
И хотя JavaScript по-прежнему рекомендуется для создания более настраиваемого пользовательского интерфейса, он больше не является необходимостью. Некоторые базовые стили можно сделать с помощью CSS. Осторожно, громко!
See the Pen HTML5 Audio CSS style by Dani Castaños (@dcastanos) on CodePen.
Что в итоге?
Достижения в области CSS и HTML открыли огромные возможности для всего интернета в целом. Больше не нужно прибегать к огромным библиотекам кода или чрезмерно сложным процессам, чтобы обеспечить базовую интерактивность. Поддержка многих элементов в современных браузерах более чем способна справиться с задачей.
Отчасти это хорошо, поскольку веб-дизайнерам необходимо учитывать постоянно растущий набор устройств. Такие элементы, как навигация и медиаплееры, которые просто работают без использования сторонних библиотек, существенно облегчает задачу разработчикам.
Конечно, JavaScript и тому подобное по-прежнему нужны для того, чтобы решать очень многие задачи. Но теперь есть возможность сделать основу и без использования JS.
