cssing Архив » Как написать CSS только для Safari

Как написать CSS только для Safari

XHTML/CSS, Полезности

Несмотря на экзотичность такого фильтра, он мне понадобился уже на двух проектах. Это, ясное дело, из-за того что у меня мак, и мне не все равно. Короткий грязный(невалидный и не future proof) но работающий здесь и сейчас хак для Safari 2-3.

Зачем это надо?

Ситуаций, в которых я он мне понадобился оказалось пока 2.

1. Когда вы стилизуете submit’ы, они, как известно в Mac OS Tiger не поддаются, и это иногда вызывает нежелательные эффекты для дизайна.
Например на сайте UA WEB 2007 поле регистрации выглядит по разному в Safari и всех остальных броузерах:

Safari 2

Firefox

2. На этом блоге я использовал для (всего)текста шрифт Myriad. Очень красивый и читабельный шрифт. Под виндой, однако, имеет совершенно неадекватное и нечитабельное сглаживание, догадайтесь какой скрин из винды:

Бебебе

Вау!

Фильтр же позволил мне хотя бы для Сафари пользователей (а это дизайнер и верстальщик моего блога =)) отдавать сайт в первозданном виде с Myriad. Остальным же показывать красивый Arial.

Как

Фильтр является комбинацией двух фильтров (Safari 2 и 3).

Известно что Safari 2 очень чувствителен к посторонним невалидным символам в CSS, настолько, что не читает код после них. К примеру в вот такой конструкции:

1. p{color:red}
2. span{font-weight:normal;#}
3. p{color:green}

Все броузеры сделают параграф зеленым, в то время как в Сафари 2 он останется красным. На самом деле вместо # можно использовать кучу странных символов, но какая разница, если работает и этот. Разумеется, если эти три строки написать в самом начале CSS, сафари 2 его(файл) не прочитает вовсе. Вдобавок никто не мешает использовать вместо селекторов, например import, и отдавать целый отдельный CSS файл для Safari 2.

Safari 3

C Safari 3 все проще. Он вышел недавно, и как любой новый броузер поддерживает тьму-тьмущую интересных CSS3 псевдоклассов, до которых не додумались еще пока Windows броузеры, да и вообще все остальные. А значит есть большая вероятность что ближайшие несколько лет их будет поддерживать только он. Одно из таких свойств:

1. body:first-of-type{color:red}

Шрифт будет красным только в Safari 3. Псевдокласс, кстати сам по себе экзотический – вразумительного теоретического применения ему я так и не придумал. Официальное предназначение:

The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element

Вобщем, прямой перевод, “первый, среди всех подобных ему”. Скорее всего другие броузеры скоро(или не очень) начнут его тоже поддерживать. Так что, он ни разу не future proof. Однако, если очень нужно(критично), есть javascript определение Safari 3. Выглядит примерно так:

1. <script type="text/javascript">
2. isSafari3 = false;
3. if(window.devicePixelRatio) isSafari3 = true;
4. </script>

Комбинация для Safari 2 и 3

Комбинируя эти два фильтра, можно скормить стили только для Safari 2-3.
Вот как я делаю это на своем блоге, что бы любоваться Myriad:

1. body{font:62.5%/1 “Myriad Pro”, arial, sans-serif;}
2. …
3. /*В конце файла*/
4. span{font-weight:normal;#} /*Safari 2 дальше не читает, для него остался Myriad*/
5. body{font-family:Arial, sans-serif;} /*Для всех броузеров*/
6. body:first-of-type{font-family:”Myriad Pro”, arial, sans-serif;} /*для Safari 3*/

Работает!. Несмотря на малый процент Сафари в целом, есть тенденция к тому, что среди современных заказчиков он очень распространен. В целом, Safari очень хороший и фильтры эти нужны крайне редко.

Буду рад если кто-то поделится своим опытом!

Update v.2

Финальная подборка фильтров (спасибо Antejan и Mester):

1. /*поймут только сафари*/
2. body:first-of-type .class{}
3. /*поймут только сафари*/
4. html:root*.class {}
5. /*поймут только сафари*/
6. html*.class {}
7. /*поймут только сафари и опера*/
8. @media screen and (-webkit-min-device-pixel-ratio:0){ .class { } }
9. /*поймут только сафари*/
10. body:first-of-type .class{}

Если ваши наблюдения отличаются, жду письма или комментария, вместе надеюсь оттестим наконец пуленепробиваемый способ фильтровать Сафари. Тестировать тут:

• Тестовая страничка со всеми фильтрами для Сафари, все проверены на Сафари 3. Опера прочитает только 4й прием. Фаерфокс и ИЕ не прочитают ни одного.

Update (2009.07.06)

На данный момент из всех перечисленных хаков работает только один:

1. @media screen and (-webkit-min-device-pixel-ratio:0){
2. .class { }
3. }

Новая Opera, по своим каким-то причинам, перестала его читать.

Update: В силу выхода новых версий браузеров, обязательно тестируйте хаки.
Хороший вариант предложил Василий Половнёв в комментарии к этой заметке.

наиболее удачный на мой взгляд способ написать css только для Safari 3/Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) {
body:first-of-type .clazz {color: red}
}

XHTML/CSS, Полезности