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

15 November, 2007

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. span{font-weight:normal;#} /*Safari 2 дальше не читает, для него остался Myriad*/
  4. body{font-family:Arial, sans-serif;} /*Для всех броузеров*/
  5. 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{}

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

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, Полезности

51 комментариев к “Как написать CSS только для Safari”

1smash1 | 1. 15 November, 2007

Во-первых. Шрифт в инпутах и тексареах тоже надо поправить, остался старый.

Во-вторых и главных. Я удивляюсь пафосным арт-директорам, которые не удосужились за резонансными проектами и прочим буттером выучить список из десятка шрифтов.
Чем добавляют головняка верстальщикам и пользователям сайтов. Ну какой нахрен может быть мириад, Генн?! Это же не флеш, и не фотошоп, и даже не твой сафари со своим убийственно стремным сглаживанием , пора бы уже и понимать что к чему, еб то!

И да, я утверждаю, что можно делать охуенные сайты, используя шрифты нормально работающие на всех платформах, без вот этих вот перверсий.

akella | 2. 15 November, 2007

Спасибо, Инпуты то я и проглядел =). Genn может и сам ответит, но это на самом деле больше “приятная мелочь” для меня и пользователей сафари, нежели “сайт на мириад”, в своих больших проектах я всегда мириад заменял на Тахому или Ариал и даже не задумывался. Пока не увидел Мириад под Сафари…

Это ж личный блог – где еще мне так можно извратиться? =)

PS: про сглаживание в Сафари эт ты зря =)

1smash1 | 3. 15 November, 2007

Субпиксельное сглаживание это такая штука, спорная. Оставим его :)

В нотифаях о коментах кодировка всего служебного текста сбивается, похоже что у самого шаблона кодировка неверная.

Ну и неплохо бы сделать якорь для коментов и давать в письме ссылку на него :)

akella | 4. 15 November, 2007

Да, мои попытки сделать везде UTF-8 пока не увенчались успехом =) Отчасти поэтому у меня до сих пор WordPress 1.5, только тссс….

Давид Мзареулян | 5. 15 November, 2007

Вот интересно, а у меня Бебебе и Вау! распределились совершенно обратным образом. Винда, FF, CRT-монитор (подозреваю, что имеет значение именно это). Мораль? Сами придумайте:)

0T0 | 6. 15 November, 2007

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

Genn | 7. 15 November, 2007

<script type=”text/javascript”>
isSafari3 = (window.devicePixelRatio)?true:false;
</script>

Serhiy Valchuk | 8. 15 November, 2007

input#subscr-email на сайті UA Web 2008 відображається не коректно тому що він більший ніж background image.

akella | 9. 15 November, 2007

@Давид: бебебе и вау ) это я что б запутать, переборщил с шутками-издевками вобщем =) Мне разница казалась такой очевидной – что никакие бебе и вау не могут сбить вас с толку. В чем я оказался прав!

@ОТО: Хак естественно только под Мак Ос, ибо сафари под виндой сглаживал бы так же отвратительно “мой” Мириад. Да и вообще – разве кто то всерьез относится к Сафари под винду? Это ж так… игрушка.

@Сергей: не сомсем понял о каком именно некорректном отображении вы говорите? Просто в моих броузерах все сейчас ок, был бы очень благодарен за помощь в указании бага. (или вы про гипотетический?)

Antejan | 10. 15 November, 2007

/*+safari only*/
html*.class { }
/*-safari only*/

/*+safari3 only*/
@media screen and (-webkit-min-device-pixel-ratio:0){
.class { }
}
/*-safari3 only*/

akella | 11. 15 November, 2007

За первый спасибо! добавлю в пост
А вот второй уже понимает и opera 9… Нужно это помнить. Он не “safari3 only”

Zigzag | 12. 15 November, 2007

сенкс

Kildor | 13. 15 November, 2007

К слову, body:first-of-type понимает и Opera 9.5
А вот @media screen and (-webkit-min-device-pixel-ratio:0) моя Opera не поняла, в отличии от, к примеру, @media screen and (min-width: 20px)

akella | 14. 15 November, 2007

Насколько мне известно, оно понималось именно 9й оперой, то есть будущей поддержки не будет, это ж специальный -webkit-***
Оба добавил в пост, будет полный взгляд на проблему.
Спасибо огромное Antejan и Kildor!

