Gunakan CSS dengan cakupan komponen untuk mengontrol elemen mana yang dijangkau suatu aturan, dan stylesheet bersama untuk menggunakan kembali aturan di beberapa halaman. Untuk proyek HTML kecil di Mac Anda, Anda dapat menggabungkan keduanya; pilih susunan file sesuai kebutuhan pemindahan dan pemeliharaan Anda.

Panduan ini membahas penataan gaya halaman lokal yang berisi kartu berbentuk persegi dengan sudut membulat dan catatan terpisah. Tujuannya adalah menjaga tampilan kartu tetap konsisten, lalu memutuskan apakah CSS-nya sebaiknya berada di dalam halaman atau di file yang dapat digunakan kembali. Label dan bentuknya bersifat sintetis, dan contoh ini tidak memerlukan framework atau aset yang diunduh.

Apa yang sebenarnya Anda pilih?

Ada dua keputusan: di mana CSS ditempatkan dan elemen mana yang dipilihnya. Stylesheet tertanam berada dalam elemen style dokumen HTML. Stylesheet eksternal adalah sumber daya terpisah yang ditautkan dengan link, menggunakan rel="stylesheet" dan jalur href. Keduanya adalah mekanisme HTML untuk menyediakan CSS; tidak satu pun secara otomatis memberi pemilih biasa batas komponen. Standar HTML: Elemen style, MDN: Elemen tautan sumber daya eksternal.

CSS native @scope menambahkan batas pemilihan. Anda menentukan elemen akar, lalu menulis aturan yang berlaku di dalam subtree tersebut. Ini dapat membuat pemilih singkat tetap berguna saat dokumen di sekitarnya berisi elemen serupa. Dokumentasi Chrome juga membedakan cakupan native dari alat yang menulis ulang pemilih dengan kelas atau atribut yang dibuat otomatis. Alat seperti itu menjadi prasyarat tambahan jika contoh komponen bergantung padanya. Batasi jangkauan pemilih Anda dengan at-rule CSS @scope.

Untuk tugas ini, gunakan panduan keputusan berikut. Ini adalah rekomendasi editorial berdasarkan mekanisme yang didokumentasikan, bukan persyaratan browser.

Tugas langsung Anda Susunan yang disarankan Yang harus ikut dipindahkan
Menjaga satu halaman kecil sebagai satu file Sematkan CSS dalam elemen style HTML, beserta aset apa pun yang dirujuk secara terpisah
Memelihara kartu yang sama di beberapa halaman Gunakan stylesheet eksternal dengan kelas komponen khusus Setiap halaman HTML dan CSS bersama
Menggunakan pemilih yang lebih singkat dalam subtree yang ditentukan Tambahkan aturan @scope dengan akar eksplisit, tertanam atau eksternal CSS dan markup yang berisi akar yang cocok
Mendukung browser yang dukungan cakupannya belum pasti Pertahankan gaya penting dalam aturan kelas biasa HTML dan stylesheet mana pun yang berisi aturan tersebut

Karena itu, “portabel” perlu memiliki arti yang konkret. Satu file HTML praktis dipindahkan sendiri. Folder berisi HTML dan CSS juga bisa portabel, asalkan jalurnya tetap valid. Komponen yang dapat digunakan kembali memerlukan jenis portabilitas ketiga: lokasi tujuan harus mempertahankan kait markup yang diharapkan oleh pemilihnya.

Buat contoh dua file yang berfungsi di Mac Anda

Buat folder bernama form-study. Di dalamnya, simpan dua file teks biasa bernama index.html dan shared.css. Jika Anda menggunakan TextEdit, pilih File > New, lalu Format > Make Plain Text sebelum menempelkan kode. Untuk file HTML, Apple mendokumentasikan penyimpanan dengan ekstensi .html dan memilih Use .html saat diminta. Pastikan nama file stylesheet yang sebenarnya adalah shared.css, tanpa akhiran .txt tambahan. Bekerja dengan dokumen HTML di TextEdit pada Mac.

Simpan dokumen HTML lengkap ini sebagai index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

Simpan stylesheet lengkap ini sebagai shared.css:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

