Проверка CSS для Chrome, IE, Firefox

Question

Я заметил небольшую проблему с выравниванием в трех основных браузерах при рендеринге моего сайта. Таким образом, как я могу выполнить следующий псевдокод с чистым CSS?

if Webkit (Safari/Chrome) {
    #myDIV {margin-top:-3px}
} else if (Firefox) {
    #myDIV {margin-top:0px}
} else { // IE and other browsers
    #myDIV {margin-top:1px}
}

Answer 1

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

.foo {
  margin-top: 5px; // general property
  _margin-top: 2px; //IE 6 and below
}

Или вы разделяете свои классы и добавляете в свой общий класс класс, специфичный для браузера.

/* general */
foo {
   width : 20em;
}

/* IE 6 */
* html foo {
   width : 27em;
}

/* IE 7 */
* + html foo {
   width : 29em;
}

Answer 2

Вы можете использовать CSS Hack .

Однако я бы не советовал.

Для IE вы можете включить отдельный файл CSS или тег <style> в условный комментарий , например:

<!--[if IE] <tag> <![endif]-->

Answer 3

Вы не можете сделать это с чистым CSS. Лучший способ сделать это - использовать серверный код, такой как ASP.NET или PHP, чтобы прочитать заголовок «user-agent» HTTP-запроса и определить, какой браузер используют ваши посетители, выполнив поиск по ключевым словам в этой строке. Например, мой пользовательский агент:

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

То, что вы могли бы сделать, - это иметь набор операторов if-else, ищущих строки в пользовательском агенте, таких как «Firefox», «MSIE» или «WebKit», а затем обслуживать разные отдельные CSS-файлы в зависимости от используемого браузера б.

Вы можете сделать то же самое с JavaScript, но помните, что у пользователей может быть отключен JavaScript, или, скорее всего, их устройство может не поддерживать его ... тогда как практически любой HTTP-запрос отправит строку агента пользователя.