2015, Mempelajari layout CSS dengan cara yang teliti

 (book.mixu.net)
6 poin oleh GN⁺ 2024-03-01 | 1 komentar | Bagikan ke WhatsApp
  • Materi pembelajaran per bab ini dibuat agar pembaca yang sudah pernah memakai CSS dapat memahami algoritme layout hingga aturan-aturan detailnya
  • inline, block, z-index, dan model box dijelaskan kembali bukan sebagai cara pakai sederhana, melainkan sebagai aturan penentu seperti formatting context dan stacking context
  • Dalam alur normal, posisi relatif elemen block dan inline tidak ditentukan hanya oleh display, tetapi juga dipengaruhi oleh elemen saudara dan konteksnya
  • Ukuran model box dan perhitungan margin: auto berubah sesuai metode positioning, sehingga sulit dihafal sebagai satu aturan tunggal
  • Materi berlanjut dari alur normal, float, absolute positioning, margin collapsing, overflow, z-index, pseudo-element, dan Flexbox ke masalah layout praktis seperti centering dan framework grid

Memahami layout CSS sebagai sekumpulan aturan

  • Materi ini memandang layout CSS bukan sebagai kumpulan tip, melainkan sistem berbasis aturan, lalu menjelaskan tiap aturan dengan menelusurinya per bab dalam materi pembelajaran yang panjang ini
  • Seperti ungkapan “pedantic”, pendekatannya memperhatikan detail-detail yang tampak sepele dan bahkan aturan formalnya
  • Sasaran pembacanya bukan orang yang baru belajar CSS, melainkan mereka yang sudah memakai CSS tetapi ingin memahami perilaku layout dengan lebih ketat
  • Karena website biasanya berkembang secara bertahap, mudah untuk mempelajari layout hanya lewat tip dan trik kecil, dan dalam proses itu algoritme layout itu sendiri bisa terlewat
  • Konsep-konsep utama dibahas secara berurutan, dan disertai contoh penerapan untuk memeriksa tiap konsep

Susunan per bab

  • Chapter 1: Box positioning in CSS membahas bagaimana box yang dibentuk elemen HTML ditempatkan satu sama lain
    • Tiga metode positioning utama di CSS: alur normal, float, dan absolute positioning
    • anonymous box generation, formatting context, line box dalam alur normal, serta perataan di dalam line box
    • urutan float, clearfix, interaksi antara float dan tinggi parent
  • Chapter 2: Box sizing in CSS membahas model box dan perbedaannya menurut metode positioning
    • Perhitungan height, width, dan margin memakai mekanisme yang berbeda-beda
    • Untuk memahami cara perhitungannya, kita perlu melihat metode positioning yang sedang dipakai beserta mekanisme perhitungannya
  • Chapter 3: Additional properties that influence positioning merangkum properti dan mekanisme tambahan yang memengaruhi penempatan box
    • margin collapsing, negative margins, overflow
    • max-width, max-height, min-width, min-height
    • stacking context dan z-index
    • pengaruh pseudo-element terhadap layout
    • properti CSS3 box-sizing
  • Chapter 4: Flexbox menjelaskan mode layout Flexbox di CSS 3
  • Chapter 5: CSS layout - tricks and layout techniques menerapkan isi bab-bab sebelumnya ke masalah nyata
    • centering horizontal dan vertikal
    • cara kerja framework grid CSS
    • layout multi-kolom
    • jebakan umum dan trik layout
  • reference index dapat digunakan saat ingin mencari konsep atau properti tertentu lalu berpindah ke bab dan bagian terkait

Bacaan terkait