Buka index.html di Safari atau browser desktop lainnya. Hasil yang diharapkan adalah kartu putih berbingkai dengan persegi membulat berwarna biru, diikuti catatan tanpa bingkai. Koneksi stylesheet mengikuti pola yang didokumentasikan MDN: HTML menyebutkan sumber daya CSS melalui href pada tautan stylesheet. MDN: Menyertakan stylesheet.

Contoh ini sengaja memberi judul kartu kelas tersendiri. Dengan begitu, hubungan gaya yang dimaksud terlihat tanpa memerlukan cakupan native. Latar belakang halaman dan font adalah gaya bawaan dokumen; bingkai kartu, warna judul, dan bentuknya menjadi milik kartu. Pertahankan pembedaan ini saat memindahkan aturan agar dapat digunakan kembali: halaman tujuan mungkin memerlukan kartu tanpa menggunakan latar belakang atau lebar halaman ini.

Untuk membagikan desainnya, buat halaman HTML kedua di folder yang sama dan gunakan tautan stylesheet yang sama. Dengan begitu, kedua halaman merujuk ke satu file CSS. Perlakukan perubahan pada file tersebut sebagai perubahan bagi setiap halaman yang menautkannya; tinjau setiap halaman setelah mengubah aturan bersama.

Kapan CSS dengan cakupan native membantu?

Gunakan @scope saat komponen berisi beberapa elemen yang cocok menggunakan pemilih lokal sederhana, terutama ketika Anda memerlukan batas bawah yang eksplisit di sekitar konten bertingkat. Spesifikasi CSS Cascading and Inheritance mendefinisikan cakupan melalui akar dan elemen pembatas opsional. Akar disertakan; elemen pembatas dan turunannya tidak disertakan dalam kecocokan aturan bercakupan. Spesifikasi ini berstatus Draf Kerja. CSS Cascading and Inheritance Level 6: Cakupan Gaya.

Untuk percobaan kecil, tambahkan fragmen opsional berikut di akhir shared.css. Fragmen ini menggunakan markup contoh yang ada dan mengubah tampilan paragraf kartu:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

Di browser yang mendukungnya, paragraf di dalam kartu mendapat latar belakang pucat dan padding. Paragraf catatan berada di luar cakupan aturan tersebut. CSS tetap berada di file bersama: cakupan dan berbagi dapat digunakan bersamaan.

Jika nanti Anda menambahkan area bertingkat dengan kelas nested-sample, Anda dapat mengganti fragmen opsional tersebut dengan yang berikut. Ini hanya contoh batas; halaman asli belum memiliki area bertingkat seperti itu.

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

Pembatas mengecualikan area bertingkat dari kecocokan pemilih ini. Namun, pembatas tidak menciptakan isolasi gaya yang menyeluruh: properti yang diwariskan seperti color dan font-family tetap dapat diteruskan melewati batas cakupan. Ingat perbedaan ini saat mendiagnosis elemen bertingkat yang masih menyerupai induknya. MDN: Deskripsi @scope.

Akar eksplisit seperti .shape-card juga memperjelas dependensi saat CSS dipindahkan antarfile. Dokumen tujuan harus berisi elemen dengan kelas tersebut. Memindahkan stylesheet saja tidak akan menyertakan markup yang diperlukan.

Apa batas dukungan browsernya?

MDN saat ini menandai @scope sebagai Baseline 2026, yang baru tersedia di seluruh versi browser terbaru sejak Maret 2026. Browser lama mungkin belum mendukungnya. Keberadaan Mac di meja Anda tidak memastikan fitur CSS mana yang didukung browser terpasang; periksa informasi kompatibilitas untuk versi yang hendak Anda gunakan. MDN: Kompatibilitas browser @scope.

Pertahankan gaya kartu yang penting dalam aturan kelas biasa di atas jika browser lama juga perlu didukung. Gaya opsional paragraf bercakupan dapat tetap menjadi penyempurnaan. Penanganan kesalahan CSS memungkinkan browser membuang konten yang tidak didukung sambil tetap memproses CSS yang valid, sehingga keberadaan stylesheet tidak membuktikan bahwa setiap aturan di dalamnya diterapkan. MDN: Penanganan kesalahan CSS.

Untuk menerapkan gaya paragraf yang sama tanpa @scope, beri paragraf kartu kelas khusus seperti shape-card__caption, lalu pilih kelas itu dalam aturan biasa. Cara ini menambahkan kait markup, tetapi hasilnya tidak bergantung pada cakupan native.

