DEV Community: Yudhi Satrio

Resep Rahasia CSS Custom Properties

Yudhi Satrio — Wed, 20 Jul 2022 03:27:24 +0000

Sekitar tahun 2017 CSS Custom Properties atau bisa kita sebut CSS Variable mulai diperkenalkan. Saya adalah orang yang skeptis pada waktu itu dan tidak memulai untuk eksplorasi. Karena sudah merasa memiliki variabel di dalam preprocessor.

Tapi ternyata cukup banyak manfaat CSS Variable ini dalam developmen. Jadi, variabel dalam preprocessor itu adalah statis, tapi tidak untuk CSS Variable.

CSS Variable itu Dinamis

Statis yang dimaksud adalah kita tidak bisa mengubah nilai dari variabel dimanapun dan kapanpun. Seperti contoh di bawah perbandingan mendeklarasikan variabel.

Bagaimana variabel dideklarasi dalam SASS

$background: tomato;

.element {
    background: $background;
}

Hasil kompilasi

.element {
    background: tomato;
}

Bagaimana variabel dideklarasi dalam CSS

:root {
  --background: tomato
}

.element {
  background: var(--background);
}

Hasil kompilasi CSS Variable akan tetap sama dengan kode sumbernya. Untuk menggunakan nilai CSS Variable kita menyematkannya dengan menggunakan var() dalam properti CSS sebagai nilai. Di bawah akan saya coba tunjukan mengapa CSS Variable itu dinamis.

:root {
  --background: tomato;
}

.element {
  background: var(--background);
}

.use-teal {
  --background: teal;
}

<div class="element">Tomato</div>
<div class="element  use-teal">Teal</div>

Dari contoh di atas maka .element akan memiliki background tomato dan .element .use-teal akan memiliki background teal. Jadi kita bisa mengubah nilai variabel dimanapun dan kapanpun.

Kita akan coba lanjut dengan beberapa cara menyematkan nilai variabel.

:root {
  --background: tomato;
}

.element {
  background: var(--background);
}

<div class="element">Tomato</div>
<div class="element" style="--background: teal">Teal</div>

Dengan melihat cara saya menyematkan nilai variabel di atas. Berarti cara menyematkan sebuah nilai tidak hanya didominasi dengan mengubahnya dalam berkas CSS saja. Tetapi kita juga bisa mengubahnya melalui atribut HTML.

Mengubah Nilai Melalui JS

Kita pun bisa mengubah nilai variabel dengan menggunakan JS. Berikut adalah contoh penerapan bagaimana nilai sebuah variabel diubah melalui event JS.

:root {
  --background: tomato;
}

.element {
  background: var(--background);
}

<div class="element">Hanya sebuah teks</div>
<button onclick="changeColor()">Ubah warna</button>

const changeColor = () => {
  const randomColor = Math.floor(Math.random()*16777215).toString(16);
  const el = document.querySelector('.element');
  el.style.setProperty('--background', '#' + randomColor);
}

Bersinergi dengan CSS Preprocessor

Dengan adanya variabel dalam CSS bukan berarti variabel yang telah dulu ada yang digunakan oleh preprocessor jadi kita tinggalkan. Kita masih dapat memanfaatkannya untuk nilai-nilai yang sifatnya statis.

Mencampur kedua jenis variabel tersebut masih sangat mungkin kita lakukan. Seperti contoh di bawah.

$button-sml = 1em;
$button-mid = 1.5em;

.btn {
  --button-size: #{$button-sml);

  font-size: var(--button-size);
}

@media screen and (min-width: 600px) {
  .btn {
    --button-size: #{$button-mid};
  }
}

Keterbatasan

Sebuah fitur selain ada kelebihan tentunya juga memiliki keterbatasan. Beberapa sintaks yang tidak dapat digunakan dengan CSS Variable.

:root{
  --min-width: 576px;
  --child-number: 3;
}

@media screen and (min-width: var(--min-width) ) {
  li:nth-child(var(--child-number)) {
    border-bottom: solid 2px teal;
  }
}

WAI-ARIA Umum Yang Dapat Kamu Gunakan di Webmu

Yudhi Satrio — Tue, 19 Jul 2022 09:55:58 +0000

Semantik

Dengan semakin kompleksnya kebutuhan untuk membuat situs web. Maka penggunaan tag HTML tidak lagi bisa sesederhana dahulu yang hanya menggunakan <div> untuk segala jenis urusan. Waktu itu, kami perlu menambahkan id atau class, contoh: <div id="landmark" class="landmark">.

Untungnya, saat ini untuk menulis kode yang berkaitan dengan tengaran (landmark) lebih dimudahkan sejak HTML5. Kita bisa menulisnya seperti contoh berikut <header> atau <main>.

Teknologi A11s (Aksesibilitas) dalam situs web sangat bergantung pada penggunaan tag HTML yang benar atau disarankan. Teknologi semacam pembaca layar akan membaca sesuai dengan urutan struktur HTML. Menstruktur tag HTML dengan baik akan sangat membantu teknologi ini.

