Pengenalan tentang pengertian, kelebihan dan kekurangan CSS Sprite untuk layout CSS

Teknologi CSS Sprite Pada awal tahun 2005, Dave Shea, pemilik CSS Zengarden, menerbitkan penjelasan rinci tentang teknologi ini di ALA.

Awalnya, ini hanya diedarkan di kalangan pemain CSS sebagai metode produksi. Kemudian, 14 Aturan untuk Memuat Situs Web Lebih Cepat keluar dan diedarkan di kalangan teknisi. Aturan pertama, Buat Lebih Sedikit Permintaan HTTP, disebutkan CSS Sprite. Jadi goblin kecil ini menjadi populer, dan bahkan alat generasi online pun bermunculan, yang tidak dapat dihentikan. Akhir-akhir ini banyak blog dalam negeri yang menyebutkan CSS Sprite. Contoh yang paling terkenal adalah animasi di bawah google.co.kr. Pada rilis terbaru YUI, Sprite CSS juga digunakan. Hampir semua gambar dekoratif CSS ditutupi oleh gambar berukuran 40x2000. Facebook, situs jejaring sosial besar, baru-baru ini menggunakan gambar berukuran 22×1150 untuk menutupi semua ikon. Tiba-tiba, Sprite CSS ada dimana-mana.

Cara kerja Sprite CSS

Kita tahu bahwa sejak revolusi CSS, HTML cenderung bersifat semantik. Secara umum, konten dekoratif tidak lagi ditulis dalam tag tetapi tugas rendering diserahkan kepada CSS. GUI penuh warna dan sangat diperlukan untuk dekorasi dengan berbagai gambar indah. Metode produksi di era baru adalah mengisi HTML dengan berbagai hook dan kemudian membiarkan CSS menanganinya.

Ketika gambar perlu digunakan, ini saat ini dicapai melalui atribut CSS background-image dikombinasikan dengan background-repeat, background-position, dll. (Penyimpangan: Mengapa saya menarik tahap saat ini, karena jika browser mendukung konten di masa mendatang , metode implementasi tambahan). Protagonis kami, Anda pasti sudah bisa menebaknya, adalah posisi latar belakang. Dengan menyesuaikan nilai posisi latar belakang, gambar latar belakang dapat muncul di hadapan Anda dalam tampilan berbeda. Faktanya, tampilan gambar secara keseluruhan tidak berubah karena adanya perubahan posisi gambar, Anda hanya melihat apa yang seharusnya Anda lihat. Ini seperti tanggal pada jam tangan. Anda melihatnya hari ini 21 dan besok 22 karena posisinya melonjak satu spasi. Jadi Anda mungkin tahu bahwa CSS Sprite umumnya hanya dapat digunakan di dalam kotak (box) yang berukuran tetap, sehingga bagian-bagian yang tidak boleh dilihat dapat diblokir.

Mari kita gunakan sprite.png YUI sebagai contoh. Jika kita memiliki potongan kode seperti itu, max melambangkan maksimalisasi dan min melambangkan minimalisasi. Kita perlu mencocokkannya dengan gambar-gambar indah yang sesuai (sehingga situs web kita bisa menarik):

Kedua kelas menggunakan gambar yang sama:

Kita melihat awan abu-abu ya karena kita belum menentukan posisi background yang defaultnya 0 0. Anda bisa melihat di sprite.png. Posisi ini adalah blok abu-abu. Oke, kita perlu mencari posisi tanda plus yang melambangkan maksimalisasi dan tanda minus yang melambangkan minimalisasi. Setelah dilakukan pengukuran, tombol maksimalkan terletak pada 350px pada sumbu Y, dan tombol perkecil terletak pada 400px pada sumbu Y. Pikirkan tentang bagaimana kita dapat menampilkannya. Tentu saja, kita perlu mengupgrade sprite.png, dan kodenya adalah sebagai berikut:

Kali ini kami berhasil!

Kelebihan Sprite CSS

Kita telah belajar dari sebelumnya bahwa mengapa Sprite CSS tiba-tiba kehabisan tenaga terkait dengan kemampuannya untuk meningkatkan kinerja situs web. Tentu saja ini adalah salah satu keuntungan besarnya. Sejumlah besar gambar dengan metode produksi biasa kini digabungkan menjadi satu gambar, yang sangat mengurangi jumlah koneksi HTTP. Jumlah koneksi HTTP mempunyai pengaruh penting terhadap kinerja pemuatan website.

Kekurangan Sprite CSS

Dalam hal pemeliharaan, ini umumnya merupakan pedang bermata dua. Beberapa orang mungkin menyukainya dan beberapa mungkin tidak, karena setiap kali gambar diubah, Anda harus menghapus atau menambahkan konten ke gambar, yang sepertinya agak merepotkan. Dan menghitung posisi gambar (terutama gambar dengan ribuan piksel) juga cukup tidak menyenangkan. Tentu saja dengan slogan kinerja, semua itu bisa diatasi.

Karena posisi gambar harus ditetapkan pada nilai absolut, fleksibilitas seperti pusat akan hilang.

Seperti yang kami sebutkan sebelumnya, ukuran kotak harus dibatasi sebelum Sprite CSS dapat digunakan, jika tidak maka dapat mengganggu gambar. Artinya, Sprite CSS tidak cocok dalam beberapa situasi yang memerlukan latar belakang ubin non-searah dan penskalaan halaman web. Solusi YUI adalah meningkatkan jarak antar gambar sehingga skala terbatas dapat dipertahankan.

Ringkasan Sprite CSS

Performa mengalahkan segalanya. Sprite CSS adalah teknologi yang layak dipromosikan. Ini sangat cocok untuk FIR, seperti penggantian ikon berukuran tetap. Untuk menjaga kompatibilitas, sebaiknya jaga jarak bagian-bagian gambar.