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

Leave a Comment / Css / By /

Содержание

@import | WebReference

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

Синтаксис

@import url("имя файла") [типы носителей];
@import "имя файла" [типы носителей];

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

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

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

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

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт стиля</title>
  <style>
    @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
    @import "/style/palm.css" handheld, print; /* Стиль для печати */
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Примечание

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

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

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

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

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

Браузеры

5.5121511
Браузеры

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

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

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

@-правила

Практика

  • Импорт шрифта

LinkedIn

選擇語言Bahasa Indonesia (Bahasa Indonesia)Bahasa Malaysia (Malay)Čeština (Czech)Dansk (Danish)Deutsch (German)English (English)Español (Spanish)繁體中文 (Chinese (Traditional))Français (French)한국어 (Korean)Italiano (Italian)简体中文 (Chinese (Simplified))Nederlands (Dutch)日本語 (Japanese)Norsk (Norwegian)Polski (Polish)Português (Portuguese)Română (Romanian)Русский (Russian)Svenska (Swedish)Tagalog (Tagalog)ภาษาไทย (Thai)Türkçe (Turkish)العربية (Arabic)

عفواً، لم نتمكن من العثور على الصفحة التي تبحث عنها. برجاء المحاولة مرة أخرى للصفحة السابقة أو الانتقال لـمركز المساعدة للمزيد من المعلومات

الإنتقال لموجزك الرئيسي

Omlouváme se, nemůžeme najít stránku, kterou hledáte.

Zkuste se vrátit zpátky na předchozí stránku, nebo se podívejte do našeho Centra nápovědy pro více informací Přejít do informačního kanálu

Vi kan desværre ikke finde den side, du leder efter. Gå tilbage til den forrige side, eller besøg Hjælp for at få flere oplysninger

Gå til dit feed

Die gewünschte Seite konnte leider nicht gefunden werden. Versuchen Sie, zur vorherigen Seite zurückzukehren, oder besuchen Sie unseren Hilfebereich, um mehr zu erfahren.

Zu Ihrem Feed

Uh oh, we can’t seem to find the page you’re looking for. Try going back to the previous page or see our Help Center for more information

Go to your feed

Vaya, parece que no podemos encontrar la página que buscas. Intenta volver a la página anterior o visita nuestro Centro de ayuda para más información.

Ir a tu feed

Nous ne trouvons pas la page que vous recherchez.

Essayez de retourner à la page précédente ou consultez notre assistance clientèle pour plus d’informations Ouvrez votre fil

Maaf, sepertinya kami tidak dapat menemukan halaman yang Anda cari. Coba kembali ke halaman sebelumnya atau lihat Pusat Bantuan kami untuk informasi lebih lanjut

Buka feed Anda

Non abbiamo trovato la pagina che stai cercando. Prova a tornare alla pagina precedente o visita il nostro Centro assistenza per saperne di più.

Vai al tuo feed

申し訳ありません。お探しのページが見つかりません。前のページに戻るか、ヘルプセンターで詳細をご確認ください

フィードに移動

원하시는 페이지를 찾을 수 없습니다. 이전 페이지로 돌아가거나 고객센터에서 자세히 알아보세요.

홈으로 가기

Harap maaf, kami tidak dapat menemui laman yang ingin anda cari. Cuba kembali ke laman sebelumnya atau lihat Pusat Bantuan kami untuk maklumat lanjut

Pergi ke suapan

De pagina waar u naar op zoek bent, kan niet worden gevonden.

Probeer terug te gaan naar de vorige pagina of bezoek het Help Center voor meer informatie Ga naar uw feed

Vi finner ikke siden du leter etter. Gå tilbake til forrige side eller besøk vår brukerstøtte for mer informasjon

Gå til din feed

Nie możemy znaleźć strony, której szukasz. Spróbuj wrócić do poprzedniej strony lub nasze Centrum pomocy, aby uzyskać więcej informacji

Przejdź do swojego kanału

A página que você está procurando não foi encontrada. Volte para a página anterior ou visite nossa Central de Ajuda para mais informações

Voltar para seu feed

Ne pare rău, nu găsim pagina pe care o căutaţi. Reveniţi la pagina anterioară sau consultaţi Centrul nostru de asistenţă pentru mai multe informaţii

Accesaţi fluxul dvs.

Не удаётся найти искомую вами страницу. Вернитесь на предыдущую страницу или посетите страницу нашего справочного центра для получения дополнительной информации.

Перейти к ленте

Sidan du letar efter hittades inte. Gå tillbaka till föregående sida eller besök vårt Hjälpcenter för mer information

Gå till ditt nyhetsflöde

ขออภัย ดูเหมือนเราไม่พบหน้าที่คุณกำลังมองหาอยู่ ลองกลับไปที่หน้าเพจก่อน หรือดู ศูนย์ความช่วยเหลือ ของเราสำหรับข้อมูลเพิ่มเติม

ไปที่ฟีดของคุณ

Naku, mukhang hindi namin mahanap ang pahina na hinahanap mo. Subukang bumalik sa nakaraang pahina o tingnan ang aming Help Center para sa higit pang impormasyon

Pumunta sa iyong feed

Aradığınız sayfa bulunamadı. Önceki sayfaya geri dönün veya daha fazla bilgi için Yardım Merkezimizi görüntüleyin

Haber akışınıza gidin

抱歉，无法找到页面。试试返回到前一页，或前往帮助中心了解更多信息