Jangan tambahkan atribut scoped ke elemen style dengan harapan memperoleh perilaku yang sama. Daftar atribut elemen tersebut dalam Standar HTML saat ini tidak mencantumkannya. Cakupan CSS native menggunakan aturan @scope. Standar HTML: Elemen style, MDN: Sintaks @scope.

Bagaimana menjaga halaman tetap portabel?

Untuk contoh ini, memindahkan seluruh folder form-study mempertahankan hubungan antara index.html dan shared.css. Memindahkan HTML saja akan meninggalkan stylesheet-nya. Gunakan kontrak dependensi sederhana ini sebelum menyerahkan atau menata ulang halaman yang dibuat:

  1. Markup: Pertahankan kelas komponen dan struktur apa pun yang diperlukan oleh pemilihnya.
  2. Stylesheet: Sertakan file CSS dan pastikan tautan HTML tetap mengarah ke lokasinya.
  3. Sumber daya: Sertakan file apa pun yang dirujuk oleh CSS, dengan mempertahankan atau memperbarui jalurnya.
  4. Browser: Sediakan jalur gaya yang didukung untuk versi browser yang akan membuka halaman.

Pemeriksaan ketiga menjadi penting saat komponen menggunakan font atau file dekoratif. MDN mendokumentasikan bahwa URL CSS relatif diselesaikan berdasarkan URL stylesheet. Karena itu, memindahkan deklarasi ke stylesheet di folder lain dapat mengubah lokasi sumber daya yang dirujuknya. MDN: Fungsi CSS url().

Misalnya, jika stylesheet eksternal dipindahkan dari folder proyek ke subfolder styles, deklarasi yang merujuk langsung ke url("assets/tile.png") kini mengarah ke dalam styles/assets. Perbarui jalurnya atau pertahankan struktur direktori yang sesuai. Contoh yang berfungsi ini menghindari dependensi tersebut dengan menggambar bentuknya sepenuhnya menggunakan CSS.

Jika prioritasnya adalah penyerahan dalam satu file, sematkan CSS yang disediakan dalam elemen style di dalam head dokumen, lalu hapus tautan stylesheet. Contoh ini kemudian hanya memerlukan file HTML. Pertahankan pemilih yang sama, termasuk blok @scope opsional dengan akar eksplisit. HTML mendukung penyematan stylesheet melalui elemen style. Standar HTML: Elemen style.

Periksa keputusan dengan uji pindahkan dan muat ulang

Buat salinan seluruh folder proyek di lokasi lain, lalu buka HTML yang disalin di browser. Pada salinan itu, ubah warna latar belakang bentuk dalam shared.css, simpan, lalu muat ulang halaman. Perubahan yang terlihat memastikan bahwa Anda mengedit stylesheet yang digunakan oleh halaman salinan.

Selanjutnya, periksa kartu dan catatan. Hasil yang berhasil mempertahankan gaya kartu sementara catatan tetap berada di luar aturan paragraf bercakupan opsional. Jika seluruh halaman kehilangan gayanya, periksa nama file CSS dan jalur tautannya terlebih dahulu. Jika hanya gaya opsional yang tidak muncul, periksa dukungan browser dan akar cakupan. Jika elemen yang tidak terkait berubah, periksa pemilih yang menjangkau lebih dari komponen yang dimaksud.

Saat membuka kembali HTML di TextEdit, gunakan File > Open, lalu Show Options dan Ignore rich text commands jika Anda perlu melihat sumbernya. Apple juga mendokumentasikan pengaturan Display HTML files as HTML code instead of formatted text untuk pembukaan selanjutnya. Bekerja dengan dokumen HTML di TextEdit pada Mac.

Pilih CSS tertanam jika tugas utamanya adalah menjaga halaman kecil ini tetap dalam satu kesatuan. Pilih stylesheet bersama jika beberapa halaman perlu menggunakan aturan terpelihara yang sama. Tambahkan cakupan native jika batasnya menyederhanakan aturan tersebut dan browser mendukungnya. Akhiri dengan memindahkan dan membuka kembali file yang sebenarnya: langkah ini memeriksa hubungan markup, stylesheet, dan sumber daya yang diperlukan oleh susunan pilihan Anda.

Sumber