Скажите, в настоящем времени - что в большей степени используется для построения слайдеров- CSS или JS? Что использовать правильнее и из чего/каких условий стоит исходить?
Для любых компонентов нужно смотреть, нет ли в браузерах уже существующих встроенных решений, которые декларативно (с помощью HTML) позволяют просто вставить и использовать их. Например, <input type="date"> или <input type="color"> вполне хорошо поддерживаются. Потом нужно понять, можно ли оформить этот компонент для ваших целей. И только потом, если не получилось на предыдщих шагах, нужно делать свой компонент на HTML, CSS и JS. Чем сложнее компонент, тем больше вероятность, что для него потребуется JS.
Стоит ли делать слайдеры на чистом css или в настоящее время это уже не так актуально?
«Актуальность» это плохая характеристика. Если у вас получается оформить встроенный в браузер <input type="range"> на CSS так, чтобы было похоже — значит вы используете уже готовый, доступный и удобный для всех компонент. Другое дело, если вам нужно несколько ручек на таком слайдере — во встроенном слайдере ручка всего одна. Тогда имеет смысл просто сверстать чтобы он был похож (и чтобы на отдельные ручки можно было попасть с клавиатуры) и дальше уже подключить JS для остального. Либо есть трюк по сочетанию двух слайдеров.
А в продакшене вообще используют
<input type="range">? Судя по этой статье нужно много CSS кода, чтобы его стилизовать кроссбраузерно.
На реальных сайтах вполне широко используют встроенный браузерный слайдер, он вполне оформляется, даже несмотря на то, что это занимает чуть больше кода, чем хотелось бы.
Здравствуйте! Расскажите, пожалуйста, как определить по макету для мелких картинок, иконок как их правильно вставить - псевдоэлементом, svg в саму HTML-разметку, фоном, другим способом ?
Сначала нужно определить, какого типа это изображение: если, как вы пишете, это мелкие иконки — значит это дизайн, оформление. Если это ценная для пользователя графика, имеющая отношение к содержимому сайта — значит так оно и есть.
Для содержимого всё просто: <img> идеальный и самый правильный вариант для таких картинок, не забудьте добавить им alt.
Для оформления всё чуть сложнее, но всегда начинайте с простого:
- Вставьте картинку просто фоном уже существующего элемента
- Если это неудоно делать, добавьте псевдоэлемент
::beforeили::afterи поставьте фон им - Если псевдоэлементы не добавить, они уже чем-то заняты или как-то иначе неудобно — вставьте как
и пропишите пустой
alt="", это подскажет скринридерам, что эту картинку не нужно читать. - Если вам нужно вставить одну иконку в разных цветах или динамически менять цвет иконки, то удобнее всего будет вставить картинку с помощью SVG прямо в разметку, но не забудьте прописать ей размеры. Мы ещё обсудим это на лекциях.
Добрый день, насколько часто в реальной разработке используются data- атрибуты для хранения текстов?