Setelah kemarin membagikan situs-situs untuk belajar css. Kali ini, saya akan fokus pada 3 fitur baru css yang dapat Anda mulai gunakan hari ini. Yang satu akan membantumu mengatasi masalah web-web klasik, yang kedua bisa membantumu merapikan kode cssmu, yang ketiga bakalan ngasih kamu sudut pandang baru tentang desain responsif.

Semua fitur ini didukung di semua browser modern, jadi tidak ada alasan untuk tidak mulai menggunakannya sekarang!

Yuk mulai explore!

1. CSS Nesting

Nesting CSS bawaan adalah fitur yang menyederhanakan dan mengurangi jumlah kode yang diperlukan untuk memberi gaya elemen dengan cara yang lebih intuitif, sehingga membuat kode cssmu menjadi lebih bersih dan mudah dibaca.

Sebelumnya, untuk memberi gaya elemen bersarang dalam CSS, Kamu harus menggunakan selektor berulang-ulang, yang dapat menghasilkan kode yang lebih panjang dan sulit untuk dikelola atau harus menggunakan css pre-processor seperti SASS. Dengan adanya nesting CSS bawaan, Kamu sekarang bisa menyusun gaya langsung di dalam selector utama, menghilangkan pengulangan yang tidak perlu.

Berikut contoh cara nesting CSS bawaan:

/* Tanpa Nesting */
.container {
  background-color: #f0f0f0;
}

.container h1 {
  color: #333;
}

.container p {
  font-size: 16px;
}

/* Dengan Nesting */
.container {
  background-color: #f0f0f0;

  h1 {
    color: #333;
  }

  p {
    font-size: 16px;
  }
}

Pada contoh pertama, tanpa nesting, Kamu harus mengulang pemilih .container untuk setiap elemen bersarang. Pada contoh kedua, dengan nesting CSS bawaan, Kamu dapat menulis gaya dengan cara yang lebih hirarkis dan terorganisir.

Pendekatan ini tidak hanya mengurangi pengulangan, tetapi juga meningkatkan keterbacaan kodemu. Menjadi lebih mudah memahami hubungan antara gaya dan struktur HTML yang sesuai.

Harap dicatat bahwa sementara nesting CSS bawaan adalah fitur yang sangat berguna, penting untuk memastikan kompatibilitas dengan browser. Sampai saat artikel ini dibuat, sudah 80 persen lebih browser mendukung fitur ini.

nesting CSS bawaan

Sebagai kesimpulan, nesting CSS bawaan adalah tambahan berharga dalam CSS, memungkinkan pengembang menulis kode yang lebih bersih dan ringkas. Dengan memanfaatkan struktur HTML, fitur ini menyederhanakan proses penulisan kode dan meningkatkan kemudahan pemeliharaan css-mu.

2. CSS Layer

Dengan diperkenalkannya @layer dalam CSS, kini terdapat cara yang lebih terorganisir dan efisien untuk mengelola gaya tanpa perlu menggunakan deklarasi !important yang sering kali disalahgunakan. Fitur baru ini memungkinkan pengembang untuk mengelompokkan gaya mereka ke dalam lapisan (layer), menjadikannya lebih jelas dan sederhana dalam penanganan prioritas gaya.

Sebelumnya, penggunaan !important sering kali menjadi praktik umum namun tidak selalu disarankan untuk memaksa penggantian gaya. Namun, hal ini sering kali menyebabkan konflik kekhususan (specificity wars) dan membuat basis kode sulit untuk dikelola. Dengan adanya @layer, kini Kamu bisa mengategorikan gaya ke dalam kelompok logis, mengurangi ketergantungan pada !important.

Berikut adalah gambaran singkat tentang cara @layer berfungsi:

/* Cara lama dengan !important */
.header {
  color: red !important;
}

/* Cara baru dengan @layer */
@layer components {
  .header {
    color: red;
  }
}

Dalam pendekatan lama, deklarasi !important digunakan untuk memastikan gaya yang ditentukan mendapatkan prioritas. Namun, dalam pendekatan baru menggunakan @layer, Anda membuat layer bernama “components” dan menempatkan gaya .header di dalamnya. Ini memungkinkan untuk lembar gaya yang lebih terstruktur dan mudah dipelihara.

Dengan mengadopsi @layer, Kamu bisa mengatasi kesulitan yang seringkali muncul akibat ketergantungan berlebihan pada !important. Kodemu menjadi lebih terorganisir, dan basis kode menjadi lebih mudah dipelihara karena pendekatan berbasis lapisan menawarkan hierarki gaya yang lebih jelas.

