Учимся использовать @import в CSS


Директива @import или импорт css файла

Директива @import дает нам зеленый свет на включение в свою таблицу стилей других таблиц стилей. Она должна содержать URI(Universal Resource Identifier) или проще сказать ссылку на файл импортируемой таблицы стилей.

И не забывайте, если у Вас файл импортируется из директории, например mydir — @import url(«mydir/style.css»); и в нем прописан путь к рисунку, например: background-image: url(img/elements/bgstrip.gif); то путь теперь должен быть следующим background-image: url( ../ img/elements/bgstrip.gif); т.к. style.css теперь будет смотреть из под каталога mydir .

Хорошим тоном будет подписывать импортируемые файлы рядом , например так:

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

Подключать CSS через link или @import?

Подключить модуль CSS можно 2 способами:

Через HTML с использованием тега link (предпочтительнее)

  • Через CSS с использованием правила @import
  • Почему надо использовать link?

    В теории единственная разница между ними заключается в том, что @import является механизмом CSS, который включает таблицу стилей, а

  • — механизмом HTML. Однако браузеры обрабатывают их по-разному, предоставляя
  • явное преимущество с точки зрения производительности. В частности Лучшие практики для ускорения вашего веб-сайта от Yahoo предлагают использовать
  • .

    Похожие записи

    Полезные горчие клавиши Youtube

    При просмотре роликов бывает хочется немного ускорить воспроизведение, для этого есть функция «скорость видео» в настройках ролика. Чтобы её включить не задействуя мышь нужно нажать «Shift + >» или «Shift + 11 июня 2020 г. в Общее

    Как установить будильник на компьютере с Windows 10?

    В операционной системе windows 10 есть встроенный будильник. Он так и назыается «Будильник и часы». Cочетает такие функции, как будильник, мировое время, таймер и секундомер.

    Первоначальная настройка камеры Dahua

    Для установки камеры Dahua необходимо подключить ip-камеру к сети через блок-питнаия (Инжектор). Затем запустить утилиту от производителя

    Лучший способ включить CSS? Зачем использовать @import?

    в основном мне интересно, в чем преимущество / цель использования @import импортировать таблицы стилей в существующую таблицу стилей, а не просто добавлять другую .

    в заголовке документа?

    17 ответов

    С точки зрения скорости-страницы @import из файла CSS почти никогда не следует использовать, так как он может предотвратить одновременную загрузку таблиц стилей. Например, если таблица стилей содержит текст:

    тогда загрузка второй таблицы стилей может не начаться, пока не будет загружена первая таблица стилей. Если, с другой стороны, обе таблицы стилей указаны в
    элементы на главной странице HTML, оба могут быть загружены одновременно. Если оба таблицы стилей всегда загружаются вместе, также может быть полезно просто объединить их в один файл.

    иногда бывают ситуации, когда @import подходит, но они обычно являются исключением, а не правилом.

    Я буду играть адвоката дьявола, потому что я ненавижу, когда люди соглашаются слишком много.

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


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

    Если у вас один стиль зависит С другой стороны, самое логичное-поместить их в два отдельных файла и использовать @import. это будет иметь наиболее логичный смысл для следующего человека, который смотрит на код.

    (когда такая зависимость произойдет? Это довольно редко, на мой взгляд — обычно достаточно одной таблицы стилей. Тем не менее, есть некоторые логические места, чтобы положить вещи в разных CSS-файлов:)

    • тематизация: если у вас разные цветовые схемы или темы для одной страницы, они могут делиться некоторыми, но не всеми компонентами.
    • Подкомпоненты: надуманный пример-скажем, у вас есть страница ресторана, которая включает в себя меню. Если меню сильно отличается от остальных страницу будет легче поддерживать, если она находится в собственном файле.

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

    Python использует импорт; C использует include; JavaScript имеет require. CSS имеет импорт; когда вам это нужно, используйте его!

    2. Как только вы доберетесь до точки, где сайт должен масштабироваться, объедините все CSS.

    несколько запросов CSS любой kind-будь то через ссылки или через @imports — это плохая практика для веб-сайтов, высокая производительность. Как только вы окажетесь в точке, где важна оптимизация, все ваши CSS должны проходить через минификатор. Cssmin объединяет операторы импорта; как указывает @Brandon, у grunt есть несколько вариантов для этого. (см. Также этот вопрос).

    Как только вы будете на minified этапе,
    быстрее, как указывали люди, поэтому в большинстве случаев ссылка на несколько таблиц стилей и не @ import любой, если это вообще возможно.

    прежде чем сайт достигнет производственного масштаба, более важно, чтобы код был организован и логичен, чем то, что он идет немного быстрее.

    лучше не использовать @import для включения CSS в страницу по соображениям скорости. См. эту отличную статью, чтобы узнать, почему нет:https://www.stevesouders.com/blog/2009/04/09/dont-use-import/

    также часто сложнее минимизировать и комбинировать css-файлы, которые подаются через тег @import, потому что сценарии minify не могут «отслаивать» строки @import из других css-файлов. Когда вы включаете их в качестве тегов

    Так: использовать
    вместо @import .

    используя метод link, таблицы стилей загружаются параллельно (быстрее и лучше), и почти все браузеры поддерживают link

    импорт загружает любые дополнительные css-файлы один за другим (медленнее) и может дать вам вспышку неустановленного контента

    @Nebo Iznad Mišo Grgur

    ниже приведены все правильные способы использования @import

    на самом деле нет большой разницы в добавлении таблицы стилей css в голове по сравнению с использованием функции импорта. Используя @import обычно используется для подключения таблицы стилей, так что можно легко расширять. Он может быть использован для простого обмена различными цветовыми макетами, например, в сочетании с некоторыми общими определениями css. Я бы сказал, что основным преимуществом / целью является расширяемость.

    Я согласен с комментарием xbonez, а также в том, что добавлена переносимость и ремонтопригодность выгоды.

    Они очень похожи. Некоторые могут утверждать, что @import более ремонтопригоден. Однако каждый @import будет стоить вам нового HTTP-запроса таким же образом, как с помощью метода «link». Так что в контексте скорости это не быстрее. И, как сказал «duskwuff», он не загружается одновременно, что является падением.

    Мастер Йода рекомендует:  Подборка интересного #1

    одно место, где я использую @import, — это когда я делаю две версии страницы, английскую и французскую. Я создам свою страницу на английском языке, используя main.стиль CSS. Когда я создам французскую версию, я свяжусь с французской таблицей стилей (main_fr.стиль CSS.) В верхней части французской таблицы стилей я импортирую main.css, а затем переопределите конкретные правила только для тех частей, которые мне нужны, во французской версии.

    основная цель метода @import-использовать несколько таблиц стилей на странице, но только одну ссылку в . Например, корпорация может иметь глобальную таблицу стилей для каждой страницы сайта с подразделами, имеющими дополнительные стили, применимые только к этому подразделу. Путем ссылки на таблицу стилей подраздела и импорта глобальных стилей вверху из этой таблицы стилей вам не нужно поддерживать гигантскую таблицу стилей со всеми стилями для сайта и каждого подраздела. Единственное требование заключается в том, что любые правила @import должны предшествовать остальным правилам стиля. И помните, что наследование все еще может быть проблемой.

    иногда вам нужно использовать @import в отличие от inline . Если вы работаете над сложным приложением, которое имеет 32 или более файлов css, и вы должны поддерживать IE9 нет выбора. IE9 игнорирует любой файл css после первого 31, и это включает в себя и встроенный css. Однако каждый лист может импортировать 31 другой.

    есть много веских причин использовать @import.

    одной из мощных причин использования @import является кросс-браузерный дизайн. Импортированные листы, как правило, скрыты от многих старых браузеров, что позволяет применять определенное форматирование для очень старых браузеров, таких как Netscape 4 или более старые серии, Internet Explorer 5.2 для Mac, Opera 6 и старше и IE 3 и 4 для ПК.

    чтобы сделать это, в вашей базе.файл css вы можете иметь следующее:

    в вашей импортированный пользовательский лист (newerbrowsers.css) просто примените новый каскадный стиль:

    использование единиц » em «превосходит единицы» px», поскольку позволяет как шрифтам, так и дизайну растягиваться на основе пользовательских настроек, где, поскольку старые браузеры лучше работают с пиксельными (которые являются жесткими и не могут быть изменены в настройках пользователя браузера). Импортированный лист не будет виден большинством старых браузеров.

    вы можете так, кто заботится! Попробуйте пойти в некоторых крупных дедовским государством или корпоративные системы, и вы все равно увидите эти старые браузеры, используемые. Но его действительно просто хороший дизайн, потому что браузер, который вы любите сегодня, также когда-нибудь будет устаревшим и устаревшим. И использование CSS ограниченным способом означает, что теперь у вас есть еще большая и растущая группа пользовательских агентов, которые не работают хорошо с вашим сайтом.


    использование @import совместимость веб-сайта кросс-браузера теперь достигнет 99,9% насыщенности просто потому, что многие старые браузеры не будут читать импортированные листы. Он гарантирует, что вы применяете базовый простой набор шрифтов для своего html, но более продвинутый CSS используется более новыми агентами. Это позволяет контент быть доступным для старых агентов без ущерба для богатых визуальных дисплеев, необходимых в новых настольных браузерах.

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

    мегабайты и мегабайты Javascript API и JSON загруженный на смарт-устройства и плохо продуманная HTML разметка, которая не согласуется между страницами является основным драйвером медленного рендеринга сегодня. Ваша средняя страница новостей Google составляет более 6 мегабайт ECMAScript, чтобы сделать крошечный текст! ЛОЛ

    несколько килобайт кэшированного CSS и согласованного чистого HTML с меньшими следами javascript будут отображаться в пользовательском агенте с молниеносной скоростью просто потому, что браузер кэширует как согласованную разметку DOM, так и CSS, если вы не решите манипулируйте и изменяйте это с помощью цирковых трюков javascript.

    Я думаю, что ключ в этом-две причины, по которым вы на самом деле пишете несколько таблиц стилей CSS.

    1. вы пишете несколько листов, потому что разные страницы вашего сайта требуют разных определений CSS. Или, по крайней мере, не все из них требуют всех определений CSS, требуемых другими страницами. Таким образом, Вы разделяете CSS-файлы, чтобы оптимизировать загрузку листов на разных страницах и избежать загрузки слишком много определений CSS.
    2. вторая причина это приходит на ум, что ваш CSS становится таким большим, что становится неуклюжим для обработки, и для того, чтобы упростить обслуживание большого файла CSS, вы разделяете их на несколько файлов CSS.

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

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

    С точки зрения времени загрузки ничем не отличаются. Браузер должен проверять и загружать отдельные файлы CSS независимо от того, как они реализованы.

    используйте @import в своем CSS, если вы используете сброс CSS, как сброс CSS V2 Эрика Мейера.0, поэтому он выполняет свою работу перед применением CSS, предотвращая тем самым конфликты.

    Я думаю, что @import наиболее полезен при написания кода для нескольких устройств. Включите условный оператор, чтобы включить только стиль для рассматриваемого устройства, затем загружается только один лист. Вы все еще можете использовать тег link для добавления любых общих элементов стиля.

    Я испытал «высокий пик» связанных таблиц стилей, которые вы можете добавить. Хотя добавление любого количества связанных Javascript не было проблемой для моего бесплатного хост-провайдера, после удвоения количества внешних таблиц стилей я получил сбой/замедление. И правильный пример кода:

    Итак, я нахожу это полезным для хорошей ментальной карты, как упоминал Нитрам, в то время как все еще жестко кодирует дизайн. Пожелание успеха. И я прощаю английские грамматические ошибки, если таковые имеются.

    почти нет причин использовать @import, поскольку он загружает каждый импортированный файл CSS отдельно и может значительно замедлить ваш сайт. Если вас интересует оптимальный способ работы с CSS (когда дело доходит до скорости страницы), Вот как вы должны иметь дело с все CSS код:

    • откройте все ваши CSS-файлы и скопируйте код каждого файла
    • вставьте весь код между одним тегом стиля в HTML заголовок страницы
    • никогда не используйте CSS @import или отдельные файлы CSS для доставки CSS, если у вас нет большого количества кода или есть конкретная необходимость.

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

    это может помочь разработчику PHP. Приведенные ниже функции будут удалять пробелы, удалять комментарии и объединять все ваши CSS-файлы. Затем вставьте его в «; > ?>

    @import

    Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import .

    Мастер Йода рекомендует:  Настройка удаленного подключения к MySQL

    Синтаксис ?

    В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

    Табл. 1. Типы носителей и их описание

    Тип Описание
    all Все типы. Это значение используется по умолчанию.
    print Печатающие устройства вроде принтера.
    screen Экран монитора.

    Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.

    Обозначения

    Описание Пример
    Указывает тип значения.
    A && B Значения должны выводиться в указанном порядке. &&
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    [ ] Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [, ]*
    + Повторять один или больше раз. +
    ? Указанный тип, слово или группа не является обязательным. inset?
    Повторять не менее A, но не более B раз.
    # Повторять один или больше раз через запятую. #

    ×

    Значения

    В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.

    Пример

    Примечание

    Браузер Internet Explorer до версии 7 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.


    Спецификация ?

    Спецификация Статус
    Media Queries Рекомендация
    CSS Level 2 (Revision 1) Рекомендация
    CSS Level 1 Рекомендация

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

    ×

    Браузеры ?

    5.5 12 1 5 1 1

    Браузеры

    В таблице браузеров применяются следующие обозначения.

    • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
    • — свойство браузером не воспринимается и игнорируется;
    • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

    Число указывает версию браузера, начиная с которой свойство поддерживается.

    Как лучше подключать стили — через link или @import?

    Некоторые разработчики шаблонов и тем подключают все стили через link:

    Я предпочитаю делать так, на сайте одна строка:

    а все остальное через @import (при условии, что оно используется на всех страницах):

    При этом FontAwesome может не работать на мобильных. В этой статье написано, что одним из минусов @import есть то, что он не загружается в той последовательности, как указан.

    Что скажут Гуру по этому поводу?

    • Вопрос задан более трёх лет назад
    • 1429 просмотров

    Я не понимаю, как можно до сих пор рассуждать, опираясь на статью 6-летней давности, в которой рассматривается некорректная работа IE.
    Вы планируете использовать IE8 и ниже в своей работе? Если да, то материалы статьи для вас актуальны. Если же нет, не стоит распространять выводы о работе старых IE на современные браузеры.

    Что же касается вложенных import — именно так и должно загружаться. Сравнивать порядок загрузки имеет смысл только для одноуровневого import, потому как двух и более уровней подключения link просто не существует.

    Если вы подключаете один файл через

  • , а потом внутри него вставляете несколько @import , то все, что вы подключаете через @import будет загружаться только после того, как будет полностью прочитан тот первый файл стилей.
    Я не могу, соответственно, сказать, что это абсолютно всегда вредно. Просто нужно понимать, когда это использовать, а когда — нет.
    Например, если по какой-то причине вы не хотите параллельной загрузки и произвольного порядка применения стилей browser-ом к странице, используйте @import , если наоборот — используйте
  • .

    Утверждение о том, что минимально возможное число файлов стилей (в идеале — один) — это всегда хорошо, далеко от универсального, потому что эффект большего или меньшего числа стилей зависит от характеристик подключения (максимальное число одновременных запросов на сервере) и содержимого страницы. Если общее число запросов для получения страницы и так мало, или есть дополнительный контент (изображения) загружаются асинхронно по мере прокрутки, то нет никакого смысла сводить число файлов стилей к одному — нужно ориентироваться на то, сколько вообще запросов потребуется для того, чтобы загрузить страницу.

    Импорты

    Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

    Новая спецификация «HTML Imports» описывает, как вставить один документ в другой при помощи HTML-тега
    .


    Зачем?

    Мы ведь и так можем вставлять документ в документ, при помощи , зачем нужен ещё какой-то импорт? Что не так с iframe ?

    …С iframe всё так. Однако, по своему смыслу iframe – это отдельный документ.

    • Для iframe создаётся полностью своё окружение, у него свой объект window и свои переменные.
    • Если iframe загружен с другого домена, то взаимодействие с ним возможно только через postMessage .

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

    А что, если нужно встроить другой документ как естественную часть текущего? С единым скриптовым пространством, едиными стилями, но при этом – другой документ.

    Например, это нужно для подгрузки внешних частей документа (веб-компонент) снаружи. И желательно не иметь проблем с разными доменами: если уж мы действительно хотим подключить HTML с одного домена в страницу на другом – мы должны иметь возможность это сделать без «плясок с бубном».

    Директива @import или импорт css файла

    Директива @import дает нам зеленый свет на включение в свою таблицу стилей других таблиц стилей. Она должна содержать URI(Universal Resource Identifier) или проще сказать ссылку на файл импортируемой таблицы стилей.

    И не забывайте, если у Вас файл импортируется из директории, например mydir — @import url(«mydir/style.css»); и в нем прописан путь к рисунку, например: background-image: url(img/elements/bgstrip.gif); то путь теперь должен быть следующим background-image: url( ../ img/elements/bgstrip.gif); т.к. style.css теперь будет смотреть из под каталога mydir .

    Хорошим тоном будет подписывать импортируемые файлы рядом , например так:

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

    @import внутри CSS файла

    Имеется файл стилей base.css, который содержит:

    Оптимизатор скорости загрузки страниц GTMetrix настоятельно советует «Избегать использования @import» в перечне CSS файлов, включающий вышеприведенный base.css.

    Вопрос: каким образом можно вызвать CSS из другого CSS файла? Я попробовал классическую и немного измененную конструкцию из LINK-REL-HREF, но она не работает.

    06.04.2020, 13:51

    @import в CSS
    Не могу понять как работает @import, как нужно оформлять его и в каком участке кода, и относительно.

    Картинка внутри CSS
    Добрый день, подскажите название технологии плиииз! (гугл не помог — не знал как искать) .

    Есть 2 файла html и css как мне сделать чтоб файл css распространялся на одну ячейку а не на все

    Положение объекта внутри ячейки CSS
    Добрый день! Есть образный код

    .

    Ссылки внутри документа, CSS отображение
    Здравствуйте! Например, захожу на страницу sait.ru/stanica1.html все отображается нормально, но.

    06.04.2020, 17:10 2

    PageSpeed recommends:
    Use the
    tag instead of CSS @import

    Instead of @import, use a
    tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times:

    07.04.2020, 05:26 [ТС] 3
    07.04.2020, 11:18 4
    07.04.2020, 11:55 [ТС] 5
    07.04.2020, 11:55
    07.04.2020, 11:55

    CSS absolute внутри fixeda, или неуловимый поиск
    Собственно, верхняя строка сайта крепится к топу браузера с помощью атрибута position: fixed.

    CSS. Выравнивание div элемента с позиционированием fixed, внутри ячейки таблицы
    Здравствуйте! Подскажите пожалуйста какие есть варианты горизонтального выравнивания по центру.

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

    Учимся использовать @import в CSS

    Какой лучший способ сделать это? и почему? Спасибо!

    Ответы (7)

    1 плюс

    3775 Репутация автора

    Когда я использую правило @import, обычно он импортирует таблицу стилей в существующую таблицу стилей (хотя я не люблю делать это с самого начала). Но чтобы ответить на ваш вопрос, нет, я не верю, что есть какая-то разница. Просто убедитесь, что URL указан в двойных кавычках, чтобы соответствовать действующему XHTML.

    6 плюса

    13361 Репутация автора

    Сегодня нет никакой разницы, но в @import старых браузерах (Netscape 4 и т. Д.) Эта проблема не обрабатывается правильно, поэтому @import взломать можно, чтобы скрыть правила CSS 2 от этих старых браузеров.

    Опять же, если вы не поддерживаете действительно старые браузеры, нет никакой разницы.

    Однако
    на вашем месте я бы использовал этот вариант на ваших HTML-страницах, поскольку он позволяет указывать такие вещи, как тип мультимедиа (печать, экран и т. Д.).

    Автор: zenazn Размещён: 20.06.2009 10:26

    6 плюса

    5573 Репутация автора

    Вы можете использовать команду import для импорта другого CSS внутри файла css, что невозможно с помощью команды link. Действительно старый браузер не может (IE4, IE5 частично) обрабатывать функции импорта. Кроме того, некоторые библиотеки, анализирующие ваш xhtml / html, могут не получить импорт таблиц стилей. Помните, что ваш импорт должен предшествовать всем остальным объявлениям CSS.

    Автор: merkuro Размещён: 20.06.2009 10:30

    127 плюса

    25454 Репутация автора

    Теоретически, единственное различие между ними заключается в том @import , что механизм CSS включает таблицу стилей и

  • механизм HTML. Однако браузеры обрабатывают их по-разному, что дает
  • явное преимущество с точки зрения производительности.

    Стив Соудерс написал обширное сообщение в блоге, сравнивающее влияние обоих
    и @import (и всевозможных их комбинаций) под названием « не использовать @import ». Этот титул говорит сам за себя.

    Yahoo! также упоминает это как одну из лучших рекомендаций по производительности (в соавторстве со Стивом Соудерсом): выберите
    @import

    Кроме того, использование
    тега позволяет вам определять «предпочтительные» и альтернативные таблицы стилей . Вы не можете сделать это с @import .

    1 плюс

    33928 Репутация автора


    @import, как правило, предназначен для использования во внешней таблице стилей, а не внутри строки, как в вашем примере. Если вы действительно хотите скрыть таблицу стилей от очень старых браузеров, вы можете использовать это как хак, чтобы запретить им использовать эту таблицу стилей.

    В целом,
    тег обрабатывается быстрее, чем правило @import (которое, по-видимому, несколько медленное в отношении механизма обработки css).

    2 плюса

    2548 Репутация автора

    5 плюса

    1618 Репутация автора

    Директива
    может разрешать загрузку и интерпретацию нескольких css асинхронно.

    директива @import заставляет браузер * ждать, пока импортированный скрипт будет загружен встроенным в родительский скрипт, прежде чем он будет корректно обработан его движком, поскольку технически это всего лишь один скрипт.

    Многие сценарии минимизации css (и такие языки, как less или sass) автоматически объединяют связанные сценарии в основной сценарий, поскольку это приводит к меньшим накладным расходам на передачу.

    @import

    Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import .

    Синтаксис ?

    В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

    Табл. 1. Типы носителей и их описание

    Тип Описание
    all Все типы. Это значение используется по умолчанию.
    print Печатающие устройства вроде принтера.
    screen Экран монитора.

    Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.

    Обозначения

    Описание Пример
    Указывает тип значения.
    A && B Значения должны выводиться в указанном порядке. &&
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    [ ] Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [, ]*
    + Повторять один или больше раз. +
    ? Указанный тип, слово или группа не является обязательным. inset?
    Повторять не менее A, но не более B раз.
    # Повторять один или больше раз через запятую. #

    ×

    Значения

    В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.

    Пример

    Примечание

    Браузер Internet Explorer до версии 7 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.

    Спецификация ?

    Спецификация Статус
    Media Queries Рекомендация
    CSS Level 2 (Revision 1) Рекомендация
    CSS Level 1 Рекомендация

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

    ×

    Браузеры ?

    5.5 12 1 5 1 1

    Браузеры

    В таблице браузеров применяются следующие обозначения.

    • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
    • — свойство браузером не воспринимается и игнорируется;
    • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

    Число указывает версию браузера, начиная с которой свойство поддерживается.

    Добавить комментарий