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

Специальный хак для 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;

}

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

Похожие записи:

  1. CSS селекторы поддерживаемые браузером Google Chrome
  2. Является ли Google Chrome новым IE 6 для веб-дизайнеров?
  3. Укрощая Safari
  4. Все хаки для браузеров в одном месте
  5. Оригинальное круглое CSS-menu

40 ответов к “Специальный хак для Google Chrome”

Смысл в том, что это правило позволяет применить стиль для элемента только в случае его отображения в Google Chrome. То есть только для этого браузера, чтобы добиться единства визуального оформления страница в различных пользовательских агентах, правда в ущерб валидности документа.

Ребет, как думаете, если рейтинг браузера Google будет продолжать расти, то это может убить конкуренцию и отдать всё так сказать пространство в интернете на откуп компании Google?

Хаки работают так же и в опере. А нет ли какого-нибудь хака, действующего только под Chrome (Safari)?

Подразумевалось, как нужное — но ни тут-то было… Проблема: сделанное меню отображается неправильно (на пару пикселей) в Safari (version 3.2), google Chrome отображает все нормально. Фиксим — по рейтингу Safari превосходит GC — багу в Safari с помощью хака, который естственно затрагивает и Chrome — и в нем меню едет.. В поисках антихака забрел на эту страничку — и попробовал.. Не хочет показанный хак перебить хак для Safari — а жаль..
Использовал хаки для Safari:

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

html[xmlns*=»»] body:last-child … { … }

@media all and (min-width:0px) { body:last-child … { … } }

body:last-child:not(:root:root) .style {background: #F00;}

И еще, по-моему, какие-то.. =) Все они затрагивают как Safari так и Chrome. Вобщем, как-то так — не работает предложенный хак в моем случае =((
Используется:

Есть идеи?

Под используется я вставил доктайп (съел как тег, наверн =) ):

!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd»

Теперь посмотрел (НУ И ДИЗАЙН о_О) — ничего путного..
Я вот думаю, что возможно дело в версии не только Safari, но и Google Chrome!? Моя версия 1.0.154.65 — и, честно говоря, не знаю, стоит ли обновлять эту версию до 2ки — потому что неизвестна статистика использования..
В целом, этим браузером я доволен — да и Safari начал «не слушаться» недавно.. (и как же тут не вспомнить про «как Ленин мертвый, но живой» Ie6) — так что вопрос не самой высокой важности!
Кто-нибудь еще тестил приведенный хак? работает?

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

Этот «специальный хак» прекрасно понимается Safari 3.2.2 под венду. И хотя движок одинаков, однако, скажем, у этих браузеров разная высота панели инструментов, из-за чего они высоту в процентах считают по-разному при одинаковом разрешении. И что с этим делать — совершенно непонятно.

@sordes: Подумай сам, о том, что ты сказал. Как может зависеть высота в загруженном документе от высоты активной области окна? Если содержимое превышает высоту активной области, то появляется скрол, а 100% это высота именно области дерева элементов между html и /html. Если высота вписывается по контенту в активное окно то опять же нет смысла в тових словах. Или ты подразумеваешь резиновость верстки в том что и вертикальные значения задаются в процентах. Где здесь логика и все-таки, я думаю, резиновость верстки заключается в отсутствия горизонтального скролла и масштабируемости элементов верстки по горизонтали. А вертикальный скролл — никто не считает неуместным.

ff3.5 поддерживает это свойство. Вообще проблема у меня с этим, так как мне надо получить именно chrome (в safari, хоть и движок тот же, поддерживается font-face, а в chrome — нет 🙁 )

Скорее всего, в 3 версии хрома поддержка font-face будет реализована. Поскольку это свойство относится к CSS3, то не стоит пока стремится вывести его везде. Достаточно наличие его объявления, а браузер разберется выводить или нет. Просто используя это свойство не забывайте, что в ie6-8 оно не работает.

представленный хак (который только для хрома) работает посему то у меня в мозилле 3,5

> Не хочет показанный хак перебить хак для Safari — а жаль..
—
Аналогично. Стили, прописанные с этим хаком для Chrome, точно так же воспринимаются и Safari for Win 3.1.2. К сожалению, мне это не помогло.

имхо так неактуален, поскольку оказывает влияние также и на другие браузеры… и в конце концов, как заметили выше, мозилла начиная с версии 3.5 тоже стала понимать этот хак…

В ИЕ начиная с версии 4.0 свойство @font-face работает, просто не все умеют им пользоваться 🙂
если интересно то материалы по теме тут:
http://blog.themeforest.net/tutorials/css-font-face-and-15-free-fonts-you-can-use-today/
Материал проверен и это работает во всех браузерах кроче чудного Хромого, даже третьей версии.

Здравствуйте! Мне надо сделать так, чтобы если Google Chrome, то подключалась одна версия jquery, а если другой браузер, то другая версия jquery. Подскажите, пожалуйста, как это можно реализовать.

А как етот хак использовать типа body:nth-of-type(1) а потом идет класс который я хочу чтобы отображался только в хроме?

Доброго времени суток.
И все же почему гугл, опера и другие, не могут использовать стандартные правила отображения http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd зачем предлагать продукт, который в той или иной степени как то не поддерживает определенные теги стилей, блоков css ?
Да в связи с этим поэтому и 1% всего пользователей ими пользуются, а верстальщикам голову ломать как отобразить там и там и тут, и что бы овцы целы — и волки сыты.
Спасибо.

Не работает хак этот! Его понимают Safari и FF. Есть какое-то другое решение именно для Chrome?!

Константин. Убирать не буду. Но обязательно добавлю сюда кое-что новенькое, что специфично для последних версий Хрома. Дело в том, что этот пост писался еще когда IE9 не существовало.

yana, все дело в том, что материал писался еще до того, как какой-либо из существующих браузеров понимал этот синтаксис. В материале сделаю правку.

Добавить комментарий

Ваш адрес email не будет опубликован.