lusever | 15. 17 November, 2007

А с последним апдейтом мака, поставился автоматом сафари 3. Может пора забить на второй. Через месяц-полгода его доля будет ничтожной.

akella | 16. 17 November, 2007

Согласен =) Но по своей природе многие макюзеры хотят его купить, и потому переход затягивается. А я вообще пока недостаточно насладился тигром ) потому сижу на 2м Сафари и Mac OS Tiger. Да и вообще сафари настолько хорош что хак этот скорее “прикол” нежели реальная нужда

pioneer | 17. 17 November, 2007

Эх, а у меня Google Toolbar в Файерфоксе портит даже вон то красивое коричневенькое закругление.

akella | 18. 17 November, 2007

Да, пожалуй таки идея кастомизировать инпуты утопична :(

lusever | 19. 18 November, 2007

Я про последний апдейт Тигра :) Он успешно поставил Сафари 3.

akella | 20. 18 November, 2007

Точно! ) Урра! )

Daineko | 21. 20 November, 2007

А можете подсказать как посмотреть сайт в сафари на винде?
Ну типа сервис какой нить или програмулина…

akella | 22. 20 November, 2007

Во первых есть Сафари 3 под винду – http://www.apple.com/safari/
Потом есть несколько сервисов –
http://www.browsercam.com/
http://browsershots.org/
Ну и наконец можно попросить меня или других знакомых макюзеров сделать скрин и выслать =) Под маком это проще чем под виндой.

Знакомства Аха | 23. 14 December, 2007

Маки у нас слишком не распространены – оптимизировать свои сайты под них начну только тогда, когда реально будет нечем занятся:)
Конечно тебе хотелось сделать приятное всем, но стоит ли это стольких усилий?
Как это напряжно иногда быть веб-дизайнером…разработан единый стандарт, но каждый считает, что вправе ломать его посвоему, а отдуваемся мы:)

akella | 24. 14 December, 2007

В общем случае ты прав конечно =)
Но… в данном частном посуди сам – у меня мак, у дизайнера мак, мы вместе делаем сайт… =) И все же у многих зажиточных клиентов есть маки – и они конечно увидят верстку в первую очередь под этой ОС, потому решил что не всегда, но иногда такие хаки пригодятся

Константин Ефимов | 25. 15 December, 2007

Конструкцию html*.class { } Safari3win оставляет без внимания…

akella | 26. 17 December, 2007

Уже в четверг буду на своем маке — посмотрю. Вот ведь, доверяй но проверяй. Хотя я все же склоняюсь пока к несерьезному отношению к виндовой версии…

MESTER | 27. 18 December, 2007

html*.class { } – Safari + IE

html:root*.class { } – only Safari

Vlad | 28. 18 December, 2007

html*.class { } – nevalidno

DEFF | 29. 19 December, 2007

:first-of-type – этот псевдокласс (как и любой другой надо полагать) подменяется на :hover при наведении мыши. и рвёт… как тузик тряпку

akella | 30. 20 December, 2007

А что, псевдоклассы не могут применяться одновременно? Вы что-то путаете. Вспомните :hover и :first-child например.

Или я вас неправильно понял?

DEFF | 31. 21 December, 2007

Я имел в виду, что, если описаны свойства для :first-child и для :hover, а они [свойства], естесственно, разные, то при наведении мыши тюнинг для сафари (то, что описано в :first-child) теряется, а вступает в силу то, что описано для псевдокласса :hover

akella | 32. 21 December, 2007

Нe подразумевается использование:

body:first-of-type #yourdiv

Вряд ли кто то задает :hover для body…

DEFF | 33. 21 December, 2007

Аааа, тогда ясно, а то у меня не получилось .class:first-of-type, потому, что он пересекался с .class:hover

Константин Ефимов | 34. 23 December, 2007

Давайте более детально определимся с синтаксисом конструкций html*.class { } и html:root*.class { }. У меня эти конструкции не понимает ни один браузер ни в одной интерпретации… В какое место этих чудо-директив вставляем реальный селектор со свойствами? )

akella | 35. 23 December, 2007

Создал страничку со всеми фильтрами, в моем Safari 3 все блоки зеленые. Это значит что сафари 3 весь этот ЦСС воспринимает. В фаерфоксе – все красные. В опере зеленый блок по номером 4.