Beberapa contoh kode tag HTML yang semantik yang seharusnya kita terapkan.

<header>…</header>

<nav>…</nav>

<main>…</main>

<article>…</article>

<aside>…</aside>

<footer>…</footer>

<button>…</button>

<!-- dan banyak lagi -->

ARIA adalah Polifil

Kita tidak boleh berhenti dengan semantik karena semantik tidak mencakup semua hal. Untuk beberapa hal kita harus menerapkan ARIA.

Polifil adalah kode untuk mengimplementasikan fitur dalam peramban yang belum mendukung fitur tersebut. Tapi dalam konteks A11s, maka polifil adalah teknologi tambahan untuk mendukung teknologi A11s. Salah satu contohnya adalah pembaca layar.

Sebagai contoh awal bentuk-bentuk ARIA bisa dilihat berikut di bawah

<!-- role -->
<nav role="navigation"></nav>

<!-- properties -->
<button aria-label="tutup">x</button>

<!-- states -->
<button aria-disabled="true">Tutup</button>

Tengaran (Landmark)

Tengaran adalah bagian-bagian tertentu dalam sebuah situs web. Seperti benda fisik yang kita lihat, tengaran dalam situs web dapat berupa <header>, <nav>, <footer>, dan lain sebagainya. Beberapa contoh tengaran yang umum digunakan adalah sebagai berikut contoh di bawah.

<header role="banner"></header>

<main role="main"></main>

<aside role="complementary"></aside>

<footer role="contentinfo"></footer>

Tengaran ini untuk memudahkan pembaca layar untuk menavigasikan fokus elemen berdasarkan tengaran. Sehingga dengan mudah pembaca layar untuk menyebutkan ada dimana saya sekarang ini.

Judul adalah tengaran bawaan

Membuat tengaran dalam setiap tag HTML kita itu penting. Tetapi dengan meletakan judul yang terstruktur itu akan membuat pengalaman navigasi yang lebih baik. Karena dalam navigasi pembaca layar ada opsi untuk langsung lompat ke bagian tengaran tertentu langsung menuju bagian yang ingin ditelusuri. Biasanya di awal sebuah situs web, ada bagian "lanjut ke konten" atau "skip to main content".

`aria-label`

ARIA yang paling umum digunakan adalah aria-label. Karena dalam penerapannya, developer hanya perlu menempatkannya sebagai atribut tambahan dalam elemen. Sebagai contohnya bisa dilihat sebagai berikut

<button arial-label="tutup">X</button>

<input id="name" name="name" aria-label="nama" required>

Dalam kasus di atas jika kita tidak menempatkan aria-label maka element tersebut tidak akan dikenali sebagai label-nya. Hal itu akan sangat membingungkan jika kita berada dalam sebuah input tanpa instruksi.

`aria-live`

aria-live digunakan untuk tag HTML yang membutuhkan pembaruan konten. Sembulan (Pop up) adalah salah satu contoh untuk penggunaan aria-live. Ada 3 jenis aria-live yang bisa digunakan

<div aria-live="off"></div>

<div aria-live="polite"></div>

<div aria-live="assertive"></div>

Sedikit tambahan, aria-atomic juga perlu untuk ditambahkan ke dalam tag HTML jika konten dalam aria-live membutuhkan untuk diketahui oleh Assistive Tecnology

Penambahan atribut role="alert" bisa juga ditambahkan untuk menandakan bahwa popup adalah juga sebagai tengaran.

`aria-required`

Untuk memberi tahu pembaca layar bahwa input harus diisi, maka bisa menggunakan atribut aria-required="true" atau cukup dengan atribut "required"

<input aria-required="true" required>

`aria-hidden`

Terkadang ada bagian tag HTML yang tidak perlu kita sebutkan atau tidak perlu dideteksi oleh pembaca layar. Tetapi dalam antar-muka masih dibutuhkan untuk ditampilkan. Biasanya hanya untuk hiasan atau tambahan informasi. Kita bisa menggunakan atribut aria-hidden untuk keperluan ini.

<div aria-hidden="true"></div>

`tabindex`

Agar tag HTML dapat terfokus dengan tab, maka kita juga perlu untuk menambahka tabindex dalam atributnya.

<div tabindex="0"></div>
<div tabindex="-1"></div>

Nilai 0 untuk navigasi tab secara bawaan. Nilai -1 untuk navigasi tab secara programatik menggunakan JS.

Atribut `lang`

Salah satu atribut yang mungkin tidak banyak developer peduli adalah atribut tag HTML lang. lang adalah kependekan dari language, berfungsi sebagai pemberitahu kepada pembaca layar bahwa konten yang berada dalam tag HTML tersebut harus diucapakan dalam bahasa tertentu. Akan dijabarkan di contoh di bawah

<html lang="id">
<head>
  <title>Contoh penggunaan lang</title>
</head>

  <button>Tutup</button>
  <button lang="en">Close</button>

</html>

Kata-kata terakhir

"Tanpa ARIA itu lebih baik dari pada menggunakan ARIA sembarangan" - oleh RahmaUt