क्या url () का मूल्य उद्धृत करना वास्तव में आवश्यक है?


235

मुझे अपनी स्टाइलशीट में निम्नलिखित में से किसका उपयोग करना चाहिए?

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

W3C सही तरीके के रूप में क्या निर्दिष्ट करता है ?


जवाबों:


243

W3C का कहना है कि उद्धरण वैकल्पिक हैं, आपके तीनों तरीके कानूनी हैं।

उद्घाटन और समापन बोली बस एक ही चरित्र होने की जरूरत है।

यदि आपके URL में विशेष वर्ण हैं, तो आपको उद्धरणों का उपयोग करना चाहिए या वर्णों से बचना चाहिए (नीचे देखें)।

सिंटेक्स और बुनियादी डेटा प्रकार

एक URI मान का प्रारूप 'url (' वैकल्पिक श्वेत स्थान के बाद वैकल्पिक एकल उद्धरण (') या दोहरे उद्धरण (") वर्ण के बाद URI द्वारा अनुसरण किया जाता है, उसके बाद एक वैकल्पिक एकल उद्धरण (') या दोहरा उद्धरण होता है। (") वर्ण के बाद वैकल्पिक सफेद स्थान और उसके बाद ')'। दो भाव वर्ण समान होना चाहिए।

विशेष पात्रों को बचाना:

कुछ अक्षर URI में दिखाई देने वाले चरित्र, जैसे कि कोष्ठक, श्वेत स्थान वर्ण, एकल उद्धरण (') और दोहरे उद्धरण ("), को बैकस्लैश से बचना चाहिए ताकि परिणामस्वरूप URI मान एक URI टोकन हो:' \ '(') '\)'।


9
कुछ पुराने ब्राउज़रों में IE मैक के उद्धरण के साथ समस्या हो सकती है।
मर्वमैन

5
Bic72 ने जो कहा उसके अलावा, कुछ पुराने ब्राउज़र सीएसएस में उद्धृत यूआरएल के साथ सामना करने पर दोहरे अनुरोध भी करते हैं, पहले वे "myfile.png" फिर myfile.png का अनुरोध करते हैं - इसलिए कारण यह है कि मैं उनका उपयोग करने से बचता हूं।
पेब्बल

जब आप दूसरी बोली पोस्ट करते हैं, तो FWIW आपको जिस लिंक से लगता है, वह फिर से लिखा गया है। अब अल्पविराम से बचने की आवश्यकता नहीं लगती है।
बेन

@pebbl - आप सही हैं, और पुराने ब्राउज़रों में मैक पर क्रोम का नवीनतम संस्करण शामिल है।
डैनियल बर्ड्सले

7
CSS 3 के नवीनतम संपादक के मसौदे (मई 2015) में उद्धरणों को और अधिक करने की अनुमति नहीं दी गई है: dev.w3.org/csswg/css-syntax ( url-tokenरेलवे स्कीमा की जाँच करें ) जबकि वर्तमान उम्मीदवार की सिफारिश (feb 2014) करता है: w3.org/TR / css-syntax-3 मुझे लगता है कि वे उद्धरणों के बजाय एस्केप सीक्वेंस के उपयोग को बढ़ावा देना चाहते हैं
साइमन मूरियर

34

बेहतर उपयोग उद्धरण क्योंकि यह नवीनतम मानक द्वारा सुझाए गए हैं और कम धार वाले मामले हैं।

सीएसएस मूल्यों और मॉड्यूल स्तर 3 के नवीनतम संपादक के ड्राफ्ट के अनुसार (18 दिसंबर 2015)

एक URL एक संसाधन के लिए एक संकेतक है और इसके द्वारा निरूपित एक कार्यात्मक संकेतन है <url>। इस का सिंटैक्स <url>है:
<url> = url( <string> <url-modifier>* )

निर्विवाद संस्करण केवल विरासत कारणों के लिए समर्थित है और विशेष पार्सिंग नियमों (भागने के अनुक्रमों, आदि के लिए) की आवश्यकता है, इस प्रकार बोझिल होने और यूआरएल-संशोधक का समर्थन नहीं करना है।

इसका मतलब है, url(...)वाक्यविन्यास एक कार्यात्मक संकेतन माना जाता है, जो मापदंडों के रूप में एक स्ट्रिंग और एक url-modifier लेता है। उद्धरण संकेतन का उपयोग करें (जो एक स्ट्रिंग टोकन का उत्पादन करता है) अधिक मानक-अनुपालन होगा और कम जटिलता का परिचय देगा।

@ शीर्ष उत्तर में साइमनमोरियर की टिप्पणी गलत है, क्योंकि उन्होंने गलत कल्पना की तलाश की थी। url-tokenप्रकार केवल, विरासत विशेष पार्स नियमों के लिए शुरू की है ताकि के कारण है कि यह उद्धरण से कोई लेना देना नहीं है।


"निर्विवादित संस्करण केवल विरासत कारणों से समर्थित है [..]" स्रोत?
Semmel

5
draft.csswg.org/css-values-3/#ref-for-url-value-7 "नोट: विरासत उद्धरण-चिह्न के लिए विशेष पार्सिंग नियम -कम <url> वाक्य रचना का अर्थ है कि ..."
सोडाटिया

मैंने इसे पढ़ा लेकिन इस भाग को याद किया होगा - धन्यवाद! किसी भी तरह से - बहुत मूल्यवान सलाह। Imho यह स्वीकार किया जाना चाहिए जवाब!
सेमेल

संदर्भित दस्तावेज़ के 2020 संस्करण का उल्लेख नहीं लगता है कि 'निर्विवाद संस्करण केवल विरासत कारणों से समर्थित है'।
जहीम

11

यहाँ डब्ल्यू 3 सीएसएस 2.1 विनिर्देश कहते हैं:

URI मान का प्रारूप 'url (' वैकल्पिक श्वेत स्थान के बाद वैकल्पिक एकल उद्धरण (') या दोहरे उद्धरण (") वर्ण के बाद URI द्वारा पीछा किया जाता है, उसके बाद एक वैकल्पिक एकल उद्धरण (') या दोहरा उद्धरण होता है। (") वर्ण के बाद वैकल्पिक सफेद स्थान और उसके बाद ')'। दो भाव वर्ण समान होना चाहिए।

स्रोत: http://www.w3.org/TR/CSS21/syndata.html#uri

तो आपके द्वारा प्रस्तावित 3 उदाहरणों में से सभी सही हैं, लेकिन जो मैं चुनूंगा वह पहला है क्योंकि आप कम वर्णों का उपयोग करते हैं और इसलिए परिणामस्वरूप सीएसएस फ़ाइल छोटी होगी, जिसके परिणामस्वरूप कम बैंडविड्थ का उपयोग होगा।

ऐसा महसूस हो सकता है कि यह महत्वपूर्ण नहीं है, लेकिन उच्च ट्रैफ़िक वेबसाइटें बैंडविड्थ और बहुत सी सीएसएस फ़ाइलों को सहेजना पसंद करती हैं, और उन में url संदर्भों से यह विकल्प चुनना बेहतर होता है कि फ़ाइल को छोटा कर दें ... क्योंकि कोई फायदा नहीं हुआ है ऐसा नहीं करने में

नोट: यदि पात्रों में कोष्ठक, अल्पविराम, श्वेत स्थान वर्ण, एकल उद्धरण या दोहरे उद्धरण हों तो आपको वर्णों से बचना पड़ सकता है। यह केवल उद्धरण (जो कम बचने की आवश्यकता है) का उपयोग करने की तुलना में url को लंबा कर सकता है। इसलिए आप बिना किसी उद्धरण के केवल उष्मा के साथ एक सीएसएस फ़ाइल परोसना चाह सकते हैं, जब भागने का ओवरहेड केवल उद्धरण (जो बहुत दुर्लभ है) का उपयोग करने की तुलना में url को लंबा नहीं करता है।

हालाँकि मैं किसी भी इंसान से इन बढ़त के मामलों पर विचार करने की उम्मीद नहीं करूंगा ... एक सीएसएस ऑप्टिमाइज़र आपके लिए इसे संभाल लेगा ... (लेकिन निश्चित रूप से आपको इन सभी के बारे में जानने की ज़रूरत है अगर आप वास्तव में एक सीएसएस ऑप्टिमाइज़र लिख रहे हैं: पी)


5
पता नहीं क्यों यह नीचे मतदान हुआ; एक उच्च यातायात साइट के लिए, इस तरह के विचार एक वर्ष के दौरान एक बड़ा अंतर बनाते हैं।
जोइसे माइक

7
That मुझे सच में शक है। प्रति css कितने url हैं? बहुत जयादा नहीं। और तुम बस दो बाइट्स (ascii या utf-8 में) बख्शा। इसके अलावा, आप वास्तव में लंबे समय तक यूआरएल बना सकते हैं, क्योंकि आपको बैकस्लैश का उपयोग करने की आवश्यकता हो सकती है। वेब के आकार को कम करने के कई बेहतर तरीके हैं ...
क्रालिक

1
जाहिर है कि यह ज्यादा बचत नहीं है, लेकिन एंड्रिया और जोइसे अभी भी सही हैं। एक चरम उदाहरण के रूप में, Google को काफी बैंडविड्थ को बचाने के लिए अपने होमपेज से केवल एक बाइट निकालने की आवश्यकता है;)
पेब्बल

2
@kralyk ... इसलिए सबसे अच्छी बात यह है कि जब जरूरत न हो तो उद्धरणों का उपयोग न करें ... इसलिए उद्धरणों का उपयोग करना बेहतर होगा जब आपके पास दो से अधिक कोष्ठक, अल्पविराम, श्वेत स्थान वर्ण, एकल उद्धरण या दोहरे उद्धरण हों। । हालांकि जो मुझे एक सीएसएस फ़ाइल में कभी नहीं मिला ... और मुझे पूरा यकीन है कि मैं कभी नहीं होगा :) (जवाब अपडेट किया)
एंड्रिया जिलियो

