Apakah mengutip nilai url () benar-benar diperlukan?


235

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 ?


Jawaban:


243

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:' \ (', '\)'.


9
Beberapa browser lama mungkin memiliki masalah dengan url yang dikutip yaitu IE Mac.
mveerman

5
Sebagai tambahan dari apa yang dikatakan bic72, beberapa browser lama juga membuat permintaan ganda ketika dihadapkan dengan URL yang dikutip dalam CSS, pertama mereka meminta "myfile.png" lalu myfile.png - maka alasan saya menghindari menggunakannya.
Pebbl

FWIW spek yang Anda tautkan tampaknya telah ditulis ulang sejak Anda memposting kutipan kedua. Sekarang koma tampaknya tidak mengharuskan pelarian.
Ben

@ pebbl - Anda benar, dan browser yang lebih lama menyertakan versi terbaru Chrome di mac.
Daniel Beardsley

7
Draf Editor terbaru CSS 3 (Mei 2015) tampaknya tidak lagi mengizinkan penawaran: dev.w3.org/csswg/css-syntax (periksa url-tokenskema kereta api) sementara rekomendasi kandidat saat ini (feb 2014) melakukannya: w3.org/TR / css-syntax-3 Saya kira mereka ingin mempromosikan penggunaan urutan pelarian alih-alih kutipan
Simon Mourier

34

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.


"Versi yang tidak dikutip hanya didukung karena alasan warisan [..]" Sumber?
Semmel

5
drafts.csswg.org/css-values-3/#ref-for-url-value-7 "Catatan: Aturan parsing khusus untuk sintaks-tanda kutip warisan - kurang <url> berarti bahwa ..."
sodatea

Saya membacanya tetapi pasti melewatkan bagian ini - terima kasih! Either way - saran yang sangat berharga. Saya ingin ini jawaban yang diterima!
Semmel

Versi 2020 dari dokumen yang dirujuk tampaknya tidak menyebutkan 'versi yang tidak dikutip hanya didukung untuk alasan warisan' lagi.
Jahmic

11

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)


5
Tidak tahu mengapa ini gagal; untuk situs dengan lalu lintas tinggi, ide-ide seperti ini membuat perbedaan besar selama setahun.
Joisey Mike

7
↑ Saya benar-benar meragukannya. Berapa banyak url per css? Tidak terlalu banyak. Dan Anda baru saja menyelamatkan dua byte (dalam ascii atau utf-8) di masing-masing. Plus, Anda sebenarnya dapat membuat url lebih lama, karena Anda mungkin perlu menggunakan garis miring terbalik. Ada banyak cara yang lebih baik untuk mengurangi ukuran web ...
kralyk

1
Jelas itu bukan penghematan, tetapi Andrea dan Joisey masih benar. Sebagai contoh ekstrem, Google hanya perlu menghapus satu byte dari beranda mereka untuk menghemat bandwidth;)
Pebbl

2
@kralyk ... Oleh karena itu, hal terbaik yang harus dilakukan adalah tidak menggunakan tanda kutip ketika tidak diperlukan ... Jadi lebih baik menggunakan tanda kutip ketika Anda memiliki url dengan lebih dari dua tanda kurung, koma, karakter spasi, tanda kutip tunggal atau tanda kutip ganda . Namun yang saya tidak pernah temui dalam file Css ... Dan saya cukup yakin saya tidak akan pernah :) (memperbarui jawabannya)
Andrea Zilio

18
Programmer yang mementingkan diri sendiri dengan optimalisasi karakter individu dari kode sumber mereka, sama sekali kehilangan kapalnya - mereka tidak akan pernah mengoptimalkan apa pun sama sekali. Bagaimanapun, saya selalu menggunakan tanda kutip ganda. Saya seorang pria yang konsisten.
ChaseMoskal

6

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


3

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.


1

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.


0

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.


2
@ DávidHorváth: Saya tidak mengatakan Anda salah, tetapi konvensi buruk apa yang Anda maksud?
Sam Dutton
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.