Komentar CSS
Saat menulis kode CSS terkadang kita ingin menambahkan catatan kecil yang menjelaskan bagian-bagian tertenu di dalam kode.
Jika teks catatan ditulis tanpa komentar, ini berpotensi merusak kode CSS kita dan mempengaruhi tampilan halaman.
Tapi, dengan menggunakan komentar kita tidak perlu khawatir teks yang kita tulis ditafsirkan oleh browser sebagai kode CSS.
Lantas, bagaimana cara membuatnya? mari kita pelajari lebih lanjut.
Apa Itu Komentar?
Komentar CSS adalah teks yang tidak ditampilkan dan ditafsirkan oleh browser sehingga tidak mempengaruhi desain.
Anggap saja teks yang ada di dalam komentar dianggap tidak ada oleh browser, hanya ditujukan untuk developer.
Komentar biasanya digunkaan untuk membuat catatan di dalam kode CSS, misalnya jika kita sedang belajar CSS kita bisa menulis teks penjelasan mengenai properti tertentu.
Selain itu, kita juga bisa memanfaatkan komentar untuk mencegah kode CSS tertentu dieksekusi.
Misalnya, kita ingin mengganti kode CSS yang sudah ada dengan yang baru, tapi kita tidak yakin apakah CSS yang baru bekerja sesuai harapan atau tidak.
Alih-alih menghapus CSS lama, kita bisa menambahkan komentar, sehingga jika CSS baru tidak sesuai harapan, kita tinggal menghapus komentar di CSS lama tanpa harus menulis ulang.
Cara Membuat Komentar CSS
Setiap bahasa markup dan pemrograman memiliki sintaks komentar yang berbeda-beda, termasuk CSS.
Komentar CSS diawali dengan garis miring tanda bintang (/*) dan diakhiri dengan tanda bintang garis miring terbalik (*/).
Teks apa pun yang berada diantara tanda pembuka dan penutup tidak akan dianggap sebagai kode CSS atau dianggap tidak ada oleh browser, termasuk tanda pembuka dan penutup komentar sendiri.
Kita dapat menulis komentar di dalam file CSS eksternal maupun internal.
Berikut sintaksnya:
/* teks */
Di CSS ada dua jenis komentar yang bisa kita gunakan:
- Single-line (sebaris)
- Multi-line (beberapa baris)
Keduanya menggunakan sintaks yang sama. Mari kita pelajari satu per satu.
1. Komentar Sebaris (Single-line)
Sesuai namanya, komentar sebaris (single-line) ditulis dalam satu baris. Ini biasanya digunakan ketika kita ingin membuat catatan singkat.
Kita bisa menulis komentar di luar atau di dalam blok deklarasi, atau tepat setelah deklarasi (properti dan nilai).
Contoh:
/* ini komentar sebaris diluar blok deklarasi CSS */
main {
/* ini komentar sebaris di dalam blok deklarasi CSS */
padding: 10px;
display: flex; /* ini komentar sebaris setelah deklarasi (properti dan nilai) CSS */
justify-content: center;
background-color: blanchedalmond;
}
Masalah dengan metode ini, jika kita menulis komentar panjang kode kita akan akan melebar ke kanan, sehingga sulit dibaca.
Solusinya, mari kita lihat pelajari komentar multi-line.
2. Komentar Beberapa Baris (Multi-line)
Komentar beberapa baris (multi-line) ditulis dalam beberapa baris. Metode ini cocok jika kita ingin mengulis catatan panjang.
Sama seperti metode sebelumnya, kita dapat menulis di dalam atau diluar blok deklarasi, atau setelah deklarasi CSS.
Contoh:
/*
ini adalah komentar beberapa baris
ini baris kedua
ini baris ketiga
dan seterusnya...
*/
h1 {
color: blueviolet;
}
Shortcut Komentar Visual Studio Code
Jika Anda menggunakan kode editor Visual Studio Code, kita tidak perlu membuat tanda komentar secara manual, kita bisa menggunakan shortcut yang telah disediakan untuk membuatnya secara otomatis.
Cukup blok kode CSS yang ingin diberi komentar, lalu tekan Ctrl + /.
Atau, jika kita hanya ingin membuat tanda pembuka dan penutup komentar saja, tempatkan kursor di baris kosong sebelum menekan shortcut.
Atau, jika kita ingin memberikan komentar di baris tertentu, cukup tempatkan kursor di baris tersebut, lalu tekan shortcut.