Поделитесь скриншотом или наблюдением? Safari 2 есть у кого-то?

Константин Ефимов | 36. 23 December, 2007

Юрий, спасибо. Нашел свою ошибку в синтаксисе. Конструкции html*.class { } и html:root*.class { } действительно работают.)

MESTER | 37. 1 January, 2008

ещё html:root .class {} – работает в Safari + Firefox

MESTER | 38. 1 January, 2008

идеал:

.class { background: white } /* Для оперы и прочего */
html*.class {
background: yellow !important; /* IE 7 */
background: gray; /* IE6 */
}
html:root .class { background: green; } /* FF */
html:root*.class { background: red !important; } /* Safari */

akella | 39. 2 January, 2008

Спасибо за подборку =) Как хорошо что все хаки в одном месте все же не нужны практически никогда, было бы очень страшно запоминать такие конструкции )

Muerto | 40. 26 June, 2008

А если мне надо хак для Сафари для наследованных классов, типа
h3.green .listing {top:-14px;}
Подойдёт только первый “грязный” вариант?

vitol | 41. 21 July, 2008

Когда уже лидеры сговорятся как-то наконец, и не надо будет под каждый браузер чего-то дошлифовывать и дорабатывать напильником. Не будучи шпециалистом в html/css порой уходит уйма времени, чтоб сайт не перекособочивало и всё везде выглядело одинаково.

Vasily Polovnyov | 42. 9 December, 2008

А сейчас ситуация немного изменилась.

Во-первых, -webkit-min-device-pixel-ratio: 0 понимает Opera 9 до 9.5, во-вторых, начиная с 9.5 она понимает :first-of-type. Ну, а в-третьих, помимо Safari 3 все это понимает и Chrome.

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

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

Opera 9 пройдет через @media, но обломается на :first-of-type, а 9.5 сразу же на @media.

Vasily Polovnyov | 43. 9 December, 2008

А вот и скриншоты в подтверждение своих слов.

1. Плохая, плохая опера (http://i.piccy.kiev.ua/i2/c2/c2/4462439ea7135942e73cdaafb38b.png): 9.10 и 9.51 на тестовой страничке. В 9.10 зеленый — четвертый блок, в 9.51 — первый.

2. Чуть подправленная версия тестовой странички (http://i.piccy.kiev.ua/i2/03/ea/89743fcda9cbd414c5d2bd8ae142.png). Добавленный вариант выделен синей границей. Chrome + Safari 3 все зеленое, в Opera 9.10 и 9.51 нужный блок красный.

Исправления минимальные:
@media screen and (-webkit-min-device-pixel-ratio:0) {
body:first-of-type .n5{
background:green;
}
}
.n5 {border: 3px solid #5587bb}

Кстати, может кто-нибудь из пользователей/поклонников Оперы объяснить, как пробралось проприетарное (если я не ошибаюсь) -webkit- свойство в этот браузер?

assous | 44. 13 August, 2009

html* ие понимает уверенно
body:first-of-type селектор – мозилла и опера тоже в теме :)

assous | 45. 13 August, 2009

body:first-of-type – хром тоже шарит
Так что остается только html:root*

Саша | 46. 9 September, 2009

Спасибо большое
помогло)))
html:root*.class { background: red !important; } /* Safari */

Расширенный сборник CSS-хаков | W3 HTML | 47. 1 October, 2009

[…] Также не работает в Chrome 2. О причине использования такого хака и о других хаках для сафари можно узнать здесь. […]

bnku | 48. 28 December, 2009

А есть какие-то соображения, как написать хак для третьего сафари, который не будет работать в четвертом?

Хаки для всех, кроме IE « LAYOUT | 49. 28 July, 2010

[…] Также не работает в Chrome 2. О причине использования такого хака и о других хаках для сафари можно узнать здесь. […]

Дизайн | 50. 24 November, 2011

Ну и что для версии типа 5 нет хаков :( ?

Чеченец | 51. 10 August, 2012

Автору сайта(блога) огромная благодарность за материал! Так же, всем кто принимал участие в его создании! Из-за сглаживания в Сафари шрифт отображался более жирным, что заставляло слетать последнему пункту из горизонтално меню на следующую строчку!В общем Вы мне очень помогли)

Оставить комментарий