css

Microsoft серьёзно взялась за стандартизацию своего браузера. В блоге IE появилась статья, где рассказывается о дальнейших шагах по преобразованию браузера. Например, все расширения CSS будут теперь начинаться с префикса («-ms-»), как того требуют стандарты. Причём речь идёт не о нововведениях (IE7 уже поддерживает свойство «-ms-interpolation-mode» с префиксом), а о существующих свойствах. К примеру, «zoom» будет теперь называтся «-ms-zoom».

Хорошая новость: фильтры будут! только теперь они будут называться «-ms-filter» и выглядеть как обычное свойство, взятое в кавычки. Т. е. для указания прозрачности (загибайте пальцы) мы будем использовать: opacity (CSS3), -moz-opacity (старые FF), -khtml-opacity (старые Konqueror), filter (IE ниже 8) и -ms-filter (IE8 и выше).

Для сайтов, которые переделать невозможно (из-за объёма или запущенности), остаётся возможность использовать Compatibility View (режим обратной совместимости).

Итак, у нас, оказывается, есть надёжные CSS-фильтры для всех современных браузеров. О некоторых я уже писал, но перечислю все (стиль срабатывает только в указанном браузере):

<style type="text/css">
 /* только для Opera 9.50 и выше */
 noindex:-o-prefocus, tag { display: none; }

/* только для FireFox */
noindex:-moz-anylink, tag { display: none; }

/* только для FireFox /all/1623 */
@-moz-document url-prefix()
{
        tag { display: none }
}

/* только для Safari */
@media screen and (-webkit-min-device-pixel-ratio:0){
           tag { display: none }
}

xxx\:*, tag { display: none } /* только для IE */

</style>

