เหตุผลที่จะใส่คำนำหน้าในคุณสมบัติ CSS ใหม่คืออะไร?

มีเหตุผลที่ถูกต้องหรือไม่ที่เบราว์เซอร์จะนำหน้าคุณลักษณะ CSS ใหม่แทนที่จะปล่อยให้เว็บมาสเตอร์ใช้เวอร์ชันที่ไม่ใช่คำนำหน้า?

ตัวอย่างเช่นโค้ดตัวอย่างสำหรับการไล่สีพื้นหลังมีลักษณะดังนี้:

#arbitrary-stops {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* IE 10 */
  background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

จุดประสงค์ในการบังคับให้เว็บมาสเตอร์คัดลอกวางรหัสเดียวกันสี่ครั้งเพื่อให้ได้ผลลัพธ์เดียวกันคืออะไร

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

IMO เหตุผลนี้เป็นเรื่องไร้สาระ:

• หากเบราว์เซอร์เอ็นจินไม่ได้ใช้สเป็คอย่างถูกต้องเบราว์เซอร์จะไม่เข้ากันไม่ว่าจะใช้ในรูปแบบที่ไม่มีคำนำหน้าหรือไม่ใช้ในรูปแบบที่มีคำนำหน้า
• หากสเป็คไม่ชัดเจนมันอาจสำคัญเมื่อมีการใช้งานก่อนหน้านี้ที่มีชื่อเดียวกัน ตัวอย่างเช่นถ้ามี CSS2 linear-gradientแต่ CSS3 มีวัตถุประสงค์เพื่อขยายlinear-gradientพร้อมกับคุณสมบัติเพิ่มเติมมันจะเป็นการฉลาดที่จะนำหน้าร่างใหม่การนำไปปฏิบัติชั่วคราวโดย-css3-<style>แยกความแตกต่างระหว่าง CSS2 ที่ใช้งานกับหนึ่งและ CSS3 รุ่นทดลอง ในทางปฏิบัติ CSS2 ไม่มีlinear-gradientหรือคุณสมบัติใหม่ ๆ ของ CSS3

ฉันยังอยากจะเข้าใจหากเบราว์เซอร์ที่แตกต่างกันมีรูปแบบการดำเนินงานที่แตกต่างกัน : ยกตัวอย่างเช่นสมมติว่า Firefox จำเป็นสำหรับเงาข้อความ<weight-of-shadow distance-x distance-y color>ในขณะที่ Chrome <distance-x distance-y weight-of-shadow color>ต้อง แต่จริงๆแล้วนี่ไม่ใช่กรณี; อย่างน้อยคุณสมบัติใหม่ทั้งหมดของ CSS3 ที่ฉันเคยใช้มีรูปแบบเดียวกัน

ตามหมายเหตุ W3Cนี้:

เพื่อหลีกเลี่ยงการปะทะกันกับคุณสมบัติ CSS ในอนาคตข้อกำหนด CSS2.1 จะสำรองไวยากรณ์ไว้ล่วงหน้าสำหรับส่วนขยายที่เป็นกรรมสิทธิ์และส่วนขยายสำหรับการทดลองกับ CSS

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

คุณสามารถติดตามสถานะของ CSS ที่นี่และที่นี่

ฉันก็จะเข้าใจว่าเบราว์เซอร์ที่แตกต่างกันมีรูปแบบการใช้งานที่แตกต่างกัน ... [b] ut จริง ๆ นี่ไม่ใช่กรณี; อย่างน้อยคุณสมบัติใหม่ทั้งหมดของ CSS3 ที่ฉันเคยใช้มีรูปแบบเดียวกัน

สิ่งนี้บอกฉันว่าคุณไม่ได้เล่นเกมนี้มานานพอ

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

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

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

ก่อนที่คำนำหน้าจะมาพร้อมกันนักพัฒนาถูกบังคับให้ต้องพึ่งพาความแตกต่างที่ตรวจพบระหว่างเบราว์เซอร์บ่อยครั้งโดยใช้ประโยชน์จากข้อผิดพลาดในตัวแยกวิเคราะห์ CSS สิ่งนี้ทำให้เกิดสิ่งที่น่ารังเกียจเช่นนี้:

padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;

การแฮ็กประเภทต่าง ๆ เหล่านี้เป็นผลมาจากความพยายามของนักพัฒนาในการปรับแต่งสไตล์ชีทของพวกเขาสำหรับแต่ละเบราว์เซอร์โดยใช้วิธีการต่าง ๆ ที่พวกเขาสามารถหาได้

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

เมื่อคุณสมบัติมีความเสถียรและเบราว์เซอร์เริ่มทำหน้าที่เหมือนกันคุณสามารถลบคำนำหน้าและประกาศคุณสมบัติหนึ่งครั้ง

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

 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

หากคุณรู้ทันทีว่า Microsoft ไม่สามารถคำนวณการไล่ระดับสีเชิงเส้นได้อย่างถูกต้องคุณสามารถเพิ่มคำนำหน้าเพื่อแก้ไขปัญหาใน IE:

 /* Friggin IE */
 background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

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

คุณจะพบว่านี้ได้รับการคุ้มครองในลักษณะที่ครอบคลุมมากในบทความนี้ในรายการนอกเหนือ

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

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