Responsive design + Icon fonts = Adaptive icons

[JSmitty]

А нельзя в коде html просто завести три блока (на три варианта) на каждую вариативную иконку, один из которых показывать по media query? В случае уже готовых шрифтов (типа Fontawesome или встроенных в Bootstrap) даст возможность делать замены малой кровью, не убиваясь в написании пачки css. Да, код html будет менее семантичным.

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

[franzose]

В итоге, когда проект перестанет состоять из трех страничек, получите такой фарш… Всё таки это декорации, а декорации лучше стараться выносить в CSS.

[DataArt]

Можно, но идея статьи была в том, чтобы не сделать классный и правильный код\архитектуру, а чтобы показать возможность работы с Font Icons. И да, препроцессор было бы намного лучше использовать, но захотелось сделать связку на чистых html+css.

[mr47]

Использование ванильного css вместо scss или less очень и очень не понятно. Так как экономия в less могла быть большой, читаемость кода, кроме того, резко возрастает (если уж отказываться от 3 блоков как предложил комментатор выше), а что говорить о scss. Велосипед да и только.

[i360u]

Inline SVG + Web components = счастье

[DataArt]

Поддержку старых браузеров никто не отменял =) Статья — просто показать, что есть вот такой способ, который вполне неплохо работает в более старых браузерах. Например, его можно использовать как фоллбэк.

[i360u]

Не думаю, что для старых браузеров актуальны интерфейсы с адаптивными иконками, для некрофилии — graceful degradation.

[fetis26]

Font Icons это вчерашний день. Используйте SVG

[BananaBobby]

Некоторым все еще нужно поддерживать ие8

[fetis26]

Там разница на 1мс в среднем. Я бы вообще эту характеристику не брал в расчет

[DataArt]

Ответил выше — поддержка старых браузеров + статья — не руководство, «как надо делать», а «как можно делать».

[JeStoneDev]

когда-нибудь данная задача сведется к простой настройке элемента picture
когда-нибудь…

[copist]

А вот такой инструмент не пробовали: icons8.com/responsive-icons?
Там вся «подкапотня» скрыта и на выход из двух-трёх иконок в формате SVG можно получить одну отзывчивую картинку.

скриншотик

[dyadyaSerezha]

1. К сожалению, почти не видел сайтов, которые бы при наличии только одной версии иконок делали их масштабирование, пусть и с «шумом пикселизации», а это все равно гораздо лучше, чем один немасштабируемый вариант. Причина мне искренне не понятна. Лень дизайнеров или веб-программистов? Их графический перфекционизм? Перфекционистам отвечаю: да хрен с ними, с шумами и некрасивостями — зато хоть можно будет прочитать или понять, что там изображено! Мне не шашечки, мне ехать надо. У многих же дизайнеров превалируют шашечки без возможности ехать в половине случаев.

2. Варианты 480, 720 — это варианты размеров экрана в пикселях? Тогда опять все не правильно. Правильно исходить из плотности пискелей. Потому что размеры экранов в см сейчас отличаются до 10 раз, в то же время при том же физическом размере в см размер в пикселях может отличаться раза в 4. А человеку все равно, сколько пикселей в экране или в иконке — ему надо, чтобы на разных экранах все элементы имели примерно одинаковый угловой размер, а для этого гораздо лучше подходит плоность пикселей на см (и факт того, мобильный это экран или монитор).

[copist]

Как сказал мне один верстальщик: штука интересная, тока дизайнерам не говори — они и так с трудом себе представляют поведение страницы при ресайзе, просто рисуют мокапы для разных разрешений. А тут такой простор для фантазии, не привязанной к реальности.

[dyadyaSerezha]

Ну как-то же все браузеры на компах ресайзят страницы, причем по желанию юзера: вместе с картинками или без. Ведь разрешение экранов мониторов варьируется от 90 до 300 пикселей на дюйм да и зрение у всех разное — вот и ресайзят люди, чтобы удобно было читать. И вроде все работает прекрасно. Так что не надо создавать трудности там, где их нет.