Manuel Matuzovic: max() Tipuan

Dengan cara a kiriman oleh Manuel Matuzovic yaitu dengan cara demo oleh Teman Afif.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

Anda akan membantu diri Anda sendiri untuk membaca uraian Manuel tentang semua yang terjadi di sini, tetapi pada dasarnya ini setara dengan sintaks yang lebih panjang ini:

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…di mana:

• maks() menerima daftar nilai numerik CSS yang dipisahkan koma, di mana nilai yang diterapkan adalah yang terbesar (atau sebagai MDN mengatakan, yang "paling positif") di set.
• 0px adalah nilai pertama dalam himpunan, memastikan bahwa nilai terkecil akan selalu lebih besar dari nol piksel.
• (100% - 64rem) adalah "nilai" kedua dalam himpunan, tetapi dinyatakan sebagai perhitungan (perhatikan bahwa calc() tidak perlu) yang mengurangi max-width dari elemen (64rem) dari yang tersedia lengkap width (100%). Yang tersisa adalah ruang yang tidak diambil oleh elemen.
• ((100% - 64rem) / 2)) membagi ruang yang tersisa secara merata karena kita membaginya di antara batas-batas sebaris elemen.
• max(0px, ((100% - 64rem) / 2)) membandingkan 0px dan (100% - 64rem) / 2). Nilai terbesar digunakan. Itu akan menjadi hasil persamaan dalam banyak kasus, tetapi jika 64rem selalu lebih besar dari nilai yang dihitung dari elemen penuh 100% lebar, itu akan mengunci nilai itu pada nol untuk memastikan tidak pernah menghasilkan nilai negatif.
• margin-inline adalah properti yang ditetapkan oleh nilai pemenang, yang menerapkan margin ke sisi sebaris elemen — itulah singkatan logis yang setara dengan menyetel nilai yang sama ke margin-left dan margin-right properti fisik.

Ini adalah jenis ide yang sama Chris membagikannya beberapa waktu lalu yang menggunakan CSS max()berfungsi untuk menyelesaikan “Masalah Dalam” — wadah yang mendukung warna latar belakang penuh sambil membatasi konten di dalamnya dengan padding.

max(), calc(), margin-inline… itu banyak CSS bermodel baru! Dan Manuel tepat di tengah-tengah menulis tentang ini dan fitur CSS modern lainnya selama 100 hari.

Tautan Langsung →