@import

Cú pháp

@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;

trong đó:

url

Là một <string> hoặc kiểu <url> đại diện cho vị trí của tài nguyên cần nhập. URL có thể là tuyệt đối hoặc tương đối.

list-of-media-queries

Là danh sách các media query phân cách bằng dấu phẩy, chỉ định các điều kiện phụ thuộc vào phương tiện để áp dụng các quy tắc CSS được định nghĩa trong URL được liên kết. Nếu trình duyệt không hỗ trợ bất kỳ query nào trong số này, nó sẽ không tải tài nguyên được liên kết.

layer-name

Là tên của một cascade layer mà nội dung của tài nguyên được liên kết sẽ được nhập vào. Xem layer() để biết thêm thông tin.

supports-condition

Chỉ định (các) tính năng mà trình duyệt phải hỗ trợ để stylesheet được nhập. Nếu trình duyệt không đáp ứng các điều kiện được chỉ định trong supports-condition, nó có thể không tải stylesheet được liên kết, và ngay cả khi được tải xuống theo một đường dẫn khác, cũng sẽ không tải nó. Cú pháp của supports() gần giống với cú pháp được mô tả trong @supports, và chủ đề đó có thể được dùng làm tài liệu tham khảo đầy đủ hơn.

Sử dụng @import cùng với từ khóa layer hoặc hàm layer() để nhập các stylesheet bên ngoài (từ framework, stylesheet widget, thư viện, v.v.) vào các layer.

Mô tả

Các quy tắc được nhập phải xuất hiện trước tất cả các loại quy tắc khác, ngoại trừ các quy tắc @charset và câu lệnh tạo layer @layer.

* {
  margin: 0;
  padding: 0;
}
/* more styles */
@import "my-imported-styles.css";

Vì at-rule @import được khai báo sau các kiểu dáng nên nó không hợp lệ và do đó bị bỏ qua.

@import "my-imported-styles.css";
* {
  margin: 0;
  padding: 0;
}
/* more styles */

Quy tắc @import không phải là một câu lệnh lồng nhau. Do đó, nó không thể được dùng bên trong conditional group at-rules.

Để các tác nhân người dùng có thể tránh lấy tài nguyên cho các loại phương tiện không được hỗ trợ, tác giả có thể chỉ định các điều kiện nhập phụ thuộc vào phương tiện. Các lần nhập có điều kiện này chỉ định các media query phân cách bằng dấu phẩy sau URL. Trong trường hợp không có media query nào, lần nhập không có điều kiện về phương tiện được sử dụng. Chỉ định all cho list-of-media-queries có cùng hiệu quả.

Tương tự, tác nhân người dùng có thể sử dụng hàm supports() trong một at-rule @import để chỉ tải tài nguyên nếu một bộ tính năng cụ thể được (hoặc không được) hỗ trợ. Điều này cho phép tác giả tận dụng các tính năng CSS mới được giới thiệu, trong khi cung cấp các phương án dự phòng duyên dáng cho các phiên bản trình duyệt cũ hơn. Lưu ý rằng các điều kiện trong hàm supports() của at-rule @import có thể được lấy trong JavaScript bằng cách sử dụng CSSImportRule.supportsText.

Quy tắc @import cũng có thể được dùng để tạo một cascade layer bằng cách nhập các quy tắc từ tài nguyên được liên kết. Các quy tắc cũng có thể được nhập vào một cascade layer hiện có. Từ khóa layer hoặc hàm layer() được dùng với @import cho mục đích này. Các khai báo trong quy tắc kiểu từ các stylesheet được nhập tương tác với cascade như thể chúng được viết trực tiếp vào stylesheet tại điểm nhập.

Cú pháp chính thức

@import = 
  @import [ <url> | <string> ] [ [ layer | layer( <layer-name> ) ] || [ scope | scope( <scope-start> | <scope-boundaries> ) ] || <supports-import-condition> ]? <media-import-condition> ;  

<layer-name> = 
  <ident> [ '.' <ident> ]*  

<scope-start> = 
  <selector-list>  

<scope-boundaries> = 
  [ [ ( <scope-start> ) ]? [ to ( <scope-end> ) ]? ]!  

<supports-import-condition> = 
  supports( [ <supports-condition> | <declaration> ] )  

<media-import-condition> = 
  <media-query-list>  

<selector-list> = 
  <complex-selector-list>  

<scope-end> = 
  <selector-list>  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<complex-selector-list> = 
  <complex-selector>#  

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

<complex-selector> = 
  <complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*  

<supports-feature> = 
  <supports-selector-fn>       |
  <supports-font-tech-fn>      |
  <supports-font-format-fn>    |
  <supports-at-rule-fn>        |
  <supports-named-feature-fn>  |
  <supports-env-fn>            |
  <supports-decl>              

<general-enclosed> = 
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]                 

<complex-selector-unit> = 
  [ <compound-selector>? <pseudo-compound-selector>* ]!  

<combinator> = 
  '>'          |
  '+'          |
  '~'          |
  [ '|' '|' ]  

<supports-selector-fn> = 
  selector( <complex-selector> )  

<supports-font-tech-fn> = 
  font-tech( <font-tech> )  

<supports-font-format-fn> = 
  font-format( <font-format> )  

<supports-at-rule-fn> = 
  at-rule( <at-keyword-token> )  

<supports-named-feature-fn> = 
  named-feature( <ident> )  

