Comments 18
SVG-анимации не работают как минимум в Android 4.3 (в стоковом браузере). Так что с ними надо быть аккуратней.
Конечно всегда нужно оглядываться на то, чем пользуется ваша аудитория, но судя по статистике с caniuse доля android 4.3 на данный момент меньше чем IE 8
Судя по их статистике, браузером в Android 5 вообще никто не пользуется.
Хорошее замечание:) видимо какой-то баг у них там
потому что в 5ом андройде вместо встроенного используется chrome, а у него 13%
Он на caniuse же в отдельную ветку выделен как хром 40.
Судя по их статистике, браузером в Android 5 вообще никто не пользуется.
не пользуются потому что в Android 5.0 от гугла его просто нет вообще. Им невозможно воспользоваться.
Он на caniuse же в отдельную ветку выделен как хром 40.
А то что на caniuse.com версия 40 это бывший WebView (для встраивания в приложения) вместо которого сейчас движок от chrome 40.
UFO just landed and posted this here
www.chromestatus.com/feature/5371475380928512 — более того, они считаеются нерекомендуемыми с 45-ой версии Chrome'а.
Люблю SVG за то, что он легко и непринужденно решает проблемы с High-DPI экранами.
На мой взгляд, иконочные шрифты изначально были мертворожденным стандартом, который получил некоторую популярность исключительно из-за слабой на тот момент поддержки SVG. Они недобны, неествественны, плохо контролируемы. Полагаю, что в ближайшие год-два они будут полностью и окончательно вымыты из индустрии.
Не думаю что в ближайшие годы иконочные шрифты куда-то денутся. Да они плохо контролируемы, да бывают проблемы в отображении, но в тоже время для обычного вебмастера это самый простой способ встроить иконки на сайт, за исключением вставки png тегом img
Что касается фолбека для IE8, то вместо
мне больше нравится хак с множественными фонами, которые не поддерживается IE8, а потому вторая строчка будет проигнорирована:
или так, ну общем возможны варианты:
Минус Модернайзер, минус лишние зависимости и тормоза, минус несколько строк кода.
.no-svg .icon {
background-image: url(“icon.png”);
}
мне больше нравится хак с множественными фонами, которые не поддерживается IE8, а потому вторая строчка будет проигнорирована:
.icon {
background-image: url(“icon.png”);
background-image: url(“icon.svg”), none;
}
или так, ну общем возможны варианты:
.icon {
background: url(“icon.png”);
background: url(“icon.svg”), transparent;
}
Минус Модернайзер, минус лишние зависимости и тормоза, минус несколько строк кода.
Изящное решение, не думал о таком варианте. Modernizr сам не использую, поскольку в своих проектах не считаю целесообразным грузить лишний файл, ради отображения иконки 1-2% пользователей, которая никак не повлияет на восприятие информации
UFO just landed and posted this here
Но как-то и очень не хочется нагружать старые (=тормозные) телефоны лишним JS.
Фиг знает, в среднем по больнице caniuse доля андроидов 2.3 — 0.07%. Не знаю почему так мало. Возможно потому, что владельцы таких телефонов не шарятся с них по интернету, а используют небольшой набор нативных приложений (мессенджеры, социалочки и все). Потому что кто активно серфит — уже проапгрейдился бы.
Суммарная доля FF 2-3 тоже ~0.1%. Один из тысячи.
Конечно, всегда надо смотреть на целевую аудиторию конкретного сайта, потому что она может отличаться от средней. Если аномально много старого — ну тогда просто забиваем на SVG и используем старый добрый растр. Тем более, что старые устройства = медленные устройства.
Фиг знает, в среднем по больнице caniuse доля андроидов 2.3 — 0.07%. Не знаю почему так мало. Возможно потому, что владельцы таких телефонов не шарятся с них по интернету, а используют небольшой набор нативных приложений (мессенджеры, социалочки и все). Потому что кто активно серфит — уже проапгрейдился бы.
Суммарная доля FF 2-3 тоже ~0.1%. Один из тысячи.
Конечно, всегда надо смотреть на целевую аудиторию конкретного сайта, потому что она может отличаться от средней. Если аномально много старого — ну тогда просто забиваем на SVG и используем старый добрый растр. Тем более, что старые устройства = медленные устройства.
Sign up to leave a comment.
Используем SVG на сайте