1 komentar

 
GN⁺ 2024-03-01
Komentar Hacker News

  • Saat menjelaskan layout CSS, hal pertama yang perlu disebut adalah bahwa ada empat sistem layout yang berbeda: table yang paling tua dan masih dipakai di email, float untuk gambar di dalam isi teks, flexbox yang paling banyak dipakai saat ini, dan grid sebagai alternatif modern untuk table
    penentuan posisi absolute dan fixed juga bisa dipakai seperti hack untuk mengakali layout

    • absolute dan fixed bukan hack dan juga tidak “mengakali” layout
      Keduanya adalah dua dari lima opsi positioning yang menentukan bagaimana elemen ditempatkan dan berperilaku di dalam alur dokumen, atau di dalam container tertentu: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • Dua yang pertama lebih dekat ke sistem layout alternatif yang dipakai sebelum flexbox dan grid
      Properti float juga bisa dipakai bersama Grid. Yang justru tidak disebut adalah normal flow, sistem layout yang paling mudah dan paling dasar: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • Pernyataan bahwa “table adalah sistem layout CSS tertua dan masih dipakai di email” tidak sepenuhnya akurat
      Markup HTML table yang sebenarnya memang merupakan salah satu cara tertua untuk menempatkan bagian-bagian halaman web berdampingan dan juga dipakai di email, tetapi itu pembahasan yang terpisah dari CSS
      Di CSS memang ada display: table dan nilai-nilai terkait, tetapi setahu saya dulu di IE lama ini lebih sulit dipakai daripada float dan penggunaannya juga terbatas. Saya juga hampir tidak pernah melihatnya banyak dipakai di web modern, mungkin karena persyaratan markup di sekitarnya terlalu kaku. Misalnya tidak ada cara untuk mengubah urutan, dan jika butuh beberapa baris, Anda harus menaruh elemen di HTML yang menjalankan peran itu
    • Tambahan, Flexbox Froggy adalah cara terbaik untuk belajar flex, dan sebelum memakai CSS sebaiknya ambil aturan css-reset buatan orang lain
      Karena itu mengubah perilaku kompatibilitas lama menjadi nilai default yang masuk akal. Contoh: https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...
    • table bukan sistem layout CSS yang paling tua. Itu adalah flow layout, dan anehnya justru sama sekali tidak ada di daftar ini

  • Penjelasan bahwa float “dipakai untuk menempatkan kotak di tepi kiri dan kanan kotak container” tidak akurat
    float memang bisa dipakai begitu, tetapi sejak ada flexbox dan grid, orang tidak lagi memakainya seperti itu. Karena elemen keluar dari normal flow, ini jadi cara yang membingungkan untuk membuat layout bagi orang yang sedang belajar CSS
    float lebih dekat ke alat typesetting daripada alat layout. Kalau tulisan itu mengaku pedantic, seharusnya lebih teliti

    • Dalam pengantar HTML/CSS, harus dijelaskan bahwa saat teknologi ini pertama kali dibuat, tujuannya hanyalah untuk rendering dokumen online
      Pada dasarnya ini dibuat seperti Microsoft Word untuk file yang ada di komputer orang lain, jadi sebagian besar properti awal seperti float memang ditujukan untuk layout typesetting
    • Semua elemen di dalam sebuah container akan mengambang ke bagian atas container, lalu ke kanan atau kiri dari elemen sebelumnya tergantung apakah arah teksnya ltr atau rtl
      Jika tidak ada ruang tersisa, elemen itu akan turun ke bawah elemen-elemen sebelumnya. Jika sebuah elemen display: block, elemen itu akan memenuhi seluruh ruang horizontal sehingga semua elemen setelahnya akan mengambang di bawahnya. Itulah sebabnya namanya float, dan begitulah cara posisi elemen dihitung
      Jika memakai float:left|right, elemen tersebut dipaksa lebih dulu mengambang ke kiri atau kanan dibanding elemen lain dalam container yang sama. Tentu saja, jika container memakai flex atau grid, ini tidak lagi bekerja seperti itu
    • Sebagian besar bab 1 (https://book.mixu.net/css/1-positioning.html#float-positioni...) membahas kerumitan float dan alurnya yang khusus, serta menjelaskan cara menggunakan kembali dan menerapkan perilaku itu dengan hati-hati untuk tujuan lain
      Terutama jika mempertimbangkan bahwa saat itu flexbox/grid layout belum ada, menurut saya ini sudah merupakan penjelasan yang teliti
    • Layout flexbox membuat proses ini lebih sederhana
      Ini mengurangi kebutuhan untuk memikirkan banyak properti: https://flexboxcss.com
    • Saya tidak yakin bagaimana menempatkan sidenote atau marginal note tanpa memakai float
      Terutama saat catatan itu harus disejajarkan dengan posisi referensi di tengah paragraf

  • Tulisan seperti ini terasa agak memberatkan meskipun ditulis sebelum era CSS Grid. Sejak CSS Grid muncul, layout CSS jadi makin rumit, dan meskipun sudah 10 tahun mengembangkan web, rasanya saya masih belum paham seberapa dalam CSS itu
    Cara kerjanya, kasus pengecualian yang langka, mekanisme internal, dan jumlah fiturnya yang sangat besar memang begitu, dan saya juga baru-baru ini menulis soal ini
    Bahkan sebelum sempat benar-benar mengejar semua detail Grid Layouting, sudah muncul subgrid dan container queries. Banyak properti yang baru ditambahkan terasa menangani kasus yang terlalu spesifik sampai saya ragu akan pernah memakainya (seperti hanging-punctuation, font-palette)
    Hanya untuk pemenggalan kata dalam paragraf saja ada setidaknya tiga properti, dan orang bisa saja tidak tahu bahwa properti filter juga mendukung jenis filter yang sepenuhnya berbeda dengan memakai SVG. Kita bahkan bisa mengatur algoritme penskalaan gambar, dan border-radius juga mendukung sudut elips
    Kita memang bisa mengatakan hal seperti ini tentang teknologi apa pun, tetapi CSS berbeda. CSS menangani terlalu banyak hal dengan terlalu banyak cara, dan berubah terlalu banyak, terlalu cepat: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/

    • Saya penasaran apa maksud dari “meskipun sudah 10 tahun mengembangkan web, saya masih belum paham seberapa dalam CSS”
      Saya sudah lebih lama berkutat dengan CSS, tapi saya bahkan tidak berusaha menghafal apakah itu align-items atau justify-content, jadi saya tidak ingat. Begitu memakai flexbox, saya langsung membuka https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      Grid lebih sulit lagi untuk saya ingat. Meski begitu, setelah beberapa kali menggerutu dan bilang WTF, biasanya saya tetap bisa membuat apa yang saya mau dengan cukup mudah, jadi saya tidak merasa seperti tidak memahami kedalamannya. Saya sering mendengar orang berkata seperti ini tentang CSS, tetapi dalam kebanyakan kasus saya merasa cukup mudah membuat layout yang diinginkan tanpa usaha besar. Hanya saja saya memang tidak mengingat CSS seperti saya mengingat JS
    • Kalau tertarik pada layout CSS, saya sarankan belajar Flexbox dan CSS Grid dulu
      Keduanya terdokumentasi dengan baik dan relatif intuitif, terutama grid yang perilaku anehnya lebih sedikit
      Sekarang kita juga tidak terlalu perlu memahami flow layout secara mendalam, dan float serta table layout bisa dilewati sepenuhnya. Cukup gunakan untuk gambar mengambang di dalam konten teks, sesuai tujuan awalnya, dan untuk tabel yang benar-benar tabel
    • Masalah yang selalu saya alami dalam pekerjaan frontend adalah semua tulisan seolah menganggap pembacanya adalah orang yang terus mengikuti arus terbaru selama 15 tahun terakhir
      Saat pertama kali saya benar-benar mengerjakan frontend dan dibayar dalam dolar, saya masih menghasilkan DHTML langsung dari perl. Bahkan mengetik singkatan itu saja terasa seperti jari saya kaku karena sudah terlalu jauh hilang dari cache memori otot
      Frontend terasa seperti dijalankan oleh anak enam tahun yang sudah paham kalkulus, jadi sekarang rasanya sudah tidak ada cara untuk benar-benar mengejarnya lagi
    • Saya juga mirip. Saya tinggal mulai memakai grid di sana-sini, dan biasanya hasilnya cukup berjalan baik
      Tapi cukup membantu juga karena saya memakai plain CSS dan biasanya tidak punya stylesheet global
    • Bisa lebih buruk. Bisa saja itu LaTeX

  • Saya banyak mengembangkan aplikasi UI, dan kebanyakan memakai Angular, jadi akhir-akhir ini saya cukup memakai framework seperti Bootstrap atau Foundation
    Banyaknya pilihan layout di CSS murni terasa sangat berlebihan dan bikin pusing, terutama untuk desain responsif. Saya pernah mencoba CSS murni, tetapi akhirnya tetap banyak memakai boilerplate dan malah membuat sesuatu yang mirip mini-framework
    Kecuali kalau membuat situs web desainer yang benar-benar kustom, saya pribadi tidak merasa perlu terus-terusan menemukan kembali roda

    • Boilerplate memang masih ada sedikit, tapi saya suka Open Props karena pendekatannya hibrida
      CSS bukan berarti selalu menemukan kembali roda; justru CSS bisa membuat layout yang sulit atau hal-hal yang dulu perlu JS menjadi lebih mudah dan lebih kuat
      Bootstrap juga oke, tetapi saat harus menyelesaikan masalah layout tingkat lanjut, saya jadi sering memeriksa elemen hanya untuk melihat style apa yang benar-benar diterapkan. Setidaknya itu pengalaman saya, jadi secara pribadi saya akan memilih sisi CSS
      Fitur baru yang saya tunggu adalah aturan @scope, karena sepertinya itu akan membuat style yang memiliki scope jadi jauh lebih mudah
      https://open-props.style/
      https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
    • Fitur CSS modern seperti flexbox, grid, dan media query ditambahkan untuk mengurangi kebutuhan akan framework seperti Bootstrap

  • Apakah tulisan ini dibuat sebelum CSS Grid dan CSS columns?
    Ada juga tulisan tentang z-index: https://philipwalton.com/articles/what-no-one-told-you-about...

    • Benar. Menurut https://book.mixu.net/, ini ditulis pada 2015, dan kalau ini tulisan yang sudah berusia 9 tahun, saya khawatir ini tidak akan terlalu berguna untuk CSS modern

  • Melihat bahwa bab 3 membahas margin collapsing dan negative margins, tulisan ini tampaknya memprioritaskan pemahaman teknik layout lama
    Itu tetap bernilai saat menangani codebase lawas, tetapi untuk proyek baru sebaiknya dihindari

  • Apa cara terbaik untuk mempelajari CSS secara mendalam? Dokumentasi resmi terasa agak aneh dalam hal apa yang masih berlaku saat ini dan apa yang tidak

    • Penggunaan “actual” dengan arti “current” memang agak di luar topik, tetapi itu salah satu ungkapan khas bahasa Inggris ala UE yang saya suka
      Kalau dipikir-pikir, dalam bahasa Belanda current diterjemahkan sebagai actueel dan actual sebagai daadwerkelijk, jadi ini cukup masuk akal. Kalau penutur asli bingung, justru itu mungkin membantu
    • Menurut saya, cara terbaik adalah berulang kali membuat sesuatu
      Mungkin ini cocok untuk gaya belajar tertentu, tetapi ketika benar-benar memanipulasi style dan layout, sisi praktis dari cara kerjanya akan benar-benar melekat
      Saat memakai CSS, saya menargetkan untuk menulis sesedikit mungkin. Bukan karena saya benci CSS—justru saya rasa CSS mendapat reputasi buruk yang tidak adil—melainkan karena dengan begitu kita bisa belajar menata layout dengan lebih efektif tanpa terlalu banyak deklarasi yang saling tumpang tindih
    • Minggu ini saya kembali mempelajari teknologi frontend dan sempat melakukan sedikit riset pasar
      Materi terbaik untuk dasar-dasar CSS adalah https://web.dev/learn/css, dan itu juga mencakup flexbox serta grid
      Untuk panduan desain, saya merekomendasikan Refactoring UI. Di sana ada banyak saran yang bisa langsung diterapkan, yang kurang di buku seperti The UX Book
      Dalam proyek saya, saya memakai komponen TailwindCSS dan Daisy UI dari penulis Refactoring UI, jadi pada praktiknya saya tidak menulis raw CSS. Awalnya TailwindCSS terasa seperti kemunduran menjadi inline CSS, tetapi tetap saja lebih baik daripada alternatifnya. Saya sarankan untuk mencobanya
    • Saya penasaran apa yang dimaksud dengan “dokumentasi resmi” di sini. Apakah spesifikasi[1], atau MDN[2]?
      [1] https://drafts.csswg.org/
      [2] https://developer.mozilla.org/en-US/docs/Web/CSS
      Yang pertama bukan materi belajar untuk pengembang web baru. Yang kedua juga bukan dokumen resmi atau otoritatif, tetapi biasanya memuat informasi tentang dukungan Baseline dan tabel kompatibilitas browser
    • Pelajari flexbox, pelajari box model, dan terutama pahami kapan harus memakai margin dan padding
      Bagus juga mempelajari bagaimana cascade style bekerja, sehingga Anda juga akan mengerti mengapa orang memakai SCSS dan pengembangan berbasis komponen agar sebagian besar hal itu tidak perlu terlalu dipikirkan
      Pelajari juga media query dan penargetan berdasarkan ukuran layar. Yang terpenting, tidak perlu malu mencari di web “cara melakukan x di CSS”. Spesifikasinya sangat besar dan ada banyak hal untuk diingat, jadi kalau tidak sering dipakai dalam waktu lama, mustahil mengingat semuanya