Использование разных стилей CSS для определенных браузеров

Question

Какой лучший способ иметь отдельный CSS для IE и других браузеров? Я думаю о том, чтобы просто ориентироваться на пользователей IE, Firefox и Safari. Особенно сейчас с поддержкой CSS3 в большинстве браузеров, кроме IE.

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

1. загрузка отдельных таблиц стилей условно используя <!--[if IE]>
2. Hack подчеркивания и различные другие встроенные IE взломы

Я предпочитаю (2), так как (1) это дополнительная работа, особенно при разработке. Но (2), кажется, не работает все время. Какой самый эффективный способ?

Answer 1

У меня была бы одна таблица стилей, которую можно найти в верхней части документа.

под этим сделай [! - [если IE]] условная таблица стилей.

Здесь просто переопределяем стили, которые вызывают проблемы в IE. - последним выбранным стилем для определенного класса будет тот, за которым последуют.

Answer 2

Наша команда работает с CSS по следующим трем правилам:

1. Убедитесь, что общие / общие файлы CSS работают так, как они должны со всеми браузерами настолько близко, насколько это возможно.
2. Обрабатывать все «ошибки» IE в отдельных файлах, контролировать загрузку таблиц стилей с условиями IE.
3. Запрещено взламывать, если невозможно заставить его работать по первым двум правилам.

Answer 3

Вы также можете использовать этот способ; иногда условия могут не работать, когда нам нужно написать стили в середине кода.

<?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>  
    <?php if (strstr($browser, "MSIE 6.0")) { ?>  
    <link rel="stylesheet" href="ie6style.css" type="text/css" media="screen" />  
    <?php }else{ ?>  
    <link rel="stylesheet" href="default.css" type="text/css" media="screen" />  
    <?php } ?>  

Проверьте $browser с помощью:

IE - «MSIE»

Firefox - «Firefox»

Сафари - «Сафари»

Опера - «Опера»

Хром - «Хром»

Answer 4

<!--[if !IE]><!--><link rel="stylesheet" href="non-ie.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->

Этот трюк широко использует Яндекс (он же «русский гугл») для уменьшения HTTP-запросов. market.yandex.ru используя это, например.

Answer 5

Я согласен с тем, чтобы хранить все ваши основные CSS в одном файле. Если вы используете ASP.NET, вы можете использовать WebHandler для управления тем, какой CSS на самом деле отправляется. Я уверен, что другие языки имеют похожие решения. Это позволяет вам отправлять только то, что вам нужно, и разрешить его кэширование. Другое преимущество заключается в том, что вы можете комбинировать несколько CSS-файлов (если вы так делаете) и представлять только один. Это хорошая практика, поскольку вы уменьшаете количество запросов к веб-серверу.

Затем вы можете написать что-то вроде [if lt IE 8] margin: 0px; и он не будет отправлен в IE8 или FF и т. д.

Если вы используете только HTML, вы должны следовать упомянутым выше условиям стиля [! - [if IE]].

Мы используем WebHandler в нашем очень большом проекте, и я бы никогда больше этого не сделал.

См. http://www.conditional -css.com / download . Он доступен для PHP, C # и C

Удачи.