Stil sayfalarımda aşağıdakilerden hangisini kullanmalıyım?
/* Example #1: */ background-image: url(image.png);
/* Example #2: */ background-image: url("image.png");
/* Example #3: */ background-image: url('image.png');
W3C doğru yolu neyi belirtir ?
Yanıtlar:
W3C, tekliflerin isteğe bağlı olduğunu, üç yolunuzun da yasal olduğunu söylüyor.
Açılış ve kapanış teklifi sadece aynı karakter olmalıdır.
URL'nizde özel karakterler varsa, tırnak işareti kullanmalı veya karakterlerden kaçmalısınız (aşağıya bakın).
Sözdizimi ve temel veri türleri
Bir URI değerinin biçimi 'url (' ve ardından isteğe bağlı beyaz boşluk, ardından isteğe bağlı tek tırnak (') veya çift tırnak (") karakteri ve ardından URI'nin kendisidir, ardından isteğe bağlı tek tırnak (') veya çift tırnaktır (") karakterini, ardından isteğe bağlı beyaz alanı ve ardından ')' karakterini gösterir. İki tırnak karakteri aynı olmalıdır.
Kaçan özel karakterler:
Parantezler, boşluk karakterleri, tek tırnak işaretleri (') ve çift tırnak işaretleri (") gibi alıntılanmamış bir URI'da görünen bazı karakterlerin ters eğik çizgiden çıkması gerekir, böylece elde edilen URI değeri bir URI belirteci olur:' \ (', '\').
url-tokendemiryolu şemasını kontrol edin ): w3.org/TR / css-syntax-3 Sanırım tırnak yerine kaçış dizisi kullanımını teşvik etmek istiyorlar
En yeni standart tarafından önerildiği ve daha az kenar durumu olduğu için tırnak işaretleri daha iyi kullanın.
En yeni Editörün Taslak CSS Değerleri ve Modülleri Seviye 3'e göre (18 Aralık 2015)
URL, bir kaynağa işaretçi ve ile gösterilen işlevsel bir gösterimdir
<url>. A sözdizimi<url>:
<url> = url( <string> <url-modifier>* )
Tırnaksız sürüm yalnızca eski nedenlerle desteklenir ve özel ayrıştırma kurallarına (kaçış dizileri vb.) İhtiyaç duyar, bu nedenle hantal ve url değiştiricileri desteklemez.
Bu, url(...)sözdiziminin bir dize ve bir url değiştiricisini parametre olarak alan işlevsel bir gösterim olduğu varsayılır. (Bir dize belirteci üreten) alıntı gösterimini kullanmak daha standart uyumlu olacaktır ve daha az karmaşıklık getirecektir.
@ SimonMourier'in en iyi cevaptaki yorumu yanlış, çünkü yanlış spesifikasyonu aradı. url-tokenTürü sadece, eski özel ayrıştırma kuralları için tanıtıldı yüzden tırnak ile ilgisi yoktur neden en söyledi.
W3 CSS 2.1 spesifikasyonunun söyledikleri:
Bir URI değerinin biçimi 'url (' ve ardından isteğe bağlı beyaz boşluk, ardından isteğe bağlı tek tırnak (') veya çift tırnak (") karakteri ve ardından URI'nin kendisidir, ardından isteğe bağlı tek tırnak (') veya çift tırnaktır (") karakterini, ardından isteğe bağlı beyaz alanı ve ardından ')' karakterini gösterir. İki tırnak karakteri aynı olmalıdır.
Bu nedenle, önerdiğiniz 3 örneğin hepsi doğrudur, ancak seçeceğim ilk örnektir, çünkü daha az karakter kullanırsınız ve sonuç olarak ortaya çıkan CSS dosyası daha küçük olur, bu da daha az bant genişliği kullanımına neden olur.
Bu önemli değil gibi görünebilir, ancak yüksek trafikli web siteleri bant genişliğini ve çok sayıda css dosyasını kaydetmeyi tercih eder ve içlerindeki URL referansları, dosyayı daha küçük yapan seçeneği seçmek mantıklıdır ... Avantajı olmadığı için bile değil .
Not: URL'ler parantez, virgül, boşluk karakterleri, tek tırnak veya çift tırnak içeriyorsa karakterlerden kaçmanız gerekebilir. Bu, URL'yi yalnızca tırnak işareti kullanmaktan daha uzun sürebilir (daha az kaçış gerektirir). Bu nedenle, yalnızca kaçan ek yükü URL'yi yalnızca tırnak işareti kullanmaktan daha uzun yapmadığında (ki bu çok nadirdir), tırnak içermeyen URL'lerle bir Css dosyası sunmak isteyebilirsiniz.
Bununla birlikte, herhangi bir insanın bu uç durumları bile dikkate almasını beklemezdim ... Bir Css optimizer sizin için bunu halledecektir ... (ama aslında bir css optimizer yazıyorsanız tüm bunları bilmeniz gerekir: P)
Örnek 2 veya 3 en iyisidir:
W3C'den: Bir URI değerinin biçimi 'url (' ve ardından isteğe bağlı beyaz boşluk, ardından isteğe bağlı tek tırnak (') veya çift tırnak (") karakteri ve ardından URI'nin kendisidir, ardından isteğe bağlı tek tırnaktır ('). veya çift tırnak işareti (") ve ardından isteğe bağlı boşluk, ardından") ". İki tırnak karakteri aynı olmalıdır.
Aynı açıklamadan, uygun karakterlerden kaçılırsa Örnek 1 kabul edilebilir.
Sahiptim:
a.pic{
background-image: url(images/img (1).jpg);
}Dosya adı kapalı parantezinin kuralı ihlal ettiğini anlamak biraz zamanımı aldı.
Bu nedenle zorunlu değildir, ancak alıntılar eski tarayıcılar tarafından çok iyi anlaşılmasa bile, oldukça karmaşık dinamik olarak oluşturulmuş sayfalarda bazı baş ağrısından kurtarabilir.
URI değerlerinde (url ()) tırnak işareti kullanmayın.
İstisna: @charset kuralını kullanmanız gerekiyorsa çift tırnak işareti kullanın; tek tırnak işaretlerine izin verilmez.