ฉันควรใช้สัญกรณ์โคลอนเดี่ยวหรือคู่สำหรับองค์ประกอบหลอก?

108

เนื่องจาก IE7 และ IE8 ไม่รองรับสัญกรณ์ double-colon สำหรับองค์ประกอบหลอก (เช่น::afterหรือ::first-letter) และเนื่องจากเบราว์เซอร์รุ่นใหม่รองรับสัญกรณ์ single-colon (เช่น:after) เพื่อความเข้ากันได้แบบย้อนกลับฉันควรใช้สัญกรณ์ single-colon แต่เพียงผู้เดียวและเมื่อ ส่วนแบ่งการตลาดของ IE8 ลดลงสู่ระดับเล็กน้อยย้อนกลับไปและค้นหา / แทนที่ในฐานรหัสของฉัน? หรือฉันควรใส่ทั้งสองอย่าง:

.foo:after,
.foo::after { /*styles*/ }

การใช้ double alone นั้นดูไร้สาระถ้าฉันสนใจผู้ใช้ IE8 (ผู้น่าสงสาร)

— jinglesthula
แหล่งที่มา

71

ไม่ได้ใช้ทั้งสองรวมกันด้วยเครื่องหมายจุลภาค เอเจนต์ผู้ใช้ที่สอดคล้องกับ CSS 2.1 (ไม่สามารถใช้ CSS3) จะละเว้นกฎทั้งหมด:

เมื่อตัวแทนผู้ใช้ไม่สามารถแยกวิเคราะห์ตัวเลือกได้ (กล่าวคือไม่ใช่ CSS 2.1 ที่ถูกต้อง) จะต้องละเว้นตัวเลือกและบล็อกการประกาศต่อไปนี้ (ถ้ามี) ด้วย

CSS 2.1 ให้ความหมายพิเศษกับเครื่องหมายจุลภาค (,) ในตัวเลือก อย่างไรก็ตามเนื่องจากไม่ทราบว่าเครื่องหมายจุลภาคอาจได้รับความหมายอื่นในการอัปเดต CSS ในอนาคตหรือไม่ควรละเว้นคำสั่งทั้งหมดหากมีข้อผิดพลาดที่ใดก็ตามในตัวเลือกแม้ว่าตัวเลือกที่เหลืออาจดูสมเหตุสมผลใน CSS 2.1

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

อย่างไรก็ตามคุณสามารถใช้

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

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

— ผู้ใช้ 123444555621
แหล่งที่มา

7

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

— jinglesthula

2

นี่ไม่ใช่หนทางข้างหน้า ความคืบหน้าของเบราว์เซอร์จะเร่งดำเนินการอย่างรวดเร็วหากผู้คนหยุดใช้งานเบราว์เซอร์ที่ต่อต้านไวรัสเบราว์เซอร์เสียและเลิกใช้งาน

— Gershom

2

@Gershom Maes: นั่นไม่ใช่สำหรับคุณที่จะพูดว่าน่าเสียดาย ฉันคิดว่านักพัฒนาส่วนใหญ่หวังในสิ่งเดียวกัน แต่มันจะไม่เกิดขึ้น

— BoltClock

@Gershom Maes เราฝันได้

— James Cushing

1

ฉันคิดว่าสิ่งสำคัญคือต้องทราบว่าการรักษารูปแบบที่ซ้ำกันอาจเป็นปัญหาได้ ดังที่ cHao บันทึกไว้ด้านล่างรหัสที่ซ้ำกันชอบที่จะแยกความแตกต่าง นักพัฒนาส่วนใหญ่อาจจะต้องโดนมันกัดสักครั้งเพื่อสาบาน :)

— jinglesthula

62

จากCSS3 Selectors REC :

