Kita tahu bahwa ada dua cara untuk mereferensikan CSS eksternal di halaman web, yaitu: @import dan link. Kita sering mendengar orang mengatakan lebih baik menggunakan link untuk memperkenalkan CSS, tapi tahukah Anda alasannya?
link
Tautan untuk menghubungkan CSS eksternal ke halaman web. Bentuk spesifiknya adalah
@impor
Perbedaan antara import dan link adalah dapat memasukkan beberapa file CSS lainnya ke dalam satu file CSS Bentuk spesifiknya adalah
Mengapa menggunakan @import
Kebanyakan orang menggunakan @import karena browser lama tidak mendukung @import, yang berarti kita dapat menggunakan @import untuk memperkenalkan gaya CSS yang hanya dapat diurai oleh browser modern.
Gunakan kode berikut untuk mencegah browser IE6 dan di bawahnya menguraikan CSS (metode di bawah IE6 dalam keadaan rusak dan akan dihilangkan di sini)
@import url(../style.css) screen; Alasan utama lainnya adalah ketika halaman web Anda perlu memperkenalkan beberapa file CSS eksternal. Anda dapat menggunakan link untuk memperkenalkan CSS, dan kemudian menggunakan metode @import dalam file CSS ini Perkenalkan beberapa file CSS lainnya. Ini terlihat lebih mudah untuk dikelola.
Mengapa menggunakan tautan
Salah satu alasan utama menggunakan metode link adalah Anda dapat mengizinkan pengguna untuk mengganti gaya CSS. Browser modern seperti Firefox, Opera, dan Safari semuanya mendukung atribut rel="alternate stylesheet" (yaitu, Anda dapat memilih gaya yang berbeda. di browser). Tentu saja, Anda juga dapat menggunakan Javascript untuk mengaktifkan IE guna mendukung perubahan gaya pengguna.
Jika Anda tidak mengerti, silakan masuk ke halaman ini dan klik "Lihat - Gaya Halaman" di Firefox.
Masalah kecil dengan @import
Jika tag head halaman web Anda sangat sederhana, hanya dengan atribut @import, saat pengguna menjelajah dengan kecepatan Internet yang lambat, dia akan melihat halaman tanpa gaya, dan kemudian dia dapat melihat halaman tersebut saat file CSS diunduh .style. Untuk menghindari masalah seperti itu, Anda perlu memastikan bahwa setidaknya ada satu skrip atau tag tautan di kepala.
Pembaruan 04-11: @import akan membuat waktu pemuatan keseluruhan CSS menjadi lebih lama. Dan ini akan menyebabkan urutan pengunduhan file diubah di IE. Misalnya, file skrip yang ditempatkan setelah @import akan diunduh sebelum CSS.
Untuk detailnya, silakan merujuk ke http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Metode mana yang harus digunakan?
Saat ini, tampaknya tautan tersebut lebih cocok (atau lebih populer) untuk situs web kecil. Tentu saja, jika kami perlu memodulasi CSS di masa mendatang, kami pasti akan menggunakan @import.