<supports-env-fn> = 
  env( <ident> )  

<supports-decl> = 
  ( [ <declaration> | <supports-condition-name> ] )  

<compound-selector> = 
  [ <type-selector>? <subclass-selector>* ]!  

<pseudo-compound-selector> = 
  <pseudo-element-selector> <pseudo-class-selector>*  

<font-tech> = 
  <font-features-tech>  |
  <color-font-tech>     |
  variations            |
  palettes              |
  incremental           

<font-format> = 
  <string>           |
  collection         |
  embedded-opentype  |
  opentype           |
  svg                |
  truetype           |
  woff               |
  woff2              

<type-selector> = 
  <wq-name>         |
  <ns-prefix>? '*'  

<subclass-selector> = 
  <id-selector>            |
  <class-selector>         |
  <attribute-selector>     |
  <pseudo-class-selector>  

<pseudo-element-selector> = 
  : <pseudo-class-selector>         |
  <legacy-pseudo-element-selector>  

<pseudo-class-selector> = 
  : <ident-token>                   |
  : <function-token> <any-value> )  

<font-features-tech> = 
  features-opentype  |
  features-aat       |
  features-graphite  

<color-font-tech> = 
  color-COLRv0  |
  color-COLRv1  |
  color-SVG     |
  color-sbix    |
  color-CBDT    

<wq-name> = 
  <ns-prefix>? <ident-token>  

<ns-prefix> = 
  [ <ident-token> | '*' ]? '|'  

<id-selector> = 
  <hash-token>  

<class-selector> = 
  '.' <ident-token>  

<attribute-selector> = 
  '[' <wq-name> ']'                                   |
  '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'  

<legacy-pseudo-element-selector> = 
  : [ before | after | first-line | first-letter ]  

<attr-matcher> = 
  [ '~' | '|' | '^' | '$' | '*' ]? '='  

<attr-modifier> = 
  i  |
  s  

Ví dụ

Nhập quy tắc CSS

@import "custom.css";
@import url("chrome://communicator/skin/communicator.css");

Hai ví dụ trên cho thấy cách chỉ định url dưới dạng <string> và dưới dạng hàm url().

Nhập quy tắc CSS có điều kiện theo media query

@import "fine-print.css" print;
@import "bluish.css" print, screen;
@import "common.css" screen;
@import "landscape.css" screen and (orientation: landscape);

Các quy tắc @import trong các ví dụ trên hiển thị các điều kiện phụ thuộc vào phương tiện cần phải đúng trước khi các quy tắc CSS được liên kết được áp dụng. Vì vậy, chẳng hạn, quy tắc @import cuối cùng sẽ chỉ tải stylesheet landscape.css trên thiết bị màn hình ở chế độ ngang.

Nhập quy tắc CSS có điều kiện theo hỗ trợ tính năng

@import "grid.css" supports(display: grid) screen and (width <= 400px);
@import "flex.css" supports((not (display: grid)) and (display: flex)) screen
  and (width <= 400px);

Các quy tắc @import trên minh họa cách bạn có thể nhập bố cục sử dụng grid nếu display: grid được hỗ trợ, và nếu không thì nhập CSS sử dụng display: flex. Mặc dù bạn chỉ có thể có một câu lệnh supports(), bạn có thể kết hợp bất kỳ số lượng kiểm tra tính năng nào với not, and, và or. Tuy nhiên, bạn phải sử dụng dấu ngoặc đơn để xác định mức độ ưu tiên khi kết hợp chúng, ví dụ supports((..) or (..) and not (..)) không hợp lệ, nhưng supports((..) or ((..) and (not (..)))) là hợp lệ. Lưu ý rằng nếu bạn chỉ có một khai báo thì bạn không cần bọc nó trong dấu ngoặc đơn bổ sung: điều này được thể hiện trong ví dụ đầu tiên ở trên.

Các ví dụ trên cho thấy các điều kiện hỗ trợ sử dụng cú pháp khai báo cơ bản. Bạn cũng có thể chỉ định các hàm CSS trong supports(), và nó sẽ được đánh giá là true nếu chúng được hỗ trợ và có thể được đánh giá trên tác nhân người dùng. Ví dụ, đoạn code dưới đây hiển thị một @import có điều kiện trên cả bộ chọn con (selector()) và hàm font-tech():

@import "whatever.css"
  supports((selector(h2 > p)) and (font-tech(color-COLRv1)));

Nhập quy tắc CSS vào cascade layer

@import "theme.css" layer(utilities);

Trong ví dụ trên, một cascade layer có tên utilities được tạo ra và nó sẽ bao gồm các quy tắc từ stylesheet được nhập theme.

@import "headings.css" layer(default);
@import "links.css" layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

Trong ví dụ trên, các quy tắc trong stylesheet headings.css và links.css cascade trong cùng một layer với quy tắc audio[controls].

@import "theme.css" layer();
@import "style.css" layer;

Đây là ví dụ tạo hai cascade layer vô danh riêng biệt và nhập các quy tắc được liên kết vào từng layer riêng biệt. Một cascade layer được khai báo mà không có tên là cascade layer vô danh. Các cascade layer vô danh được hoàn thiện khi được tạo: chúng không cung cấp bất kỳ phương tiện nào để sắp xếp lại hoặc thêm kiểu dáng và chúng không thể được tham chiếu từ bên ngoài.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• @media
• @supports
• Module CSS cascading and inheritance
• CSS at-rule functions