Вопрос по css – Есть ли в Google Chrome только хак CSS? [закрыто]

25

Есть ли в Google Chrome только хак CSS? Многие ранее существующие хаки, которые раньше работали для Chrome, теперь используются другими браузерами. Мне нужен тот, который предназначен для Google Chrome, но не для других браузеров, таких как Mozilla Firefox, Safari или Microsoft Edge.

css-infos.net/properties/webkit undefined
Мозилла читаетwhat правильно тоже? И почему вопрос помечен jQuery, если речь идет о CSS? James Allardice
Есть ли радость от моего ответа @Sandeep? Alex
в топе mozilla: 56px показать другое место и в другом месте crome ... но в ie7 нормально Sandy
browserhacks.com vsync

Ваш Ответ

6   ответов
11

@ support & apos; Особенность, вот один хороший хак, который вам может понравиться:

* UPDATE!!! * Microsoft Edge и Safari 9 добавили поддержку функции @supports осенью 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; } }

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

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

Обновление от 17 августа 2014 года. Как я уже говорил, я работаю над созданием большего количества версий Chrome (и многих других браузеров), и вот один из них, созданный для работы с Chrome 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.Updated to include 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 синего цвета.

Похоже, Chrome знает:past, :current а также:future также, но я понятия не имею, как именно он их реализует (я не могу получить какие-либо элементы, соответствующие любому из них, или:not(:current), но я могу заставить каждый элемент соответствовать:not(:past) а также:not(:future)). По крайней мере, он распознает их, что позволяет использовать этот хак.
Я добавил много новых хаков для многих версий браузеров на моей тестовой странице и в блоге.
Больше на моем блоге:jeffclayton.wordpress.com/2014/07/22/… и тестовая страница здесь:browserstrangeness.bitbucket.org/css_hacks.html#webkit
На первый взгляд кажется, что Chrome поддерживает составные селекторы в:not() согласно Селекторам 4. Тем не менее, похоже, что Chrome просто игнорирует* в аргументе.:not(*:root) а также:not(*[fakeattr]) работает нормально, но:not(html:root) а также:not(html[fakeattr]) не делайте. Из селекторов 3 не ясно,* следует считать простым селектором для целей:not() когда не используется отдельно (а в Селекторах 4 это, вероятно, в любом случае не имеет значения). В любом случае, очень интересная находка.
Error: User Rate Limit Exceeded
19

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    #selector {
        background: red;
    }
}
Статистика этого взлома охватывает Chrome 29+
Error: User Rate Limit Exceeded
Thx его работает только на Chrome не на Ipad или Iphone, как и другие решения
Последнее условие... and (min-resolution: .001dpcm)Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

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

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

Отhttp://mynthon.net/howto/webdev/css-hacks-for-google-chrome.htm

19

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

/* Safari only override */
::i-block-chrome,.myClass {
 color:blue;
}}
Я сказал это на примере. Взлом на Safari и Chrome.
Это не только хром
4

похоже, также нацелены на Safari.

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

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

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

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

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

Это НЕ специфично для Chrome. Это предназначается для Safari И Chrome.
Обратите внимание, чтоscreen можно заменить наprint или другие типы носителей.
Это не только хром

Похожие вопросы