Открыть список
Как стать автором
Обновить

Комментарии 21

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

И еще один такой момент, изложенная идея, кмк, лучше выглядела бы в варианте с использованием препроцессора, уж не сочтите за упрек.
В итоге, когда проект перестанет состоять из трех страничек, получите такой фарш… Всё таки это декорации, а декорации лучше стараться выносить в CSS.
Можно, но идея статьи была в том, чтобы не сделать классный и правильный код\архитектуру, а чтобы показать возможность работы с Font Icons. И да, препроцессор было бы намного лучше использовать, но захотелось сделать связку на чистых html+css.
Использование ванильного css вместо scss или less очень и очень не понятно. Так как экономия в less могла быть большой, читаемость кода, кроме того, резко возрастает (если уж отказываться от 3 блоков как предложил комментатор выше), а что говорить о scss. Велосипед да и только.
Inline SVG + Web components = счастье
Поддержку старых браузеров никто не отменял =) Статья — просто показать, что есть вот такой способ, который вполне неплохо работает в более старых браузерах. Например, его можно использовать как фоллбэк.
Не думаю, что для старых браузеров актуальны интерфейсы с адаптивными иконками, для некрофилии — graceful degradation.
Font Icons это вчерашний день. Используйте SVG
Некоторым все еще нужно поддерживать ие8
НЛО прилетело и опубликовало эту надпись здесь
Там разница на 1мс в среднем. Я бы вообще эту характеристику не брал в расчет
Ответил выше — поддержка старых браузеров + статья — не руководство, «как надо делать», а «как можно делать».
когда-нибудь данная задача сведется к простой настройке элемента picture
когда-нибудь…
НЛО прилетело и опубликовало эту надпись здесь
А вот такой инструмент не пробовали: icons8.com/responsive-icons?
Там вся «подкапотня» скрыта и на выход из двух-трёх иконок в формате SVG можно получить одну отзывчивую картинку.
скриншотик
50 Responsive Icons
Responsive Icon Generator
icomoon.io — более навороченный сервис, и они умеют многоцветные иконки генерировать, правда кода много получается.
1. К сожалению, почти не видел сайтов, которые бы при наличии только одной версии иконок делали их масштабирование, пусть и с «шумом пикселизации», а это все равно гораздо лучше, чем один немасштабируемый вариант. Причина мне искренне не понятна. Лень дизайнеров или веб-программистов? Их графический перфекционизм? Перфекционистам отвечаю: да хрен с ними, с шумами и некрасивостями — зато хоть можно будет прочитать или понять, что там изображено! Мне не шашечки, мне ехать надо. У многих же дизайнеров превалируют шашечки без возможности ехать в половине случаев.

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