wb_sunny

Вам и не снилось, что можно сейчас сделать на чистых CSS и HTML (С примерами)

735 любопытных

В течение многих лет интерактивность в Интернете означала использование JavaScript. Будь то Ваш JS или библиотеки, такие как jQuery или React, этот язык был единственным путём к созданию элементов, с которыми пользователи могли взаимодействовать.

И хотя JavaScript по-прежнему очень полезен в этих в этих делах, он больше не является обязательным условием. В наши дни многое можно сделать с помощью HTML и CSS. Каждый стандарт был расширен и включает в себя функции, которые когда-то были эксклюзивными для других языков.

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

Звучит интересно? Сегодня я покажу вам несколько распространенных интерактивных элементов, которые можно создать, используя только HTML и CSS без использования JS. Погнали.

Рекомендую:

Аккордеон без 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.