css

Когда я только начинал выходить в интернет (годах в 1997—1998), обе программы, который в то время считались браузерами — Internet Explorer 4.0 и Netscape Navigator 4.0 умели показывать так называемые «embeded fonts» («внедрённые шрифты», сейчас эту технологию всё чаще называют «web fonts»). IE использовал собственный формат — EOT («Embedded Font Technology»), а компания Netscape — лицензированную у Bitstream технологию.

С помощью «внедрённых шрифтов» в браузер можно было подгружать любой специально подготовленный шрифт и писать тексты им (например, в моём родном Татарстане так делали сайты на татарском языке, ещё до введения татарского алфавита на основе кириллицы в Unicode). Причём IE позволял включать в шрифт не все буквы, а только те, которые могут понадобиться. Технологию незаслуженно ругают — говорят, что из горе-дизайнеров на сайты будет больно смотреть. Запрещать инструмент только потому, что наверняка будут люди, которые не научатся им пользоваться?

Как обычно, то, что появляется в IE, со временем появляется и в других браузерах, только в другом виде. В данный момент «web fonts» является частью не вышедшей ещё спецификации CSS3 (впервые встречается ещё в CSS2) и уже есть браузер, который поддерживает часть возможностей — движок браузеров WebKit (на нём построен, например, браузер Safari) уже начал поддерживать правило «@font-face», позволяющее указывать загружаемый шрифт. Технический директор норвежской компании «Opera Software» Håkon Wium Lie обещал недавно, что «Опера» вот-вот начнёт поддерживать «@font-face», но WebKit обошёл на повороте.

В CSS это всё выглядит следующим образом:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Указывается путь до шрифта, его имя в документе и его формат («truetype»).

Давайте я вам всю мощь «Оперы» (последней) покажу? А то тут некоторые товарищи user.js для обнаружения «трафки™» начали придумывать. Тем не менее, JavaScript тут не нужен, хватит и CSS. Ведь у «Оперы», наряду с пользовательскими JavaScript, есть и пользовательские CSS. Так что, просто подключаем к «Опере» следующий код и следим за индикатором в левом верхнем углу экрана (рассказывать как подключать я не буду и другим не советую — пусть это будет фильтром).

