การอ้างถึงคุณค่าของ url () จำเป็นจริงๆหรือ?

ฉันควรใช้สิ่งใดต่อไปนี้ในสไตล์ชีตของฉัน

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

W3C ระบุว่าอะไรถูกวิธี ?

W3C บอกว่าคำพูดเป็นตัวเลือกวิธีการทั้งสามของคุณนั้นถูกกฎหมาย

การเปิดและปิดการอ้างจะต้องเป็นตัวละครเดียวกัน

หากคุณมีอักขระพิเศษใน URL ของคุณคุณควรใช้เครื่องหมายคำพูดหรือหนีอักขระ (ดูด้านล่าง)

ไวยากรณ์และชนิดข้อมูลพื้นฐาน

รูปแบบของค่า URI คือ 'url (' ตามด้วย white space เผื่อเลือกตามด้วยตัวเลือก single quote (') หรือ double quote (") ตามด้วยตัว URI เองตามด้วย single quote (') หรือ double quote (") ตัวอักษรตามด้วยช่องว่างสีขาวเสริมตามด้วย ')' อักขระเครื่องหมายคำพูดสองตัวต้องเหมือนกัน

หนีตัวละครพิเศษ:

อักขระบางตัวที่ปรากฏใน URI ที่ไม่ได้ระบุไว้เช่นวงเล็บอักขระช่องว่างสีขาวเครื่องหมายอัญประกาศเดี่ยว (') และเครื่องหมายคำพูดคู่ (") ต้องถูกหลีกเลี่ยงด้วยเครื่องหมายทับขวาเพื่อให้ค่า URI ที่ได้คือโทเค็น URI:' \ (' '\)'

ใช้เครื่องหมายคำพูดดีกว่าเพราะแนะนำโดยมาตรฐานล่าสุดและมีตัวพิมพ์ขอบน้อยกว่า

ตามร่างล่าสุดของค่านิยมและโมดูล CSS ระดับ 3 (18 ธันวาคม 2558)

URL <url>คือตัวชี้ไปยังทรัพยากรและเป็นสัญกรณ์ทำงานแทนด้วย ไวยากรณ์ของ a <url>คือ:
<url> = url( <string> <url-modifier>* )

เวอร์ชันที่ไม่ได้รับการสนับสนุนได้รับการสนับสนุนด้วยเหตุผลดั้งเดิมเท่านั้นและต้องการกฎการแยกวิเคราะห์พิเศษ (สำหรับลำดับการหลบหลีกและอื่น ๆ ) ดังนั้นจึงยุ่งยากและไม่สนับสนุน url-modifiers

นั่นหมายความว่าurl(...)ไวยากรณ์ควรจะเป็นสัญกรณ์การทำงานซึ่งใช้สตริงและ url-modifier เป็นพารามิเตอร์ ใช้เครื่องหมายคำพูด (ซึ่งสร้างโทเค็นสตริง) จะเป็นไปตามมาตรฐานมากขึ้นและแนะนำความซับซ้อนน้อยลง

@ SimonMourier แสดงความคิดเห็นในคำตอบด้านบนผิดเพราะเขามองหาสเป็คที่ไม่ถูกต้อง url-tokenชนิดถูกนำมาเฉพาะสำหรับการพิเศษมรดกแยกกฎเพื่อที่ว่าทำไมมันไม่ได้มีอะไรที่จะทำอย่างไรกับคำพูด

นี่คือสิ่งที่ข้อกำหนด W3 CSS 2.1 พูดว่า:

รูปแบบของค่า URI คือ 'url (' ตามด้วย white space เผื่อเลือกตามด้วยตัวเลือก single quote (') หรือ double quote (") ตามด้วยตัว URI เองตามด้วย single quote (') หรือ double quote (") ตัวอักษรตามด้วยช่องว่างสีขาวเสริมตามด้วย ')' อักขระเครื่องหมายคำพูดสองตัวต้องเหมือนกัน

ที่มา: http://www.w3.org/TR/CSS21/syndata.html#uri

ดังนั้นทั้ง 3 ตัวอย่างที่คุณเสนอนั้นถูกต้อง แต่ตัวอย่างที่ฉันจะเลือกนั้นเป็นอันแรกเพราะคุณใช้ตัวอักษรน้อยลงและด้วยเหตุนี้ไฟล์ CSS ที่ได้จึงจะมีขนาดเล็กลงทำให้การใช้แบนด์วิดท์น้อยลง

สิ่งนี้อาจรู้สึกว่าไม่สำคัญ แต่เว็บไซต์ที่มีปริมาณการใช้งานสูงต้องการบันทึกแบนด์วิดท์และไฟล์ css จำนวนมากและการอ้างอิง URL ในนั้นเหมาะสมที่จะเลือกตัวเลือกที่ทำให้ไฟล์มีขนาดเล็กลง ... แม้ว่าจะไม่มีข้อได้เปรียบ ในไม่ทำเช่นนั้น

หมายเหตุ: คุณอาจต้องหลีกเลี่ยงอักขระหาก URL มีวงเล็บเครื่องหมายจุลภาคอักขระช่องว่างสีขาวเครื่องหมายคำพูดเดี่ยวหรือเครื่องหมายคำพูดคู่ สิ่งนี้อาจทำให้ URL ยาวกว่าการใช้เครื่องหมายคำพูด (ซึ่งต้องการการหลีกหนีน้อยกว่า) ดังนั้นคุณอาจต้องการให้บริการไฟล์ Css ที่มี URL โดยไม่มีเครื่องหมายอัญประกาศเฉพาะเมื่อค่าใช้จ่ายในการหลบหนีไม่ได้ทำให้ URL ยาวกว่าการใช้เครื่องหมายคำพูด (ซึ่งหายากมาก)

อย่างไรก็ตามฉันไม่คาดหวังว่าจะมีมนุษย์คนใดที่จะพิจารณากรณีขอบเหล่านี้ ... เครื่องมือเพิ่มประสิทธิภาพ Css จะจัดการเรื่องนี้ให้คุณ ... (แต่คุณต้องรู้เกี่ยวกับสิ่งเหล่านี้ทั้งหมดหากคุณกำลังเขียนเครื่องมือเพิ่มประสิทธิภาพ css จริง ๆ : P)

สามวิธีถูกกฎหมายตาม W3C หากคุณมีอักขระพิเศษในชื่อ (ตามช่องว่าง) คุณควรใช้ตัวที่สองหรือตัวที่สาม

ตัวอย่างที่ 2 หรือ 3 ดีที่สุด:

จาก W3C: รูปแบบของค่า URI คือ 'url (' ตามด้วย white space เผื่อเลือกตามด้วยเครื่องหมายอัญประกาศเดี่ยวเดี่ยว (') หรือเครื่องหมายอัญประกาศคู่ (") ตามด้วย URI เองตามด้วยเครื่องหมายอัญประกาศเดี่ยวเดี่ยว (') หรือเครื่องหมายอัญประกาศคู่ (") ตามด้วยช่องว่างสีขาวที่เป็นตัวเลือกตามด้วย ')' อักขระเครื่องหมายคำพูดสองตัวต้องเหมือนกัน

หมายเหตุจากคำอธิบายเดียวกันตัวอย่าง 1 เป็นที่ยอมรับได้หากอักขระที่เหมาะสมถูกหลีกเลี่ยง

ฉันมี:

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

ฉันใช้เวลาสักพักกว่าจะเข้าใจว่าชื่อไฟล์ที่ปิดวงเล็บถูกละเมิดกฎ

ดังนั้นจึงไม่จำเป็น แต่ถึงแม้ว่าการอ้างไม่เข้าใจเบราว์เซอร์รุ่นเก่า แต่ก็สามารถช่วยให้คุณปวดหัวในหน้าเว็บที่สร้างขึ้นแบบไดนามิกค่อนข้างซับซ้อน

ตามสไตล์การเข้ารหัสของ Google CSS

อย่าใช้เครื่องหมายคำพูดในค่า URI (url ())

ข้อยกเว้น: หากคุณต้องการใช้กฎ @charset ให้ใช้เครื่องหมายอัญประกาศคู่โดยไม่อนุญาตให้ใช้เครื่องหมายอัญประกาศเดี่ยว