Каков предпочтительный способ загрузки специфичных для браузера файлов CSS?

Question

Каков наилучший способ обработки загрузки CSS-файлов из браузера? Предположим, вы работаете в контексте правильной инфраструктуры MVC.

Вот несколько вариантов, вы можете свободно обсуждать плюсы и минусы этих вариантов, а также любые другие известные вам методы и предпочитаете:

• Решение на стороне сервера: используйте контроллер (например, сервлет) для анализа заголовка user-agent в запросе и верните соответствующий CSS-файл в представлении.
• Используйте браузерные хаки для загрузки файлов, такие как: <!--[if IE]> ... <![endif]-->
• Асинхронно загружать CSS-файлы на стороне клиента, проверяя user-agent и добавляя соответствующие файлы
• Использование клиентской инфраструктуры для работы со спецификой браузера (например, jQuery специфичные для браузера правила CSS * )

Answer 1

Я собираюсь предложить 4-й вариант ...

• Не используйте браузерные файлы CSS.

Серьезно, не делай этого.

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

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

Answer 2

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

Условные комментарии IE являются приемлемым способом загрузки определенных CSS-правил IE (включая версию).

Они определенно не хак.

Не используйте ничего, что полагается на user-agent, поскольку это легко подделать. Я также держусь подальше от клиентских CSS-фреймворков, потому что (по большей части) это просто прославленные макеты таблиц (вы можете проверить этот пост StackOverflow для более подробной информации о фреймворках).

Answer 3

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

Веб-инструментарий Google (GWT) использует контроллер для предоставления именно этого, и я уверен, что это стандартная лучшая практика.

Условные теги не работают для каждого браузера. Javascript загружается слишком поздно и дает вам накладные расходы.

Answer 4

Я бы предпочел фреймворки, они прекрасно работают (в основном) и помогают вам сэкономить много времени. Потому что вместо того, чтобы заново открывать решения, кто-то уже сделал это для вас.

Answer 5

вот пример части файла css, который у меня есть, где я обрабатываю специфичные для браузера вещи для темы drupal, которую я реализовал ... это обрабатывает webkit (safari / chrome и т.д.), gecko (firefox) и khtml (konqueror),страница работает нормально для ie7 / 8

при использовании 1 файла сохраняет запрос http и делает вещи более понятными (IMHO)

/**
 * IE6 fixes
 */
* html ul.primary-links {
  height: 23px;
}

/***
 * WebKit fixes
 */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
  ul.primary-links {
    height: 24px;
  }
}

/***
 * Gecko fixes
 */
@-moz-document url-prefix(){ 
  ul.primary-links { 
    height: 28px !important; 
  } 
}

/***
 * KHTML fixes
 */
@media screen and (-khtml-min-device-pixel-ratio:0)
{
  ul.primary-links {
    height: 22px;
  }
}

надеюсь, это поможет.