Perbedaan antara @import dan link di CSS

118

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!

css import hyperlink

— Omar Abid
sumber

142

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.

— mercator
sumber

Terima kasih - hyperlink yang bagus - terutama yang pertama.

— Faisal Vali

6

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.

— merkuro
sumber

6

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.).

— zenazn
sumber

5

Untuk menentukan media dimungkinkan untuk pernyataan @import juga.

— Georg Schölly

Betulkah? Saya kira Anda bisa meletakkan jenis media pada tag gaya Anda, tetapi bagi saya itu tampak seperti retasan.

— zenazn

5

Anda dapat melakukan misalnya "@import url (style.css) screen, print", meskipun IE7 dan sebelumnya tidak mendukung jenis media tersebut.

— mercator

5

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)

— Kera-inago
sumber

2

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

— Matthew James Taylor
sumber

1

Kutipan: "Bayangkan kita memiliki situs web 1000 halaman dan kita menautkan ke file CSS dari setiap halaman di situs. Sekarang mari kita bayangkan kita ingin menambahkan file CSS kedua ke semua halaman itu. Kita bisa mengedit semua 1000 file HTML dan tambahkan tautan CSS kedua atau cara yang jauh lebih baik adalah dengan mengimpor file CSS kedua dari dalam file pertama. Kami baru saja menghemat banyak jam kerja! "

— Casebash

1

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.

— Barry Gallagher
sumber

1

@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).

— Gabriel Hurley
sumber

0

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.

— Silas S. Brown
sumber