Опубликовано автор в категориях Верстальщику.

Верстка для SafariОбычно, работая над каким-либо проектом по верстке, я сто процентов проверяю правильность разметки в трех наиболее популярных на сегодняшний день браузерах: Firefox, Internet Explorer6 и Internet Explorer7. А после того, как проверена верстка на Firefox и исправлены все багги «горячо любимого» мною IE, для полного морального удовлетворения я проверяю верстку в Opera и Safari.

Сразу хочу отметить, что последние версии Safari (3.1 для Windows), Firefox (3.0.x) и Opera (9.5x), при условиях грамотной валидной верстки фактически идентично отображают разметку. По крайней мере, в 90% случаев. Конечно, остаются 10%, о которых мне и хотелось бы написать в этом посте. Вернее даже не 10%, а 5%, поскольку в этом материале я не буду говорить про Opera, а исключительно о Safari.

Итак, поговорим о верстке для Safari

Для начала мне хотелось бы сказать пару слов о замечательном инструменте «Веб-инспектор», который по умолчанию входит в Safari 3. Этот инструмент, конечно, не дотягивает по своим возможностям к известному плагину для Firebug (для Firefox), по позволяет успешно тестировать и отлаживать верстку в Safari.

Кстати, инструмент очень погож, на внедренный в Opera 9.5 помощник разработчика «Opera Dragonfly«. Но о нем позже.

А пока что вкратце скажу, что «Веб-инспектор» позволяет вам проверить код страницы, умеет строит древо элемента, поновляет редактировать css «на лету». Кроме этого, он отображает полную информацию о загрузке страницы. В общем, есть самые необходимые функции.

А сам факт того, что такой инструмент включен в сборку по умолчанию, говорит о том, что создатели Safari думали о разработчиках веб-приложений, чего не скажешь о создателях Internet Explorer.

Ну а теперь собственно о верстке

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

Ну, естественно, что знакомство со спецификациями CSS, HTML, XHTML подразумевается по умолчанию.

Когда вы вооружитесь необходимыми знаниями, то можно спокойно верстать. Но при этом конечно не стоит забывать о том, что если вы используете reset.css для обнуления дефолтных стилей, то это вовсе не означает, что вы получите ожидаемый результат на сто процентов. В общем, есть свои нюансы для каждого браузера, и вписать их все в reset.css зачастую нельзя в силу различных причин. И тогда на помощь приходят «хакаи-, трюки- и уловки-css.

CSS-Хаки для Safari

Несмотря на все свои достоинства, Safari 3 для Windows не попадет в число браузеров «grade-A browser«по поддержке CSS. Поэтому, пока и приходится использовать хаки.

Итак, начнем с самых простых хаков, которые делают код доступным только для Safari 3


/* Safari 3 */

body:first-of-type #element { color: red; }

Примечание*

  • :first-of-type это селектор CSS3. И когда другие браузеры начнут польность поддерживать CSS3 этот хак будет не актуален. А пока самый простой способ сделать правило исключительно для Safari 3.0

Следующие хаки стоит использовать с оглядкой на определенные задачи и условия верстки. В частности на движки браузеров.

Данные хаки подходят не только для используемого сегодняSafari3


/* Код для Safari/KHTML но не WebKit */
html[xmlns*=""] body:last-child ... { ... }


/* Код для WebKit */
@media all and (min-width:0px) { body:last-child ... { ... } }


/* Код для Safari/Webkit/KHTML */
body:last-child:not(:root:root) ... { ... }

* Соответственно «…» после хака — это место для классов и Id

-webkit-min-device-pixel-ratio

Очень хорошим методом для Safari 3 является использование следующего объявления вот в такой конструкции:

@media screen and (-webkit-min-device-pixel-ratio:0){
p {color: #00ff00;}
}

Это работает только для Safari 3. Причем, не смотря на то, что min-device-pixel-ratio — объявление из CSS3 префикс «-webkit» позволит использовать этот хак даже тогда, когда другие браузеры начнут полностью поддерживать CSS3.

И в заключение, хотелось бы еще привести пример использования js для определения Safari3

Как я уже говорил, сегодня только сафари поддерживает devicePixelRatio. Поэтому чтобы не использовать устаревший метод «document.all», вы можете проверить браузер с помощью такого скрипта:

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

Ну, в принципе, пока это все. Удачной верстки!

При написании стать использовались материалы:

http://www.evotech.net/blog/2007/06/targeting-safari-30-with-css/

http://developer.yahoo.com/yui/articles/gbs/index.html#history

http://css-framework.ru/wiki/documentation/css-hack#safari

http://tmbu.info/browser-specific-css-hacks/

Спонсор поста: блог о менеджменте веб-проектов

5 комментариев к записи “Укрощая Safari”

  1. Hiway

    Ребята, если вы спамеры — то не самый удачный вариант для холивара. А если только начали изучать «ниву» веб-строительства, то настоятельно рекомендую познакомиться с эти продуктом от Apple — http://ru.wikipedia.org/wiki/Safari

    Ответить
  2. alex

    А CSS-Хаки для Opera 9.63 есть???

    Помогите плиз у меня опера выбрасывает ошибку № 30 и ссылается на documentation.css

    Буду оч благодарен за помощь.

    ВСЕМ заранее спасибо!!!

    мое мыло alex1986@ukr.net

    Ответить
  3. Виталий Трахтенберг aka LouD

    Не спамер и не бот 🙂

    Привет, не нашел ли чего для Safari 4?

    Я столкнулся с граблями — не могу побороть, известные хаки не проканали.
    Вот смотри трабла — видна на скриншотах browsershots — http://browsershots.org/http://test.tvysoftware.com/tvyredesign072009/example1.html — суть в том, что в средней полоске (навигация) картинка имеет float: left; и вот на всех браузерах она делает что положено..а под Safari — остается в центре, да еще прирастает падингами..

    Ответить

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

  • (не будет показан)