1 of 13

Memilih rem daripada px dalam CSS

2 of 13

rem / px ?

3 of 13

CSS Units

Unit/satuan yang tetap, tidak relatif terhadap apapun. Tapi untuk screen, yang biasa digunakan hanya px.

​

  • cm
  • mm
  • Q (quarter millimeter)
  • in
  • pt
  • px
  • dst.

Unit/satuan yang relatif terhadap sesuatu.

​

  • em

Relatif ke font size dari suatu elemen.

  • rem

Relatif ke font size dari root elemen (html).

  • vw, vh

Relatif ke lebar (width) dan tinggi (height) viewport.

Absolut

Relatif

4 of 13

Kenapa harus memilih rem?

5 of 13

Karena ada …

6 of 13

Standar WCAG (Web Content Accessibility Guidelines)

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

https://w3.org/WAI/WCAG22/Understanding/resize-text.html

7 of 13

Mari dicoba . . .

8 of 13

Kerumitan ketika menggunakan rem

Sayangnya penggunaan rem cukup membuat frustasi karena tidak mudah melakukan matematika di kepala kita 😆

​

15px → 0.9375rem

16px → 1rem

17px → 1.0625rem

18px → 1.125rem

19px → 1.1875rem

20px → 1.25rem

21px → 1.3125rem

9 of 13

1. Trik 62.5%

Opsi yang sering ditemukan, namun tidak direkomendasikan.

  • Merusak kompatibilitas dengan library 3rd party / ekstensi yang digunakan end user.
  • Sudah ada baseline bahwa 1rem di web akan menghasilkan teks yang readable.

10 of 13

2. Calculated Value

Tapi penulisannya cukup panjang 😅

11 of 13

3. CSS Variable

Cara ini cocok digunakan jika sudah ada design system.�

Contoh penggunaannya ada di framework CSS seperti Bootstrap dan Tailwind.

12 of 13

Referensi

13 of 13

Selesai

CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon and infographics & images by Freepik