สิ่งนี้ :: สัญกรณ์ถูกนำมาใช้โดยเอกสารปัจจุบันเพื่อสร้างการแบ่งแยกระหว่างคลาสหลอกและองค์ประกอบหลอก
เพื่อให้เข้ากันได้กับสไตล์ชีตที่มีอยู่ตัวแทนผู้ใช้ต้องยอมรับสัญกรณ์หนึ่งโคลอนก่อนหน้าสำหรับองค์ประกอบหลอกที่นำมาใช้ใน CSS ระดับ 1 และ 2 (กล่าวคือ: บรรทัดแรก,: อักษรตัวแรก,: ก่อนและ: หลัง)
นี้เข้ากันไม่ได้รับอนุญาตสำหรับใหม่หลอกองค์ประกอบแนะนำในข้อกำหนดนี้

ดูเหมือนว่าคุณจะปลอดภัยโดยใช้สัญกรณ์ (เฉพาะ) เครื่องหมายทวิภาคเดียวสำหรับองค์ประกอบหลอกที่มีอยู่แล้วใน CSS2.1 เนื่องจาก UAs ต้องเข้ากันได้แบบย้อนหลัง

— เฟลิเป้
แหล่งที่มา

1

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

— jinglesthula

คุณได้ข้อสรุปอย่างไร? ฉันได้ข้อสรุปที่ตรงกันข้าม ... ถ้าโคลอนเดี่ยวจะไม่ได้รับอนุญาตให้ใช้กับองค์ประกอบหลอกใหม่ ๆ คุณไม่ควรเริ่มใช้ทวิภาคคู่เพื่อให้เป็นนิสัยหรือไม่?

— andrewtweber

@andrewtweber ในบริบทของคำถามเดิม (IE8) โดยใช้ double จะทำลาย CSS ที่กล่าวว่าในขณะที่เขียนนี้เว็บไซต์ส่วนใหญ่อาจเห็นการใช้งาน IE8 ในระดับต่ำเพื่อให้สามารถเพิ่มเป็นสองเท่าโดยไม่มีผลเสียที่สำคัญ ผู้จำหน่ายเบราว์เซอร์อาจพึ่งพาเพื่อสนับสนุนสัญกรณ์เดียวอย่างถาวร แต่ไม่มีอะไรผิดปกติกับการเปลี่ยนนิสัยการเข้ารหัส ณ จุดนี้

— jinglesthula

@andrewtweber +1 สำหรับ OP Yep, IE8 จะถูกนำมาพิจารณาในปี 2012 และ - YMMV - ยังอยู่ในปี 2015 ในโครงการ B2B ขนาดใหญ่และเหมือนกัน แต่ไม่ใช่ในโครงการเว็บอื่น ๆ สัญกรณ์ทั้งสองใช้ได้อย่างสมบูรณ์แบบสำหรับหลอกที่มีอยู่เหล่านี้ การลดขนาด CSS จะได้รับ 1 ไบต์โดยใช้สัญกรณ์หนึ่งโคลอน หากคุณต้องการใช้สัญกรณ์หนึ่งเสมอและห้ามอีกอันหนึ่งนั่นเป็นการประชุมที่คุณมีอิสระที่จะทำเช่นนั้นร่วมกับทีมของคุณ แต่ไม่ใช่คำแนะนำ

— FelipeAls

@jinglesthula และเฟลิเป้คุณพูดถูกฉันไม่ได้สังเกตวันที่ บางทีคำตอบควรได้รับการอัปเดตเนื่องจากคำถามนี้มีผลการค้นหาสูง

— andrewtweber

22

ฉันไม่เห็นด้วยอย่างยิ่งกับ @mddw และ @FelipeAls ในเรื่องการพิจารณาการใช้ลำไส้ใหญ่หนึ่งอัน "ปลอดภัย"

ความคิด "ฉันจะใช้แม้ว่าจะเลิกใช้แล้วก็ตาม" นี้เป็นสาเหตุที่เทคโนโลยีที่ใช้เบราว์เซอร์ช้ามากในการพัฒนาและก้าวหน้าไปข้างหน้า