前往动态汇总

我們好像找不到該頁面。請回到上一頁或前往說明中心來進一步瞭解

前往首頁動態

Избегайте CSS @import | GTmetrix

Это специальный аудит GTmetrix Lighthouse. Учить больше.

CSS @import — это процесс вызова таблиц стилей/файлов CSS из другого файла CSS.

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

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

Какова оценка вашего сайта в этом аудите?

Как использование CSS @import влияет на производительность страницы?

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

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

Например, если у вас есть файл CSS с именем style1.css и вы хотите импортировать другой файл CSS style2.css в исходный файл CSS, вы должны использовать следующий код внутри style1.css:

URL-адрес импорта ("style2.css")

В приведенном выше примере браузер загрузит, проанализирует и выполнит style1.css, обнаружит, что ему необходимо импортировать style2.css, а затем продолжит загрузку, анализ и выполнение style2.css.

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

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

Как GTmetrix запускает этот аудит?

GTmetrix оценивает код вашей страницы и помечает любой CSS @импорт

звонок. Этот аудит запускает , если есть хотя бы один такой вызов.

Это пользовательский аудит GTmetrix

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

Мы всегда рекомендуем разработчикам и веб-мастерам устранять блокировку рендеринга на веб-сайтах в интересах повышения производительности и использования CSS 9.0005 @import противоречит этому принципу.

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

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

Как исправить этот аудит?

Как отмечалось выше, есть несколько стратегий, которые вы можете использовать вместо использования CSS 9.

0005 @import , например:

1) Использование тегов ссылок

Здесь вы можете использовать теги ссылок двумя способами, например:

а) Использование

где «style2.css» — это связанный файл CSS, а атрибут media указывает, на каком устройстве будет отображаться связанная таблица стилей.

б) Использование

где «style2.css» — это импортируемый файл CSS, а тег async означает, что эта таблица стилей загружается асинхронно.

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

2) Комбинирование или встраивание CSS

Объединение и встраивание файлов CSS — это методы, позволяющие уменьшить общее количество файлов CSS.

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

Управление импортом пользовательских компонентов, CSS и модулей

Управление импортом пользовательских компонентов, CSS и модулей

Предыдущий Следующий Для корректного отображения этого контента должен быть включен JavaScript

  1. Разработка приложений с помощью Oracle Visual Builder
  2. Разработка
  3. Разработка приложений
  4. Работа с ресурсами приложения
  5. Управление импортом пользовательских компонентов, CSS и модулей

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

Вкладка «Импорт» в редакторе настроек позволяет управлять ресурсами, импортированными для артефакта приложения, потока или страницы. Вы можете управлять пользовательскими компонентами, файлами CSS, а также модулями, содержащими код, который вы хотите вызывать в своем приложении. Давайте рассмотрим несколько примеров сценариев, когда вы захотите использовать эту вкладку:

  • Если ваш артефакт включает компоненты, которые устарели или больше не используются, определения этих компонентов остаются нетронутыми в метаданных артефакта, но могут быть помечены аудиторами как устаревшие или неиспользуемые зависимости компонентов. Хотя вы можете решить эту проблему, отредактировав редактор JSON вручную, вы можете использовать вкладку «Импорт» для управления этим импортом без потенциального возникновения ошибок.
  • Если вы хотите использовать пользовательские файлы CSS для определенных страниц, обычно вам нужно вручную добавить оператор импорта в HTML-код страницы. Декларативно добавляя пользовательские файлы CSS на вкладке «Импорт», вы можете легко применить эти импортированные файлы CSS к любой странице или страницам в потоке без необходимости вручную добавлять импорт на HTML-страницы.
  • Если вы хотите использовать модули JavaScript на уровне приложения, потока или страницы для создания пользовательских функций внутри модуля (например, служебной функции IntlConverterUtils , которая позволяет форматировать поле даты как строку ISO), ссылаясь на модуль из вкладка «Импорт» позволяет вызывать ваше приложение без добавления кода в файлы JSON или JavaScript.

    Вы можете вызывать эти функции в цепочке действий с помощью действия «Вызов функции» и в свойстве компонента, выбрав функцию в редакторе выражений или в средстве выбора переменных на панели свойств, как показано здесь:

    Описание иллюстрации js_functions_variablepicker.png

Для управления импортом артефакта приложения, потока или страницы:

  1. Откройте вкладку «Импорт» в редакторе настроек приложения, потока или артефакта страницы.
  2. Импорт компонентов, CSS и пользовательских модулей:
    • Для управления существующим компонентом щелкните меню справа и выберите «Изменить» или «Удалить». Чтобы импортировать пользовательские компоненты в приложение, поток или артефакт страницы, нажмите + Компонент, затем введите имя компонента и путь к модулю компонента.
    • Чтобы сослаться на файлы CSS в артефакте приложения, потока или страницы, нажмите + CSS, затем создайте ссылку на существующий файл, внешний файл или новый файл:
      • Чтобы создать ссылку на существующий файл CSS в папке ресурсов, нажмите «Существующий», затем выберите файл из раскрывающегося списка. (Информацию о том, как добавить файлы CSS в ресурсы вашего приложения, см. в разделе Работа с ресурсами приложения.)
      • Чтобы создать ссылку на внешний файл CSS (например, шрифт или значок во внешнем ресурсе, который вы хотели бы использовать), нажмите «Внешний», затем укажите путь к файлу.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *