Главная » Полезные статьи » HTML-верстка » Маскирование текста по стандарту
Распечатать статью

Маскирование текста по стандарту

Я очень люблю .netmagazine.com, но недавно они просто вывели меня из себя своей статьей «Текстуры для веб-шрифтов». В ней описывается, как накладывать текстуру на текст с помощью -webkit-mask-image, причем сообщается, что это экспериментальное свойство CSS. И даже предлагается использовать префиксы -moz-, -o- и -ms- для свойства, которое отсутствует в какой-либо спецификации и соответственно вряд ли вообще когда-нибудь будет поддерживаться каким-либо не WebKit браузером. Тем самым они вводят своих читателей в заблуждение. Не так давно я писала (перевод статьи) о том, насколько вредными для нашей отрасли могут быть подобные проприетарные вещи.

Обычно на такие претензии возражают, что это вопрос философский, использовать или не использовать, тем более что кому какая разница, если в данный момент функция работает и не вызывает проблем в несовместимых браузерах. Этот аргумент вполне годится для некоторых случаев, когда дело касается незначительных ни на что не влияющих украшений, для которых не существует альтернативы, прописанной в стандартах. К примеру, я сама использовала ::-webkit-scrollbar. Но к рассматриваемому вопросу это не относится. У нас в стандартах есть альтернатива вот уже 11 лет под названием SVG. И если вы дадите ей шанс, она может справиться не только с маскированием текста, но и с многим другим.

Вот пример наложения текстуры на текст с использованием SVG:

Благодаря исправлениям от @devongovett код стал проще и компактнее.

Да, синтаксис может и более громоздкий, но зато это работает в гораздо более широком спектре браузеров: Chrome, Safari, Firefox, IE9, Opera. К тому же, довольно просто написать скрипт, который бы генерировал SVG код из заголовков и к каждому применял бы нужные величины. А когда в WebKit внесут исправление вот этого бага, можно будет вообще вынести шаблон SVG в отдельный файл и лишь ссылаться на него.

В том случае, если вас беспокоит семантика кода, скажу, что элемент <svg> считается потоковым содержимым и следовательно может использоваться в заголовках. Но даже если поисковая система не понимает строчный SVG, она просто проигнорирует все теги и всё равно увидит содержимое внутри элемента <text>. Имея это в виду, можно даже обеспечить нормальный просмотр в IE8, включив HTML5 исправление для <svg> элемента. Тогда CSS правила всё равно будут применяться к тексту. Нужно будет только добавить проверку и убирать теги <image>, т.к. IE8 показывает на их месте знак ошибки загрузки изображения (не все знают, но в HTML <image> и <img> эквивалентны, поэтому IE8 трактует их одинаково).

Источник:  css-live.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

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