ใช่เราต้องการรักษาความเข้ากันได้กับมาตรฐานเดิม มาเผชิญหน้ากันมันเป็นมือที่เราถูกจัดการ แต่นี่ไม่ได้หมายความว่าคุณมีข้ออ้างที่จะขี้เกียจในการพัฒนาโดยละเลยมาตรฐานปัจจุบันที่สนับสนุนมาตรฐานที่เลิกใช้แล้ว

เป้าหมายคือการรักษาการปฏิบัติตามมาตรฐานปัจจุบันในขณะที่สนับสนุนมาตรฐานเดิมให้มากที่สุด

หากองค์ประกอบหลอกใช้:ใน CSS2 และ::ใน CSS3 เราไม่ควรใช้อย่างใดอย่างหนึ่ง เราควรใช้ทั้งสองอย่าง

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

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}

— โจชัวเบิร์นส์
แหล่งที่มา

3

ฉันคิดว่ามันค่อนข้างปลอดภัยที่จะสมมติว่าผู้ขายเบราว์เซอร์จะยังคงสนับสนุนสัญกรณ์เก่าอย่างไม่มีกำหนดเนื่องจากจำนวนโค้ดที่จะไม่มีการอัปเดตตามความเป็นจริงที่พวกเขาต้องการให้เบราว์เซอร์แสดงผล 'อย่างถูกต้อง' ในทางกลับกันฉันคิดว่าการรักษาสำเนาของสไตล์ที่แยกจากกันทำให้ธงสีแดงแห้ง ฉันคิดว่ามันเป็นวิธีปฏิบัติมากกว่าขี้เกียจที่จะใช้สัญกรณ์โคลอนเดี่ยวจนกว่าส่วนแบ่งการตลาดของ IE7 จะลดลง ที่บอกว่าอยากให้เว็บเดินหน้าเท่าใคร!

— jinglesthula

9

หากคุณ " ไม่เห็นด้วยอย่างยิ่ง " กับคำตอบของฉันแสดงว่าคุณไม่เห็นด้วยอย่างยิ่งกับคำที่ต้องอยู่ในคำแนะนำของ W3C " เป้าหมายนอกควรคือการรักษาการปฏิบัติตามมาตรฐานปัจจุบันในขณะที่สนับสนุนมาตรฐานเดิมให้มากที่สุดเท่าที่จะเป็นไปได้ " คือสิ่งที่กำหนดโดยส่วนนี้ของ REC และระบุไว้อย่างชัดเจนว่า UAs ต้องไม่บังคับให้ผู้เขียนใช้ทั้งสองสัญกรณ์ และอธิบายว่า UAs เหล่านี้ต้องทำอย่างไร อย่าลังเลที่จะติดต่อรายชื่ออีเมลของ CSS WG หากคุณไม่พอใจกับสิ่งนั้น (หรือบน Twitter @glazou ประธานร่วมของคณะทำงานนี้)

— FelipeAls

4

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

— Joshua Burns

4

การปฏิบัติตามมาตรฐานที่เข้ากันได้อย่างชัดเจนนั้นไม่ใช่แนวทางปฏิบัติที่ไม่ดีหากความเข้ากันได้เป็นเป้าหมาย ในทางกลับกันการใช้ทั้งสองนำไปสู่รูปแบบที่ซ้ำกัน - และในฐานะที่ใครก็ตามที่เขียนโค้ดมาระยะหนึ่งจะรู้ดีว่ารหัสที่ซ้ำกันนั้นชอบที่จะแยกความแตกต่าง

— cHao

8

@JoshuaBurns ถ้าบรรพบุรุษของฉันทำซ้ำรหัสจำนวนมากเพื่อป้องกันภัยคุกคามในอนาคตฉันจะรู้สึก "เมา" มากขึ้นอย่างมาก

— Mark Amery

2

