Ví dụ về cách sử dụng <url-modifier> tại hàm CSS url() là gì?

Question

3.4. Resource Locators: the <url> type mô tả một <url-modifier> tại

URL là một con trỏ đến một nguồn tài nguyên và là một ký hiệu chức năng biểu hiện bằng <url>. Cú pháp của một <url> là:

<url> = url(<string> <url-modifier>*)

Ngoài cú pháp định nghĩa ở trên, một đôi khi có thể được viết bằng cách khác:

• Vì lý do di sản, một <url> có thể được viết không có dấu ngoặc kép xung quanh chính URL đó. Cú pháp này được phân tích cú pháp đặc biệt và tạo ra một <url-token> thay vì một hàm cú pháp. [CSS3SYN]

• Một số bối cảnh CSS, như @import, cho phép một <url> được đại diện bởi một <string> để thay thế. Điều này hoạt động giống hệt với viết hàm url() có chứa chuỗi đó. Bởi vì các cách cách thay thế viết <url> này không phải là ký hiệu chức năng, chúng không thể chấp nhận bất kỳ <url-modifier> giây nào.

Lưu ý: Các quy tắc phân tích cú pháp đặc biệt đối với những di sản báo giá đánh dấu ít <url> cú pháp có nghĩa là dấu ngoặc đơn, ký tự khoảng trắng, đơn dấu ngoặc kép (') và dấu ngoặc kép (") xuất hiện trong một URL phải được thoát với một dấu gạch chéo, ví dụ như url(open\(parens), url(close\)parens). Tùy thuộc vào loại URL, nó cũng có thể là có thể viết những ký tự như URL thoát (ví dụ url(open%28parens) hoặc url(close%29parens)) như mô tả trong [URL]. (Nếu viết như một chức năng bình thường có chứa một chuỗi, quy tắc thoát chuỗi thông thường áp dụng; chỉ dòng mới và các nhân vật sử dụng để trích dẫn chuỗi cần để được thoát.)

tại

3.4.2. URL Modifiers

Các url() chức năng hỗ trợ xác định thêm <url-modifier> s, mà thay đổi ý nghĩa hay việc giải thích URL bằng cách nào đó. A <url-modifier> là <ident> hoặc function.

Đặc điểm kỹ thuật này không xác định bất kỳ <url-modifier> giây nào, nhưng các thông số kỹ thuật khác có thể làm như vậy.

Xem thêm CSS Values and Units Module Level 3 Editor’s Draft, 21 March 2016

---

• dụ tập quán của <ident> và function tại url() là gì?

• Sự khác nhau giữa <string>, <ident>, function tại url() là gì?

Answer 1

Một <url-modifier> hoặc là một <ident> hoặc một function.

<ident> là số nhận dạng.

Một phần của nguồn CSS có cú pháp giống như <ident-token>.

<ident-token> Syntax;

Tôi không thể tìm thấy bất kỳ ví dụ nào về <ident> được sử dụng trong chức năng url nhưng như được đề cập trong this email có một số khả năng sử dụng trong tương lai.

• Fetch tùy chọn để kiểm soát CORS/cookie/etc
• làm việc với Subresource Liêm

Nhìn vào <ident> cú pháp bạn không thể sử dụng một cặp khóa/giá trị vì vậy tôi giả định nhất của việc này sẽ được triển khai bằng cách sử dụng function chưa tồn tại., việc gợi ý tài nguyên có thể được triển khai bằng cách sử dụng <ident>.

.foo { background-image: url("//aa.com/img.svg" prefetch); }

Tôi tuy nhiên tìm thấy một "Bộ sưu tập các ý tưởng thú vị" với một function<url-modifier> xác định.

SVG Parameters (không đặc tả chính thức)

Các params()function là một <url-modifier>

.foo { background-image: url("//aa.com/img.svg" param(--color var(--primary-color))); }