Perbedaan antara @import dan link di CSS

Saya mempelajari beberapa CSS untuk mengubah template proyek saya. Saya sampai pada masalah ini dan tidak menemukan jawaban yang jelas di web. Apakah ada perbedaan antara menggunakan @import atau link di CSS?

Penggunaan @import

<style>@import url(Path To stylesheet.css)</style>

Penggunaan Link

<link rel="stylesheet" href="Path To stylesheet.css">

Apa cara terbaik untuk melakukannya? dan mengapa? Terima kasih!

Secara teori, satu-satunya perbedaan di antara mereka adalah @importmekanisme CSS untuk memasukkan style sheet dan <link>mekanisme HTML. Namun, browser menanganinya secara berbeda, memberikan <link>keuntungan yang jelas dalam hal kinerja.

Steve Souders menulis posting blog ekstensif yang membandingkan dampak keduanya <link>dan @import(dan semua jenis kombinasi keduanya) yang disebut " jangan gunakan @import ". Judul itu cukup banyak berbicara untuk dirinya sendiri.

Yahoo! juga menyebutkannya sebagai salah satu praktik terbaik kinerja mereka (ditulis bersama oleh Steve Souders): Pilih <link>daripada @import

Selain itu, menggunakan <link>tag memungkinkan Anda menentukan stylesheet "pilihan" dan alternatif . Anda tidak bisa melakukan itu dengan @import.

Anda dapat menggunakan perintah import untuk mengimpor CSS lain di dalam file css yang tidak dimungkinkan dengan perintah link. Browser yang benar-benar lama tidak dapat (IE4, IE5 sebagian) menangani fungsionalitas impor. Selain itu, beberapa pustaka yang mengurai xhtml / html Anda bisa gagal mendapatkan impor style sheet. Perlu diketahui bahwa impor Anda harus dilakukan sebelum semua deklarasi CSS lainnya.

Tidak ada perbedaan nyata saat ini, tetapi @importtidak ditangani dengan benar oleh browser lama (Netscape 4, dll.), Sehingga @importperetasan dapat digunakan untuk menyembunyikan aturan CSS 2 dari browser lama ini.

Sekali lagi, kecuali Anda mendukung browser yang benar-benar lama, tidak ada perbedaan.

Jika saya menjadi Anda, saya akan menggunakan <link>varian pada halaman HTML Anda, karena memungkinkan Anda untuk menentukan hal-hal seperti jenis media (cetak, layar, dll.).

Perintah <link> dapat memungkinkan beberapa css dimuat dan diinterpretasikan secara asinkron.

direktif @import memaksa browser * untuk menunggu hingga skrip yang diimpor dimuat sebaris ke skrip induk sebelum dapat diproses dengan benar oleh mesinnya, karena secara teknis ini hanya satu skrip.

Banyak skrip minimisasi css (dan bahasa seperti less atau sass) akan secara otomatis menggabungkan skrip terkait ke dalam skrip utama karena pada akhirnya menyebabkan lebih sedikit overhead transfer.

* (tergantung browsernya)

Artikel ini mungkin berguna di sini: 4 metode menambahkan CSS ke HTML: link, embed, inline dan import

Saat saya menggunakan aturan @import, biasanya untuk mengimpor lembar gaya dalam lembar gaya yang ada (meskipun saya tidak suka melakukannya untuk memulai). Tetapi untuk menjawab pertanyaan Anda, tidak, saya tidak percaya ada perbedaan apa pun. Pastikan untuk meletakkan URL dalam tanda kutip ganda untuk memenuhi XHTML yang valid.

@import umumnya dimaksudkan untuk digunakan dalam lembar gaya eksternal daripada sebaris seperti dalam contoh Anda. Jika Anda benar-benar - ingin menyembunyikan lembar gaya dari browser yang sangat lama, Anda dapat menggunakannya sebagai peretasan untuk mencegah mereka menggunakan lembar gaya itu. 

Secara keseluruhan, <link>tag diproses lebih cepat daripada aturan @import (yang tampaknya agak lambat sejauh menyangkut mesin pemroses css).

Microsoft Internet Explorer 9 (MSIE9) tampaknya tidak menangani @import dengan benar. Amati entri ini dari log Apache saya (alamat IP disembunyikan tetapi whoisdikatakan itu milik Microsoft sendiri): HTML utama yang ditautkan ke screen.css yang memiliki

@import url("print.css") print;
@import url("speech.css") aural;

yang sekarang akan saya ubah menjadi linkelemen dalam HTML, karena tampaknya MSIE9 mengeluarkan dua permintaan yang salah ke server, mendapatkan kesalahan 404 yang dapat saya lakukan tanpa:

[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

Ada yang permintaan yang tepat untuk file ini setelah itu, tapi kita bisa melakukannya tanpa ini "menembak pada server pertama, parse urlsetelah" logika.