CSS

Peramban menentukan gaya apa yang akan ditampilkan pada elemen tergantung pada spesifisitas aturan CSS. Kita asumsikan peramban telah menentukan aturan yang cocok dengan elemen tertentu. Di antara aturan yang cocok, spesifisitas, empat nilai yang dipisahkan koma, a, b, c, d dihitung untuk setiap aturan berdasarkan hal berikut:

1. a adalah apakah gaya sebaris (inline styles) sedang digunakan. Jika deklarasi properti adalah gaya sebaris pada elemen, a adalah 1, selain itu 0.
2. b adalah jumlah selektor ID.
3. c adalah jumlah kelas, atribut, dan selektor pseudo-kelas.
4. d adalah jumlah tag dan selektor pseudo-elemen.

Spesifisitas yang dihasilkan bukanlah skor, melainkan matriks nilai yang dapat dibandingkan kolom demi kolom. Saat membandingkan selektor untuk menentukan mana yang memiliki spesifisitas tertinggi, lihat dari kiri ke kanan, dan bandingkan nilai tertinggi di setiap kolom. Jadi, nilai di kolom b akan mengesampingkan nilai di kolom c dan d, apa pun nilainya. Dengan demikian, spesifisitas 0,1,0,0 akan lebih besar dari 0,0,10,10.

Dalam kasus spesifisitas yang sama: aturan terbaru adalah yang dihitung. Jika Anda telah menulis aturan yang sama dalam stylesheet Anda (terlepas dari internal atau eksternal) dua kali, maka aturan yang lebih rendah dalam stylesheet Anda lebih dekat ke elemen yang akan diberi gaya, itu dianggap lebih spesifik dan oleh karena itu akan diterapkan.

Saya akan menulis aturan CSS dengan spesifisitas rendah sehingga dapat dengan mudah ditimpa jika perlu. Saat menulis kode pustaka komponen UI CSS, penting agar mereka memiliki spesifisitas rendah sehingga pengguna pustaka dapat menimpanya tanpa menggunakan aturan CSS yang terlalu rumit hanya demi meningkatkan spesifisitas atau menggunakan !important.

• Mereset (Resetting) - Mereset dimaksudkan untuk menghapus semua gaya peramban bawaan pada elemen. Misalnya, margin, padding, font-size dari semua elemen direset menjadi sama. Anda harus mendeklarasikan ulang gaya untuk elemen tipografi umum.
• Menormalisasi (Normalizing) - Menormalisasi mempertahankan gaya bawaan yang berguna daripada "tidak menata gaya" segalanya. Ini juga mengoreksi bug untuk dependensi peramban umum.

Saya akan memilih mereset ketika saya memiliki desain situs yang sangat disesuaikan atau tidak konvensional sehingga saya perlu melakukan banyak penataan gaya sendiri dan tidak perlu gaya bawaan apa pun dipertahankan.

Float adalah properti penempatan CSS. Elemen yang di-float tetap menjadi bagian dari aliran halaman, dan akan memengaruhi penempatan elemen lain (misalnya teks akan mengalir di sekitar elemen yang di-float), tidak seperti elemen position: absolute, yang dihapus dari aliran halaman.

Properti CSS clear dapat digunakan untuk ditempatkan di bawah elemen left/right/both yang di-float.

Jika elemen induk hanya berisi elemen yang di-float, tingginya akan menyusut menjadi nol. Ini dapat diperbaiki dengan membersihkan float setelah elemen yang di-float dalam wadah tetapi sebelum penutup wadah.

Hack .clearfix menggunakan selektor pseudo CSS yang cerdik (::after) untuk menghapus float. Daripada mengatur overflow pada induk, Anda menerapkan kelas tambahan clearfix padanya. Kemudian terapkan CSS ini:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Alternatifnya, berikan properti overflow: auto atau overflow: hidden ke elemen induk yang akan membangun konteks pemformatan blok baru di dalam anak-anak dan itu akan meluas untuk menampung anak-anaknya.

Properti z-index di CSS mengontrol urutan penumpukan vertikal elemen yang tumpang tindih. z-index hanya memengaruhi elemen yang memiliki nilai position yang bukan static.

Tanpa nilai z-index apa pun, elemen menumpuk dalam urutan kemunculannya di DOM (yang paling bawah pada tingkat hierarki yang sama muncul di atas). Elemen dengan penempatan non-statis (dan turunannya) akan selalu muncul di atas elemen dengan penempatan statis default, terlepas dari hierarki HTML.

