Video: AFTER EFFECTS BASICS 2024
Karena CSS versi 2, dimungkinkan untuk membuat gaya yang ditargetkan secara khusus ke perangkat yang berbeda dengan mengubah jenis media. Misalnya, biasanya membuat lembar gaya khusus untuk printer yang menghilangkan gambar latar belakang dan elemen desain lainnya yang dapat membuat laman sulit dibaca saat dicetak.
CSS 3 mengambil ide ini selangkah lebih maju, sehingga memungkinkan untuk menargetkan iPad dan iPhone dalam orientasi potret dan lansekap. Situs Jelly Rancher yang digunakan di sini sebagai contoh mencakup dua rangkaian gaya: Satu set gaya bekerja dengan baik di browser desktop terbaru, dan lembaran gaya tambahan dirancang untuk iPhone dan iPad.
Di sini Anda melihat hasil penggunaan dua lembar gaya untuk menyebabkan halaman HTML yang sama ditampilkan secara berbeda dalam mode landscape dan portrait.
Situs ini dimulai dengan membuat satu style sheet yang dirancang untuk browser desktop yang diberi nama main. css Lembar gaya itu tertaut ke halaman dengan kode berikut:
Tautan selanjutnya ditambahkan ke style sheet yang dibuat untuk mode landscape dan portrait pada iPad dan iPhone. Perhatikan bahwa CSS 3 tidak secara khusus menyertakan cara untuk menargetkan iPad atau iPhone, namun Anda dapat menggunakan CSS 3 untuk menargetkan ukuran layar.
Dengan demikian, situs tersebut menargetkan iPhone dan iPad dengan menentukan lebar maksimum dan minimum yang sama dengan ukuran masing-masing perangkat. Untuk lebih membedakan lembaran gaya, orientasi ditambahkan untuk mengidentifikasi style sheet mana yang harus diterapkan oleh browser saat perangkat dalam mode potret atau lansekap.
Berikut adalah link ke dua style sheet untuk iPad:
Catatan disertakan dalam kode di antara tag komentar agar mudah untuk mengidentifikasi style sheet yang berbeda dalam HTML. Misalnya, baris
Berikut adalah tautan ke dua lembar gaya untuk iPhone:
