ความคิดเห็น: การแปลง HTML5 ทำให้เรามีคุณลักษณะใหม่ที่มีประโยชน์มากมายเช่นตัวยึดตำแหน่งดาวน์โหลดซ่อน ฯลฯ แอตทริบิวต์ใหม่แต่ละรายการนำวิธีการควบคุมใหม่และเอฟเฟกต์การควบคุมในองค์ประกอบหน้าเว็บ
โดยเฉพาะอย่างยิ่งมีแอตทริบิวต์ใหม่ที่ช่วยให้เราสามารถควบคุมคุณสมบัติขององค์ประกอบหลายองค์ประกอบ ได้แก่ : SCOPED แอตทริบิวต์ที่มีขอบเขตที่ปรากฏใหม่บนแท็กสไตล์สามารถทำให้สไตล์ CSS มีประสิทธิภาพเฉพาะในองค์ประกอบท้องถิ่นเท่านั้น โดยเฉพาะองค์ประกอบเด็กขององค์ประกอบที่เก็บสไตล์สไตล์นี้จะมีผล ความแตกต่างเพียงอย่างเดียวจากสไตล์ปกติคือมีการเพิ่มแอตทริบิวต์แบบกำหนดขอบเขตใหม่:
<สไตล์สไตล์>
/ * สไตล์ไปที่นี่ */
</style>
สไตล์ที่มีแอตทริบิวต์ที่กำหนดขอบเขตจะถูกนำไปใช้กับองค์ประกอบปัจจุบันและลูก ๆ เท่านั้น สไตล์อินไลน์ยังคงมีความสำคัญสูงกว่าสไตล์ที่กำหนดขอบเขตดังนั้นจึงเป็นการดีที่สุดที่จะหลีกเลี่ยงการใช้สไตล์อินไลน์ นี่คือการผสมผสานของหลายรูปแบบเข้าด้วยกันเพื่อเปรียบเทียบช่วงประสิทธิภาพของพวกเขา:
<div>
<สไตล์สไตล์>
Div {Border: 1px Solid Green; มาร์จิ้น-ก้น: 20px; ต่ำสุด: 40px; -
.Democontain {พื้นหลัง: #F8F8F8; -
</style>
<div> </div>
<div>
<สไตล์สไตล์>
Div {พื้นหลัง: LightBlue; เส้นขอบ: 1px Solid Blue; -
</style>
<div> </div>
</div>
<div> </div>
</div>
ในรูปแบบที่กำหนดขอบเขตคุณสามารถใช้แท็กสไตล์ CSS ตามกฎหมายเช่นการสืบค้นสื่อเช่นนี้:
<สไตล์สไตล์>
@media หน้าจอเท่านั้นและ (สูงสุด-ความกว้าง: 1024px) {
Div {พื้นหลัง: #000; -
-
</style>
สถานที่ให้บริการที่มีการกำหนดขอบเขตที่เกิดขึ้นใหม่นี้มีประโยชน์มากโดยเฉพาะอย่างยิ่งสำหรับผู้ที่สร้างเทมเพลตหรือผู้ใช้ CMS หรือนักพัฒนาบางคนที่ไม่สามารถใช้งานไฟล์สไตล์ทั้งหมดได้ แต่ควรสังเกตว่าเบราว์เซอร์เก่าบางตัวไม่สนับสนุนคุณสมบัตินี้ ในกรณีนี้คุณอาจต้องใช้ปลั๊กอิน jQuery (https://github.com/thingsinjars/jquery-scoped-css-plugin) เพื่อชดเชยปัญหานี้