Srcset and sizes атрибуты
Старейшие атрибуты изображений, которые на практике используются очень редко.
Отображение разноформатных изображений в адаптивной верстке - частая задачка.
Условно на телефонах нужно отобразить легкую картинку 1:1, а на десктопах большую и тяжелую 16:9.
Для этого можно использовать связку атрибутов srcset + sizes в <img/>
Атрибут srcset содержит список URL изображений, за которыми следуют сведения о ширине изображений.
Описывая набор изображений таким способом, мы сообщаем браузеру следующее: «Я даю тебе список изображений и доверяю тебе выбор самого подходящего».
Чтобы переключение изображений заработало нужен еще атрибут sizes, где
пишем список медиа-условий и соответствующую ему ширину изображения.
Подробная статья про адаптивные изображения с srcset и sizes тут.
Надо сказать, что чаще для решения тех же задач используется <picture/>.
Старейшие атрибуты изображений, которые на практике используются очень редко.
Отображение разноформатных изображений в адаптивной верстке - частая задачка.
Условно на телефонах нужно отобразить легкую картинку 1:1, а на десктопах большую и тяжелую 16:9.
Для этого можно использовать связку атрибутов srcset + sizes в <img/>
Атрибут srcset содержит список URL изображений, за которыми следуют сведения о ширине изображений.
Описывая набор изображений таким способом, мы сообщаем браузеру следующее: «Я даю тебе список изображений и доверяю тебе выбор самого подходящего».
Чтобы переключение изображений заработало нужен еще атрибут sizes, где
пишем список медиа-условий и соответствующую ему ширину изображения.
Подробная статья про адаптивные изображения с srcset и sizes тут.
Надо сказать, что чаще для решения тех же задач используется <picture/>.
👍28🔥7❤2❤🔥1
❄️ State of React 2023
Разгулялись в этом году исследователи из Devographics.
На этот раз изучаем React!
К исследованию!
Разгулялись в этом году исследователи из Devographics.
На этот раз изучаем React!
К исследованию!
👍18❤🔥2🍌1💘1
🎭🎪 Новые CSS-анимации!
Продолжаем знакомиться с новинками фронтенда!
Сегодня разбираемся в мастштабном обновлении CSS анимаций!
К просмотру!
Продолжаем знакомиться с новинками фронтенда!
Сегодня разбираемся в мастштабном обновлении CSS анимаций!
К просмотру!
❤23🔥6👍4🥰1
❤7
🕸 Новый Switch-case в JavaScript?
Любопытный proposal проходит сейчас стандартизацию.
В язык добавляется конструкция match-when. Выглядит конечно мощнее и гибче старого свитча.
Ролик про match-when!
Любопытный proposal проходит сейчас стандартизацию.
В язык добавляется конструкция match-when. Выглядит конечно мощнее и гибче старого свитча.
Ролик про match-when!
👍52🔥12👎5
🤡61🗿14👍5💘1
💼💵 Фронтендер ищет работу за 1 000 000$
Пытаюсь стать самым высооплачиваемым фронтендером на Руси.
К просмотру!
Пытаюсь стать самым высооплачиваемым фронтендером на Руси.
К просмотру!
🔥37👍7🤡3
🚀🛰 Как пишут код для космоса?
Космический программист рассказывает про специфику бортового кода.
К просмотру!
Космический программист рассказывает про специфику бортового кода.
К просмотру!
❤11👍3🔥2🤡1
☠️🥸 Руки прочь от HTML-программистов!
Возвращаемся с каникул!
Рассказываю о том, что делал на работе последний год.
К просмотру!
Возвращаемся с каникул!
Рассказываю о том, что делал на работе последний год.
К просмотру!
🔥38❤4🎉2❤🔥1😱1🏆1
Возраждаем профсоюз!
К моему стыду последняя попытка создать большое сообщество разработчиков заглохла.
Мне просто не хватило времени на создание новых роликов, работу и разбор вопросов желающих получить бесплатно доступ к тренажеров.
Но идея все еще кажется классной, было здорово видеть как чаты живут: решаются фронтендерские вопросы, играются шахматные турниры,
а юные академики в том числе из-за полученного опыта в стартапах находят первую работу.
Поэтому попытка №2
в этот раз учту ошибки прошлого и делегирую часть обязанностей (Хотя бы ужн нашел монтажера)
вход бесплатный:
https://tables-pay-3ci.craft.me/5FBOJ6EJjuieDF
К моему стыду последняя попытка создать большое сообщество разработчиков заглохла.
Мне просто не хватило времени на создание новых роликов, работу и разбор вопросов желающих получить бесплатно доступ к тренажеров.
Но идея все еще кажется классной, было здорово видеть как чаты живут: решаются фронтендерские вопросы, играются шахматные турниры,
а юные академики в том числе из-за полученного опыта в стартапах находят первую работу.
Поэтому попытка №2
в этот раз учту ошибки прошлого и делегирую часть обязанностей (Хотя бы ужн нашел монтажера)
вход бесплатный:
https://tables-pay-3ci.craft.me/5FBOJ6EJjuieDF
tables-pay-3ci.craft.me
Профсоюз IT
🔥16🤡4
Развитие как канала, так и сообщества можно теперь поддержать.
Либо на Boosty для Российских карт:
https://boosty.to/it_union
Либо прямо тут в телеге для любых карт, ссылки сейчас опубликую
Либо на Boosty для Российских карт:
https://boosty.to/it_union
Либо прямо тут в телеге для любых карт, ссылки сейчас опубликую
❤6💩3
По просьбам трудящихся дублирую ролик в ВК
https://vk.com/wall-211966960_4
P.S. Подписывайтесь на сообщество =)
https://vk.com/wall-211966960_4
P.S. Подписывайтесь на сообщество =)
VK
Как пройти в IT?. Запись со стены.
Новый CSS! 2024
👍14👎6🔥2