Совместимость с браузером @import 2013

Question

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

Я обсуждаю два варианта:

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

2. другой способ должен иметь только один тег LINK на каждой веб-странице, указывая на «фидер» CSS. Этот файл CSS фидера будет включать все ссылки на мои другие файлы CSS с помощью @imports. Это означало бы, что техническое обслуживание было бы легким. Я мог бы добавить/переупорядочить/удалить файлы CSS всего за одно место для всего сайта. Большой!

Однако это приводит к совместимости функции @import [или ее отсутствия в старых браузерах].

Я осмотрелся, и статьи, которые я видел, были, по крайней мере, пару лет.

Итак, чтобы добраться до нуба: какой процент браузеров, которые используются сейчас [июль 2013], поддерживают это и могу ли я безопасно забыть о браузерах, которые не смогут интерпретировать @import?

Если нет, что я могу сделать, чтобы сохранить содержание файлов CSS до минимума. (Что-то более элегантное, чем «найти и заменить на текущем сайте»).

Answer 1

Вместо того, чтобы беспокоиться о @import с, вы просто должны объединить и преуменьшать все ваши CSS файлы, которые не могут быть обслужены через CDN:

<link rel="stylesheet" href="styles-84e599dcbd6c60fa0af76aaa18a5d75f.css" /> 

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

Существует много способов сделать это. Если вы не используете какой-либо веб-фреймворк (или используете Node.js), взгляните на Grunt.

Что касается вашего фактического вопроса, если вы не планируете поддерживать браузеры старше IE5.5, то @import будет работать нормально. Но я настоятельно рекомендую подход с уменьшенной таблицей стилей.

Answer 2

Вот некоторые статистические данные о браузерах http://www.w3schools.com/browsers/browsers_stats.asp

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

http://css-tricks.com/css-media-queries/

Answer 3

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

1) HTTP 2.0 став большинством используемой версии протокола в промышленно развитых странах за пределами Китая (спасибо, старый IE), и скоро будет считаться отраслевым стандартом (если это еще не так).Это означает, что поддержка мультиплексирования соединения и кэширования заголовков устраняет необходимость объединения файлов в один; Фактически, на конференции Fluent Conference в SFO в прошлом году ведущий HTTP2 фактически утверждал, что разделение таких вещей, как CSS и изображения на несколько файлов, будет фактически лучше из-за превосходной способности HTTP использовать большую пропускную способность из-за более длительного времени соединения.

2) Из-за всей этой интерфейсной автоматизации в CSS, такой как SASS и LESS, вы в конечном итоге гораздо более склонны нарушать ограничение выбора IE 5-9 4095. Это немного известная ошибка, так как до сих пор люди редко превышали это количество селекторов в одном листе; однако на корпоративных сайтах это становится обычной практикой. В принципе, все листы с более чем 4095 селекторами будут по-прежнему считываться, однако браузеры просто молчат после этого делать какие-либо правила.

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