Konteks penumpukan adalah elemen yang berisi sekumpulan lapisan. Dalam konteks penumpukan lokal, nilai z-index anak-anaknya diatur relatif terhadap elemen tersebut daripada ke akar dokumen. Lapisan di luar konteks itu — yaitu elemen saudara dari konteks penumpukan lokal — tidak dapat berada di antara lapisan di dalamnya. Jika elemen B berada di atas elemen A, elemen anak dari elemen A, elemen C, tidak akan pernah bisa lebih tinggi dari elemen B meskipun elemen C memiliki z-index yang lebih tinggi dari elemen B.

Setiap konteks penumpukan bersifat mandiri - setelah konten elemen ditumpuk, seluruh elemen dipertimbangkan dalam urutan penumpukan konteks penumpukan induk. Beberapa properti CSS memicu konteks penumpukan baru, seperti opacity kurang dari 1, filter yang bukan none, dan transform yang bukan none.

Catatan: Apa sebenarnya yang memenuhi syarat elemen untuk membuat konteks penumpukan tercantum dalam rangkaian [aturan] yang panjang ini.

Block Formatting Context (BFC) adalah bagian dari rendering visual CSS dari halaman web tempat kotak blok diletakkan. Float, elemen yang diposisikan secara absolut, inline-blocks, table-cells, table-captions, dan elemen dengan overflow selain visible (kecuali jika nilai tersebut telah disebarkan ke viewport) membentuk konteks pemformatan blok baru.

Mengetahui cara membangun konteks pemformatan blok itu penting, karena tanpa melakukannya, kotak penampung tidak akan [menampung turunan yang di-float]. Ini mirip dengan margin yang menyusut, tetapi lebih berbahaya karena Anda akan menemukan seluruh kotak menyusut dengan cara yang aneh.

BFC adalah kotak HTML yang memenuhi setidaknya salah satu kondisi berikut:

• Nilai float bukan none.
• Nilai position bukan static maupun relative.
• Nilai display adalah table-cell, table-caption, inline-block, flex, atau inline-flex, grid, atau inline-grid.
• Nilai overflow bukan visible.

Dalam BFC, tepi luar kiri setiap kotak menyentuh tepi kiri blok penampung (untuk pemformatan kanan-ke-kiri, tepi kanan menyentuh).

Margin vertikal antara kotak tingkat blok yang berdekatan dalam BFC menyusut. Baca lebih lanjut tentang [margin yang menyusut].

• Metode div kosong - <div style="clear:both;"></div>.
• Metode Clearfix - Lihat kelas .clearfix di atas.
• Metode overflow: auto atau overflow: hidden - Induk akan membuat konteks pemformatan blok baru dan meluas untuk menampung anak-anaknya yang di-float.

Dalam proyek besar, saya akan menulis kelas utilitas .clearfix dan menggunakannya di tempat-tempat yang saya butuhkan. overflow: hidden mungkin memotong anak-anak jika anak-anak lebih tinggi dari induk dan tidak terlalu ideal.

Sprite CSS menggabungkan beberapa gambar menjadi satu gambar tunggal yang lebih besar. Ini adalah teknik yang umum digunakan untuk ikon (Gmail menggunakannya). Cara mengimplementasikannya:

1. Gunakan generator sprite yang mengemas beberapa gambar menjadi satu dan menghasilkan CSS yang sesuai untuknya.
2. Setiap gambar akan memiliki kelas CSS yang sesuai dengan properti background-image, background-position, dan background-size yang ditentukan.
3. Untuk menggunakan gambar tersebut, tambahkan kelas yang sesuai ke elemen Anda.

Keuntungan:

• Mengurangi jumlah permintaan HTTP untuk beberapa gambar (hanya satu permintaan tunggal yang diperlukan per spritesheet). Tetapi dengan HTTP2, memuat beberapa gambar tidak lagi menjadi masalah besar.
• Mengunduh aset terlebih dahulu yang tidak akan diunduh sampai dibutuhkan, seperti gambar yang hanya muncul pada status pseudo :hover. Berkedip tidak akan terlihat.