อย่างไรก็ตามการใช้polyfillsสำหรับทั้ง javascript และ CSS ใหม่ได้รับความนิยมมากขึ้นเรื่อยๆ ดังนั้นคุณอาจต้องการใช้::ไวยากรณ์double-colon ( ) ที่ใหม่กว่าและดูแล polyfill สำหรับเบราว์เซอร์รุ่นเก่าตราบเท่าที่จำเป็น

— zpr
แหล่งที่มา

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

— TylerH

2

ทำไมไม่เชื่อมโยงโพลีฟิลล์ดังกล่าวด้วยเพื่อที่เราจะได้ใช้งานได้โดยไม่ต้องใช้ googling ต่อไป?

— MightyPork

4

เอ๊ะตอนแรกอาจเป็น meta แต่ฉันคิดว่าส่วนที่สองเป็นคำตอบที่ดี ที่ทำงานเราไม่ใช้พรีโปรเซสเซอร์และ / หรือโพลีฟิลล์ดังนั้นคำตอบที่ยอมรับจึงใช้ได้กับฉัน แต่สำหรับร้านค้าหรือ dev ที่ใช้เครื่องมือดังกล่าวคำตอบนี้น่าจะมีประโยชน์มากกว่า

— jinglesthula

1

สิ่งที่คุ้มค่าตามสถิติของเบราว์เซอร์ IE 8.0 ได้ลดลงเหลือน้อยกว่า 1% ในสหรัฐอเมริกาในช่วงปีที่ผ่านมา

http://gs.statcounter.com/browser-version-partially-combined-market-share/desktop/united-states-of-america/#monthly-201512-201612

ในเดือนธันวาคม 2015 IE 8.0 มี2.92%ของตลาด ในเดือนธันวาคม 2559 IE 8.0 มี. 77%ของตลาด

ในอัตราการลดลงนั้นคงไม่ใช่ความคิดที่แย่ที่สุดที่จะหยุดรองรับ IE เวอร์ชันเก่าและเริ่มใช้ :: สำหรับ Pseudo Elements

— DR01D
แหล่งที่มา

ซึ่งเป็นสิ่งที่ควรเฉลิมฉลอง :) นอกจากนี้ยังควรชี้ให้เห็นว่ามันขึ้นอยู่กับสถานการณ์ที่ยังคงอยู่ หากคุณเป็น Amazon ผู้ใช้ 0.5% ของคุณเท่ากับลูกค้ากว่าล้านรายที่คิดว่าไซต์ของคุณเสีย หากคุณกำลังทำบล็อกสำหรับการเริ่มต้น 10 คนเงินเดิมพันอาจแตกต่างกัน

— jinglesthula

เป็นเรื่องจริงเกี่ยวกับองค์กรอย่าง Amazon แต่. 77% ไม่ได้กระจายอย่างเท่าเทียมกันในประชากรทั้งหมด เป็นคนแก่หรือคนที่มีเงินเพียงเล็กน้อยที่ไม่สามารถอัพเกรดได้ จากมุมมองทางธุรกิจอย่างแท้จริงสิ่งเหล่านี้อาจไม่ใช่ตลาดเป้าหมายในอุดมคติ ดังนั้นสำหรับ บริษัท ส่วนใหญ่กลุ่ม. 77% จึงมีความสำคัญน้อยกว่าสิ่งที่คนจำนวนน้อยแนะนำ และตัวเลขนั้นก็จะเล็กลงเท่านั้น

— DR01D

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

— jinglesthula

0

การรวมสัญกรณ์ทั้งสองจะปลอดภัยกว่าอย่างแน่นอน แต่ฉันไม่เห็นเบราว์เซอร์ใดทิ้งสัญกรณ์เดียวเป็นเวลานานดังนั้นเพียงอันเดียวก็ใช้ได้ (เป็น CSS2 ที่ถูกต้อง)

ส่วนตัวฉันใช้สัญกรณ์โคลอนเดี่ยวเท่านั้นโดยส่วนใหญ่เป็นนิสัย

— mddw
แหล่งที่มา

1

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

— Mark Amery