CSS - Petikan: Menambah Personaliti ke Teks Anda

Hai sana, para desainer web yang sedang mencari ilmu! Hari ini, kita akan melihat properti CSS yang sering diabaikan tapi menarik: petikan. Seperti teman komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk membagikan permata kecil ini kepada Anda. Percayalah, pada akhir panduan ini, Anda akan menyetik seperti seorang profesional!

Apa Itu Petikan CSS?

Sebelum kita masuk ke dalam, mari kita pahami apa itu petikan dalam CSS. Mereka tidak hanya untuk menekankan percakapan atau mengutip sumber; dalam CSS, petikan adalah alat yang kuat untuk secara otomatis menambah tanda petik ke konten Anda. Itu seperti memiliki robot kecil yang mengikuti teks Anda di mana saja, menambah tanda petik kecil itu di mana saja Anda memerintahkan!

Nilai Yang Mungkin

mari kita mulai dengan nilai yang berbeda yang kita bisa gunakan dengan properti quotes. Ini adalah tabel ringkas untuk menyummarisakan:

Nilai	Deskripsi
none	Tidak ada petikan yang digunakan
<string>	Menentukan petikan yang digunakan
initial	Mengatur ke nilai default
inherit	Mewarisi dari elemen induk
auto	Browser memutuskan berdasarkan bahasa

Sekarang, mari kitauraikan ini satu per satu.

Terapkan ke

Sebelum kita masuk lebih dalam, penting untuk dicatat bahwa properti quotes diterapkan ke semua elemen. Namun, itu paling banyak digunakan dengan elemen <q> dan <blockquote>. Bayangkan itu seperti bumbu universal - Anda bisa menambahkannya ke semua elemen, tapi rasanya paling baik dengan makanan tertentu!

Sintaks

Sintaks dasar untuk menggunakan petikan adalah mudah:

selector {
quotes: value;
}

Mudah, kan? Sekarang, mari kita lihat setiap nilai secara rinci.

CSS quotes - nilai none

Ketika Anda mengatur quotes: none, Anda secara esensial memberitahu CSS, "Tidak ada petikan, silakan!" Ini berguna ketika Anda ingin menimpa tanda petik default. Mari kita lihat contoh:

q {
quotes: none;
}

<p> Dia katakan <q>Hello, world!</q></p>

Dalam kasus ini, teks di dalam tag <q> tidak akan memiliki tanda petik apa pun. Itu seperti berbisik tanpa benar-benar menurunkan suara Anda!

CSS quotes - nilai <string>

Ini adalah dimana kesenangan dimulai! Anda dapat menentukan tepatnya karakter apa yang Anda inginkan untuk petikan Anda. Sintaksnya seperti ini:

selector {
quotes: "open-quote1" "close-quote1" "open-quote2" "close-quote2";
}

Mari coba contoh:

q {
quotes: "<<" ">>" "(" ")";
}

<p> Dia menjerit <q>What a <q>wonderful</q> day!</q></p>

Ini akan ditampilkan sebagai: Dia menjerit <<What a (wonderful) day!>>

Apakah itu menarik? Itu seperti memberikan teks Anda facelift!

CSS quotes - nilai initial

Nilai initial mengatur properti ke nilai defaultnya. Itu seperti menekan tombol reset pada petikan Anda. Untuk kebanyakan browser, ini setara dengan:

q {
quotes: '"' '"' "'" "'";
}

Ini memberikan Anda tanda petik Inggris standar: tanda petik ganda untuk tingkat luar, tanda petik tunggal untuk tingkat dalam.

CSS quotes - nilai auto

Nilai auto seperti seorang asisten cerdas untuk petikan Anda. Itu memilih tanda petik yang sesuai berdasarkan bahasa dokumen Anda. Sebagai contoh:

:root {
quotes: auto;
}

Sekarang, jika HTML Anda memiliki lang="fr", itu mungkin menggunakan «guillemets» untuk teks Prancis. Itu seperti memiliki ahli petikan berbahasa banyak di tim Anda!

CSS quotes - Menggunakan pseudo-class :lang

Ini adalah dimana kita bisa menjadi sangat keren. Pseudo-class :lang memungkinkan kita menentukan petikan yang berbeda untuk bahasa yang berbeda. Lihat ini:

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

Ini menetapkan gaya petikan yang berbeda untuk Inggris, Prancis, dan Jerman. Itu seperti mengajarkan situs web Anda untuk berbicara dalam banyak bahasa!

Menggabungkan Semua

Mari kita buat contoh yang lebih kompleks untuk melihat bagaimana semua ini bekerja bersamaan:

<p lang="en">Dia katakan, <q>Saya cinta <q>CSS</q>!</q></p>
<p lang="fr">Elle a dit, <q>J'adore <q>CSS</q> !</q></p>
<p lang="de">Sie sagte, <q>Ich liebe <q>CSS</q>!</q></p>

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

q::before { content: open-quote; }
q::after { content: close-quote; }

Ini akan menampilkan setiap kalimat dengan tanda petik yang sesuai dengan bahasa. Itu seperti memiliki penyetrika yang bisa berbicara dalam banyak bahasa di situs web Anda!

Kesimpulan

Dan begitu, teman-teman! Kita telah berpergian melalui dunia petikan CSS, dari yang sederhana ke yang kompleks. Ingat, petikan tidak hanya tentang tanda baca; mereka tentang menambah personaliti dan konteks budaya ke teks Anda. Mereka adalah rempah dalam masakan teks Anda!

Sekarang, saat Anda terus mengembangkan perjalanan desain web Anda, jangan lupa untuk mencoba petikan. Cobalah gaya yang berbeda, campur bahasa, dan lihat apa yang cocok terbaik untuk situs Anda. Siapa tahu? Anda mungkin hanya menyetik Anda ke stardom desain web!

Happy coding, dan semoga petikan Anda selalu tepat!

Credits: Image by storyset