Jika Anda telah melihat-lihat Web dan melihat kode berbagai halaman web, satu hal yang mungkin Anda perhatikan adalah bahwa situs yang berbeda menyertakan file CSS eksternal mereka dengan cara yang berbeda - baik dengan menggunakan pendekatan @import atau dengan menautkan ke File CSS. Apa Perbedaan Antara @impor dan tautan untuk CSS dan bagaimana Anda memutuskan mana yang lebih baik untuk Anda? Mari lihat!
Perbedaan Antara & # 64; impor dan & lt; tautan & gt;
Sebelum memutuskan metode mana yang akan digunakan untuk menyertakan style sheet Anda, Anda harus memahami metode apa yang dimaksudkan untuk digunakan.
- Menghubungkan adalah metode pertama untuk menyertakan style sheet eksternal di halaman Web Anda. Ini dimaksudkan untuk menghubungkan bersama halaman Web Anda dengan style sheet Anda. Ini ditambahkan ke
dokumen HTML Anda seperti ini:@import - Mengimpor memungkinkan Anda untuk mengimpor satu lembar gaya ke yang lain. Ini sedikit berbeda dari skenario tautan, karena Anda dapat mengimpor style sheet di dalam style sheet yang terhubung. Jika Anda menyertakan @import di kepala dokumen HTML Anda, itu ditulis seperti ini:
Dari sudut pandang standar, tidak ada perbedaan antara menghubungkan ke style sheet eksternal atau mengimpornya. Bagaimanapun cara yang benar dan cara yang baik akan bekerja dengan baik (dalam banyak kasus). Namun, ada beberapa alasan Anda mungkin ingin menggunakan salah satu dari yang lain.
Mengapa Menggunakan & # 64; mengimpor?
Bertahun-tahun yang lalu, alasan paling umum yang diberikan untuk menggunakan @import sebagai gantinya (atau bersama dengan) adalah karena peramban yang lebih lama tidak mengenali @import, sehingga Anda dapat menyembunyikan gaya dari mereka. Dengan mengimpor style sheet Anda, Anda pada dasarnya akan membuatnya tersedia untuk browser yang lebih modern, standar yang sesuai sementara "menyembunyikan" mereka dari versi browser yang lebih lama.
Penggunaan lain untuk metode @import adalah menggunakan beberapa style sheet pada halaman, sementara hanya menyertakan satu link di
dokumen Anda. Sebagai contoh, sebuah perusahaan mungkin memiliki style sheet global untuk setiap halaman di situs, dengan sub-bagian memiliki gaya tambahan yang hanya berlaku untuk sub-bagian tersebut. Dengan menautkan ke lembar gaya sub-bagian dan mengimpor gaya global di bagian atas lembar gaya itu, Anda tidak harus mempertahankan style sheet raksasa dengan semua gaya untuk situs dan setiap sub-bagian. Satu-satunya persyaratan adalah bahwa aturan @import harus datang sebelum aturan gaya Anda yang lain. Juga, pastikan untuk mengingat bahwa warisan masih bisa menjadi masalah.Mengapa Gunakan & lt; tautan & gt ;?
Alasan nomor satu untuk menggunakan lembar gaya tertaut adalah menyediakan lembar gaya alternatif untuk pelanggan Anda. Peramban seperti Firefox, Safari, dan Opera mendukung atribut rel = "alternate stylesheet" dan ketika ada satu yang tersedia akan memungkinkan pemirsa untuk beralih di antara mereka. Anda juga dapat menggunakan pengalih JavaScript untuk beralih di antara lembar gaya di IE. Ini paling sering digunakan dengan Zoom Layouts untuk keperluan aksesibilitas.
Salah satu kelemahan untuk menggunakan @import adalah bahwa jika Anda memiliki
yang sangat sederhana hanya dengan aturan @import di dalamnya, halaman Anda dapat menampilkan "flash of unstyled content" (FOUC) saat dimuat. Ini bisa menggelegar bagi pemirsa Anda. Perbaikan sederhana untuk ini adalah untuk memastikan Anda memiliki setidaknya satu elemen tambahan atau