18
प्रोग्रामर जो अपने स्रोत कोड से व्यक्तिगत पात्रों के अनुकूलन के साथ खुद को चिंतित करते हैं, नाव को पूरी तरह से याद कर रहे हैं - वे शायद ही कभी भी किसी भी चीज का अनुकूलन करेंगे। वैसे भी, मैं हमेशा दोहरे उद्धरण चिह्नों का उपयोग करता हूं। मैं एक निरंतरता का आदमी हूं।
चेसमॉस्कल

6

W3C के अनुसार तीन तरीके कानूनी हैं। यदि आपके पास नाम (अंतरिक्ष के रूप में) में विशेष वर्ण हैं, तो आपको दूसरे या तीसरे का उपयोग करना चाहिए।


3

उदाहरण 2 या 3 सर्वश्रेष्ठ हैं:

W3C से: एक URI मान का प्रारूप 'url' है (इसके बाद वैकल्पिक सफ़ेद स्थान आता है और उसके बाद एक वैकल्पिक एकल उद्धरण (') या डबल उद्धरण (") वर्ण URI द्वारा पीछा किया जाता है, इसके बाद एक वैकल्पिक एकल उद्धरण (') या दोहरे उद्धरण (") वर्ण के बाद वैकल्पिक श्वेत स्थान के बाद ')'। दो भाव वर्ण समान होना चाहिए।

एक ही स्पष्टीकरण से नोट करें, उदाहरण 1 स्वीकार्य है, यदि उपयुक्त वर्ण बच गए हैं।


1

मैं था:

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

मुझे समझने में थोड़ा समय लगा कि फ़ाइल नाम बंद ब्रेस नियम तोड़ रहा था।

इसलिए यह अनिवार्य नहीं है लेकिन, भले ही उद्धृत करना पुराने ब्राउज़रों द्वारा अच्छी तरह से समझा न गया हो, यह आपको काफी जटिल गतिशील रूप से उत्पन्न पृष्ठों में कुछ सिरदर्द से बचा सकता है।


0

Google CSS Coding Style के अनुसार

URI मान (url ()) में उद्धरण चिह्नों का उपयोग न करें।

अपवाद: यदि आपको @charset नियम का उपयोग करने की आवश्यकता है, तो दोहरे उद्धरण चिह्नों का उपयोग करें - एकल उद्धरण चिह्नों की अनुमति नहीं है।


2
@ दाविदोरवथ: मैं यह नहीं कह रहा हूं कि आप गलत हैं, लेकिन आप क्या बुरा मानते हैं?
सैम डटन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.