CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

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

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

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

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

Safari 2

Firefox

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

Бебебе

Вау!

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

Как

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

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

Safari 3

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

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

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

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

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*/

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

Update v.2

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. }

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

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

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