Рубрики
Верстальщику

CSS3 рецепты для WebKit

webkit_css3

В комментариях одной из статей по CSS3 меня спросили: «В каких браузерах возможно реализовать CSS3 свойства?». И здесь можно было бы ответить, что на сегодняшний день многие функции CSS3 можно реализовать в Firefox, Konqueror, Opera или Safari/Webkit. Однако, в каждом браузере поддержка CSS3 на данный момент существует не на 100% процентов, и набор свойств может отличатся в зависимости от браузера. Так в каких же браузерах и как реализована поддержка CSS3?

Чтобы ответить на этот вопрос, мы обратимся к самим создателям браузеров. В сегодняшнем посте мы начнем с рассмотрения возможностей реализации CSS3 в браузере Safari, а соответственно и других браузерах которые используют последние версии движка WebKit. Ниже представлен перевод официального описания возможностей CSS3 от разработчиков Safari. Итак, приступим…

Рубрики
Верстальщику

Укрощая Safari

Верстка для 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.