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

Внимание! Материал устарел и использовать хак только для 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;

}

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

39 комментариев к записи “Специальный хак для Google Chrome”

  1. Hiway

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

    Ответить
  2. Удар

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

    Ответить
  3. Алена

    «Главное что-бы Google не обнаглел, и не увлекся спамом чрезмерным или там болезнью звездной заболел…» — не логично, у гугла уже все есть

    Ответить
  4. ARS

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

    Ответить
  5. SireX

    Подразумевалось, как нужное — но ни тут-то было… Проблема: сделанное меню отображается неправильно (на пару пикселей) в 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. Вобщем, как-то так — не работает предложенный хак в моем случае =((
    Используется:

    Есть идеи?

    Ответить
  6. SireX

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

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

    Ответить
  7. SireX

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

    Ответить
  8. Hiway

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

    Ответить
  9. sordes

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

    Ответить
  10. hiway

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

    Ответить
  11. Max

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

    Ответить
  12. hiway

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

    Ответить
  13. Kiba

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

    Ответить
  14. WebDisaster

    > Не хочет показанный хак перебить хак для Safari — а жаль..

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

    Ответить
  15. V3

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

    Ответить
    • hiway

      Не могу возразить вашему замечанию. Но просто статья писалась, то того как был запущен FF 3.5.

      Ответить
  16. glu2006

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

    Ответить
  17. Andrey

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

    Ответить
  18. Александр

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

    Ответить
  19. Михаил

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

    Ответить
  20. Konstantin

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

    Ответить
  21. Hiway

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

    Ответить
    • Hiway

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

      Ответить

Trackbacks/Pingbacks

  1.  Все хаки для браузеров в одном месте | Вебмастеру посвящается...

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

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