เคล็ดลับ CSS: ความแตกต่างเฉพาะระหว่างการนำเข้าและลิงก์

เรารู้ว่ามีสองวิธีในการอ้างอิง CSS ภายนอกในหน้าเว็บ ได้แก่: @import และลิงก์ เรามักจะได้ยินคนบอกว่าควรใช้ลิงก์เพื่อแนะนำ CSS ดีกว่า แต่คุณรู้ไหมว่าทำไม

ลิงค์

ลิงค์คือการเชื่อมต่อ CSS ภายนอกเข้ากับเว็บเพจเฉพาะรูปแบบคือ

@นำเข้า

ความแตกต่างระหว่างการนำเข้าและลิงก์คือสามารถแนะนำไฟล์ CSS อื่น ๆ ให้เป็นไฟล์ CSS เดียวได้

ทำไมต้องใช้ @import

คนส่วนใหญ่ใช้ @import เนื่องจากเบราว์เซอร์รุ่นเก่าไม่รองรับ @import ซึ่งหมายความว่าเราสามารถใช้ @import เพื่อแนะนำสไตล์ CSS ที่สามารถแยกวิเคราะห์ได้เฉพาะเบราว์เซอร์รุ่นใหม่เท่านั้น

ใช้โค้ดต่อไปนี้เพื่อป้องกันไม่ให้เบราว์เซอร์ IE6 และต่ำกว่าแยกวิเคราะห์ CSS (วิธีการด้านล่าง IE6 อยู่ในสภาพทรุดโทรมและจะถูกละไว้ที่นี่)

@import url(../style.css) screen; อีกสาเหตุหลักคือเมื่อหน้าเว็บของคุณจำเป็นต้องแนะนำไฟล์ CSS ภายนอกหลายไฟล์ คุณสามารถใช้ลิงก์เพื่อแนะนำ CSS จากนั้นใช้วิธี @import ในไฟล์ CSS นี้ ไฟล์ CSS อื่นๆ อีกหลายไฟล์ ซึ่งดูง่ายกว่าในการจัดการ

ทำไมต้องใช้ลิงค์

สาเหตุหลักประการหนึ่งในการใช้วิธีการลิงก์คือคุณสามารถอนุญาตให้ผู้ใช้เปลี่ยนสไตล์ CSS ได้ เบราว์เซอร์สมัยใหม่ เช่น Firefox, Opera และ Safari ล้วนรองรับแอตทริบิวต์ rel="alternate stylesheet" (นั่นคือ คุณสามารถเลือกสไตล์ที่แตกต่างกันได้ บนเบราว์เซอร์) แน่นอนคุณสามารถใช้ Javascript เพื่อเปิดใช้งาน IE เพื่อรองรับผู้ใช้ที่เปลี่ยนสไตล์ได้

หากคุณไม่เข้าใจ โปรดเข้าสู่หน้านี้แล้วคลิก "ดู - รูปแบบหน้า" ใน Firefox

ปัญหาเล็กๆ น้อยๆ กับ @import

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

อัปเดต 11-04: @import จะทำให้เวลาในการโหลดโดยรวมของ CSS นานขึ้น และจะทำให้ลำดับการดาวน์โหลดไฟล์ใน IE เปลี่ยนไป ตัวอย่างเช่น ไฟล์สคริปต์ที่วางหลัง @import จะถูกดาวน์โหลดก่อน CSS

สำหรับรายละเอียด โปรดดูที่ http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

ควรใช้วิธีการใด?

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