2010-04-05 4 views
2

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

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

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

ответ

5

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

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

Они определенно не являются взломом.

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

6

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

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

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

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

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

+0

«нужно только слегка взломать, чтобы работать с IE» - точно. Как вам это удается? –

+0

@Yuval A, это сложно, и вам нужно много опыта, но вы сможете добраться до точки, где ваш CSS будет работать в основном с IE. Помните, что в CSS есть несколько способов сделать что-то ... что означает, что если один из способов не работает с перекрестным браузером, попробуйте найти другой способ сделать то же самое ... и это может работать во всех браузерах. – Polaris878

+0

Извините Yuval, я неправильно понял ваш вопрос из комментария. Я бы сказал, что предпочтительно иметь чеки для IE в одном файле CSS, если они вам действительно нужны. Таким образом, если кто-то переживает и поддерживает его, очевидно, что конкретно нужно сделать для обработки IE для этого конкретного класса. – Polaris878

1

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

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

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

0

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

используя 1 файл сохраняет запрос HTTP и делает вещи более четкое (ИМХО)

/** 
* 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; 
    } 
} 

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

0

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

Смежные вопросы