คุณสมบัติความทึบของ CSS: ควบคุมความโปร่งใส วิธีตั้งค่าความโปร่งใสใน css - บล็อกโปร่งใส Css วิธีทำให้องค์ประกอบโปร่งใส
คุณสมบัติซีเอสเอส ความทึบตั้งค่าความทึบขององค์ประกอบ ความทึบคือระดับที่เนื้อหาถูกซ่อนอยู่หลังองค์ประกอบ และเป็นสิ่งที่ตรงกันข้ามกับความโปร่งใส
แหล่งที่มาของตัวอย่างเชิงโต้ตอบนี้จัดเก็บไว้ในที่เก็บ GitHub หากคุณต้องการมีส่วนร่วมในโครงการตัวอย่างเชิงโต้ตอบ โปรดโคลน https://github.com/mdn/interactive-examples และส่งคำขอดึงถึงเรา
ความทึบใช้กับองค์ประกอบโดยรวม รวมถึงเนื้อหาด้วย แม้ว่าองค์ประกอบย่อยจะไม่สืบทอดค่าก็ตาม ด้วยวิธีนี้ องค์ประกอบและลูกๆ ขององค์ประกอบจะมีความทึบเท่ากันเมื่อเทียบกับพื้นหลังขององค์ประกอบ แม้ว่าจะมีความทึบต่างกันเมื่อเทียบกันก็ตาม
การใช้ความทึบด้วยค่าอื่นที่ไม่ใช่ 1 จะทำให้องค์ประกอบนั้นอยู่ในบริบทการซ้อนทับใหม่
ตัวอย่าง
ตัวอย่างพื้นฐาน
div ( สีพื้นหลัง: สีเหลือง; ) .light ( ความทึบ: 0.2; /* ข้อความที่แทบจะมองไม่เห็นบนพื้นหลัง */ ) .medium ( ความทึบ: 0.5; /* การมองเห็นข้อความบนพื้นหลังจะชัดเจนยิ่งขึ้น */ ) .heavy ( ความทึบแสง : 0.9 ; /* การมองเห็นข้อความชัดเจนมากกับพื้นหลัง */ )ความทึบที่แตกต่างด้วย:โฮเวอร์
img.opacity ( ความทึบ: 1; filter: alpha(opacity=100); /* IE8 และต่ำกว่า */ Zoom: 1; /* ทริกเกอร์ "hasLayout" ใน IE 7 และต่ำกว่า */ ) img.opacity:hover ( ความทึบ: 0..png" alt="โลโก้ MDN" width="128" height="146" class="opacity"> !}ปัญหาการเข้าถึง
หากมีการปรับความทึบของข้อความ สิ่งสำคัญคือต้องแน่ใจว่าอัตราส่วนความคมชัดระหว่างสีของข้อความและพื้นหลังที่วางข้อความนั้นสูงเพียงพอเพื่อให้ผู้ที่มีสายตาเลือนลางสามารถอ่านเนื้อหาของหน้าได้
อัตราคอนทราสต์ของสีถูกกำหนดโดยการเปรียบเทียบความสว่างของข้อความกับค่าความทึบและสีพื้นหลังที่ปรับแล้ว เพื่อให้เป็นไปตามแนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) ในปัจจุบัน เนื้อหาข้อความต้องมีอัตราส่วน 4.5:1 และ 3:1 สำหรับข้อความขนาดใหญ่ เช่น ส่วนหัว ข้อความขนาดใหญ่กำหนดเป็น 18.66px และใหญ่กว่า หรือ 24px หรือสูงกว่า
ข้อมูลจำเพาะ
| ค่าเริ่มต้น | 1.0 |
|---|---|
| นำไปใช้กับ | องค์ประกอบทั้งหมด |
| สืบทอดมา | เลขที่ |
| แสดง | ภาพ |
| กำลังประมวลผลค่า | ค่าที่ระบุจะถูกตัดแต่งให้อยู่ในช่วง |
| ประเภทภาพเคลื่อนไหว | ถูกประมาณค่าเป็นจำนวนจริงจุดลอยตัว">จำนวน |
| คำสั่งที่เป็นที่ยอมรับ | ลำดับที่ไม่ชัดเจนซึ่งกำหนดโดยไวยากรณ์ที่เป็นทางการ |
รองรับเบราว์เซอร์
ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง หากคุณต้องการมีส่วนร่วมในข้อมูล โปรดตรวจสอบ https://github.com/mdn/browser-compat-data และส่งคำขอดึงถึงเรา
อัปเดตข้อมูลความเข้ากันได้บน GitHub
| คอมพิวเตอร์ | มือถือ | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| โครเมียม | ขอบ | ไฟร์ฟอกซ์ | อินเทอร์เน็ตเอ็กซ์พลอเรอร์ | โอเปร่า | ซาฟารี | มุมมองเว็บ Android | โครมสำหรับแอนดรอยด์ | ไฟร์ฟอกซ์สำหรับ Android | โอเปร่าสำหรับ Android | ซาฟารีบน iOS | ซัมซุงอินเตอร์เน็ต | |
| ความทึบ | โครเมียม การสนับสนุนอย่างเต็มที่ 1 | ขอบ การสนับสนุนอย่างเต็มที่ 12 | ไฟร์ฟอกซ์ การสนับสนุนอย่างเต็มที่
1 การสนับสนุนอย่างเต็มที่ 1 ไม่มีการสนับสนุน 1 - 3.5 ด้วยคำนำหน้า ด้วยคำนำหน้า ต้องมีคำนำหน้าผู้ขาย: -moz- | เช่น. การสนับสนุนอย่างเต็มที่ 9 | โอเปร่า การสนับสนุนอย่างเต็มที่ 9 | ซาฟารี การสนับสนุนอย่างเต็มที่
2 การสนับสนุนอย่างเต็มที่ 2 ไม่มีการสนับสนุน 1.1 - 2 ด้วยคำนำหน้า ด้วยคำนำหน้า ต้องมีคำนำหน้าผู้ขาย: -khtml- | เว็บวิว Android การสนับสนุนอย่างเต็มที่ 1 | โครม แอนดรอยด์ การสนับสนุนอย่างเต็มที่ 18 | ไฟร์ฟอกซ์ แอนดรอยด์ การสนับสนุนอย่างเต็มที่ 4 | โอเปร่า แอนดรอยด์ การสนับสนุนอย่างเต็มที่ 10.1 | ซาฟารี iOS การสนับสนุนอย่างเต็มที่ 1 | ซัมซุง อินเทอร์เน็ต แอนดรอยด์ การสนับสนุนอย่างเต็มที่ใช่ |
| รองรับค่าความทึบเป็นเปอร์เซ็นต์ | โครเมียม การสนับสนุนอย่างเต็มที่ 78 | Edge ไม่มีหมายเลขรองรับ | ไฟร์ฟอกซ์ การสนับสนุนอย่างเต็มที่ 70 | IE ไม่มีหมายเลขรองรับ | Opera ไม่มีหมายเลขรองรับ | Safari ไม่มีหมายเลขรองรับ | เว็บวิว Android การสนับสนุนอย่างเต็มที่ 78 | โครม แอนดรอยด์ การสนับสนุนอย่างเต็มที่ 78 | Firefox Android ไม่รองรับ | Opera Android ไม่รองรับหมายเลข | Safari iOS ไม่มีหมายเลขรองรับ | Samsung Internet Android ไม่รองรับหมายเลข |
ตำนาน
การสนับสนุนอย่างเต็มที่การสนับสนุนอย่างเต็มที่ ไม่มีการสนับสนุนไม่มีการสนับสนุน ต้องมีคำนำหน้าผู้ขายหรือชื่ออื่นเพื่อใช้ ต้องมีคำนำหน้าผู้ขายหรือชื่ออื่นเพื่อใช้คำอธิบาย
กำหนดระดับความโปร่งใสขององค์ประกอบหน้าเว็บ เมื่อองค์ประกอบโปร่งใสบางส่วนหรือทั้งหมด ภาพพื้นหลังหรือองค์ประกอบอื่นๆ ที่อยู่ด้านล่างวัตถุโปร่งแสงจะแสดงผ่าน
ไวยากรณ์
ความทึบ: ค่า
ค่านิยม
ค่าเป็นตัวเลขจากช่วง ค่า 0 สอดคล้องกับความโปร่งใสขององค์ประกอบ และ 1 สอดคล้องกับความทึบของมัน ตัวเลขเศษส่วนแบบ 0.6 ชุดความโปร่งแสง อนุญาตให้เขียนตัวเลขโดยไม่ต้องมีศูนย์นำหน้า เช่น ความทึบ: .6
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
ผลลัพธ์ ตัวอย่างนี้แสดงในรูปที่. 1.
ข้าว. 1. ผลลัพธ์ของการใช้ความทึบ
เบราว์เซอร์
Firefox ก่อนเวอร์ชัน 3.5 รองรับคุณสมบัติ -moz-opacity ที่ไม่ได้มาตรฐาน
Internet Explorer จนถึงเวอร์ชัน 9.0 ใช้ตัวกรองเพื่อเปลี่ยนความโปร่งใส สำหรับเบราว์เซอร์นี้ คุณควรเขียน filter : alpha(opacity=50) โดยที่พารามิเตอร์ opacity สามารถรับค่าได้ตั้งแต่ 0 ถึง 100
มีสองวิธีในการตั้งค่าความโปร่งใสโดยใช้ CSS: การใช้คุณสมบัติ ความทึบหรือคุณสมบัติ RGBA
ความทึบ- กำหนดระดับความโปร่งใสขององค์ประกอบหน้าเว็บ เมื่อองค์ประกอบโปร่งใสบางส่วนหรือทั้งหมด ภาพพื้นหลังหรือองค์ประกอบอื่นๆ ที่อยู่ด้านล่างวัตถุโปร่งแสงจะแสดงผ่าน
ไวยากรณ์ความทึบ: ค่าระดับความโปร่งใสกำหนดไว้ในช่วง 0 (โปร่งใสโดยสมบูรณ์) ถึง 1 (ทึบแสงโดยสมบูรณ์)
ตัวอย่างเช่น เราต้องการให้รูปภาพของเรามีความโปร่งใสเพียงครึ่งเดียว
การเพิ่มสไตล์
Img1 ( ความทึบ: 0.5; /* ความโปร่งแสงขององค์ประกอบ */ )
แต่น่าเสียดายที่เบราว์เซอร์บางรุ่นยังไม่รองรับความทึบ เพื่อความเข้ากันได้ข้ามเบราว์เซอร์เต็มรูปแบบเราใช้:
Img1( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 และต่ำกว่า */ -khtml-opacity: 0.5; /* Konqueror 3.1 , Safari 1.1 */ ความทึบ: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */ )
นอกจากนี้อาจไม่ทำงานบน IE หากไม่ได้ระบุไว้ ความกว้าง(กว้าง) หรือ ความสูง(ความสูง).
คุณสมบัติ RGBA ช่วยให้คุณสามารถตั้งค่าได้ สีพื้นหลังพร้อมช่องอัลฟ่า ช่องอัลฟากำหนดความโปร่งใสขององค์ประกอบ
ค่า 0 หมายถึงโปร่งใสทั้งหมด 1 หมายถึงทึบแสง และค่ากลาง เช่น 0.5 หมายถึงกึ่งโปร่งใส
ไวยากรณ์ RGBA: ค่าสมมติว่าเราต้องการข้อความที่มีพื้นหลังโปร่งใส
ข้อความของเรา
เนื้อความ ( ภาพพื้นหลัง: url(http://g.io.ua/img_aa/large/3228/01/32280132.jpg) ) .rgba ( ขนาดตัวอักษร: 50px; สี: rgb(0, 0, 0) ; สีพื้นหลัง: rgba (256,256,256, 0.5); ความกว้าง: 300px;
ความแตกต่างระหว่างความทึบและ rgba
ความทึบส่งผลต่อทั้งบล็อกรวมถึงข้อความด้วย สร้างบริบทการซ้อนทับใหม่ แท็กย่อยต้องไม่สว่างกว่าองค์ประกอบหลัก
RGBAกระทบต่อคุณสมบัติเฉพาะเท่านั้น ในกรณีนี้ จะช่วยให้คุณมองเห็นพื้นหลังได้และไม่ทำให้ข้อความโปร่งใส
ความโปร่งใสใน CSS ถือเป็นเทคนิคยอดนิยมในช่วงนี้ ซึ่งทำให้เกิดปัญหาในการใช้งานข้ามเบราว์เซอร์ ยังไม่มีอยู่จริง วิธีการสากลซึ่งจะช่วยให้เบราว์เซอร์ทั้งหมดมีความโปร่งใส อย่างไรก็ตาม ล่าสุด สถานการณ์ดีขึ้นอย่างเห็นได้ชัด
บทความนี้จะให้ข้อมูลเชิงลึกเกี่ยวกับแนวทางที่มีอยู่ รวมถึงตัวอย่างโค้ดและคำอธิบายที่จะช่วยให้คุณบรรลุผลลัพธ์เดียวกันในเบราว์เซอร์ทั้งหมดโดยใช้ความพยายามเพียงเล็กน้อย
สิ่งหนึ่งที่ควรกล่าวถึงก็คือ แม้ว่าความโปร่งใสจะมีมาหลายปีแล้ว แต่ก็ไม่เคยเป็นส่วนหนึ่งของมาตรฐาน CSS เลย นี่เป็นคุณสมบัติที่ไม่ได้มาตรฐานที่ควรเป็นส่วนหนึ่งของข้อกำหนด CSS3
แนวทางเก่า
ใน Firefox และ Safari เวอร์ชันเก่า คุณต้องใช้คุณสมบัติดังต่อไปนี้:
#myElement ( -khtml-ความทึบ: .5; -moz-ความทึบ: 0.5; )
คุณสมบัติ -khtml-opacity ถูกใช้ในเบราว์เซอร์ webkit เวอร์ชันเก่า คุณสมบัตินี้เลิกใช้แล้วและไม่จำเป็นอีกต่อไป เว้นแต่คุณจะมั่นใจว่าปริมาณการเข้าชมไซต์ของคุณส่วนใหญ่มาจากผู้เยี่ยมชมที่ใช้ Safari 1.x ซึ่งแน่นอนว่าไม่น่าจะเป็นไปได้
บรรทัดถัดไปใช้คุณสมบัติ -moz-opacity ซึ่งทำงานกับ Mozilla engine เวอร์ชันแรกๆ Firefox หยุดการสนับสนุนในเวอร์ชัน 0.9
ความโปร่งใสของ CSS ใน Firefox, Safari, Chrome และ Opera
สำหรับเบราว์เซอร์สมัยใหม่ส่วนใหญ่ ก็เพียงพอแล้วที่จะใช้คุณสมบัติต่อไปนี้:
#myElement ( ความทึบ: .7; )
ในตัวอย่างข้างต้น องค์ประกอบถูกตั้งค่าเป็นความทึบ 70% (ความโปร่งใส 30%) นั่นคือถ้าเราตั้งค่าเป็น 1 องค์ประกอบจะทึบแสง ดังนั้นการตั้งค่านี้เป็นศูนย์จะทำให้มองไม่เห็น
คุณสมบัติความทึบจะประมวลผลทศนิยม 2 หลัก นั่นคือค่า ".01" จะแตกต่างจากค่า ".02" แม้ว่าจะไม่สามารถสังเกตเห็นได้ชัดเจนก็ตาม
ความโปร่งใส CSS สำหรับ Internet Explorer
ตามปกติ Internet Explorer จะไม่เป็นมิตรกับเบราว์เซอร์อื่น นอกจากนี้ ขณะนี้เรามีเบราว์เซอร์นี้สามเวอร์ชันที่ใช้งานค่อนข้างแพร่หลาย การตั้งค่าความโปร่งใสในแต่ละเวอร์ชันจะแตกต่างกันและบางครั้งต้องใช้ความพยายามเพิ่มเติมเพื่อให้ได้ผลลัพธ์ที่เป็นบวก
#myElement ( ตัวกรอง: อัลฟ่า(ความทึบ=40); )
ตัวอย่างนี้ใช้คุณสมบัติตัวกรอง ซึ่งทำงานในเวอร์ชัน 6-8 อย่างไรก็ตาม สำหรับเวอร์ชัน 6 และ 7 มีข้อจำกัดประการหนึ่งคือ คุณสมบัติ hasLayout ขององค์ประกอบจะต้องตั้งค่าเป็น true คุณสมบัตินี้มีอยู่ใน IE เท่านั้น และคุณสามารถอ่านเพิ่มเติมเกี่ยวกับคุณสมบัตินี้ได้ เช่น ในHabré
อีกวิธีหนึ่งในการตั้งค่าความโปร่งใสโดยใช้ CSS ใน IE8 คือการใช้วิธีการต่อไปนี้ (สังเกตความคิดเห็น):
#myElement ( filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* ทำงานใน IE6, IE7 และ IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * สำหรับ IE8 เท่านั้น */ )
บรรทัดแรกจะใช้ได้กับเวอร์ชันที่ใช้อยู่ทั้งหมด บรรทัดที่สอง - เฉพาะใน IE8 เท่านั้น โปรดทราบว่าบรรทัดที่สองใช้คำนำหน้า -ms- และค่าอยู่ในเครื่องหมายคำพูด
การตั้งค่าและการเปลี่ยนความโปร่งใสของ CSS โดยใช้ JavaScript หรือ jQuery
คุณสามารถใช้รหัสต่อไปนี้เพื่อตั้งค่าความโปร่งใส:
Document.getElementById("myElement").style.opacity = ".4"; // สำหรับเบราว์เซอร์ส่วนใหญ่ document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // สำหรับ IE
แน่นอนว่าในกรณีนี้ การใช้ jQuery นั้นง่ายกว่ามาก นอกจากนี้ยังใช้งานได้กับทุกเบราว์เซอร์:
$("#myElement").css(( ความทึบ: .4 )); // ใช้ได้กับทุกเบราว์เซอร์
คุณสามารถทำให้คุณสมบัตินี้เคลื่อนไหวได้:
$("#myElement").animate(( opacity: .4 ), 1000, function() ( // แอนิเมชันเสร็จสมบูรณ์แล้ว รหัสนี้ใช้ได้กับทุกเบราว์เซอร์ ));
ฟังก์ชัน RGBA
CSS3 วางแผนที่จะรองรับช่องอัลฟ่าโดยใช้ฟังก์ชัน rgba คุณลักษณะนี้ใช้งานได้ใน Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+ มันถูกใช้เช่นนี้:
#rgba ( พื้นหลัง: rgba(98, 135, 167, .4); )
ในกรณีนี้ พารามิเตอร์สุดท้ายจะระบุระดับความทึบ
ฟังก์ชัน HSLA
เช่นเดียวกับฟังก์ชันก่อนหน้า CSS3 ยังให้คุณตั้งค่าสีกึ่งโปร่งใสโดยใช้ฟังก์ชัน HSLA ซึ่งมีพารามิเตอร์ ได้แก่ Hue, Saturation, Lightness และ Alpha
#hsla ( พื้นหลัง: hsla(207, 38%, 47%, .4); )
จุดสำคัญเมื่อใช้ฟังก์ชัน rgba และ hsla คือการตั้งค่าความโปร่งใสจะไม่นำไปใช้กับองค์ประกอบลูก ในขณะที่การใช้คุณสมบัติความทึบนั้นสืบทอดมา
คุณสมบัติ CSS 3 ความทึบช่วยให้คุณทำให้องค์ประกอบหนึ่งหรือองค์ประกอบอื่นของไซต์มีความโปร่งใส
ระดับความโปร่งใสขององค์ประกอบจะพิจารณาจากค่าจาก 0 ถึง 1 ที่ไหน 0 – โปร่งใสอย่างสมบูรณ์ 1 – ทึบแสงเลย.. ยกตัวอย่างความหมาย 0.5 คุณสมบัติ ความทึบการนำไปใช้กับรูปภาพจะหมายความว่ารูปภาพนี้ควรโปร่งแสง
ความโปร่งใสใน IE
Internet Explorer ไม่รองรับคุณสมบัติ ความทึบอย่างไรก็ตาม จนถึงเวอร์ชันที่ 9 จะมีตัวกรองของตัวเองซึ่งคุณสามารถกำหนดระดับความโปร่งใสได้:
ตัวกรอง: อัลฟ่า (ความทึบ = 50)
ความหมาย ความทึบสำหรับตัวกรอง อินเทอร์เน็ตเบราว์เซอร์ Explorer สามารถเปลี่ยนแปลงได้จาก 0 - โปร่งใสอย่างสมบูรณ์ 100 - ทึบแสง
บล็อกของเมนูนี้จะโปร่งแสงเมื่อโฮเวอร์ใน IE ด้วย!!
บ้าน
แผนที่เว็บไซต์
รับซื้อช้าง
ขายช้าง
เช่าช้าง
คำนำหน้า
โดยหลักการแล้ว นี่อาจเป็นจุดสิ้นสุดของบทเกี่ยวกับความโปร่งใส แต่ฉันอยากจะบอกคุณเกี่ยวกับสิ่งที่เรียกว่าด้วย คำนำหน้าผู้ขาย.. สหายเหล่านี้ไม่มีความเกี่ยวข้องเป็นพิเศษกับบทนี้ แต่เมื่อคุณก้าวหน้าในการเรียนรู้ CSS3 พวกเขาจะปรากฏขึ้นบ่อยขึ้นเรื่อยๆ และคุณต้องพูดถึงพวกเขาที่ไหนสักแห่ง - ดังนั้นฉันจะบอกคุณที่นี่
ดังนั้น คำนำหน้าผู้ขายจึงเป็นคำนำหน้าคุณสมบัติ CSS พิเศษที่เบราว์เซอร์ใช้สำหรับคุณสมบัติทดลองที่ไม่ได้รวมอยู่ในข้อกำหนด CSS อย่างเป็นทางการ
เราจำได้ว่าข้อกำหนด CSS 3 ยังอยู่ระหว่างการพัฒนาและคุณสมบัติอย่างเป็นทางการที่อธิบายไว้ในบทช่วยสอนนี้ไม่มีอยู่จริง แต่เบราว์เซอร์ต่างใช้งานคุณสมบัติเหล่านี้อย่างแข็งขันโดยมีความเสี่ยงและอันตราย
ทำไมต้องเป็นความเสี่ยงของคุณเอง? ใช่ เนื่องจากมีความเป็นไปได้ที่เมื่อข้อกำหนด CSS 3 ได้รับการอนุมัติอย่างเป็นทางการ คุณสมบัติที่อธิบายไว้ในนั้นจะแตกต่างจากคุณสมบัติที่มีชื่อเดียวกันกับที่เบราว์เซอร์ใช้อยู่แล้ว เอาล่ะ เรามาบ้ากันเถอะ และปล่อยให้นักพัฒนาข้อกำหนด CSS 3 กำหนดคุณสมบัติ ความทึบไม่ใช่ระดับความโปร่งใสของบล็อก แต่เช่นการแรเงาหรือการกะพริบ (แน่นอนว่าฉันกำลังเขียนเรื่องไร้สาระ) ซึ่งจะแสดงเป็นล้าน ๆ เบราว์เซอร์ที่ติดตั้งเพื่อสิ่งนั้น ความทึบนี่คือความโปร่งใสเหรอ?
หรือสมมติว่านักพัฒนาเบราว์เซอร์มาพร้อมกับคุณสมบัติของตนเอง ซึ่งเป็นนวัตกรรมที่ไม่มีใครมี แต่เอกสารที่มีคุณสมบัติดังกล่าวไม่ผ่านการตรวจสอบความถูกต้องเนื่องจากคุณสมบัติดังกล่าวไม่อยู่ในข้อกำหนด
ด้วยเหตุผลเหล่านี้และเหตุผลอื่นๆ คุณสมบัติคำนำหน้าเบราว์เซอร์ที่ไม่ได้เป็นส่วนหนึ่งของข้อกำหนดอย่างเป็นทางการ แต่ละเบราว์เซอร์มีคำนำหน้าของตัวเองโดยขึ้นต้นด้วยเครื่องหมาย “-” เครื่องหมายนี้ที่จุดเริ่มต้นของคุณสมบัติ เช่นเดียวกับเครื่องหมาย “_” ตามข้อกำหนด CSS 2.1 หมายความว่าคุณสมบัตินั้นถูกสงวนไว้สำหรับส่วนขยาย CSS ของบางประเภท เบราว์เซอร์
ต่อไปนี้เป็นเบราว์เซอร์ยอดนิยมและคำนำหน้า:
| เบราว์เซอร์ | คำนำหน้า |
|---|---|
| โอเปร่า | -o- |
| Firefox, SeaMonkey, คามิโน | -โมซ- |
| Internet Explorer 8 ขึ้นไป | -ms- |
| Safari สูงสุดเวอร์ชัน 3, Konqueror | -khtml- |
| Safari 3 ขึ้นไป, Google Chrome | -เว็บคิท- |
มันง่ายมากที่จะใช้คำนำหน้า เพียงแค่นำคุณสมบัติ CSS ใดๆ มาแทนที่คำนำหน้าที่ต้องการ เช่น คุณสมบัติ ความทึบทดแทน -โมซ-ปรากฎว่า: -moz-ความทึบ
ทั้งที่ความจริงแล้วการแสดงออกของฉัน” ใช้คำนำหน้า"ผิด! ที่จริงแล้วไม่มีอะไรทดแทนได้ทุกที่ มีเพียงทรัพย์สินเท่านั้น ความทึบแต่มี -moz-ความทึบและนี่คือคุณสมบัติสองประการที่แตกต่างกันซึ่งไม่จำเป็นต้องทำหน้าที่เดียวกัน!! - เรื่องนี้ควรเข้าใจ..
คุณควรเข้าใจด้วยว่าเบราว์เซอร์บางตัวอาจรองรับได้ถึงบางเวอร์ชัน คุณสมบัติซีเอสเอสเฉพาะกับคำนำหน้าของตัวเองเท่านั้น (อีกครั้งฉันแสดงมันไม่ถูกต้องมันถูกต้องที่จะพูดคุณสมบัติของตัวเอง - ส่วนขยาย CSS ของเบราว์เซอร์) หรือในตอนแรกพวกเขาสามารถพึ่งพาได้แม้กระทั่งข้อกำหนดที่ได้รับการพัฒนา – เราจะพิจารณาแต่ละกรณีแยกกันในหนังสือเรียนเล่มนี้
ส่วนเรื่องความโปร่งใสในบทนี้ควรสังเกตว่า เบราว์เซอร์ไฟร์ฟอกซ์ 3.5 และมากกว่านั้น รุ่นแรกๆใช้ทรัพย์สินของตนเอง -moz-ความทึบและเบราว์เซอร์ Safari จนถึงเวอร์ชัน 1.1 จะใช้คุณสมบัติของมัน -khtml-ความทึบ .
ดังนั้น เพื่อให้ตัวอย่างของเราเข้ากันได้กับเบราว์เซอร์ทั้งหมด เราจำเป็นต้องเพิ่มอีกสองสามบรรทัดในโค้ด:
อย่างที่คุณเห็น คำนำหน้าขยายโค้ดอย่างมาก และการใช้งานนั้นไม่ได้สมเหตุสมผลเสมอไป หากเวอร์ชันของเบราว์เซอร์ที่ต้องการทำงานกับคุณสมบัติบางอย่างโดยใช้คำนำหน้าเท่านั้นนั้นค่อนข้างเก่า เช่นเดียวกับกรณีของคุณสมบัตินั้น ความทึบคุณไม่จำเป็นต้องระบุ.. – แม้ว่าแน่นอนว่านี่เป็นคำแนะนำที่ไม่ดีก็ตาม..
ตอนนี้มีเคล็ดลับที่เป็นประโยชน์...
ใช้คำนำหน้าเสมอ (เว้นแต่ว่าเบราว์เซอร์บางตัวไม่สามารถทำได้หากไม่มีคำนำหน้า) ในกรณีที่คุณสมบัติที่ใช้อาจส่งผลกระทบอย่างมากต่อประสิทธิภาพ ความสามารถในการอ่าน และการใช้งานของไซต์ เป็นเรื่องหนึ่งเมื่อสิ่งเล็กๆ น้อยๆ ในการออกแบบไซต์ใช้งานไม่ได้ และอีกสิ่งหนึ่งคือเมื่อ เช่น เมนูของไซต์ไม่ทำงานหรือไม่สามารถอ่านข้อความบนไซต์ได้ เนื่องจากเบราว์เซอร์ไม่สนับสนุนคุณสมบัติบางอย่าง และใช้อันที่คล้ายกันของมันเองแทน