Есть ли способ сделать браузер условным CSS внутри файла * .css?

Question

Есть ли способ сделать условный CSS для браузера внутри файла * .css? Я хочу определить все стили внутри одного и того же физического файла.

Answer 1

Я работал над этим для многих, особенно последних браузеров - большинства версий Firefox, Webkit и версий Internet Explorer. Совсем недавно версии Safari и Chrome можно было разделять. Некоторые из них я поместил на browserhacks.com

Всегда лучше начать с лучшего CSS, который вы можете сделать первым, но они доступны, когда у вас мало времени и что-то нужно ... вчера.

В настоящее время для справки: Internet Explorer - версия 11, Safari - версия 8, Firefox - до 36 в версиях Development / Aurora, а Chrome - до 41 в версиях Development / Canary на момент публикации.

Они очень специфичны, если они будут изменены при удалении каких-либо частей, они не будут работать правильно.

Для таргетинга на любую версию Firefox [НЕ на iOS! Смотри ниже]:

/* Firefox (any) */

_:-moz-tree-row(hover), .selector { color:red; }

Чтобы обнаружить новые версии Chrome:

(ЭТО НЕ ДЛЯ Chrome на iOS !!! --- разработчики использовали движок Safari на iPad и iPhone вместо Chromium или Mozilla - так что вместо этого вы используете взлом Safari для версий этих браузеров для iOS)

/* Chrome 29 and newer */

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

Если вы хотите сделать это, вы также можете нацелить Chrome немного дальше назад с помощью комбинированного хака, который я разработал (это странный CSS, но он работает - скопируйте его точно так, как вы видите здесь):

/* Chrome 22-28 */

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

Выявить новые версии Safari было так же сложно, как и Chrome, с использованием вложенной пары медиазапросов:

/* Safari 6.1-10.0 */

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

Safari обновлен в конце марта 2017 года, так что этот работает для 10.1:

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) 
{ @media {
   .selector { color:red; } 
}}

Для версий (7.1 и выше) вы можете использовать это:

/* Safari 7.1+ (10.1 is the current version as of April 2017) */

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

Чтобы настроить таргетинг на новые версии Internet Explorer:

/* Internet Explorer 11 */

_:-ms-fullscreen, :root .selector { color:red; }


/* Internet Explorer 10+ AND Microsoft Edge */

_:-ms-lang(x), .selector { color:red; }


/* Internet Explorer 9-11 */

_::selection, .selector { color:red\0; }

/* Microsoft's Edge Browser */

@supports (-ms-ime-align:auto) { .selector { color:red; } }

Это основы, но чтобы увидеть больше моих творений, нацеленных на разные версии браузера, посмотрите мой блог:

https://jeffclayton.wordpress.com

или мои живые страницы теста взлома CSS:

https://browserstrangeness.bitbucket.io/css_hacks.html ЗЕРКАЛО: https://browserstrangeness.github.io/css_hacks.html

Наслаждайтесь!

Answer 2

Есть способ сделать это в IE, воспользовавшись ошибками в браузере и @import. Лучший способ, который я видел, это здесь , любезно предоставленный Бобинсом (и определенно выбил мой ответ, хе).

В общем, нет. Даже условные комментарии зависят от браузера для IE.

Answer 3

Вы можете использовать этот умный файл javascript, CSS Browser Selector: http://rafael.adm.br/css_browser_selector/

позволяет вам ориентироваться на определенные браузеры, используя имена классов, такие как:

.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}

Answer 4

Только с помощью хаков. Условные комментарии определяются только для файлов разметки, а не для файлов .CSS.

Answer 5

Нет. Вся цель использования файлов CSS состоит в том, что каждый файл представляет определенный стиль. Если вы хотите писать скрипты, вы должны использовать PHP или что-то в этом роде, CSS это просто описание одного стиля.

Answer 6

Я не думаю, что есть лучший селектор браузера CSS, чем тот, который упоминал выше Рафаэль Лима, поэтому я не буду добавлять здесь ссылку или примеры, которые есть в том же посте и взяты со страницы Рафаэля Лимы.

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

Answer 7

Существует несколько хаков (см. несколько устаревшую таблицу в качестве примера)

И есть серверные решения, такие как conditional-css для php

Но хорошо написанные, хорошо структурированные css не должны нуждаться в таком количестве хаков, только случайные, т.е.

Answer 8

Не уверен, что это можно сделать точно. Мы просто устанавливаем CSS-файл на основе браузера пользователя в codebehind.