• Setelah mengidentifikasi masalah dan peramban yang bermasalah, gunakan lembar gaya terpisah yang hanya dimuat saat peramban spesifik tersebut digunakan. Teknik ini memerlukan rendering sisi server.
• Gunakan pustaka seperti Bootstrap yang sudah menangani masalah gaya ini untuk Anda.
• Gunakan autoprefixer untuk secara otomatis menambahkan awalan vendor ke kode Anda.
• Gunakan Reset CSS atau Normalize.css.
• Jika Anda menggunakan Postcss (atau pustaka transpiling serupa), mungkin ada plugin yang memungkinkan Anda memilih untuk menggunakan sintaks CSS modern (dan bahkan proposal W3C) yang akan mengubah bagian kode Anda menjadi kode aman yang sesuai yang akan berfungsi di target yang telah Anda gunakan.

• Degradasi anggun (Graceful degradation) - Praktik membangun aplikasi untuk browser modern sambil memastikan aplikasi tersebut tetap berfungsi di browser lama.
• Peningkatan progresif (Progressive enhancement) - Praktik membangun aplikasi untuk tingkat pengalaman pengguna dasar, tetapi menambahkan peningkatan fungsional ketika browser mendukungnya.
• Gunakan [caniuse.com] untuk memeriksa dukungan fitur.
• Autoprefixer untuk penyisipan awalan vendor otomatis.
• Deteksi fitur menggunakan [Modernizr].
• Gunakan kueri Fitur CSS [@support]

Teknik-teknik ini berkaitan dengan aksesibilitas (a11y).

• width: 0; height: 0. Membuat elemen tidak mengambil ruang sama sekali di layar, sehingga tidak menampilkannya.
• position: absolute; left: -99999px. Posisikan di luar layar.
• text-indent: -9999px. Ini hanya berfungsi pada teks dalam elemen block. Ini adalah trik yang banyak digunakan dan terkenal, tetapi memiliki [beberapa kelemahan] seperti menyebabkan masalah kinerja, jadi Anda mungkin ingin mempertimbangkan untuk menggunakan text-indent: 100% sebagai gantinya.
• Tag meta. Misalnya dengan menggunakan Schema.org, RDF, dan JSON-LD.
• WAI-ARIA. Spesifikasi teknis W3C yang menentukan cara meningkatkan aksesibilitas halaman web.

Meskipun WAI-ARIA adalah solusi ideal, saya akan memilih pendekatan posisi absolute, karena memiliki sedikit jebakan, berfungsi untuk sebagian besar elemen, dan merupakan teknik yang mudah.

Sebelum Flex menjadi populer (sekitar tahun 2014), sistem grid berbasis float adalah yang paling andal karena masih memiliki dukungan browser terbanyak di antara sistem alternatif yang ada (flex, grid). Bootstrap menggunakan pendekatan float hingga Bootstrap 4 yang beralih ke pendekatan berbasis flex. Sampai penulisan ini (2020), flex adalah pendekatan yang direkomendasikan untuk membangun sistem grid dan memiliki [dukungan browser yang layak].

Bagi yang berani, mereka dapat melihat [CSS Grid Layout], yang menggunakan properti grid baru yang mengkilap; ini bahkan lebih baik dari flex untuk membangun tata letak grid dan akan menjadi cara de facto untuk melakukannya di masa mendatang.

Ya. Contohnya adalah mengubah navigasi pil bertumpuk menjadi navigasi tab tetap di bagian bawah setelah titik putus tertentu.

Ya, ada beberapa cara untuk mewarnai bentuk (termasuk menentukan atribut pada objek) menggunakan CSS sebaris, bagian CSS yang disematkan, atau file CSS eksternal. Sebagian besar SVG yang akan Anda temukan di web menggunakan CSS sebaris, tetapi ada keuntungan dan kerugian yang terkait dengan setiap jenis.

Pewarnaan dasar dapat dilakukan dengan mengatur dua atribut pada simpul: fill dan stroke. fill mengatur warna di dalam objek dan stroke mengatur warna garis yang digambar di sekitar objek. Anda dapat menggunakan skema penamaan warna CSS yang sama yang Anda gunakan di HTML, baik itu nama warna (misalnya red), nilai RGB (misalnya rgb(255,0,0)), nilai Hex, nilai RGBA, dll.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

