0Pricing
CSS Academy · Pelajaran

Aturan dan Titik Henti @container

Tuliskan aturan @container yang menerapkan gaya ketika kontainer mencapai dimensi tertentu.

Aturan dan Titik Henti @container adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Sintaks Aturan @container

@container adalah aturan at yang menerapkan gaya ketika wadah memenuhi kondisi ukuran tertentu. Sintaksnya menyerupai kueri media:

<div class="wrapper"><div class="box">Styled once container &ge; 400px wide</div></div>

Kueri Wadah Bernama

Targetkan wadah tertentu yang telah diberi nama:

<div class="sidebar">
  <div class="nav-item">Dashboard</div>
  <div class="nav-item">Settings</div>
</div>

Kueri Wadah Lebar Maksimum

Gunakan max-width untuk menerapkan gaya pada kontainer yang lebih kecil:

<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>

Kueri Kontainer dengan Rentang

Sintaks kueri kontainer modern mendukung rentang:

<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>

Komponen Kartu Adaptif

Komponen kartu yang beradaptasi berdasarkan lebar kontainernya:

<div class="card-wrapper">
  <div class="card">
    <div class="card__image"></div>
    <div class="card__body">Adaptive card content</div>
  </div>
</div>

Kueri Kontainer Bertingkat

Kueri kontainer dapat dibuat bertingkat. Secara bawaan, kueri bagian dalam merujuk pada leluhur kontainer terdekat.

<div class="outer">
  <div class="inner">
    <div class="content">Nested container-aware content</div>
  </div>
</div>

Titik Henti Kueri Kontainer

Berbeda dengan titik henti area pandang, titik henti kontainer sebaiknya dipilih berdasarkan kapan tata letak komponen perlu berubah, bukan berdasarkan ukuran perangkat yang sembarang. Mulailah dari lebar konten minimum dan maksimum komponen.

Tipografi dalam Kontainer

Sesuaikan tipografi untuk kontainer kecil:

<div class="wrapper">
  <h3 class="card-title">Adaptive Heading</h3>
  <p class="card-text">Body copy that hides on very narrow containers.</p>
</div>

Kueri Kontainer untuk Tata Letak Kisi

Ubah kisi internal komponen pada titik henti kontainer:

<div class="widget">
  <div class="widget-grid">
    <div>Tile 1</div>
    <div>Tile 2</div>
  </div>
</div>

Kueri Gaya (Di Luar Ukuran)

Kueri kontainer juga mendukung kueri gaya yang memeriksa nilai properti khusus yang telah dihitung. Ini memungkinkan varian komponen yang digerakkan oleh variabel CSS tanpa kelas tambahan:

<div class="wrapper"><div class="card">Featured card styled via style query</div></div>

Pemeriksaan Singkat

Apa yang ditargetkan oleh @container (min-width: 500px)?

Ringkasan

Aturan @container menerapkan gaya pada elemen di dalam kontainer ketika kontainer memenuhi kondisi ukuran. Gunakan kontainer bernama untuk menargetkan leluhur tertentu. Titik henti kontainer sebaiknya didasarkan pada kebutuhan konten, bukan ukuran perangkat. Kueri gaya memperluas kueri kontainer untuk memeriksa nilai variabel CSS — sehingga memungkinkan varian komponen deklaratif yang canggih.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Aturan dan Titik Henti @container” gratis?

Ya — teks lengkap “Aturan dan Titik Henti @container” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Aturan dan Titik Henti @container”?

Tuliskan aturan @container yang menerapkan gaya ketika kontainer mencapai dimensi tertentu. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Aturan dan Titik Henti @container” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. container-type dan container-name
  2. Aturan dan Titik Henti @container
  3. Unit Kueri Kontainer: cqw cqh
  4. Kueri Kontainer vs Kueri Media
← Kembali ke CSS Academy