Việc trích dẫn giá trị của url () có thực sự cần thiết?

Tôi nên sử dụng cách nào sau đây trong bảng định kiểu của mình?

/* Example #1: */ background-image: url(image.png);
/* Example #2: */ background-image: url("image.png");
/* Example #3: */ background-image: url('image.png');

W3C chỉ định điều gì là đúng ?

W3C cho biết các trích dẫn là tùy chọn, cả ba cách của bạn đều hợp pháp.

Mở đầu và kết thúc trích dẫn chỉ cần là cùng một nhân vật.

Nếu bạn có các ký tự đặc biệt trong URL của mình, bạn nên sử dụng dấu ngoặc kép hoặc thoát các ký tự (xem bên dưới).

Cú pháp và kiểu dữ liệu cơ bản

Định dạng của giá trị URI là 'url (' theo sau là khoảng trắng tùy chọn theo sau là một ký tự trích dẫn đơn (') hoặc dấu ngoặc kép (") theo sau là chính URI, theo sau là trích dẫn đơn tùy chọn (') hoặc trích dẫn kép (") ký tự theo sau là khoảng trắng tùy chọn theo sau ')'. Hai ký tự trích dẫn phải giống nhau.

Thoát khỏi các ký tự đặc biệt:

Một số ký tự xuất hiện trong một URI không được trích dẫn, chẳng hạn như dấu ngoặc đơn, ký tự khoảng trắng, dấu ngoặc đơn (') và dấu ngoặc kép ("), phải được thoát bằng dấu gạch chéo ngược để giá trị URI kết quả là mã thông báo URI:' \ (', '\)'.

Sử dụng báo giá tốt hơn bởi vì nó được khuyến nghị bởi tiêu chuẩn mới nhất và có ít trường hợp cạnh hơn.

Theo Dự thảo giá trị CSS và mô-đun cấp 3 mới nhất của biên tập viên (18 tháng 12 năm 2015)

URL là một con trỏ tới tài nguyên và là ký hiệu chức năng được biểu thị bởi <url>. Cú pháp của a <url>là:
<url> = url( <string> <url-modifier>* )

Phiên bản không trích dẫn chỉ được hỗ trợ vì lý do cũ và cần các quy tắc phân tích cú pháp đặc biệt (đối với các chuỗi thoát, v.v.), do đó cồng kềnh và không hỗ trợ sửa đổi url.

Điều đó có nghĩa là, url(...)cú pháp được coi là một ký hiệu chức năng, lấy một chuỗi và một bộ sửa đổi url làm tham số. Sử dụng ký hiệu trích dẫn (tạo mã thông báo chuỗi) sẽ tuân thủ tiêu chuẩn hơn và giới thiệu ít phức tạp hơn.

Nhận xét của @ SimonMerer trong câu trả lời hàng đầu là sai, bởi vì anh ta tìm kiếm thông số sai. Các url-tokenloại chỉ được giới thiệu cho các quy tắc phân tích di sản đặc biệt, vì vậy đó là lý do nó không có bất cứ điều gì để làm với dấu ngoặc kép.

Đây là những gì đặc tả W3 CSS 2.1 nói:

Định dạng của giá trị URI là 'url (' theo sau là khoảng trắng tùy chọn theo sau là một ký tự trích dẫn đơn (') hoặc dấu ngoặc kép (") theo sau là chính URI, theo sau là trích dẫn đơn tùy chọn (') hoặc trích dẫn kép (") ký tự theo sau là khoảng trắng tùy chọn theo sau ')'. Hai ký tự trích dẫn phải giống nhau.

Nguồn: http://www.w3.org/TR/CSS21/syndata.html#uri

Vì vậy, tất cả 3 ví dụ bạn đề xuất đều đúng, nhưng ví dụ tôi chọn là ví dụ đầu tiên vì bạn sử dụng ít ký tự hơn và do đó tệp CSS kết quả sẽ nhỏ hơn, dẫn đến việc sử dụng băng thông ít hơn.

Điều này có thể cảm thấy điều đó không quan trọng, nhưng các trang web có lưu lượng truy cập cao thích tiết kiệm băng thông và hơn nhiều tệp css và tham chiếu url trong đó, thật hợp lý khi chọn tùy chọn làm cho tệp nhỏ hơn ... Ngay cả vì không có lợi thế trong không làm như vậy .

Lưu ý: bạn có thể phải thoát ký tự nếu các url chứa dấu ngoặc đơn, dấu phẩy, ký tự khoảng trắng, dấu ngoặc đơn hoặc dấu ngoặc kép. Điều này có thể làm cho url dài hơn chỉ sử dụng dấu ngoặc kép (cần thoát ít hơn). Do đó, bạn có thể muốn phân phát tệp Css bằng các url không có dấu ngoặc kép khi chi phí thoát không làm cho url dài hơn so với chỉ sử dụng dấu ngoặc kép (điều này rất hiếm).

Tuy nhiên tôi sẽ không mong đợi bất kỳ con người nào thậm chí xem xét các trường hợp cạnh này ... Trình tối ưu hóa Css sẽ xử lý việc này cho bạn ... (nhưng chắc chắn bạn cần biết về tất cả những điều này nếu bạn thực sự đang viết trình tối ưu hóa css: P)

Ba cách là hợp pháp theo W3C. Nếu bạn có các ký tự đặc biệt trong tên (dưới dạng khoảng trắng), bạn nên sử dụng ký tự thứ hai hoặc thứ ba.

Ví dụ 2 hoặc 3 là tốt nhất:

Từ W3C: Định dạng của giá trị URI là 'url (' theo sau là khoảng trắng tùy chọn, theo sau là ký tự trích dẫn đơn (') hoặc dấu ngoặc kép (") theo sau là chính URI, theo sau là trích dẫn đơn tùy chọn (') hoặc ký tự trích dẫn kép (") theo sau là khoảng trắng tùy chọn theo sau ')'. Hai ký tự trích dẫn phải giống nhau.

Lưu ý từ cùng một lời giải thích, Ví dụ 1 có thể chấp nhận được, nếu các ký tự phù hợp được thoát.

Tôi đã có:

a.pic{
    background-image: url(images/img (1).jpg);
}

Phải mất một thời gian tôi mới hiểu rằng tên tập tin đóng dấu ngoặc đã phá vỡ quy tắc.

Vì vậy, nó không bắt buộc nhưng, ngay cả khi trích dẫn không được hiểu rõ bởi các trình duyệt cũ hơn, nó có thể giúp bạn đỡ đau đầu trong các trang được tạo động khá phức tạp.

Theo Phong cách mã hóa CSS của Google

Không sử dụng dấu ngoặc kép trong các giá trị URI (url ()).

Ngoại lệ: Nếu bạn không cần sử dụng quy tắc @charset, không được phép sử dụng dấu ngoặc kép Đôi dấu ngoặc kép đơn.