fill="purple" di atas adalah contoh dari atribut presentasional. Menariknya, dan tidak seperti gaya sebaris seperti style="fill: purple" yang juga merupakan atribut, atribut presentasional dapat [ditimpa oleh gaya CSS] yang didefinisikan dalam stylesheet. Jadi, jika Anda melakukan sesuatu seperti svg { fill: blue; } itu akan mengesampingkan warna ungu yang telah kita definisikan.

Ya, ada empat jenis properti @media (termasuk screen):

• all - untuk semua jenis perangkat media
• print - untuk printer
• speech - untuk pembaca layar yang "membaca" halaman dengan lantang
• screen - untuk layar komputer, tablet, ponsel pintar, dll.

Berikut adalah contoh penggunaan tipe media print:

@media print {
  body {
    color: black;
  }
}

Pertama, pahami bahwa browser mencocokkan selektor dari paling kanan (selektor kunci) ke kiri. Browser memfilter elemen dalam DOM sesuai dengan selektor kunci dan melintasi elemen induknya untuk menentukan kecocokan. Semakin pendek panjang rantai selektor, semakin cepat browser dapat menentukan apakah elemen tersebut cocok dengan selektor. Oleh karena itu hindari selektor kunci yang merupakan tag dan selektor universal. Mereka mencocokkan sejumlah besar elemen dan browser harus melakukan lebih banyak pekerjaan dalam menentukan apakah induknya cocok.

Metodologi [BEM (Block Element Modifier)] merekomendasikan bahwa semuanya memiliki satu kelas, dan, di mana Anda memerlukan hierarki, itu juga dimasukkan ke dalam nama kelas, ini secara alami membuat selektor efisien dan mudah ditimpa.

Waspadai properti CSS mana yang [memicu] reflow, repaint, dan compositing. Hindari menulis gaya yang mengubah tata letak (memicu reflow) jika memungkinkan.

Keuntungan:

• CSS menjadi lebih mudah dikelola.
• Mudah untuk menulis selektor bersarang.
• Variabel untuk tema yang konsisten. Dapat berbagi file tema di berbagai proyek.
• Mixin untuk menghasilkan CSS berulang.
• Fitur Sass seperti loop, daftar, dan peta dapat membuat konfigurasi lebih mudah dan tidak terlalu bertele-tele.
• Membagi kode Anda menjadi beberapa file. File CSS juga dapat dibagi tetapi melakukannya akan memerlukan permintaan HTTP untuk mengunduh setiap file CSS.

Kerugian:

• Membutuhkan alat untuk pra-pemrosesan. Waktu kompilasi ulang bisa lambat.
• Tidak menulis CSS yang saat ini dan berpotensi dapat digunakan. Misalnya, dengan menggunakan sesuatu seperti [postcss-loader] dengan [webpack], Anda dapat menulis CSS yang berpotensi kompatibel di masa mendatang, memungkinkan Anda menggunakan hal-hal seperti variabel CSS alih-alih variabel Sass. Dengan demikian, Anda mempelajari keterampilan baru yang dapat membuahkan hasil jika/ketika mereka menjadi standar.

Yang disukai:

• Sebagian besar keuntungan yang disebutkan di atas.
• Lebih sedikit yang ditulis dalam JavaScript, yang cocok dengan Node.

Yang tidak disukai:

• Saya menggunakan Sass melalui node-sass, yang merupakan binding untuk LibSass yang ditulis dalam C++. Saya harus sering mengompilasi ulang saat beralih antara versi node.
• Di Less, nama variabel diawali dengan @, yang dapat membingungkan dengan kata kunci CSS asli seperti @media, @import, dan aturan @font-face.

Gunakan @font-face dan definisikan font-family untuk font-weight yang berbeda.

Bagian ini terkait dengan di atas tentang menulis CSS yang efisien. Browser mencocokkan selektor dari paling kanan (selektor kunci) ke kiri. Browser memfilter elemen dalam DOM sesuai dengan selektor kunci dan melintasi elemen induknya sampai ke root untuk menentukan kecocokan. Semakin pendek panjang rantai selektor, semakin cepat browser dapat menentukan apakah elemen tersebut cocok dengan selektor.

Misalnya dengan selektor p span ini, browser pertama-tama menemukan semua elemen <span> dan melintasi induknya hingga ke root untuk menemukan elemen <p>. Untuk <span> tertentu, segera setelah menemukan <p>, ia tahu bahwa <span> cocok dan dapat menghentikan pencocokannya.

