Ada sejumlah cara untuk menerapkan gaya CSS ke halaman web, termasuk lembar gaya eksternal atau bahkan gaya sebaris. Jika Anda menggunakan style sheet eksternal, yang merupakan cara yang disarankan untuk mendikte tampilan dan nuansa dokumen HTML, salah satu pendekatannya adalah menggunakan
@impor.
Itu
@impor aturan memungkinkan Anda untuk lembar gaya eksternal penting dalam dokumen Anda - baik ke halaman HTML atau bahkan ke dalam dokumen CSS lainnya. Memecahkan banyak gaya menjadi sejumlah file yang lebih kecil dan terfokus (satu untuk tata letak, satu untuk tipografi, satu untuk gambar, dll.) Kadang-kadang dapat mempermudah mengelola file-file itu dan berbagai gaya yang dikandungnya. Jika Anda ingin menikmati manfaat itu, maka mengimpor berbagai file itu adalah apa yang harus Anda lakukan untuk membuat semuanya berfungsi untuk tampilan halaman web Anda.
Mengimpor Ke HTML
Untuk menggunakan
@impor aturan di HTML Anda, Anda akan menambahkan berikut ke
dokumen:
:
Kode ini sekarang akan mengimpor style sheet ini untuk digunakan pada halaman HTML ini dan Anda dapat mengatur semua gaya Anda dalam satu file itu. Kelemahan untuk stylesheet penting dengan cara ini adalah bahwa metode ini tidak memungkinkan untuk unduhan paralel. Halaman tersebut harus mengunduh seluruh stylesheet sebelum pindah ke sisa halaman, termasuk file CSS lainnya yang Anda impor menggunakan metode ini. Ini akan berdampak negatif pada kecepatan dan kinerja unduhan laman Anda. Mempertimbangkan seberapa pentingnya kinerja halaman untuk kesuksesan situs web, kekurangan ini saja dapat menjadi alasan mengapa Anda tidak ingin menggunakan @import.
Pendekatan alternatif
Sebagai alternatif untuk menggunakan
@impor di HTML Anda, Anda dapat menautkan ke file CSS seperti ini:
Ini berfungsi sangat mirip dengan
@impor karena memungkinkan Anda mengelola semua CSS dari satu lokasi / file pusat, tetapi metode ini lebih disukai dari perspektif unduhan. Jika Anda masih ingin menyegmentasikan berbagai jenis gaya ke dalam file terpisah, Anda dapat terus melakukannya dan menggunakan fungsionalitas @import di dalam file master CSS Anda. Ini berarti file CSS eksternal Anda masih bisa dikelola secara individual, tetapi karena semuanya diimpor ke dalam satu master CSS, kinerja ditingkatkan.
Mengimpor Ke CSS
Menggunakan
contoh kode di atas akan membawa file "default.css" untuk digunakan pada halaman HTML Anda. Di dalam file CSS itu, Anda akan memiliki berbagai gaya halaman. Anda dapat memiliki semua gaya yang diperinci pada satu halaman tersebut, atau Anda dapat menggunakan @import untuk memisahkannya agar lebih mudah dikelola. Sekali lagi, katakanlah kita menggunakan 4 file CSS terpisah - satu untuk tata letak, satu untuk tipografi, dan satu lagi untuk gambar. File keempat adalah file "master" kami yang merupakan tautan halaman kami (untuk contoh ini, ini adalah "default.css"). Di bagian paling atas dari file master CSS itu kita dapat menambahkan aturan yang ditunjukkan di bawah ini:
@import url ('/ styles / layout.css'); @ impor url ('/ styles / type.css'); @ impor url ('/ styles / images.css');
Perhatikan bahwa aturan-aturan ini harus jadilah sebelum semua konten lain dalam file CSS Anda agar berfungsi. Anda tidak dapat memiliki gaya CSS lain sebelum aturan impor ini.
Di bawah aturan impor tersebut, Anda dapat menambahkan gaya CSS apa pun lainnya yang ingin Anda miliki di lembar default Anda. Ketika file CSS utama dimuat, pertama-tama mengimpor file terpisah ini dan menambahkan gayanya ke bagian paling atas dari stylesheet. Kemudian akan memiliki semua gaya Anda yang lain di bawah yang diimpor ini, membuat file CSS lengkap yang akan digunakan browser web untuk menampilkan situs Anda. Anda mendapatkan manfaat dari mengelola file yang lebih kecil dan lebih terfokus sementara masih memiliki satu stylesheet yang ditautkan ke dalam HTML itu.
Menggunakan @import untuk Pertanyaan Media
Satu hal yang dapat Anda pertimbangkan untuk melakukannya adalah memisahkan kueri media situs web Anda untuk gaya situs web responsif menjadi file yang terpisah. Karena gaya responsif ini dapat membingungkan ketika dilihat bersama dengan aturan gaya situs lainnya, membuatnya sendiri pada file yang berbeda mungkin menarik. Satu perhatian dengan pendekatan ini adalah, sejak Anda
@impor aturan harus menjadi yang pertama, ini berarti bahwa permintaan media Anda akan dimuat sebelum sisa gaya situs Anda. Saat membuat situs responsif seluler pertama yang mempertimbangkan kinerja, ini mungkin menjadi masalah. Karena alasan ini, disarankan agar Anda tidak membagi gaya responsif situs Anda secara terpisah dan menggunakannya
@impor untuk membawa mereka ke situs Anda. Ya, mungkin ada manfaatnya, tetapi kerugiannya lebih besar daripada manfaatnya.
Apakah Saya Perlu Menggunakan @import?
Tidak kamu tidak. Banyak situs hanya menampilkan semua gaya utama mereka di dalam satu file dan, sebesar file itu mungkin, itu dikelola dengan cara itu (ini adalah bagaimana saya melakukannya dalam pekerjaan saya sendiri). Jika kamu menemukan
@impor membantu, maka itu bisa menjadi bagian dari alur kerja Anda. Jika tidak, Anda dapat dengan aman membangun halaman web itu stylesheet tunggal Anda dari semua aturan CSS Anda.
Dukungan Browser
Browser yang sangat lama memiliki masalah dengan beberapa aturan @import ini, tetapi browser ini tidak mungkin menjadi masalah bagi Anda akhir-akhir ini. Hal ini terutama benar sekarang bahwa batas akhir kehidupan untuk versi Internet Explorer yang lebih lama telah berlalu. Pada akhirnya, jika Anda memutuskan untuk menggunakannya
@impor aturan dalam HTML atau CSS Anda, Anda seharusnya tidak mengalami masalah dengan versi lama browser web kecuali Anda memiliki kebutuhan yang aneh untuk mendukung versi IE yang sangat lama.
Diedit oleh Jeremy Girard