Penting untuk dicatat bahwa meskipun @layer adalah alat yang powerful, penggunaannya harus bijaksana dan mempertahankan struktur yang logis. Penggunaan layer yang berlebihan dapat mengurangi manfaatnya, jadi organisasi yang cermat sangat diperlukan.

Sebagai kesimpulan, mengucapkan selamat tinggal pada !important dan menyambut @layer dalam toolkit CSS Kamu membawa perubahan positif dalam pengelolaan gaya. Ini mendorong penulisan kode yang lebih bersih, lebih terorganisir, membuat lembar gayamu lebih mudah dipahami dan dipelihara.

Sampai saat artikel ini diterbitkan, dukungan untuk fitur ini sudah mencapai 90 persen lebih.

CSS Layer

3. Container Queries

Container queries adalah fitur yang diantisipasi dengan sangat baik di dunia pengembangan web. Saat kita berbicara tentang responsivitas, kita sering kali fokus pada tata letak halaman secara keseluruhan, tetapi container queries membawa konsep ini ke tingkat elemen, memungkinkan kita menyesuaikan tampilan suatu elemen berdasarkan dimensi kontainer tempatnya berada.

Dalam istilah sederhana, container queries memberikan kemampuan kepada elemen HTML untuk menyesuaikan gaya dan tata letaknya berdasarkan ukuran kontainer tempatnya berada, bukan ukuran layar perangkat. Ini membuka pintu untuk mendesain pengalaman pengguna yang lebih adaptif dan dinamis.

Contoh penerapan container queries bisa dilihat dalam potongan kode berikut:

/* Contoh Container Query */
.container {
  width: 100%;
}

@container (min-width: 400px) {
  .container {
    background-color: lightblue;
  }
}

@container (min-width: 800px) {
  .container {
    background-color: lightgreen;
  }
}

Dalam contoh di atas, warna latar belakang .container berubah berdasarkan lebar kontainer tempatnya berada. Ini memberikan fleksibilitas yang lebih besar dalam menyesuaikan tampilan elemen tergantung pada konteksnya.

Keuntungan utama dari container queries adalah kemampuannya untuk merespons perubahan ukuran elemen di dalamnya, memberikan kontrol yang lebih halus terhadap tata letak dan desain halaman web. Hal ini terutama bermanfaat ketika kita berurusan dengan elemen-elemen seperti kartu, sidebar, atau bagian-bagian halaman lainnya yang mungkin memiliki konten dengan skala yang berbeda-beda.

Namun, perlu diingat bahwa sementara container queries menjanjikan, mereka mungkin belum sepenuhnya didukung oleh semua browser. Sebelum mengimplementasikannya, pastikan untuk memahami tingkat dukungan browser dan mempertimbangkan alternatif jika diperlukan. Sampai saat artikel ini diterbitkan, berikut adalah dukungan untuk fitur ini.

Container Queries

Dengan container queries, responsivitas di tingkat elemen membuka peluang baru dalam desain web yang adaptif. Ini memungkinkan kita lebih baik menyesuaikan tampilan elemen-elemen individual dengan konteksnya, meningkatkan pengalaman pengguna secara keseluruhan.

Kesimpulan

Nah, itu dia, 3 fitur CSS baru yang bisa mulai digunakan di tahun baru. CSS benar-benar telah bertransformasi menjadi alat yang sangat kuat dalam pengembangan web, terutama dengan adanya fitur-fitur hebat ini.

Mengadopsi kekuatan native CSS nesting dan @layer dapat menghasilkan lembar gaya yang lebih cerdas dan bersih.

Tetapi yang paling menonjol? CSS Container Queries. Mereka sedang menulis ulang aturan desain responsif, membuat hidup kita sebagai pengembang jauh lebih mudah. Tidak lagi berurusan dengan media queries untuk setiap penyesuaian kecil. Cukup atur ukuran kontainer dan lihat bagaimana komponen-komponen didalamnya beradaptasi..

Masa depan desain web terlihat menarik sekali, dan kita baru saja memulainya!

Bagaimana menurutmu? Apakah Kamu akan mulai menggunakan ini dalam proyek-proyekmu?

About the Author

Dzul Qurnain

Suka nonton Anime, ngoding dan bagi-bagi tips kalau tahu.. Oh iya, suka baca ( tapi yang menarik menurutku aja)...

View All Articles