Java, UX, HTML, CSS, WEB-design

Проблема Safari со спрайтами SVG (теперь исправлена)

Краткое описание по статье Проблема Safari со спрайтами SVG (теперь исправлена)

Название: Проблема Safari со спрайтами SVG (теперь исправлена) . Краткое описание: [ad_1] ⭐ Нико Бр . Дата публикации: 04.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Нико Брюньес

  • 0 Комментарии

Проблема Safari со спрайтами SVG (теперь исправлена)

  • 5 минут чтения

  • Кодирование, Спрайты, SVG

Краткое резюме ↬

Обновление (19.05.2016): Ошибка была исправлена ​​Антти Койвисто и появилась в текущем обновлении iOS (9.3.2) и Safari для OS X 9.1.1 (11601.6.17). Когда пользователь посещает сайт, используя спрайт SVG в браузере с пустым кешем, спрайт кэшируется и больше не будет загружаться несколько раз. Вы найдете более подробную информацию здесь (на немецком языке), и Результаты Свена Вольферманна до и после обновления iOS.
Использование внешних карт спрайтов SVG для предоставления масштабируемых векторных изображений без потерь сегодня широко используется в адаптивном веб-дизайне и хорошо поддерживается такими инструментами, как svg4все. В немецкой газете Цайт Онлайн, мы довольно часто использовали эту технику. Однако недавно мы изменили этот рабочий процесс обратно на полное встраивание SVG в HTML из-за ошибки в браузерах Apple Safari (мобильных с iOS 9.3, в Mac OS X с Safari 9.1) — так же, как GitHub делает со своими октиконами.

Обновление (19.05.2016): Ошибка была исправлена ​​Антти Койвисто и появилась в текущем обновлении iOS (9.3.2) и Safari для OS X 9.1.1 (11601.6.17). Когда пользователь посещает сайт, используя спрайт SVG в браузере с пустым кешем, спрайт кэшируется и больше не будет загружаться несколько раз. Вы найдете более подробную информацию здесь (на немецком языке), и Результаты Свена Вольферманна до и после обновления iOS.

твит Свена Вулферманна

Использование внешних карт спрайтов SVG для предоставления масштабируемых векторных изображений без потерь сегодня широко используется в адаптивном веб-дизайне и хорошо поддерживается такими инструментами, как svg4everybody.

В немецкой газете Цайт Онлайн, мы довольно часто использовали эту технику. Однако недавно мы изменили этот рабочий процесс обратно на полное встраивание SVG в HTML из-за ошибки в браузерах Apple Safari (мобильных с iOS 9.3, в Mac OS X с Safari 9.1) — так же, как GitHub делает со своими октиконами.

Дальнейшее чтение на SmashingMag:

  • Хром, Фаерфокс, Сафари, Опера, Эдж? Альтернативы браузеру
  • Переосмысление адаптивного SVG
  • Мобильное тестирование: эмуляторы, симуляторы и удаленная отладка
  • Независимость от разрешения с SVG

Еще после прыжка! Продолжить чтение ниже ↓

Проблема

При использовании карты спрайтов SVG вы объединяете все свои значки SVG в один файл и загружаете его из внешнего источника (обычно через внешний CDN). Если вам нужна иконка на веб-странице, на нее будет ссылаться идентификатор фрагмента в use тег, например:


<svg class="svg-symbol logo_bar__brand-logo" role="img" aria-labelledby="title">
   <use xmlns:xlink="https://www.w3/1999/xlink" xlink:href="icons.svg#svg-logo-zon-black"></use>
</svg>

Идея состоит в том, чтобы загрузить файл только один раз, сохранить его в кеше браузера и ссылаться на значки, когда они необходимы. Ошибка, которая демонстрируется в этом тестовом примере, полностью мешает этому подходу: каждый раз, когда значок используется на веб-странице, весь файл спрайта загружается снова (загрузите тестовый пример и посмотрите инструменты разработчика). Наша домашняя страница внезапно стала весить 17 МБ на iPhone с iOS 9.3, что является проблемой для тарифного плана пользователя и для сервера веб-страницы.

