Есть ли взломанный CSS только для Google Chrome?

Ответ 1

Конечно:

@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
    #element { properties:value; } 
}

И немного скрипка, чтобы увидеть это в действии - http://jsfiddle.net/Hey7J/

Должен добавить tho... это, как правило, плохая практика, вы не должны быть в состоянии, когда вы начинаете нуждаться в отдельных взломах браузера, чтобы заставить вас работать с CSS. Попробуйте использовать reset таблицы стилей в начале вашего проекта, чтобы избежать этого.

Кроме того, эти хаки не могут быть доказательством в будущем.

Ответ 2

Чтобы работать только с хромом или сафари, попробуйте:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome */
.myClass {
 color:red;
}

/* Safari only override */
::i-block-chrome,.myClass {
 color:blue;
}}

Ответ 3

Только Chrome CSS hack:

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    #selector {
        background: red;
    }
}

Ответ 4

Попробуйте использовать новую функцию "@supports", вот вам один хороший хак, который вам может понравиться:

* ОБНОВЛЕНИЕ!!! * Microsoft Edge и Safari 9 также добавили поддержку функции @supports в Fall 2015, Firefox также - так вот моя обновленная версия для вас:

/* Chrome 29+ (Only) */

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) { 
   .selector { color:red; } 
}

Дополнительная информация об этом здесь (обратное... Safari, но не Chrome): [есть ли css-хак для сафари только НЕ хром?]

Предыдущий CSS Hack [до версий Edge и Safari 9 или более поздних версий Firefox]:

/* Chrome 28+ (now also Microsoft Edge, Firefox, and Safari 9+) */

@supports (-webkit-appearance:none) { .selector { color:red; } }

Это работало только (хром), версия 28 и новее.

(Этот хром 28+ взломал не одно из моих творений. Я нашел это в Интернете, и, поскольку он был настолько хорош, я отправил его на BrowserHacks.com в последнее время, есть другие.)

Обновление от 17 августа 2014 года. Как я уже упоминал, я работал над получением большего количества версий хром (и многих других браузеров), и вот один из них, который я создал, обрабатывает хром 35 и новее.

/* Chrome 35+ */

_::content, _:future, .selector:not(*:root) { color:red; }

В комментариях ниже он упоминался @BoltClock о будущем, прошлом, а не... и т.д. Мы можем на самом деле использовать их, чтобы немного дальше вернуться в историю Chrome.

Итак, это тот, который также работает, но не "только для Chrome", поэтому я его не поместил. Вы все равно должны разделить его на хакерство только для Safari, чтобы завершить процесс. Однако я создал css-хаки, чтобы не беспокоиться. Вот несколько из них, начиная с самого простого:

/* Chrome 26+, Safari 6.1+ */

_:past, .selector:not(*:root) { color:red; }

Или вместо этого, это тот, который возвращается к Chrome 22 и новее, но Safari также...

/* Chrome 22+, Safari 6.1+ */

@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm),
screen and(-webkit-min-device-pixel-ratio:0)
{
    .selector { color:red; } 
}

Блок Chrome версии 22-28 (более сложный, но хорошо работающий) также можно настроить с помощью комбинации, которую я разработал:

/* Chrome 22-28 (Only!) */

@media screen and(-webkit-min-device-pixel-ratio:0)
{
    .selector  {-chrome-:only(;

       color:red; 

    );}
}

Теперь следуйте этой следующей паре, которую я также создал, для целей Safari 6.1+ (только), чтобы по-прежнему отделять Chrome и Safari. Обновлено, чтобы включить Safari 8

/* Safari 6.1-7.0 */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
    .selector {(;  color:blue;  );} 
}


/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .selector { color:blue; } 

Итак, если вы поместите один из хакеров Chrome + Safari выше, а затем Safari 6.1-7 и 8 в ваших стилях последовательно, у вас будут элементы Chrome красным, а элементы Safari - синим.

Ответ 5

Вы можете использовать javascript. Другие ответы на сегодняшний день, похоже, также нацелены на Safari.

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    alert("You'll only see this in Chrome");
    $('#someID').css('background-position', '10px 20px');
}

Ответ 6

Я нашел, что это работает ТОЛЬКО в Chrome (где он красный), а не в Safari и во всех других браузерах (где он зеленый)...

.style {
color: green;
(-bracket-:hack;
    color: red;
);
}

Из http://mynthon.net/howto/webdev/css-hacks-for-google-chrome.htm