Apakah mengutip nilai url () benar-benar diperlukan?

Manakah dari berikut ini yang harus saya gunakan di stylesheet saya?

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

Apa yang ditentukan W3C sebagai cara yang benar ?

W3C mengatakan kutipan adalah opsional, ketiga cara Anda legal.

Kutipan pembuka dan penutup hanya perlu karakter yang sama.

Jika Anda memiliki karakter khusus di URL Anda, Anda harus menggunakan tanda kutip atau melarikan diri karakter (lihat di bawah).

Sintaks dan tipe data dasar

Format nilai URI adalah 'url (' diikuti oleh spasi putih opsional diikuti oleh karakter tanda kutip tunggal (') atau tanda kutip ganda (") diikuti oleh URI itu sendiri, diikuti oleh tanda kutip tunggal opsional (') atau tanda kutip ganda (") karakter diikuti oleh spasi putih opsional diikuti oleh ')'. Dua karakter kutipan harus sama.

Melarikan karakter khusus:

Beberapa karakter yang muncul dalam URI yang tidak dikutip, seperti tanda kurung, karakter spasi, tanda kutip tunggal (') dan tanda kutip ganda ("), harus diloloskan dengan garis miring terbalik sehingga nilai URI yang dihasilkan adalah token URI:' \ (', '\)'.

Gunakan kutipan dengan lebih baik karena direkomendasikan oleh standar terbaru dan jumlah tepi yang lebih sedikit.

Menurut Draft Editor terbaru tentang Nilai dan Modul CSS Level 3 (18 Desember 2015)

URL adalah penunjuk ke sumber daya dan merupakan notasi fungsional yang ditunjukkan oleh <url>. Sintaks a <url>adalah:
<url> = url( <string> <url-modifier>* )

Versi yang tidak dikutip hanya didukung untuk alasan warisan dan membutuhkan aturan penguraian khusus (untuk urutan pelarian, dll.), Sehingga menjadi rumit dan tidak mendukung pengubah-url.

Itu berarti, url(...)sintaksis seharusnya menjadi notasi fungsional, yang mengambil string dan pengubah-url sebagai parameter. Gunakan notasi kutipan (yang menghasilkan token string) akan lebih sesuai standar dan mengurangi kompleksitas.

Komentar @ SimonMourier di jawaban atas salah, karena dia mencari spec yang salah. The url-tokentipe hanya diperkenalkan untuk aturan parsing warisan khusus, sehingga ini mengapa tidak ada hubungannya dengan tanda kutip.

Berikut adalah apa yang dikatakan spesifikasi W3 CSS 2.1:

Format nilai URI adalah 'url (' diikuti oleh spasi putih opsional diikuti oleh karakter tanda kutip tunggal (') atau tanda kutip ganda (") diikuti oleh URI itu sendiri, diikuti oleh tanda kutip tunggal opsional (') atau tanda kutip ganda (") karakter diikuti oleh spasi putih opsional diikuti oleh ')'. Dua karakter kutipan harus sama.

Sumber: http://www.w3.org/TR/CSS21/syndata.html#uri

Jadi ketiga contoh yang Anda ajukan sudah benar, tetapi yang saya pilih adalah yang pertama karena Anda menggunakan lebih sedikit karakter dan karenanya file CSS yang dihasilkan akan lebih kecil, sehingga penggunaan bandwidth lebih sedikit.

Ini mungkin terasa seperti itu tidak penting, tetapi situs web dengan lalu lintas tinggi lebih suka menghemat bandwidth dan lebih banyak file css, dan url referensi di dalamnya masuk akal untuk memilih opsi yang membuat file lebih kecil ... Bahkan karena tidak ada keuntungan dengan tidak melakukannya .

Catatan: Anda mungkin harus keluar dari karakter jika url berisi tanda kurung, koma, karakter spasi, tanda kutip tunggal atau tanda kutip ganda. Ini mungkin membuat url lebih lama dari sekadar menggunakan tanda kutip (yang perlu lebih sedikit melarikan diri). Oleh karena itu Anda mungkin ingin menyajikan file Css dengan url tanpa tanda kutip hanya ketika overhead dari melarikan diri tidak membuat url lebih lama daripada hanya menggunakan tanda kutip (yang sangat jarang).

Namun saya tidak akan mengharapkan manusia untuk mempertimbangkan kasus tepi ini ... Pengoptimal Css akan menangani ini untuk Anda ... (tapi tentu Anda perlu tahu tentang semua ini jika Anda benar-benar menulis pengoptimal css: P)

Tiga cara legal menurut W3C. Jika Anda memiliki karakter khusus dalam nama (sebagai spasi), Anda harus menggunakan karakter kedua atau ketiga.

Contoh 2 atau 3 adalah yang terbaik:

Dari W3C: Format nilai URI adalah 'url (' diikuti oleh spasi putih opsional diikuti oleh karakter tanda kutip tunggal (') atau tanda kutip ganda (") diikuti oleh URI itu sendiri, diikuti oleh tanda kutip tunggal opsional (') atau karakter tanda kutip ganda (") diikuti oleh spasi putih opsional diikuti oleh ')'. Dua karakter kutipan harus sama.

Catatan dari penjelasan yang sama, Contoh 1 dapat diterima, jika karakter yang sesuai lolos.

Saya punya:

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

Butuh beberapa saat untuk memahami bahwa nama file ditutup penjepit melanggar aturan.

Jadi itu tidak wajib tetapi, bahkan jika mengutip tidak dipahami dengan baik oleh browser lama, itu bisa menyelamatkan Anda dari sakit kepala di halaman yang dihasilkan secara dinamis cukup kompleks.

Menurut Google CSS Coding Style

Jangan gunakan tanda kutip dalam nilai URI (url ()).

Pengecualian: Jika Anda perlu menggunakan aturan @charset, gunakan tanda kutip ganda — tanda kutip tunggal tidak diizinkan.