Có cách nào để nội suy các biến CSS với url() không?

Question

Tôi muốn lưu trữ URL nền của mình trong thuộc tính tùy chỉnh (biến CSS) và sử dụng chúng với thuộc tính nền. Tuy nhiên, tôi không thể tìm cách để nội suy chuỗi khi sử dụng nó làm tham số trong url().

Đây là mẫu mã của tôi:

:root { 
    --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416"; 
} 

body { 
    background: url(var(--url)); 
} 

Tôi biết rằng điều này có thể dễ dàng thực hiện trong Sass hoặc ít hơn bằng cách sử dụng chức năng nội suy nhưng tôi tò mò nếu có một cách để làm điều đó mà không cần bất kỳ trước bộ xử lý.

Answer 1

Bạn có thể thực hiện nội suy với hầu hết các chức năng CSS, bao gồm rgba() (xem ví dụ here). Trong thực tế, nội suy là một trong những tính năng chính của thuộc tính tùy chỉnh.

Nhưng bạn không thể làm điều này với url(), như url(var(--url)) được phân tách không phải là một url( chức năng thẻ tiếp theo var(--url) theo sau là một ), nhưng một đơn url() token là không hợp lệ vì var(--url) đang được coi là một URL riêng của mình, và URL không được đánh dấu trong các mã thông báo url() không được chứa dấu ngoặc đơn trừ khi chúng được thoát. Điều này có nghĩa là sự thay thế không bao giờ thực sự xảy ra, bởi vì trình phân tích cú pháp không bao giờ thấy bất kỳ biểu thức nào trong giá trị thuộc tính - thực sự, khai báo background của bạn hoàn toàn không hợp lệ.

Nếu bạn không hiểu bất kỳ điều gì, điều đó là tốt. Chỉ cần biết rằng bạn không thể sử dụng nội suy var() với url() do các lý do cũ.

Mặc dù vấn đề mô tả trong câu hỏi có liên quan đến di sản url() dấu hiệu, bạn không thể làm điều này bằng cách xây dựng thẻ URL ra một số var() biểu thức, hoặc, trong trường hợp bạn đang nghĩ đến việc cố gắng một cái gì đó giống như --uo: url(; --uc:); hoặc --uo: url("; --uc: ");, và background: var(--uo) var(--url) var(--uc); . Điều này là do custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens).

Nếu bạn muốn chỉ định một URL trong một tài sản tùy chỉnh, bạn cần phải viết ra toàn bộ url() ngôn luận, và thay thế mà toàn bộ biểu hiện:

:root { 
    --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416"); 
} 

body { 
    background: var(--url); 
} 

Hoặc, sử dụng JavaScript thay vì var() để thực hiện các nội suy .