ฉันกำลังเรียนรู้ CSS เพื่อปรับแต่งเทมเพลตโครงการของฉัน ฉันพบปัญหานี้และไม่พบคำตอบที่ชัดเจนบนเว็บ การใช้ @import หรือ link ใน CSS แตกต่างกันอย่างไร
การใช้ @import
<style>@import url(Path To stylesheet.css)</style>การใช้ลิงค์
<link rel="stylesheet" href="Path To stylesheet.css">วิธีที่ดีที่สุดในการทำคืออะไร? และทำไม? ขอบคุณ!
คำตอบ:
ในทางทฤษฎีข้อแตกต่างเพียงอย่างเดียว@importคือกลไก CSS ในการรวมสไตล์ชีตและ<link>กลไก HTML อย่างไรก็ตามเบราว์เซอร์จัดการกับพวกเขาแตกต่างกันทำให้<link>มีข้อได้เปรียบที่ชัดเจนในแง่ของประสิทธิภาพ
Steve Souders เขียนบล็อกโพสต์ที่ครอบคลุมโดยเปรียบเทียบผลกระทบของทั้งสอง<link>และ@import(และการผสมผสานทุกประเภท) ที่เรียกว่า " ไม่ใช้ @import " ชื่อนั้นค่อนข้างพูดสำหรับตัวมันเอง
Yahoo! ยังระบุว่าเป็นแนวทางปฏิบัติที่ดีที่สุดในการปฏิบัติงาน (ร่วมเขียนโดย Steve Souders): เลือก<link>มากกว่า @import
นอกจากนี้การใช้<link>แท็กยังช่วยให้คุณสามารถกำหนด"ที่ต้องการ" และสไตล์ชีทอื่นได้ @importคุณไม่สามารถทำเช่นนั้นด้วย
คุณสามารถใช้คำสั่ง import เพื่ออิมพอร์ต CSS อื่นภายในไฟล์ css ซึ่งใช้คำสั่ง link ไม่ได้ เบราว์เซอร์เก่าจริงๆไม่สามารถ (IE4, IE5 บางส่วน) จัดการกับฟังก์ชันการนำเข้า นอกจากนี้บางไลบรารีที่แยกวิเคราะห์ xhtml / html ของคุณอาจล้มเหลวในการนำเข้าสไตล์ชีต โปรดทราบว่าการนำเข้าของคุณควรมาก่อนการประกาศ CSS อื่น ๆ ทั้งหมด
ไม่มีความแตกต่างอย่างแท้จริงในวันนี้ แต่@importเบราว์เซอร์รุ่นเก่าไม่ได้รับการจัดการอย่างถูกต้อง (Netscape 4 เป็นต้น) ดังนั้นจึงสามารถใช้@importแฮ็กเพื่อซ่อนกฎ CSS 2 จากเบราว์เซอร์เก่าเหล่านี้ได้
อีกครั้งเว้นแต่คุณจะรองรับเบราว์เซอร์รุ่นเก่าจริงๆก็ไม่มีความแตกต่าง
อย่างไรก็ตามถ้าฉันเป็นคุณฉันจะใช้<link>ตัวแปรในหน้า HTML ของคุณเพราะมันช่วยให้คุณระบุสิ่งต่างๆเช่นประเภทสื่อ (พิมพ์หน้าจอ ฯลฯ )
คำสั่ง <link> สามารถอนุญาตให้โหลดและแปลความหมายแบบไม่ตรงกันได้หลาย css
คำสั่ง @import บังคับให้เบราว์เซอร์ * รอจนกว่าสคริปต์ที่นำเข้าจะโหลดแบบอินไลน์ไปยังสคริปต์หลักก่อนที่จะสามารถประมวลผลได้อย่างถูกต้องโดยเอ็นจิ้นเนื่องจากในทางเทคนิคแล้วมันเป็นเพียงสคริปต์เดียว
สคริปต์การย่อขนาด css จำนวนมาก (และภาษาเช่น less หรือ sass) จะเชื่อมโยงสคริปต์ที่เชื่อมโยงเข้ากับสคริปต์หลักโดยอัตโนมัติเนื่องจากสุดท้ายจะทำให้ค่าใช้จ่ายในการถ่ายโอนน้อยลง
* (ขึ้นอยู่กับเบราว์เซอร์)
บทความนี้สามารถนำไปใช้ได้ที่นี่: 4 วิธีในการเพิ่ม CSS ลงใน HTML: ลิงก์ฝังอินไลน์และนำเข้า
เมื่อฉันใช้กฎ @import โดยทั่วไปแล้วจะนำเข้าสไตล์ชีตภายในสไตล์ชีตที่มีอยู่ (แม้ว่าฉันจะไม่ชอบที่จะเริ่มต้นด้วยก็ตาม) แต่เพื่อตอบคำถามของคุณไม่ฉันไม่เชื่อว่ามีความแตกต่าง เพียงตรวจสอบให้แน่ใจว่าได้ใส่ URL ในเครื่องหมายคำพูดคู่เพื่อให้สอดคล้องกับ XHTML ที่ถูกต้อง
โดยทั่วไปแล้ว @import จะใช้ในสไตล์ชีตภายนอกแทนที่จะใช้แบบอินไลน์เหมือนในตัวอย่างของคุณ หากคุณจริงๆอยากจะซ่อนสไตล์ชีตจากเบราว์เซอร์ที่เก่าแก่มากที่คุณสามารถใช้ที่เป็นสับเพื่อป้องกันไม่ให้พวกเขาจากการใช้สไตล์ชีตที่
โดยรวมแล้ว<link>แท็กได้รับการประมวลผลเร็วกว่ากฎ @import (ซึ่งเห็นได้ชัดว่าค่อนข้างช้าเท่าที่เครื่องมือประมวลผล css เกี่ยวข้อง)
Microsoft Internet Explorer 9 (MSIE9) ดูเหมือนจะจัดการ @import ไม่ถูกต้อง สังเกตรายการเหล่านี้จากบันทึก Apache ของฉัน (ซ่อนที่อยู่ IP แต่whoisบอกว่าเป็นของ Microsoft เอง): HTML หลักที่เชื่อมโยงกับ screen.css ซึ่งมี
@import url("print.css") print;
@import url("speech.css") aural;ซึ่งตอนนี้ฉันกำลังจะเปลี่ยนเป็นlinkองค์ประกอบใน HTML เพราะดูเหมือนว่า MSIE9 จะส่งคำขอที่ไม่ถูกต้องสองรายการไปยังเซิร์ฟเวอร์ได้รับข้อผิดพลาด 404 ที่ฉันสามารถทำได้โดยไม่ต้อง:
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.netมีเป็นคำขอที่เหมาะสมสำหรับไฟล์เหล่านั้น แต่เราสามารถทำได้โดยไม่ต้องนี้ "ยิงที่เซิร์ฟเวอร์แรกแจงurlหลัง" ตรรกะ