Pseudo-elemen CSS adalah kata kunci yang ditambahkan ke selektor yang memungkinkan Anda menata gaya bagian tertentu dari elemen yang dipilih. Mereka dapat digunakan untuk dekorasi (:first-line, :first-letter) atau menambahkan elemen ke markup (dikombinasikan dengan content: ...) tanpa harus memodifikasi markup (:before, :after).

• :first-line dan :first-letter dapat digunakan untuk mendekorasi teks.
• Digunakan dalam hack .clearfix seperti yang ditunjukkan di atas untuk menambahkan elemen ruang nol dengan clear: both.
• Panah segitiga dalam tooltips menggunakan :before dan :after. Mendorong pemisahan kekhawatiran karena segitiga dianggap sebagai bagian dari gaya dan bukan benar-benar DOM.

Model kotak CSS menjelaskan kotak persegi panjang yang dihasilkan untuk elemen di pohon dokumen dan diletakkan sesuai dengan model pemformatan visual. Setiap kotak memiliki area konten (misalnya teks, gambar, dll.) dan area padding, border, dan margin opsional di sekitarnya.

Model kotak CSS bertanggung jawab untuk menghitung:

• Berapa banyak ruang yang ditempati elemen blok.
• Apakah batas dan/atau margin tumpang tindih, atau menyusut.
• Dimensi kotak.

Model kotak memiliki aturan-aturan berikut:

• Dimensi elemen blok dihitung oleh width, height, padding, borders, dan margins.
• Jika tidak ada height yang ditentukan, elemen blok akan setinggi konten yang dikandungnya, ditambah padding (kecuali ada float, lihat di bawah).
• Jika tidak ada width yang ditentukan, elemen blok yang tidak di-float akan meluas untuk mengisi lebar induknya dikurangi padding.
• height elemen dihitung oleh height konten.
• width elemen dihitung oleh width konten.
• Secara default, paddings dan borders bukan bagian dari width dan height elemen.

• Secara default, elemen memiliki box-sizing: content-box yang diterapkan, dan hanya ukuran konten yang diperhitungkan.
• box-sizing: border-box mengubah cara width dan height elemen dihitung, border dan padding juga disertakan dalam perhitungan.
• height elemen sekarang dihitung oleh height konten + padding vertikal + lebar border vertikal.
• width elemen sekarang dihitung oleh width konten + padding horizontal + lebar border horizontal.
• Mempertimbangkan padding dan border sebagai bagian dari model kotak kita lebih sesuai dengan cara desainer membayangkan konten dalam grid.

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.

| display | Deskripsi | | :-- | :-- | | none | Tidak menampilkan elemen (elemen tidak lagi memengaruhi tata letak dokumen). Semua elemen anak juga tidak lagi ditampilkan. Dokumen dirender seolah-olah elemen tidak ada di pohon dokumen | | block | Elemen mengonsumsi seluruh baris dalam arah blok (yang biasanya horizontal) | | inline | Elemen dapat diletakkan berdampingan | | inline-block | Mirip dengan inline, tetapi memungkinkan beberapa properti block seperti mengatur width dan height | | table | Berperilaku seperti elemen <table> | | table-row | Berperilaku seperti elemen <tr> | | table-cell | Berperilaku seperti elemen <td> | | list-item | Berperilaku seperti elemen <li> yang memungkinkannya mendefinisikan list-style-type dan list-style-position |

Saya akan menyertakan perbandingan dengan block untuk ukuran yang baik.

| | block | inline-block | inline | | --- | --- | --- | --- | | Ukuran | Mengisi lebar wadah induknya. | Tergantung pada konten. | Tergantung pada konten. | | Penempatan | Mulai di baris baru dan tidak mentolerir elemen HTML di sampingnya (kecuali jika Anda menambahkan float) | Mengalir bersama konten lain dan memungkinkan elemen lain di sampingnya. | Mengalir bersama konten lain dan memungkinkan elemen lain di sampingnya. | | Dapat menentukan width dan height | Ya | Ya | Tidak. Akan diabaikan jika diatur. | | Dapat disejajarkan dengan vertical-align | Tidak | Ya | Ya | | Margin dan padding | Semua sisi dihormati. | Semua sisi dihormati. | Hanya sisi horizontal yang dihormati. Sisi vertikal, jika ditentukan, tidak memengaruhi tata letak. Ruang vertikal yang ditempati tergantung pada line-height, meskipun border dan padding muncul secara visual di sekitar konten. | | Float | - | - | Menjadi seperti elemen block di mana Anda dapat mengatur margin dan padding vertikal. |

