Fitur CSS Menarik yang Harus Anda Ketahui

Minggu lalu kita berbicara tentang elemen semu dan kelas semu di CSS. Dalam posting itu, kami melihat bagaimana fitur CSS ini memungkinkan kami menghasilkan kode yang lebih ringkas, dapat dipahami, dan mudah dirawat. Hari ini saya ingin berbagi dengan Anda beberapa properti CSS tambahan untuk membangun situs web adaptif yang memperhitungkan preferensi pengunjung Anda .

Rasio Aspek dengan object-fit object-position

object-fit adalah properti CSS yang memungkinkan Anda untuk mengatur bagaimana elemen pengganti (misalnya gambar) harus diubah ukurannya agar sesuai dengan wadahnya. Mari kita lihat apa artinya ini dengan contoh konkret, ya?

Misalkan kita memiliki gambar vertikal berikut:

dan kami ingin menampilkannya di dalam area berikut:

yang tingginya 15em dan mengambil 80% dari lebar yang tersedia. Pada prinsipnya, Anda mungkin berpikir bahwa yang harus kita lakukan hanyalah mengatur width dan height tertentu untuk gambar kita, bukan?

 .custom-size { height: 15em; width: 80%; }

Nah, jika Anda melakukannya, Anda akan melihat bahwa rasio aspek gambar kacau:

Untuk mencegah gambar terdistorsi saat menggunakan lebar dan tinggi tertentu, pengembang dulu mengandalkan (dan beberapa masih melakukannya) properti background CSS dari div . Jadi, alih-alih menambahkan gambar menggunakan tag img , kami biasa membuat wadah div :

 <div></div>

atur dimensi yang benar ke div tersebut, lalu tambahkan gambar sebenarnya melalui CSS menggunakan properti background-size dan background-position :

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

Dan di sini Anda dapat melihat hasilnya:

Menskalakan dan memotong gambar dengan menggunakan properti background CSS pada tag div adalah solusi yang buruk, karena Anda tidak lagi menggunakan tag HTML yang benar secara semantik: img . Selain itu, tag img menyertakan banyak properti keren yang akan menghasilkan situs web yang lebih cepat dan lebih mudah diakses: properti alt yang mendeskripsikan gambar, srcset untuk membuatnya responsif, loading untuk memuatnya lambat, dan seterusnya.

Jika Anda ingin menskalakan dan memotong gambar agar object-fit dengan beberapa dimensi tertentu tanpa mendistorsi gambar itu sendiri, yang harus Anda lakukan adalah menggunakan properti CSS object-position dan posisi objek, yang berfungsi sebagai background-size latar belakang dan background-position melakukan:

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

Jika Anda menerapkan aturan sebelumnya ke tag img :

 <img class="custom-size" src="…/image.jpg" />

ini adalah hasil yang Anda dapatkan:

yang persis apa yang Anda tertarik, bukan?

Jika Anda ingin tahu lebih banyak tentang properti ini, berikut adalah tautan dengan semua informasi yang diperlukan.

Desain Adaptif dengan Kueri Media

Kueri media adalah mekanisme yang memungkinkan Anda menambahkan aturan CSS ke situs web Anda berdasarkan karakteristik perangkat atau aplikasi tempat pengunjung Anda mengakses web. Saya yakin Anda cukup familiar dengan mereka, karena kueri media adalah dasar untuk membangun situs web yang responsif, tetapi masih banyak lagi yang dapat Anda lakukan dengan mereka!

Kueri Media Klasik

Menggunakan kueri media dalam stylesheet CSS semudah menambahkan kata kunci @media dengan dua hal: di satu sisi, kondisi yang menjelaskan kapan kueri media aktif dan, di sisi lain, kumpulan aturan CSS yang harus dimuat ketika kondisi terpenuhi. Itu sebabnya kueri media adalah dasar untuk membangun desain responsif: Anda cukup menerapkan satu set aturan atau lainnya tergantung pada width browser pengunjung.

Misalnya, anggap Anda ingin mengubah bilah sisi paragraf berikut:

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Singa di teras terkadang jelek, tapi bergetar di luar ruangan. Namun kebutuhan bagi pengusaha disebut thermal stress. Microwave yang dipesan, tetapi pintu saya selalu atau kadang-kadang penulis massal. Android dan Nunc sodales interdum, tincidunt erat ac, tincidunt elit. Namun, ultricies ac, arcu metus Sed congue. Untuk kenyamanan takut leo protein yang ditingkatkan. Apakah tellus orci, tempor id egestas nec, setidaknya dapatkan beberapa pemain.

sehingga menggunakan semua warna di pelangi tergantung lebar browser. Inilah cara Anda dapat mencapai perilaku ini melalui CSS:

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

