text-decoration-line

Wavy (30.66КиБ) Есть такая договорённость в вебе — псевдоссылки (которые похожи на ссылки, но не уводят со страницы) подчёркивать не сплошной чертой, а прерывистой или точечной. Обычно такую черту делают бордюром снизу тега, но если настоящие ссылки сделаны через text-decoration: underline, то черта оказывается на разной высоте: у ссылок она выше, чем у псевдоссылок.

Сейчас браузеры начинают поддерживать свойство text-decoration-line, но с переменным успехом — Хром — поддержка выключена по-умолчанию, Файерфокс поддерживает в полном объёме, Сафари как утверждает «КенАйЮз» — не поддерживает, ИЕ — тоже.

Оказалось, в данном случае — доверяй, но проверяй. «Сафари» (по крайней мере восьмая версия) всё-таки частично поддерживает это свойство, просто не все значения — отрисовываются wavy (на скриншоте), double и solid (остальные значения превращаются в solid).
4 комментария
12 марта 2015 17:55

Короткий способ определить есть ли поддержка dataURI

Придумал короткий способ определить поддержку data URI в браузере:
<script src="data:text/javascript,self.dataURI=1"></script>
Потом просто проверяете у window свойство dataURI, если оно есть, то есть и поддержка. Способ не работает в IE8 и IE9 — тот и другой не умеют загружать Джаваскрипт этим образом. Собственно, меня это не волнует — мне как раз и нужно определить, что Джаваскрипт так работает, но если вам нужно не это, то должен работать вот такой способ:
<link rel="stylesheet" href="data:text/css,html{font-size:99px}">
То есть устанавливаем у тега HTML какое-нибудь свойство, которое потом в BODY перекроем, а позже, чтобы убедиться, что поддержка дата-ури есть, смоторим что вышло (тут я при помощи jQuery это делаю):
/99/.test($('html').css('font')); // true, если есть поддержка dataURI

Use SVG

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

Одним из главных помощников в такой вёрстке является, без сомнения, формаг СВГ — формат векторной графики, который на данный момент поддерживают все распространённые браузеры (включая ИЕ, с девятой версии). Особенно приятно, что его можно включать прямо внутрь ХТМЛя, это очень удобно — если СВГ используется для кучи мелких значков на странице, то не будет лишних соединений с сервером — ведь всё грузится вместе с основным кодом.

Но встаёт другая проблема — проблема повторного использования. Если одни и те же значки присутствуют на странице в изобилии, страница будет распухать, что печально.

К счастью, есть выход. СВГ — гибкая штука, в этом формате есть возможность использования частей изображения повторно. Первым шагом нужно определить тег-контейнер с необходимыми нам изображениями, по одному в теге symbol. У каждого из них будет собственный идентификатор, по которому мы ниже будем на них ссылаться:
<svg style="display:none">
    <symbol id="folder" viewBox="0 0 49.833 67.167">
        <!-- код не рабочий, только для примера -->
        <path d="M15.938,67.…"/>
        <path d="M3.59,30.531c…"/>
    </symbol>
    <symbol id="file" viewBox="0 0 49.833 67.167">
        <path d="M12.233c0.…"/>
        <path d="M3.28C2.76…"/>
    </symbol>
</svg>
Тут у нас два изображения — folder и file, на которые мы можем сослаться следующим образом:
<svg width="28" height="37">
    <use xlink:href="#folder"/>
</svg>

<svg width="28" height="37">
    <use xlink:href="#file"/>
</svg>
Таких вставок может быть сколько угодно и все они будут использовать одни и те же изображения, описанные в теге-контейнере. Остаётся даже возможность лёгкой настройки под себя, например, можно задать парочку классов и раскрасить часть изображения в разные цвета:
svg.green {
    fill: green;
}

svg.red {
    fill: red;
}
Классы можно повесить на ссылающиеся теги СВГ, жаль только этот способ полон ограничений. Кроме как в ФФ более избирательные селекторы использовать не удаётся — всё, что ниже тега use для таблицы стилей как будто не существует. Если и есть какой-то способ это починить, я его не нашёл.
5 комментариев
28 июля 2014 23:09