Надеюсь, поможет верстальщикам. Не моё, но пользую 
Сама статья:
Обычно, работая над каким-либо проектом по верстке, я сто процентов проверяю правильность разметки в трех наиболее популярных на сегодняшний день браузерах: 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 с оглядкой на дефолтные стили браузеров». Или вот по этой ссылкам
* Safari x
* Safari 3.0.4
Ну, естественно, что знакомство со спецификациями 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>
Ну, в принципе, пока это все. Удачной верстки!