Ошибка SVG
SVG загружался несколько раз.

Действительно, именно мониторинг серверов первым привел нас к багу. Полностью обновленный iPhone загрузил наш (по общему признанию, слишком большой) файл значка SVG, который был четко идентифицирован в журналах сервера. Внутри была зарегистрирована ошибка и назначена команда внешнего интерфейса, чтобы проверить, какой компонент стека загружает файл значка снова и снова. Строка браузера в журналах сервера напрямую идентифицировала версии Safari для iOS 9.3, и несколько быстрых тестов с помощью панели инструментов разработчика (и прокси-программы Charles для устранения возможных неправильных измерений) ясно показали, что если бы у нас было 20 значков на странице, значки SVG загружались 20 раз если кеш был холодный. Мы также обнаружили, что Safari 9.1.1 в Mac OS X был затронут. И мы могли видеть, что предыдущие версии браузера не содержали ошибки, что показывало, что мы столкнулись с ошибкой браузера, а не с проблемой в нашем коде. Я зарегистрировал ошибку в системе отслеживания ошибок Apple и в репозитории svg4everybody. Когда я решил добавить его в систему отслеживания ошибок WebKit, он уже был зарегистрирован.

Приближаемся к решению

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

Одним из решений могло бы быть использование Ajax для нашего SVG-файла, но это означает, что вы только постепенно улучшаете значки, которые на самом деле не нужны для того, чтобы веб-сайт выглядел хорошо, и которые носят скорее декоративный характер. Мы используем значки как отдельные элементы, например, звездочку, по которой можно щелкнуть для оценки элементов. Они не могут использовать текстовые пользовательские рейтинги в качестве основы для улучшения, потому что это приведет к непоследовательному макету.

Кроме того, у нас есть несколько логотипов SVG, которые нам крайне необходимо отображать, когда JavaScript отключен, поэтому для них Ajax никогда не был альтернативой. Так же бага вроде нет обнаруживаемый признак и мы не используем определение браузера, поэтому мы все время искали кросс-браузерный подход.

В конце концов, лучшим подходом было бы разделить значки по назначению и использовать разные способы их загрузки и отображения. Поскольку у нас есть три разных варианта использования иконок, идеальным решением может быть использование разных методов для каждого из них. Большие файлы логотипов, которые имеют решающее значение для макета, должны быть встроенными, поскольку они являются частью контента. Это также может иметь место для интерактивных автономных значков, где замена текста нарушит макет. Поскольку эти значки используются в нескольких местах на странице, было бы неплохо встроить SVG-файл спрайта для этих значков в структуру документа. head, что было бы небольшим микроулучшением, потому что эти файлы обычно имеют размер всего в байтах. По крайней мере, остальные декоративные значки могут использовать внешний файл спрайта Ajaxified.

Мы решили, что, учитывая, что ошибка будет исправлена ​​в ближайшее время, такой подход будет слишком сложным, и мы хотели начать с более простого решения. Мы перешли на полное встраивание всех SVG. Мы потеряем эффект кэширования, но, с другой стороны, вернем совместимость с браузерами (начиная с IE9 и выше) и сможем отказаться от полифиллов и создания запасных PNG-файлов. При первой загрузке мы также экономим один или два запроса.

Патч в пути

Тем временем команда WebKit обнаружила ошибку, и она помечена как исправленная и решенная, надеюсь, достаточно скоро, чтобы исправление появилось в следующей версии Safari — вероятно, осенью этого года.

Заключительные примечания

  • Первоначальная статья в моем блоге и статья о нашем решении, обе на немецком языке.
  • Скринкаст Мартина Вольфа, демонстрирующий ошибку, также на немецком языке.

Что вы думаете об этом подходе? Какими еще способами вы бы использовали SVG-спрайты? Дайте нам знать об этом в комментариях! Спасибо!

Сокрушительная редакция
(мс, мл, ог, ил)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Проблема Safari со спрайтами SVG (теперь исправлена)

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»