SVG-спрайты

Вчера ночью, эксперементируя с различными способами внедрения картинок в ХТМЛ, я понял, что уже все браузеры (кроме «Оперы Мини»), понимают СВГ прямо в коде страницы. А это значит, можно отказаться от CSS-спрайтов в пользу того, что можно назвать «SVG-спрайтами»:

SVG-спрайты (162.51КиБ)

Принцип, в общем-то, тот же: большая картинка, из которой показывается фрагмент, только фрагмент задаётся не через ЦСС, а прямо в ХТМЛе.

Думаю, всем понятен код: в теге svg задаются размеры кусочка спрайта, в image обязательно нужно указать полные размеры картинки (для Ретины можно указать их в два раза меньше, если спрайт подготовлен к этому типу экранов), при помощи параметров x и y позиционируем в каком именно месте спрайта расположена наша картинка.

В комментариях спрашивают зачём это всё надо, чем это лучшее спрайтов в ЦСС.

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

14 комментариев

Игра «Candies»

Candies (150.85КиБ)

Прекрасный текстовый квест увидел в ЖЖ Анатолия Воробья, я вообще люблю текстовые игрушки. Я её уже прошёл, но захотелось пройти ещё раз в «суперрежиме». Если откроете консоль и напишите там следующую строку

$.getScript("http://pastebin.com/raw.php?i=QN7K40Nn")

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

5 комментариев