Всё, надоело. Никто не использует VML и SVG? Почему все делают скруглённые углы только кучей картинок или через CSS3-свойства? В общем, представляю код, который работает для Opera 9.50 и выше (через SVG background), IE5.0 и выше (через VML), на FireFox 1.5, Safari3 и Konqueror (через свойства CSS3). Та-да:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- подключаем пространство имён VML для IE -->
<!--[if vml]>
    <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
    <style> v\:* { behavior: url(#default#VML); display: block; } </style>

<![endif]-->

<title>Скруглённые углы</title>

<style type="text/css">
    *    { padding: 0; margin: 0; }
    body { background: white; color: black; font: 12px Arial, sans-serif; }

    .rounded { margin: 100px auto; text-align: center; width: 50%; position: relative; padding: 10px; }

/*
Нижеприведённые background-image работает только в Opera 9.50 и представляет собой закодированный алгоритомом base64
код SVG-картинки:

<svg xmlns="http://www.w3.org/2000/svg">
<mask id="mask">
   <rect width="100%" height="100%" rx="10" ry="10" fill="white" stroke="black" stroke-width="2"/>
</mask>
<rect stroke="black" fill="white" stroke-width="4" mask="url(#mask)" width="100%" height="100%" rx="10" ry="10"/>
</svg>


В этой картинке подготавливается бакграунд со скруглёнными углами
*/
    noindex:-o-prefocus, .rounded-svg {
        background-image: url(data:image/svg+xml;base64,cюда нужно положить base64-кодированную картинку);
        border: none !important;
    }

    /* для разных браузеров указываем rounded corner через CSS3-свойство */
    .rounded-css3 {
        border: 1px solid black;
        -moz-border-radius: 1em;     /* mozilla 1.5 */
        -webkit-border-radius: 1em;  /* safari 3 */
        -khtml-border-radius: 1em;   /* Konqueror */
        border-radius: 1em;          /* CSS3 */
    }
</style>

</head>

<body >
    <!--[if vml]><v:roundrect class="rounded" strokecolor="black" strokeweight="1px" arcsize="0.25" ><![endif]-->
    <!--[if !vml]>--><div class="rounded rounded-css3 rounded-svg"><!--<![endif]-->
        <p>Вот эти ребята!</p>
    <!--[if !vml]>--></div><!--<![endif]-->
    <!--[if vml]></v:roundrect><![endif]-->
</body></html>

В коде есть несколько хаков. В частности, для «Оперы» я использую background, вставленный как SVG-изображение, через data URL. Поэтому приходится выключать border, иначе он закрывает края background. SVG закодировано в base64 (функция base64_encode в PHP), потому что оно занимает так меньше, чем в URL encoded.

Далее. Для IE включается VML, это, если кто не знает, появившаяся ещё до SVG технология построения векторных изображений. Более мощная, чем SVG, кстати. Весь VML включается через условные комментарии и другие браузеры этого безобразия не видят, в том числе их не увидит и валидатор (хотя ему и без VML тут есть на что поругаться).

Для остальных браузеров используются их префиксное свойство border-radius, которое включено в CSS3.

Движок Gecko содержит массу интересных селекторов. Вот несколько интересных селекторов, о которых мало кто знает:

For what it’s worth, development versions of Gecko have:

:-moz-broken (which would cover your :missing and :corrupt, which are not  exactly easy to tell apart). :-moz-user-disabled (user has turned off all images) :-moz-suppressed (images from the server involved are blocked) :-moz-loading :-moz-type-unsupported (for <object>s)

FireFox3 хорошеет на глазах. Не знаю насколько он хорош как средство для сёрфинга (выйдет — обязательно скачаю и посмотрю), но как браузер он, безусловно, становится всё лучше. На днях FireFox 3.1 стал проходить тесты селекторов CSS3. Хорошие новости, теперь все три основных браузера — Opera, Safari и FireFox поддерживают CSS3.

Как вы думаете, на фоне Mini Cooper «копейка» является автомобилем? С этого дня я называю «Оперу», FireFox и «Сафари» «основными браузерами», поскольку именно они и являются браузерами, а IE — «альтернативным», поскольку это политкорректное название для «куска говна с окошками», да и понимание новых стандартов у него «альтернативное». При этом я не умаляю заслуг специалистов из компании Microsoft, создавших IE6 — шедевр для тех лет, и положивших начало многим современным стандартам. Спасибо, ребята, надеюсь IE9 будет достоин тех же похвал.

Хороший приём, позволяющий выровнять блок по горизонтали (работает даже в IE6, в strict-режиме):

div { margin: 0 auto; width: 100px }

Записываю себе.

Я уже несколько раз писал о data URL, так что наверное все уже запомнили что это такое. У этого способа внедрения ресурсов есть интересные плюсы, но, в своей массе, веб-мастера не торопятся использовать его из-за мнимых минусов, которые я хочу сейчас рассмотреть.

• из-за base64 размер изображения увеличивается на треть
• невозможно использовать одно изображение несколько раз
• не работает в IE
  Все эти минусы — мнимые.

По первому пункту. Многие сайты используют gzip-сжатие веб-страниц, что позволяет сильно уменьшить размер страницы. Я прогнал через base64 всю базу изображений моего сайта (примерно 350 картинок), после чего сжал их gzip. Размер, по сравнению с первоначальным вырос, в среднем, на 2%. Если вы используете сжатие страниц, вам не нужно бояться увеличения размера страницы.

По второму. Даже начинающий верстальщик знает как использовать изображение из data URL несколько раз. Для этого надо поместить его в CSS и сделать фоном контейнера.

По третьем пункту я уже высказывался. В IE до восьмой версии не было data URL (в IE8b1 поддержка есть, но очень урезанная — всего 32Кб данных), но я придумал способ как внедрять изображения в IE.

Как мне справедливо подсказали в предыдущей заметке большинство современных браузеров поддерживает свойство text-overflow, позволяющее добиться того, что я сделал в предыдущем примере одной строкой. Работает для всех браузеров, кроме FireFox, у него таких стилей нет.

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

<style type="text/css">
body { background: white; color: black; font-family: Arial; font-size: 16px }

.crop div div
{
    text-overflow: ellipsis;    /* Internet Explorer 6.0 и выше, Safari, Konqueror */
    -o-text-overflow: ellipsis; /* Opera 9.0TP1 и выше */
    white-space: nowrap;
    width: 100%;                /* для IE */
    overflow: hidden;
}

.crop ins, .crop del { display: none } /* скрываем свои хаки от остальных браузеров */

/* стили только для FF, см. /all/1623 */
@-moz-document url-prefix()
{ 
    /* ширина «…» — 16px, высота строки — 18px */
    .crop          { overflow: hidden; height: 18px; width: 100% }
    .crop div      { clear: none; float: left }
    .crop div div  { white-space: nowrap; overflow: hidden; margin-right: 16px; width: auto}
    .crop ins      { float: right; margin-left: -16px }

    /* margin делаем на -1px уже, чем ширина «…», чтобы блок «свалился» чуть раньше */
    .crop del      { float: right; color: white; background: white; width: 16x; margin-left: -15px }
    .crop del, .crop ins { display: block; text-decoration: none }
}
</style>
<div style="max-width: 700px; margin-left: 10px">

<div class="crop">
<div>
    <div>Who let the dogs out (woof, woof, woof, woof)!</div>
    <ins>&hellip;</ins> 
    <del>&hellip;</del>
</div>
</div>

</div>

Вот такая эмуляция text-overflow в FireFox.

Возникла у меня на днях задача — обрезать текст средствами браузера с красивым многоточием, если текст не умещался. Обычно такую проблему решают через JavaScript, но мне пришло в голову сделать это средствами CSS, я даже сразу придумал откуда можно начать.

В «резиновом» контейнере заключаем текст, в его конце должен быть плавающий элемент, справа перекрывающий родительский слой и уходящий за его пределы. Когда строка умещается по ширине (и браузер не пытается её перенести), этот элемент перекрывает многоточие, которое идёт сразу за контейнером. Когда ширины контейнера перестаёт хватает, браузер пытается сделать перенос и переносит перекрывающий слой на следующую строку, многоточие «открывается».

В качестве concept proof я накидал небольшой пример, который сразу заработал в «Опере» и «Сафари», FF2 и IE7 возможностями победнее, они не потянули, видимо, в них придётся убрать селектор «:after» и заменить всё тегами с многоточиями внутри.

Сам код:

<style type="text/css">
    body { background: white; color: black; font-family: Arial; font-size: 16px }

    div.crop { width: 100%; height: 20px; overflow: hidden; z-index: 1 }

    div.crop div { float: left; width: auto }

    div.crop:after     { content: '\2026'; position: relative; z-index: 2; background: white; margin-left: -16px }
    div.crop div:after { content: '\2026'; position: relative; z-index: 3; background: white; color: white }
</style>

<body>
<div class="crop"><div>Текст не умещается в контейнер, до того он длинный</div></div>
<div class="crop"><div>Текст не умещается в контейнер</div></div>
</body>

Заношу себе в закладки хорошую статью с сайта QuirksMode, рассказывающую и наглядно показывающую (если поводить мышкой по названиям свойств) какие значения CSS-свойства «cursor» поддерживаются различным браузерами.

В статье есть смешное место — написано, что значение «url» (помечено как «Microsoft», т. е. собственное свойство IE) не поддерживается браузерами Internet Explorer.

На деле Internet Explorer требует указывать курсоры в форматах .cur или .ani, тогда как в редакции CSS3 (где данное свойство заимствовано и расширено) курсор может быть в любом формате, поддерживаемом браузером (для Gecko это BMP, JPG, CUR, GIF, SVG и XBM), плюс должны быть указаны координаты активной точки (hotspot) курсора.

У Internet Explorer с 7-й версии, оказывается, есть очень довольно любопытное CSS-свойство: «-ms-interpolation-mode», которое позволяет устанавливать режим масштабирования (интерполяции) для изображений.

У свойства два значения — «nearest-neighbor» (менее качественный режим по ближайшему соседнему) и «bicubic» (более качественный бикубический метод). Кстати, обратите внимание, что новое свойство начинается с префикса, как это рекомендует делать W3C. Пример использования:

img.highqual { -ms-interpolation-mode:bicubic }
img.nearestn { -ms-interpolation-mode:nearest-neighbor }

По-умолчанию, IE масштабирует изображения по ближайшему соседнему, если масштаб страницы 100% и бикубическим методом в остальных случаях.

Ни для кого не секрет, что браузере «Сафари» под Windows использует тот же метод сглаживания, что и под Mac OS. Один из его известных недостатков (кроме сломанных глаз) — текст на тёмном фоне получается (не кажется, а получается) жирнее, чем на светлом, что прекрасно иллюстрирует нижеприведённый скриншот:

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

.our_text { text-shadow: 0 0 0 #000 }

Я как-то уже писал о том как подключить целый блок CSS только для FireFox, но чаще нужно подключить не блок, а всего один-два стиля. В этом случае удобно воспользоваться тем фактом, что браузер обязан игнорировать стиль, если в селекторе встречается что-то незнакомое.

Способ для FireFox мне подсказали в комментариях на «Хабре», для Internet Explorer я придумал его самостоятельно. Вот пример, иллюстрирующий идею:

.class { color: black } /* для всех остальных браузеров */
.class, noindex:-moz-any-link { color: blue } /* стиль только для Mozilla FireFox */
.class, v\:* { color: red } /* стиль только для Internet Explorer */

Можете попробовать самостоятельно — фильтрует идеально. В примере класс «class» даст тегу, к которому его применят, в FireFox — голубой цвет текста, в IE — красный, а в остальных браузерах — чёрный.

У верстальщиков до сих пор возникает задача — подключить стили только для определённого браузера. Для IE проблема решаема — всё меньше верстальщиков не знают что такое conditional comments. Но исчезающе малое количество народу знает что такое per-site user stylesheet rules. Интересны они тем, что Mozilla FireFox поддерживет их через собственное правило — «@-moz-document».

Вообще, это правило позволяет подключать стили в зависимости от домена, URL или его префикса. Для нас важно, что эти правила увидит только FireFox.

Простой пример использования, из которого становится понятен общий принцип:

<style type="text/css">
body { background: white; color: black }

@-moz-document url-prefix()
{
    body { background: grey; color: white }
}
</style>
<body>White in FireFox</body>

Принципы фильтрации по URL и доменам так же могут оказаться полезными, о них можно почитать в архиве W3C.

В CSS3 есть замечательный селектор ::selection. Позволяет указать цвет выделения текста мышкой для определённого тега. В исходной статье, например, три абзаца выделяются каждый своим цветом — красным, голубым и розовым.

Фокус прост, в таблице стилей пишем:

p.red::selection { background: #ffb7b7 }      /* Safari, Opera */
p.red::-moz-selection { background: #ffb7b7 } /* FireFox */

всё привычно — для тега «P» с классом «red» указывается цвет выделения. Для FireFox при помощи селектора «::-moz-selection», для Safari и Opera — при помощи «::selection». Opera поддерживает указание цвета для «::selection» начиная с версии 9.50 build 9770.

P.S. Если у вас FireFox, Safari или Opera 9.50 build 9770, попробуйте выделить этот текст, можно заметить, что в «Опере» цвет выделения наследуется, а в Safari и FireFox — нет.

Что интересно — тест ACID3 готовится к выпуску. Помимо поддержки CSS он проверяет так же и DOM. Тест пока не готов (пользоваться им нельзя, делать выводы — тоже), но лучше всего его пока проходит «Опера».

В своё время, когда браузер фирмы Netscape был лидером на рынке, в нём была поддержка интересной, на мой взгляд, технологии, которая уже при рождении была незаслуженно забыта — «JavaScript-based Style Sheets» (JSSS). Сейчас эту технологию, насколько я знаю, не поддерживает ни один из существующих браузеров, а в те времена я использовал её, чтобы разделить стили для Netscape и Internet Explorer, а сейчас это представляет интерес не больше, чем Gopher.

Итак, в чём суть? Суть та же самая, что и в CSS, разница лишь в представлении. Несколько примеров, думаю, достаточно наглядно покажут суть:

<style type="text/javascript"><!--
    // H1 { color: blue }
    tags.H1.color = "blue";

    // BODY { color: black; background: white }
    with(tags.BODY) {
         color = "black";
        bgColor = "white";
     }

    // H1 EM .reddish { color: red }
    contextual(tags.H1, tags.EM, classes.reddish.all).color = "red";

    /* UL  LI { color: red }
        UL UL LI { color: blue } */
    with(tags) {
         contextual(UL, LI).color = "red";
         contextual(UL, UL, LI).color = "blue";
     }

     // P:first-line { font-style: small-caps }
     tags.P.firstLine.fontStyle = "small-caps";

     // P:first-letter { font-size: 200% }
     tags.P.firstLetter.fontSize *= 2; // 200%
--></style>

Теперь самое интересное, вычисляемые значения и функции:

<style type="text/javascript"><!--
    tags.IMG.width = .50 * document.width;

    evaluate_style() {
        if (visual.colorDepth < 2) {
             bgColor = "white";
             color = "blue";
        } else {  
             bgColor = "black";
             color = "white";
        }
    }

   tag.BODY.apply = evaluate_style()
   tag.ids.headertable.apply = evaluate_style()
--></style>

В блоге «Life Style» полезная статья «„Очистка“ плавающих блоков». Новое решение старой проблемы — плавающие блоки не растягивают внешний контейнер, которая обычно решается добавлением дополнительного элемента с «clear: both». Вкратце, рецепт выглядит следующим способом, но рекомендую взглянуть и на полную статью:

div.container {
    overflow: auto;
    width: 100%
}

В комментариях подсказали ссылку на первоисточник: http://www.quirksmode.org/css/clearing.html.

У Данила Иванова в блоге нашёл упоминание о том как лечить некорректное поведение браузеров на базе Gecko (FireFox, Camino, Flock, Seamonkey и так далее) при смене CSS-свойства «opacity»:

Время от времени сталкиваюсь с бажным поведением Gecko при смене opacity. То блок не туда встанет, то скролл обнулится. Хозяйке на заметку: помогает opacity:.99

Ни разу не сталкивался, но знать о таких вещах полезно.

Благодаря БлоGноту узнал об официальном открытии сервиса «Я.ру», походил по ссылкам и обратил внимание, что в Opera 9.50 некоторые ссылки как-то интересно подсвечиваются. До того интересно, что я было подумал, что «оперовцы» реализовали CSS-фильтры из Internet Explorer. Оказывается, нет, это работает CSS3-свойство text-shadow (позволяет добавлять к тексту тень), которое на данный момент поддерживается браузерами Safari (и его кузенами), Konqueror, iCab и теперь ещё «Оперой».

Интересно, что тени (text-shadow) можно накладывать на текст по нескольку раз, что даёт интересные визуальные эффекты, например тот, который вы увидите ниже, если ваш веб-браузер поддерживает text-shadow:

Многократные тени — впечатляющая штука

Как обычно, идея позаимствована из Internet Explrorer, там есть фильтр «drop shadow», который занимается тем же самым.

<div style="cursor:hand;height:160px; padding:10px; font:bold 13pt Verdana;
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, 
        Color='gray', Positive='true')">
Текст с тенью
</div>

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