Cukup mudah, bukan? Kita hanya perlu menerapkan warna yang berbeda setiap kali lebar browser melebihi batas tertentu. Perhatikan bahwa kami menerapkan ini menggunakan pendekatan seluler pertama, karena aturan "baru" diterapkan saat layar semakin besar. Ubah lebar jendela dan Anda akan melihat hasilnya.

Cara Menerapkan Mode Gelap dengan CSS

Mode gelap sedang trendi sekarang, baik di seluler maupun desktop. Tahukah Anda bahwa ada kueri media untuk melihat apakah pengguna lebih suka mode gelap? Menggunakan kueri media prefers-color-scheme Anda dapat melihat apakah pengguna lebih menyukai skema warna light atau dark . Yang berarti Anda sekarang memiliki kekuatan untuk membuat dua versi situs web Anda sehingga cocok dengan preferensi semua pengunjung Anda.

Misalnya, pertimbangkan cuplikan HTML berikut:

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

dan aturan CSS ini:

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

Bergantung pada penyiapan Anda, Anda akan melihat bahwa bagian "Dinamis" dari cuplikan HTML sebelumnya terlihat seperti Tema Terang atau Tema Gelap:

Cukup keren, ya? Dan sederhana!

Kasus Penggunaan Menarik Lainnya dengan Kueri Media

Ada banyak kueri media yang dapat Anda gunakan (Anda memiliki daftar lengkapnya di sini), tetapi saya ingin fokus pada satu kueri secara khusus. Secara khusus, saya ingin menjelaskan kepada Anda bagaimana menerapkan gaya yang berbeda tergantung pada apakah halaman tersebut ditampilkan di browser atau akan segera dicetak. Yang harus Anda lakukan adalah menggunakan kata kunci print atau screen ke media query sebagai berikut:

 @media print { … } @media screen { … }

atau buat dua file CSS terpisah, satu untuk setiap kasus penggunaan, dan sertakan dalam HTML Anda menggunakan properti media dari tag link :

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

Hal yang menarik tentang ini adalah Anda dapat membuat lembar gaya yang mengubah situs Anda menjadi konten yang dirancang untuk dicetak. Jadi, misalnya, Anda dapat menyembunyikan bagian dinamis web yang tidak masuk akal dalam versi cetak (seperti menu atau formulir). Atau Anda bahkan dapat memastikan beberapa hal yang hilang saat dicetak menjadi terlihat, seperti misalnya URL target tautan:

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

yang hasilnya sebagai berikut:

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vestibulum mollis leo di turpis interdum, di pharetra velit elementum. Nama eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Variabel CSS

Terakhir, mari kita bicara tentang fitur CSS menakjubkan lainnya: properti kustom CSS (juga dikenal sebagai variabel CSS). Situs web yang kompleks memiliki jumlah CSS yang sangat besar, dan cukup umum untuk memiliki nilai yang sama berulang-ulang. Misalnya, palet warna, batas, bantalan, dan sebagainya digunakan di semua tempat. Nah, variabel CSS menyederhanakan kompleksitas ini. Dan mereka sangat berguna untuk menerapkan mode gelap dengan mudah!

Variabel CSS persis seperti yang Anda pikirkan: cara untuk menyimpan dan menggunakan kembali nilai CSS tertentu di balik nama yang bermakna. Jauh lebih mudah untuk memahami apa --main-text-color daripada #333 , bukan?

Mendeklarasikan properti kustom dilakukan dengan menggunakan nama properti kustom yang dimulai dengan tanda hubung ganda ( -- ), dan nilai properti yang dapat berupa nilai CSS apa pun yang valid. Seperti properti lainnya, ini ditulis di dalam kumpulan aturan, seperti:

 element { --main-color: red; --main-padding: 2em 1em; }

Pemilih yang Anda gunakan di blok aturan tempat Anda mendefinisikan variabel CSS menentukan cakupannya. Artinya, jika Anda mendefinisikan variabel dalam aturan div.banner , variabel itu hanya akan tersedia dalam cakupan itu. Namun, yang paling umum adalah membuat variabel dalam lingkup global menggunakan pseudo-class :root :

 :root { --main-color: red; --main-padding: 2em 1em; }

Untuk menggunakan variabel CSS, Anda hanya perlu menentukan namanya di dalam fungsi var :

 p { color: var(--main-color); padding: var(--main-padding); }

CSS Di Sini untuk Membantu Anda

Struktur HTML halaman web seperti fondasi sebuah rumah, Anda memerlukan fondasi yang kuat jika Anda ingin membangun sesuatu yang sehat. Saat membuat halaman web, pastikan Anda menggunakan struktur HTML yang benar secara semantik dan bersih. Ini akan menghasilkan halaman yang akan berfungsi di semua browser untuk semua pengunjung, dan menerapkan trik CSS di atasnya akan menjadi sederhana dan efektif.

Saya harap Anda menyukai posting hari ini. Jika Anda melakukannya, bagikan dengan teman-teman Anda

Gambar unggulan oleh William Daigneault di Unsplash.