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

Специальный хак для Google Chrome

Внимание! Материал устарел и использовать хак только для Chrome уже не получится. Смотрите комментарии к посту. Свежие хаки для Google Chrome можно найти здесь

Ажиотаж вокруг браузера от Google растет. Уже более одного процента пользователей сети используют Chrome для серфинга. Думаю, что эта тенденция будет положительной и динамичной.

Google ChromeВ целом браузер довольно корректно работает с CSS, очень похож на Safari, потому что работает на движке WebKit. Поэтому большинство хаков для Safari подойдут и для Chrome.

Поэтому, если вам надо прописать специфичный стиль, как для Safari, так и для Сhrome, то можно использовать хак body:first-of-type. А также могут пригодится специальные хаки для Safari 3+

Однако, похож, да не совсем. Есть в нем некоторые свои нюансы. Например не очень корректное отображение элементов форм. Причем не всегда помогают даже reset.css и пользовательские стили со строгими правилами. В общем, в скором времени, все равно придется брать в расчет Chrome при верстке.

И уже сейчас удалось найти один специальный хак для него:

body:nth-of-type(1) p{

color: #333333;

}

Удачной вам верстки:)

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

Специальные хаки для Firefox 3

CSS хаки для Firefox 3

Картинка с сайта www.alexilin.ru

Когда вышла третья версия Firefox, я стал замечать, что на некоторых сверстанных ранее сайтах верстка выглядит не идеально, при этом во второй версии браузера все выглядело отлично. Естественно, что обновленная версия движка браузера повлияла на это. И так, стала задача, как исправить в Firefox 3 недочеты, которые не видны во второй версии браузера?
Сделать это, в принципе, не сложно, но есть одна неприятность. Те правила, которые исправляют погрешности в Firefox 3, зачастую вызывают новые погрешности в более поздних версиях браузера. В общем, если не брать во внимание скрипт определения браузера и прописывания соответствующего класса (о нем еще напишу в следующих постах), то на помощь приходят хаки. Напомню, что при использовании хаков нужно смириться с тем, что css становиться не валидным. Но это решать вам, использовать хаки или же решать проблему иначе.

Итак, специальные css-хаки для Firefox 3

1.  .sampleclass, x:-moz-any-link { } /* FireFox 2 это чтобы напомнить*/

2.  .sampleclass, x:-moz-any-link, x:default { } /* FireFox 3 */

3.  html>/**/body .sampleclass, x:-moz-any-link, x:default { } /* Только FireFox 3 */

Добавлю лишь, что вместо «.sampleclass» мы вставляем нужный атрибут.

Вот, в принципе, и все. Удачной верстки.

Спонсор поста: Новостной блог о технологии AJAX, где вы найдете все об ajax.

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

Укрощая 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.