Elemen yang diposisikan adalah elemen yang properti position yang dihitungnya adalah relative, absolute, fixed atau sticky.

• static - Posisi default; elemen akan mengalir ke halaman seperti biasanya. Properti top, right, bottom, left, dan z-index tidak berlaku.
• relative - Posisi elemen disesuaikan relatif terhadap dirinya sendiri, tanpa mengubah tata letak (dan dengan demikian meninggalkan celah untuk elemen di mana seharusnya berada jika tidak diposisikan).
• absolute - Elemen dihapus dari aliran halaman dan diposisikan pada posisi tertentu relatif terhadap leluhur terdekatnya yang diposisikan jika ada, atau sebaliknya relatif terhadap blok penampung awal. Kotak yang diposisikan secara absolut dapat memiliki margin, dan tidak menyusut dengan margin lainnya. Elemen-elemen ini tidak memengaruhi posisi elemen lain.
• fixed - Elemen dihapus dari aliran halaman dan diposisikan pada posisi tertentu relatif terhadap viewport dan tidak bergerak saat digulir.
• sticky - Penempatan sticky adalah hibrida dari penempatan relatif dan tetap. Elemen diperlakukan sebagai posisi relative sampai melewati ambang batas tertentu, pada titik tersebut diperlakukan sebagai posisi fixed.

• Bootstrap - Siklus rilis lambat. Bootstrap 4 telah dalam alfa selama hampir 2 tahun. Tambahkan komponen tombol pemintal (spinner button), karena banyak digunakan.
• Semantic UI - Struktur kode sumber membuat penyesuaian tema sangat sulit dipahami. Sistem temanya yang tidak konvensional sulit disesuaikan. Jalur konfigurasi yang dikodekan secara keras di dalam pustaka vendor. Tidak dirancang dengan baik untuk menimpa variabel tidak seperti di Bootstrap.
• Bulma - Banyak kelas dan markup non-semantik dan berlebihan yang diperlukan. Tidak kompatibel mundur. Meningkatkan versi merusak aplikasi dengan cara yang halus.

Ya. Flexbox terutama ditujukan untuk tata letak 1 dimensi sedangkan Grid ditujukan untuk tata letak 2 dimensi.

Flexbox memecahkan banyak masalah umum di CSS, seperti pemusatan elemen secara vertikal di dalam wadah, sticky footer, dll. Bootstrap dan Bulma didasarkan pada Flexbox, dan mungkin itu adalah cara yang direkomendasikan untuk membuat tata letak saat ini. Pernah mencoba Flexbox sebelumnya tetapi mengalami beberapa masalah ketidaksesuaian browser (Safari) dalam menggunakan flex-grow, dan saya harus menulis ulang kode saya menggunakan inline-blocks dan matematika untuk menghitung lebar dalam persentase, itu bukan pengalaman yang menyenangkan.

Grid sejauh ini merupakan pendekatan paling intuitif untuk membuat tata letak berbasis grid (seharusnya begitu!) tetapi dukungan browser belum luas saat ini.

Perhatikan bahwa kedua pendekatan ini tidak eksklusif.

Membuat situs web responsif berarti beberapa elemen akan merespons dengan menyesuaikan ukuran atau fungsionalitas lainnya sesuai dengan ukuran layar perangkat, biasanya lebar viewport, melalui media query CSS, misalnya, membuat ukuran font lebih kecil pada perangkat yang lebih kecil.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Strategi mobile-first juga responsif, namun setuju bahwa kita harus secara default dan mendefinisikan semua gaya untuk perangkat seluler, dan baru menambahkan aturan responsif spesifik ke perangkat lain nanti. Mengikuti contoh sebelumnya:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Strategi mobile-first memiliki 2 keuntungan utama:

• Lebih berkinerja pada perangkat seluler, karena semua aturan yang diterapkan untuk mereka tidak perlu divalidasi terhadap media query apa pun.
• Memaksa untuk menulis kode yang lebih bersih sehubungan dengan aturan CSS responsif.

