Belajar Css Reset

CSS reset adalah teknik dalam pengembangan web yang bertujuan untuk mengatur ulang (reset) tampilan default dari elemen-elemen HTML yang diatur oleh browser.

Tujuan utama dari CSS reset adalah untuk menciptakan konsistensi antara berbagai browser yang berbeda dalam menampilkan elemen-elemen dasar HTML.

Setiap browser memiliki gaya bawaan (default styles) yang diterapkan pada elemen-elemen HTML seperti margin, padding, jenis huruf, ukuran teks, dan sebagainya.

Gaya-gaya ini dapat berbeda antara satu browser dengan browser lainnya, yang menyebabkan tampilan yang tidak konsisten antar browser.

Dengan menggunakan CSS reset, Anda dapat menghilangkan atau mengatur ulang semua gaya bawaan tersebut sehingga tampilan elemen-elemen HTML menjadi konsisten di berbagai browser.

CSS reset biasanya diimplementasikan menggunakan CSS file terpisah yang dimuat sebelum CSS kustom Anda.

Beberapa contoh CSS reset yang populer antara lain

• Eric Meyer’s Reset CSS: Salah satu CSS reset yang paling terkenal dan sering digunakan.
• Normalize.css: CSS reset yang juga mencoba untuk memperbaiki beberapa masalah cross-browser dan menormalkan elemen-elemen HTML.
• Yahoo’s YUI Reset CSS: CSS reset yang dikembangkan oleh Yahoo untuk memperbaiki gaya default browser.

Contoh CSS Reset buatan sendiri

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style-type: none;
}

img {
  max-width: 100%;
  display: block;
}

table {
  width: 100%;
  border-collapse: collapse;
}

Tambahan css untuk pengaturan css reset di atas

• Tambahkan role="list" pada setiap ul untuk membuat aksesibilitas / screen reader berfungsi dengan baik.

<ul role="list">

• Gunakan :root jika ingin mengatur elemen secara inherit. Jadi style terhadap elemen akan sama seperti parent nya. Ini biasa digunakan pada element a atau text element yang berubah saat diset pada tag yang berbeda.

:root {
  --red-color: red;
}

body {
  color: var(--red-color);
}

Akhir kata

Penting untuk diingat bahwa penggunaan CSS reset dapat mempengaruhi tampilan default dari elemen-elemen HTML, sehingga perlu diperhatikan dengan cermat agar tidak mengubah tampilan yang diinginkan secara keseluruhan.

Selain itu, dalam beberapa kasus, menggunakan CSS reset mungkin tidak diperlukan jika Anda sudah menggunakan framework CSS yang memiliki gaya bawaan yang diatur secara konsisten di berbagai browser.

Pemilihan dan implementasi CSS reset harus disesuaikan dengan kebutuhan dan tujuan proyek pengembangan web Anda.