Содержание
Если вы просматривали веб-страницы и просматривали код различных веб-страниц, вы могли заметить одну вещь: разные сайты по-разному используют свои внешние CSS-файлы — либо с помощью подхода @import, либо путем ссылки на него. CSS файл В чем разница между @import и ссылкой для CSS и как вы решили, какая из них лучше для вас? Давайте взглянем!
Разница между @import и
Прежде чем решить, какой метод использовать для включения таблиц стилей, вы должны понять, для чего эти два метода были предназначены.
— Связывание — это первый метод включения внешней таблицы стилей на ваши веб-страницы. Он предназначен для связи вашей веб-страницы с таблицей стилей. Он добавляется в ваш HTML-документ следующим образом:
@Импортировать — Импорт позволяет импортировать одну таблицу стилей в другую. Это немного отличается от сценария связи, поскольку вы можете импортировать таблицы стилей внутри связанной таблицы стилей. Если вы добавите @import в заголовок вашего HTML-документа, он будет выглядеть так:
@import url ("styles.css");С точки зрения стандартов, нет никакой разницы между связью с внешней таблицей стилей или ее импортом. Любой из этих способов является правильным, и любой из них будет работать одинаково хорошо (в большинстве случаев). Однако есть несколько причин, по которым вы можете использовать одну поверх другой.
Зачем использовать @import?
Много лет назад наиболее распространенной причиной использования @import (или вместе с ней) было то, что старые браузеры не распознавали @import, поэтому вы могли скрывать стили от них. Импортируя таблицы стилей, вы, по сути, сделаете их доступными для более современных, совместимых со стандартами браузеров, одновременно скрывая их от более старых версий браузеров.
Другое использование метода @import — использование нескольких таблиц стилей на странице, в то же время включая только одну ссылку в документ. Например, корпорация может иметь глобальную таблицу стилей для каждой страницы сайта с подразделами, имеющими дополнительные стили, которые применяются только к этому подразделу. Связывая таблицу стилей подраздела и импортируя глобальные стили в верхней части этой таблицы стилей, вам не нужно поддерживать гигантскую таблицу стилей со всеми стилями для сайта и каждого подраздела. Единственное требование — любые правила @import должны предшествовать остальным правилам стиля. Кроме того, не забывайте, что наследование все еще может быть проблемой.
Зачем использовать?
Причина номер один для использования связанных таблиц стилей заключается в предоставлении альтернативных таблиц стилей для ваших клиентов. Браузеры, такие как Firefox, Safari и Opera, поддерживают атрибут rel = «alternate stylesheet» и, когда он доступен, позволяют зрителям переключаться между ними. Вы также можете использовать переключатель JavaScript для переключения между таблицами стилей в IE. Это чаще всего используется с макетами Zoom для специальных возможностей.
Одним из недостатков использования @import является то, что если у вас есть очень простое с одним правилом @import, на ваших страницах может отображаться «вспышка нестандартного содержимого» (FOUC) во время загрузки. Это может раздражать ваших зрителей. Простое решение этой проблемы — убедиться, что у вас есть хотя бы один дополнительный элемент или элемент.
А как насчет типа носителя?
Многие авторы утверждают, что вы можете использовать тип носителя, чтобы скрыть таблицы стилей от старых браузеров. Часто они упоминают это как преимущество использования либо @import, либо, но на самом деле вы можете установить тип мультимедиа любым методом, и старые браузеры, которые не поддерживают типы мультимедиа, не будут просматривать их в любом случае.
Так какой метод вы должны использовать?
Мы предпочитаем использовать и затем импортировать таблицы стилей во внешние таблицы стилей, как это делает большинство веб-дизайнеров сегодня. Таким образом, у вас есть только одна или две строки кода для настройки в ваших документах HTML. Но суть в том, что решать вам. Если вам удобнее с @import, то сделайте это! Оба метода соответствуют стандартам, и если вы не планируете поддерживать действительно старые браузеры, нет веских причин для их использования.
Отредактированный Джереми Жираром на 2/7/17