Baik desain responsif maupun adaptif berusaha mengoptimalkan pengalaman pengguna di berbagai perangkat, menyesuaikan untuk ukuran viewport, resolusi, konteks penggunaan, mekanisme kontrol, dan sebagainya yang berbeda.

Desain responsif bekerja berdasarkan prinsip fleksibilitas - satu situs web yang cair yang dapat terlihat bagus di perangkat apa pun. Situs web responsif menggunakan media query, grid fleksibel, dan gambar responsif untuk menciptakan pengalaman pengguna yang fleksibel dan berubah berdasarkan berbagai faktor. Seperti satu bola yang tumbuh atau menyusut agar muat melalui beberapa lingkaran yang berbeda.

Desain adaptif lebih mirip dengan definisi modern dari peningkatan progresif. Alih-alih satu desain yang fleksibel, desain adaptif mendeteksi perangkat dan fitur lainnya dan kemudian menyediakan fitur dan tata letak yang sesuai berdasarkan kumpulan ukuran viewport yang telah ditentukan dan karakteristik lainnya. Situs mendeteksi jenis perangkat yang digunakan dan menyajikan tata letak yang telah ditentukan untuk perangkat tersebut. Alih-alih satu bola melewati beberapa lingkaran dengan ukuran berbeda, Anda akan memiliki beberapa bola berbeda untuk digunakan tergantung pada ukuran lingkaran.

Kedua metode ini memiliki beberapa masalah yang perlu dipertimbangkan:

• Desain responsif bisa sangat menantang, karena Anda pada dasarnya menggunakan satu tata letak responsif untuk menyesuaikan semua situasi. Cara mengatur breakpoint media query adalah salah satu tantangan tersebut. Apakah Anda menggunakan nilai breakpoint standar? Atau, apakah Anda menggunakan breakpoint yang sesuai dengan tata letak khusus Anda? Bagaimana jika tata letak itu berubah?
• Desain adaptif umumnya memerlukan pengintaian agen pengguna, atau deteksi DPI, dll., yang semuanya dapat terbukti tidak dapat diandalkan.

Retina hanyalah istilah pemasaran untuk merujuk pada layar resolusi tinggi dengan rasio piksel lebih besar dari 1. Hal utama yang perlu diketahui adalah bahwa menggunakan rasio piksel berarti tampilan ini mengemulasi layar resolusi lebih rendah untuk menampilkan elemen dengan ukuran yang sama. Saat ini kita menganggap semua perangkat seluler sebagai tampilan retina defacto.

Browser secara default merender elemen DOM sesuai dengan resolusi perangkat, kecuali untuk gambar.

Untuk memiliki grafik yang tajam dan indah yang memanfaatkan tampilan retina sebaik-baiknya, kita perlu menggunakan gambar resolusi tinggi jika memungkinkan. Namun, selalu menggunakan gambar resolusi tertinggi akan berdampak pada kinerja karena lebih banyak byte yang perlu dikirim melalui kabel.

Untuk mengatasi masalah ini, kita dapat menggunakan gambar responsif, seperti yang ditentukan dalam HTML5. Ini memerlukan penyediaan file resolusi berbeda dari gambar yang sama ke browser dan membiarkannya memutuskan gambar mana yang terbaik, menggunakan atribut html srcset dan secara opsional sizes, misalnya:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

Penting untuk dicatat bahwa browser yang tidak mendukung srcset HTML5 (yaitu IE11) akan mengabaikannya dan menggunakan src sebagai gantinya. Jika kita benar-benar perlu mendukung IE11 dan kita ingin menyediakan fitur ini untuk alasan kinerja, kita dapat menggunakan polyfill JavaScript, misalnya.

Untuk ikon, saya juga akan memilih untuk menggunakan SVG dan font ikon jika memungkinkan, karena mereka merender dengan sangat jelas terlepas dari resolusinya.

translate() adalah nilai dari CSS transform. Mengubah transform atau opacity tidak memicu reflow atau repaint browser tetapi memicu komposisi; sedangkan mengubah posisi absolut memicu reflow. transform menyebabkan browser membuat lapisan GPU untuk elemen tetapi mengubah properti posisi absolut menggunakan CPU. Oleh karena itu translate() lebih efisien dan akan menghasilkan waktu render yang lebih singkat untuk animasi yang lebih halus.

Saat menggunakan translate(), elemen masih menempati ruang aslinya (agak mirip position: relative), tidak seperti saat mengubah posisi absolut.