Эволюция интернет-технологий не перестает удивлять. Кажется, каждый день творческие и талантливые люди придумывают новые концепции и приемы. С ростом популярности современных браузеров, такие системы, как CSS3, становятся все более и более жизнеспособными для использования в проектах любых размеров. Понятно, что это можно увидеть, посмотрев на новые сервисы, такие как TypeKit. Концептуально, если мы деконструируем шрифт до его базовых элементов, мы можем использовать эту технологию для других вещей, помимо шрифта, для значков.
Жажда скорости
В течение короткого периода времени разработчики начали выпускать сайты, не обращая внимания на потребление пропускной способности. HTML и CSS, где ограничения и Adobe Flash были открытой платформой для дизайнеров и разработчиков, позволяющих вставлять анимации и сложные макеты. Это привело к созданию сайтов с высокой пропускной способностью — мы все помним некоторые из них. Это были дни до распространения мобильных смартфонов.
Благодаря более частому доступу смартфонов к Интернету пропускная способность и скорость загрузки страниц неожиданно вышли на передний план. К счастью, достижения в области HTML , CSS и JavaScript сделали все это возможным. Основное значение для скорости и скорости отклика веб-страницы занимает количество HTTP- запросов, которые должна выполнить загрузка страницы. Современные браузеры ограничивают количество запросов одним сервером. W3C HTTP 1.1 спецификация читает
«Однопользовательскому клиенту НЕ СЛЕДУЕТ поддерживать более двух соединений с любым сервером или прокси. Прокси ДОЛЖЕН использовать до 2 * N подключений к другому серверу или прокси, где N — количество одновременно активных пользователей. Эти рекомендации предназначены для улучшения времени отклика HTTP и предотвращения перегрузки ».
Одним из методов, который становится все более популярным, является использование спрайтов CSS . CSS- спрайты предназначены для уменьшения количества HTTP- запросов к веб-серверу путем объединения множества меньших изображений в одно большое изображение и определения элемента CSS уровня блока, чтобы отображать только определенную часть большего изображения. Техника проста, но гениальна.
Деконструкция шрифта
Шрифты на самом базовом молекулярном уровне представляют собой серию векторных глифов, упакованных в единый «архив глифов».
CSS3 представил миру разработки веб-приложений возможность встраивать шрифты с помощью объявления @face-face . Несомненно, этот прогресс в области интернет-технологий является одним из самых захватывающих и важных этапов в нашей краткой истории. Разработчики могут встраивать шрифты по своему выбору, и дизайнеры могут создавать макеты, которые будут отображаться гораздо более согласованно от платформы к платформе, приближая искусство интерактивного макета к его собратьям по печати.
Если мы поближе познакомимся с технологией, лежащей в основе шрифта, мы сможем лучше понять, как их можно использовать и развертывать. Шрифты на самом базовом молекулярном уровне представляют собой серию векторных глифов, упакованных в единый «архив глифов». Затем мы можем ссылаться на каждый глиф по соответствующему коду символа. Теоретически, это очень похоже на способ, которым мы ссылаемся на массив практически на любом языке программирования — через пару ключ / значение.
Имея это в виду, глифы, на которые мы ссылаемся, действительно могут быть любым одноцветным векторным изображением. В этом нет ничего нового — мы все видели дингбатов и вебдингов. Это два примера нетиповых шрифтов, то есть серии векторных изображений, скомпилированных в один архив шрифтов.
Абстрагирование и расширение @ font-face
С появлением встраивания шрифтов и осознанием того, что шрифты — это, по сути, серия простых векторных глифов, я начал экспериментировать с тем, как использовать этот формат в своих интересах. Концептуально, если бы я поместил все необходимые значки для определенного сайта в собственный шрифт, я бы смог использовать эти значки в любом месте сайта с возможностью изменения размера и цвета, добавления фона, теней и поворота и всего, что угодно. иначе CSS позволит для текста. Дополнительным преимуществом является единый CSS- спрайт-подобный HTTP- запрос.
Чтобы проиллюстрировать это, я собрал новый шрифт с несколькими замечательными иконками от Brightmix .
Я использовал слоты в нижнем регистре для простых значков и слоты в верхнем регистре для одного и того же значка в циклическом режиме.
Чтобы использовать мой новый Icon Pack, мне сначала нужно будет экспортировать мой набор шрифтов в виде нескольких различных файлов шрифтов (.eot, .woff, .ttf, .svg), чтобы они были совместимы со всеми браузерами. Тема встраивания шрифтов и преобразования форматов файлов рассматривается в другом месте, поэтому здесь я не буду подробно объяснять. Тем не менее, CSS будет выглядеть примерно так.
|
1
2
3
4
5
6
7
8
|
@font-face {
font-family: ‘IconPack’;
src: url(‘iconpack.eot’);
src: local(‘IconPack’),
url(‘iconpack.woff’) format(‘woff’),
url(‘iconpack.ttf’) format(‘truetype’),
url(‘iconpack.svg#IconPack’) format(‘svg’);
}
|
После встраивания у меня теперь есть полный набор значков в векторном формате для справки. Для ссылки на иконку мне просто нужен стиль, который включает семейство font-family «IconPack».
|
1
2
3
4
5
6
7
|
<style>
.staricon {
font-family: ‘IconPack’;
}
</style>
<div class=»staricon»>a</div>
|
Приведенный выше пример будет отображать звезду и является самым основным использованием концепции Icon Pack, однако он не очень интуитивен с точки зрения разработки, не оптимизирован для SEO и не изящно ухудшается в случае поддержки не- CSS .
Чтобы исправить ситуацию, я собираюсь включить псевдоэлемент :before и обернуть содержимое в тег span .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<style>
.staricon {
font-family: ‘IconPack’;
}
.staricon:before {
content: ‘a’;
}
.show {
display:block;
}
.hide {
display:none;
}
</style>
<div class=»staricon»>
<span class=»show»>star
</div>
|
Теперь на экран добавлена звезда, и я могу переключать видимость текста с помощью классов show и hide . Результатом является легкий ссылочный класс CSS, который изящно ухудшается и оптимизирован для поисковых систем. Для всего моего набора иконок я могу написать что-то вроде ниже.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<style>
.show {
display:block;
}
.hide {
display:none;
}
.icon {
font-family: ‘IconPack’;
}
.star:before {
content: ‘a’;
}
.rss:before {
content: ‘b’;
}
.screen:before {
content: ‘c’;
}
.talkbubble:before {
content: ‘d’;
}
<!—
… and so on …
—>
</style>
<div class=»icon screen»>
<span class=»hide»>screen icon
</div>
|
Использование пакета значков
Преимущество здесь в том, что значок будет масштабироваться в зависимости от размера шрифта. На самом деле все значки будут масштабироваться и сохранять идеальную четкость.
Пока что мы только коснулись вершины айсберга, здесь нет ничего революционного, хотя вы можете начать видеть возможности. Scennerio в реальном мире будет заменой стиля list-item-style . В отличие от использования изображения, теперь мы можем использовать векторный значок из нашего Icon Pack. Преимущество здесь в том, что значок будет масштабироваться в зависимости от размера шрифта. На самом деле все значки будут масштабироваться и сохранять идеальную четкость.
Поскольку значки теперь размещаются на нашей странице, как если бы они были текстовыми, мы можем применить к ним любой допустимый стиль CSS без загрузки каких-либо других ресурсов. Мы могли бы применить color , font-size , text-shadow и т. Д. И использовать :hover для эффектов :hover мыши — все с одним глифом.
Как и во всем, есть некоторые досадные ограничения. На момент написания этой статьи невозможно отобразить один глиф с несколькими цветами. Были некоторые хитрости CSS, чтобы получить градиенты по живому тексту, однако, сложные формы с разными цветами в одном глифе являются ограничением. Сказав это, есть способы аппроксимировать разноцветные глифы, сегментируя части векторной графики на отдельные глифы, затем собирая и раскрашивая их на странице с помощью CSS.
Другое интересное использование — простая проверка CAPTCHA . Заменив символы алфавита цифрами, пользователи увидят цифры, но код страницы будет состоять из букв. Несколько простых вычислений для перевода между ними, и вы легко читаете CAPTCHA .
Чтобы лучше проиллюстрировать эти концепции, я собрал образец страницы, состоящей из двух HTTP- запросов — кода страницы и одного Icon Pack. Также включена возможность масштабировать размер шрифта страницы, чтобы наглядно продемонстрировать гибкость встраивания векторных глифов. Логотип компании, навигация, изображения и CAPTCHA используют глифы. Пожалуйста, обратите внимание, что капча включена здесь только для иллюстрации . Чтобы использовать это на производственном сайте, я бы рекомендовал проверять на стороне сервера динамический алгоритм в сравнении с JavaScript.
Этот образец страницы также демонстрирует использование глифа в качестве масштабируемого «повторяющегося» фона. Я буду первым, кто признает, что эта реализация в лучшем случае взломана, однако я думаю, что она демонстрирует гибкость и универсальность Icon Pack.
Понятно, что это открывает некоторые возможности. Дизайнеры могут разрабатывать пакеты значков для продажи, корпоративные организации могут размещать один пакет значков для использования на всех корпоративных носителях. Дизайнеры шаблонов могут легко распространять несколько вариантов цвета одного и того же шаблона без необходимости сохранять и экспортировать один дополнительный файл. Веб-дизайнеры могут легко масштабировать существующие сайты для совместимости с карманными устройствами. Кроме того, эта техника предоставляет наши иконки для DOM, позволяя анимированные Flash-подобные эффекты с вашим любимым JavaScript API .
По мере того, как использование и поддержка браузеров для CSS3 будет расширяться , Icon Packs вскоре окажет большое влияние на доставку контента, что будет способствовать появлению легких, масштабируемых тенденций для нескольких устройств, которые начинают становиться необходимостью.