a[href*="blogowar.ru/soldier"]  img[src*="blogowar.ru/herbs"]
{
        position: fixed; top: 4px; left: 4px; z-index:5000;
        background-image: url(http://blogowar.ru/favicon.ico);
        background-position: 50%;
        background-repeat: no-repeat;
        background-color: #eee;
        display: block;
        width: 25px; height: 25px;
}

На первой странице студии Артемия Лебедева сегодня была новость о сайте «Хэлплайна» с движущимся, при наведении мышки, изображением пластмассовой уточки. Сама новость мне не интересна, а решение, которое позволяло уточке двигаться я посмотрел. Как и ожидалось — сдвиг позиции фонового изображения. Но есть и кое-что новое для меня — вызов «document.execCommand(„BackgroundImageCache“,false,true)» явно для Internet Explorer.

Как оказалось, это решение застарелого бага IE6 с миганием фона, подложенного под ссылку. Подробное описание описание условий возникновения бага можно найти в статье «Minimize Flickering CSS Background Images in IE6». Баг заметен, если в настройках кеширования браузера выбрать «Every visit to the page» для параметра «Check for newer versions of stored pages».

Вкратце, баг чаще всего проявляется при подкладывании фоновой картинки под ссылку — фон при наведении начинает неприятно мерцать, это Internet Explorer отсылает запросы на сервер, чтобы провеить не изменилась ли картинка, которую использовали как фон. Способ, который помогает решить проблему заключается в специальном JavaScript-вызове (хотя на мой взгляд лучше бы использовать «условную компиляцию» в IE), работает начиная с IE6SP1:

try {  document.execCommand('BackgroundImageCache', false, true);} catch(e) {}

Для меня оказалось сюрпризом, что min-width в Internet Explorer 6 и ниже можно эмулировать стилями, без обычного, в данном случае, JavaScript (в IE7 min-width работает). Оцените фокус:

CSS-файл:

/* min-width для остальных браузеров */
body {margin:0;padding:0;}
.outer {
  background-color:red;
  margin:0 auto;
  min-width:600px
}

/* стили для IE6 */
* html .outer {padding-left:600px}
* html .minwidth {height:0} /* holy hack для IE, что бы включить свойство hasLayout */
* html .container {margin-left:-600px;position:relative; height:0}

HTML:

<div class="outer">
<div class="minwidth">
<div class="container">
Блок с min-width 600 пикселей.
</div>
</div>
</div>

Первоисточником решения, по всей видимости, является статья Stu Nicholls на сайте CSSPlay.

Как известно — FireFox последний из браузеров, который не поддерживает мягкий перенос (shy). Explorer, как один из продвинутых браузеров (не надо смеяться, я не шучу), начал его поддерживать самым первым. Мягким переносом верстальщик может указать где в длинном слове, при необходимости, можно сделать перенос, например, если слово не умещается в колонку. Я прочитал несколько статей на эту тему, но нигде эту задачу решить не смогли. Между тем, в FireFox действует нестандартный тег WBR, который позвляет добиться того же самого, но без символа переноса. Что не совсем то. Кстати, CSS применить к WBR нельзя. Как же быть?

Проблему я решил, но, увы, с потерями: придётся подбирать один параметр для каждого вида шрифта, слово разорванно тегом и поисковые машины проиндексируют его по частям, а полный (совместимый с Opera, FF и IE6) вариант довольно громоздок.

Во-первых, я сразу отказался от тега WBR, потому что любой HTML-валидатор укажет на то, что тег нестандартный. В FireFox действует Zero-width space, символ с кодом 8203, «пробел нулевой ширины». Он позволяет добиться того же самого — разорвать слово в определённом месте.

С идеей как это всё реализовать, я определился сразу — строка при переносе должна открывать концевой символ. А, если переноса нет, вставать поверх него. Вдоволь помучавшись с перекрытием через «position: absolute», и селектором «:after», я вдруг вспомнил о теге «Q», где можно указать текст перед и после этого тега (вообще-то указываются там открывающая и закрывающая кавычка, но сути-то это не меняет). Стало значительно проще. Для того, чтобы один символ затёр другой без остатка, я применяю «background: inherit» — наследуя фон из тегов выше.

Итак, один из минусов — это размер символа переноса в вашем экранном шрифте. Задаётся он в стиле (см. ниже) в параметре «margin-right» и для выбранной мной Tahoma равен 0.36em. Полный пример, работающий в FireFox таков (я выбрал «заброшенный» тег «VAR», чтобы реализовать задуманное):

<!-- Soft hyphen emulation in FireFox -->
<style type="text/css">
    body { background: white }
    var>q { quotes: "" "-"; margin-right: -0.36em }
    var { font-style: normal; background: inherit }
</style>

<var><q>оченьдлинноеслово&#8203;<var>продолжениеоченьдлинногослова</var></var>

Стоит браузеру разорвать слово в месте, где стоит пробел нулевой ширины и из-под второй половины слова появляется символ переноса. С полным вариантом всё немного сложнее — в Opera всё будет работать и так, в IE — нет. Там масса проблем — символ не будет перекрываться фоном, даже если вынести символ переноса из «Q» в текст, но можно заставить работать «shy». Для этого придётся убрать нулевой пробел, если его оставить в IE рядом с «shy», эффект будет непредвиденным.

Поэтому мы его убираем (кстати, можно попытаться вставить его через атрибут «content» селектором «var>var:before», если текст у нас в Unicode):

<!-- Soft hyphen in FireFox, Opera, IE6 -->
<style type="text/css">
    body { background: gray; font-size: 20px; font-family: Tahoma }
    var>q { quotes: "" "-"; margin-right: -0.36em }
    var { font-style: normal; background: inherit }
    * html var b { display: none }
</style>
<var><q>оченьдлинноеслово<b>&#8203;</b>&shy;<var>продолжениеоченьдлинногослова</var></var>

Самые внимательные, наверное, заметили, что в прошлых заметках у меня на картинке использовалась эмуляция эффекта наведения на ссылку — посмотрите, если навести на картинку мышку, «ссылка», выделенная синим, на картинке подчеркнётся. И это не JavaScript.

Объяснение очень простое — картинка сделана с прозрачностью, далее при помощи CSS под неё подставлен белый фон, а при наведении (селектор «:hover») фон меняется на голубой. Такой же эффект использован на картинке с пистолетом слева (наведите мышку). Ссылка на картинке обязательна — без неё в Internet Explorer (версии ниже 7-й) фон менять не будет, «:hover» просто не сработает. Таблица стилей для этой картинки выглядит вот так:

a.gun:hover img { background: black } /* стиль при наведении мышкой */
a.gun img { margin: 0px; background: white } /* убираем поля в Opera и подкладываем белый фон */

HTML, соотвественно:

<a href="#" class="gun"><img src="gun.gif" /></a>

Если вам не ясно, почему пистолетик «стреляет» (т. е. почему изображение движется, когда наводишь мышку), то тут всё просто — прозрачная область движется (это animated GIF), на белом фоне этого не видно, когда фон меняется, создаётся эффект движущейся пули.

Ещё интересные эффекты можно получить, если использовать альфа-канал (полупрозрачность) в формате PNG, но, к сожалению, об анимации тут придётся забыть.

Придумал шутку про маркетологов. Для тех, кто понимает, marketolog.css:

*      { text-transform: uppercase }
:after { content: '!!!!!' }

На хабре есть крайне полезный, но малоизвестный материал «Изучаем наличие layout»:

Множество несоответствий (стандартам) Internet Explorer’а при визуализации веб-страниц может быть устранено путем присвоения конкретным элементам свойства layout. John Gallant и Holly Bergevin называют эти несоответствия «пространственными ошибками», подразумевая, что они часто могут быть исправлены, если задать элементу ширину или высоту. Это ведет к справедливому вопросу: каким образом layout может менять визуализацию одного элемента и совместное отображение нескольких?

Что такое layout в Internet Explorer, почему работает «хак» «height: 1%» и тому подобное — в этой статье. Крайне рекомендую к прочтению и пониманию всем, кто так или иначе занимается вёрсткой сайтов.

Ещё интересный трюк с прозрачностью — изменение картинки при наведении на неё мышкой. Трюк в том, что у картинки есть прозрачные области, а при наведении на неё мышкой, у контейнера, где находится картинка, меняется фон. Этот эффект можно использовать для подсвечивания пунктов меню, например, но, впрочем, не буду ограничивать вашу фантазию.

Интересная техника изменения шрифта — наложить поверх текста полупрозрачную картинку, что даёт

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

В журнале kukutz’a на сайте NPJ появилась заметка «Решение проблемы box-model» — перевод «Box model tweaking»:

Известно, что есть как минимум два варианта бокс-модели:

W3Cшный, когда в ширину блока включен только размер содержимого (контента), майкрософтовский, когда в ширину блока включается ещё padding и border.

Майкрософтовский, надо сказать, куда более понятен и интуитивен.

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