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

Ответ 1

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

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

Ответ 2

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

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

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

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

Чтобы настроить любую версию Firefox [НЕ на iOS! См. Ниже]:

/* Firefox (any) */

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

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

(ЭТО НЕ ДЛЯ ХРОМА на iOS!!! --- разработчики использовали движок Safari на iPads и iPhones вместо 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 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

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

Ответ 3

вы можете использовать этот умный файл javascript, селектор браузера CSS: 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
}

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

Здесь несколько хаков (см. несколько устаревшая таблица в качестве примера)

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

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

Ответ 8

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

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