Karakter Khusus dan Fungsi dalam CSS
Artikel ini menjelaskan karakter khusus dan fungsi dalam CSS.
Anda dapat mempelajari tentang karakter khusus dan fungsi seperti calc() dan var() dalam CSS.
YouTube Video
HTML untuk Pratinjau
css-escape-and-function.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Pseudo Class/Element</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-escape-and-function.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Special Characters & Functions</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Special Characters</h2></header>
19 <article>
20 <h3>CSS Special Characters</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24#my\#id {
25 color: red;
26}
27
28#my\.id {
29 color: red;
30}
31
32#my\[id\] {
33 color: red;
34}
35</pre>
36 <header><h4>HTML</h4></header>
37<pre>
38<div id="my.id">Dot Example</div>
39<div id="my[id]">Bracket Example</div>
40<div id="my#id">Sharp Example</div>
41</pre>
42 <header><h4>HTML+CSS</h4></header>
43 <section class="sample-view">
44 <div id="my#id">Sharp Example</div>
45 <div id="my.id">Dot Example</div>
46 <div id="my[id]">Bracket Example</div>
47 </section>
48 </section>
49 </article>
50 <article>
51 <h3>CSS Special Characters</h3>
52 <section>
53 <header><h4>CSS</h4></header>
54<pre class="sample">
55.\31 23abc {
56 font-weight: bold;
57 color: blue;
58}
59</pre>
60 <header><h4>HTML</h4></header>
61<pre>
62<div class="123abc">Numeric Class</div>
63</pre>
64 <header><h4>HTML+CSS</h4></header>
65 <section class="sample-view">
66 <div class="123abc">Numeric Class</div>
67 </section>
68 </section>
69 </article>
70 <article>
71 <h3>CSS Special Characters</h3>
72 <section>
73 <header><h4>CSS</h4></header>
74<pre class="sample">
75.content-unicode::before {
76 content: "\00A9"; /* copyright mark */
77 color: blue;
78}
79
80.content-backslash::after {
81 content: " : \\";
82 color: blue;
83}
84</pre>
85 <header><h4>HTML</h4></header>
86<pre>
87<div class="content-unicode">Copyright</div>
88<div class="content-backslash">This is a backslash example</div>
89</pre>
90 <header><h4>HTML+CSS</h4></header>
91 <section class="sample-view">
92 <div class="content-unicode">Copyright</div>
93 <div class="content-backslash">This is a backslash example</div>
94 </section>
95 </section>
96 </article>
97 <article>
98 <h3>CSS Special Characters</h3>
99 <section>
100 <header><h4>CSS</h4></header>
101<pre class="sample">
102.user\@name {
103 color: green;
104}
105
106#section\$ {
107 font-size: 24px;
108 color: blue;
109}
110</pre>
111 <header><h4>HTML</h4></header>
112<pre>
113<div class="user@name">User</div>
114<div id="section$">Section</div>
115</pre>
116 <header><h4>HTML+CSS</h4></header>
117 <section class="sample-view">
118 <div class="user@name">User</div>
119 <div id="section$">Section</div>
120 </section>
121 </section>
122 </article>
123 </main>
124
125 <main>
126 <header><h2>CSS Functions</h2></header>
127 <article>
128 <h3>calc()</h3>
129 <section>
130 <header><h4>CSS</h4></header>
131<pre class="sample">
132p.calc-width {
133 width: calc(50% - 10px);
134}
135</pre>
136 <header><h4>HTML</h4></header>
137<pre>
138<p class="calc-width">
139 <span>First Text</span>
140</p>
141</pre>
142 <header><h4>HTML+CSS</h4></header>
143 <section class="sample-view">
144 <p class="calc-width">
145 <span>First Text</span>
146 </p>
147 </section>
148 </section>
149 </article>
150 <article>
151 <h3>rgb() / rgba()</h3>
152 <section>
153 <header><h4>CSS</h4></header>
154<pre class="sample">
155p.rgb {
156 background-color: rgb(255, 0, 0);
157}
158
159p.rgb span {
160 background-color: rgba(0, 255, 0, 0.5);
161}
162</pre>
163 <header><h4>HTML</h4></header>
164<pre>
165<p class="rgb">
166 <span>First Text</span>
167</p>
168</pre>
169 <header><h4>HTML+CSS</h4></header>
170 <section class="sample-view">
171 <p class="rgb">
172 <span>First Text</span>
173 </p>
174 </section>
175 </section>
176 </article>
177 <article>
178 <h3>hsl() / hsla()</h3>
179 <section>
180 <header><h4>CSS</h4></header>
181<pre class="sample">
182p.hsl {
183 /* Specify hue, saturation, and lightness */
184 background-color: hsl(240, 25%, 50%);
185}
186
187p.hsl span {
188 /* Specification with transparency */
189 background-color: hsla(120, 100%, 50%, 0.5);
190}
191</pre>
192 <header><h4>HTML</h4></header>
193<pre>
194<p class="hsl">
195 <span>First Text</span>
196</p>
197</pre>
198 <header><h4>HTML+CSS</h4></header>
199 <section class="sample-view">
200 <p class="hsl">
201 <span>First Text</span>
202 </p>
203 </section>
204 </section>
205 </article>
206 <article>
207 <h3>url()</h3>
208 <section>
209 <header><h4>CSS</h4></header>
210<pre class="sample">
211div.bg-image {
212 background-image: url('image.jpg');
213}
214</pre>
215 <header><h4>HTML</h4></header>
216<pre>
217<div class="bg-image">
218 <span>First Text</span>
219</div>
220</pre>
221 <header><h4>HTML+CSS</h4></header>
222 <section class="sample-view">
223 <div class="bg-image">
224 <span>First Text</span>
225 </div>
226 </section>
227 </section>
228 </article>
229 <article>
230 <h3>var()</h3>
231 <section>
232 <header><h4>CSS</h4></header>
233<pre class="sample">
234/* Definition of custom properties */
235:root {
236 --main-color: #3498db;
237}
238
239/* Use of custom properties */
240p.main-color {
241 color: var(--main-color);
242}
243</pre>
244 <header><h4>HTML</h4></header>
245<pre>
246<p class="main-color">
247 <span>First Text</span>
248</p>
249</pre>
250 <header><h4>HTML+CSS</h4></header>
251 <section class="sample-view">
252 <p class="main-color">
253 <span>First Text</span>
254 </p>
255 </section>
256 </section>
257 </article>
258 <article>
259 <h3>attr()</h3>
260 <section>
261 <header><h4>CSS</h4></header>
262<pre class="sample">
263/* Example of using the attr() function */
264a::after {
265 content: " (" attr(title) ")";
266}
267</pre>
268 <header><h4>HTML</h4></header>
269<pre>
270<a href="#section1" title="Section 1">Click here</a>
271</pre>
272 <header><h4>HTML+CSS</h4></header>
273 <section class="sample-view">
274 <a href="#section1" title="Section 1">Click here</a>
275 </section>
276 </section>
277 </article>
278 <article>
279 <h3>min() / max() / clamp()</h3>
280 <section>
281 <header><h4>CSS</h4></header>
282<pre class="sample">
283div.min {
284 /* Use the smaller value between 100% and 500px as the width */
285 width: min(100%, 500px);
286}
287div.max {
288 /* Use the larger value between 100% and 500px as the width */
289 width: max(100%, 500px);
290}
291div.clamp {
292 /* Adjust to fit within the range of 300px to 600px */
293 width: clamp(100px, 30%, 400px);
294}
295</pre>
296 <header><h4>HTML</h4></header>
297<pre>
298<div class="min">min(100%, 500px)</div>
299<div class="max">max(100%, 500px)</div>
300<div class="clamp">clamp(100px, 30%, 400px)</div>
301</pre>
302 <header><h4>HTML+CSS</h4></header>
303 <section class="sample-view">
304 <div class="min">min(100%, 500px)</div>
305 <div class="max">max(100%, 500px)</div>
306 <div class="clamp">clamp(100px, 30%, 400px)</div>
307 </section>
308 </section>
309 </article>
310 <article>
311 <h3>repeat()</h3>
312 <section>
313 <header><h4>CSS</h4></header>
314<pre class="sample">
315/* Set three columns to be evenly spaced */
316grid-template-columns: repeat(3, 1fr);
317</pre>
318 </section>
319 </article>
320 <article>
321 <h3>linear-gradient() / radial-gradient() / conic-gradient()</h3>
322 <section>
323 <header><h4>CSS</h4></header>
324<pre class="sample">
325div.linear-gradient {
326 /* Linear gradient */
327 background: linear-gradient(to right, red, blue);
328}
329div.radial-gradient {
330 /* Radial gradient */
331 background: radial-gradient(circle, red, blue);
332}
333div.conic-gradient {
334 /* Conic gradient */
335 background: conic-gradient(from 0deg, red, yellow, blue, red);
336}
337</pre>
338 <header><h4>HTML</h4></header>
339<pre>
340<div class="linear-gradient">linear-gradient</div>
341<div class="radial-gradient">radial-gradient</div>
342<div class="conic-gradient">radial-gradient</div>
343</pre>
344 <header><h4>HTML+CSS</h4></header>
345 <section class="sample-view">
346 <div class="linear-gradient">linear-gradient</div>
347 <div class="radial-gradient">radial-gradient</div>
348 <div class="conic-gradient">conic-gradient</div>
349 </section>
350 </section>
351 </article>
352 </main>
353</body>
354</html>Karakter Khusus dan Pelarian di CSS
Karakter pelolosan CSS adalah teknik untuk menangani karakter tertentu dengan aman. Dengan meloloskan simbol atau karakter khusus yang memiliki makna sintaksis, Anda dapat menggunakannya secara aman dalam selektor atau string.
Gambaran Umum Karakter Pelarian CSS
Pelolosan CSS adalah mekanisme untuk meloloskan karakter tertentu atau unicode agar dapat digunakan dalam selektor sesuai aturan sintaksis tertentu. Sebagai contoh, ketika ID elemen HTML atau nama kelas mengandung simbol khusus (#, @, . dll.), atau ketika menangani nama kelas atau ID yang dimulai dengan angka, karakter pelolos sangat berguna.
Pelarian terutama digunakan untuk tujuan berikut:
- Menggunakan karakter khusus sebagai selektor
- Menangani ID atau nama kelas yang dimulai dengan angka
- Melarikan simbol khusus atau karakter non-ASCII
Sintaks Pelarian Dasar
Karakter pelolos ditulis dalam CSS menggunakan backslash (\). Dengan menempatkan backslash sebelum karakter yang akan diloloskan, karakter tersebut akan dianggap sebagai karakter biasa.
Pelarian Karakter Khusus
1<div id="my#id">Sharp Example</div>
2<div id="my.id">Dot Example</div>
3<div id="my[id]">Bracket Example</div> 1#my\#id {
2 color: red;
3}
4
5#my\.id {
6 color: red;
7}
8
9#my\[id\] {
10 color: red;
11}- Seperti dalam contoh ini, pelolosan diperlukan saat menggunakan karakter khusus dalam selektor CSS.
#,.,[, dan]adalah karakter khusus dalam CSS. Jika karakter-karakter ini termasuk dalam ID, pelolosan diperlukan.
Pelarian ID atau Nama Kelas yang Dimulai dengan Angka
1<div class="123abc">Numeric Class</div>1.\31 23abc {
2 font-weight: bold;
3 color: blue;
4}- Dalam CSS, jika ID atau nama kelas dimulai dengan angka, menuliskannya langsung tidak valid. Dalam kasus seperti itu, gunakan pelolosan.
- Di sini, kita meloloskan angka awal
1dalam123abc.1direpresentasikan sebagai UnicodeU+0031dan diloloskan dengan backslash dan spasi menjadi\31.
Melarikan Karakter Unicode
1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3 content: "\00A9"; /* copyright symbol */
4 color: blue;
5}- Saat meloloskan karakter Unicode, tentukan angka heksadesimal 6 digit setelah backslash.
- Kode ini menunjukkan cara menampilkan © (simbol hak cipta) dalam CSS.
Pelarian Dalam String
1.content-backslash::after {
2 content: " : \\";
3 color: blue;
4}- Saat menggunakan backslash dalam string dalam CSS (seperti properti
content), harus menggunakan double backslash. - Dalam contoh ini,
\\ditulis untuk menampilkan backslash dalam string.
Contoh Praktis: Mempercantik Elemen HTML dengan Karakter Khusus
1<div class="user@name">User</div>
2<div id="section$">Section</div> 1/* When the class name contains special characters */
2.user\@name {
3 color: green;
4}
5
6/* When the ID contains special characters */
7#section\$ {
8 font-size: 24px;
9 color: blue;
10}- Di sini, kita meloloskan elemen yang mengandung karakter khusus
@dan$.
Ringkasan
Karakter pelolos CSS sangat berguna untuk menangani selektor dan string dengan benar dalam kasus khusus. Memahami kapan pelolosan diperlukan membantu menghindari kesalahan saat menata elemen HTML yang kompleks. Terutama saat menangani nama kelas atau ID yang dimulai dengan karakter khusus atau angka, pelolosan dengan backslash sangat penting.
Fungsi di CSS
Dalam CSS, Anda dapat menggunakan fungsi untuk menentukan atau menghitung gaya secara dinamis. Di sini, kami memperkenalkan beberapa fungsi CSS yang umum.
calc()
1p.calc-width {
2 /* Specify the value obtained by subtracting 10px from 50% width */
3 width: calc(50% - 10px);
4 background-color: #eee;
5}- Fungsi
calc()digunakan untuk menghitung nilai seperti lebar dan tinggi elemen secara dinamis. Anda dapat menggunakan operator+,-,*,/untuk menggabungkan nilai relatif (%) dan nilai absolut (px) dalam tata letak.
rgb() / rgba()
1p.rgb {
2 /* Color specification for red, green, and blue */
3 background-color: rgb(255, 0, 0);
4}
5
6p.rgb span {
7 /* Color specification with transparency */
8 background-color: rgba(0, 255, 0, 0.5);
9}- Fungsi
rgb()danrgba()digunakan untuk menentukan warna.rgb()menentukan tiga nilai untuk merah, hijau, dan biru (berkisar dari 0 hingga 255), sementarargba()juga menyertakan nilai alpha untuk transparansi.
hsl() / hsla()
1p.hsl {
2 /* Specify hue, saturation, and lightness */
3 background-color: hsl(240, 25%, 50%);
4}
5
6p.hsl span {
7 /* Specification with transparency */
8 background-color: hsla(120, 100%, 50%, 0.5);
9}hsl()danhsla()menggunakan rona, saturasi, dan kecerahan untuk menentukan warna.hsla()juga dapat menentukan transparansi.
url()
1div.bg-image {
2 background-image: url('image.jpg');
3}- Fungsi
url()digunakan untuk menentukan jalur ke gambar latar belakang atau sumber daya lainnya.
var()
1/* Definition of custom properties */
2:root {
3 --main-color: #3498db;
4}
5
6/* Use of custom properties */
7p.main-color {
8 color: var(--main-color);
9}- Fungsi
var()digunakan untuk bekerja dengan properti khusus (variabel CSS). Anda dapat mendefinisikan variabel CSS dan menggunakannya dalam properti lainnya.
attr()
1/* Example of using the attr() function */
2a::after {
3 content: " (" attr(title) ")";
4}- Fungsi
attr()digunakan untuk memanfaatkan nilai atribut HTML dalam gaya CSS. Ini terutama digunakan dalam properticontentdari elemen pseudo untuk menampilkan nilai atribut elemen secara dinamis. Namun, perlu kehati-hatian karena dukungan browser terbatas.
min() / max() / clamp()
1div.min {
2 /* Use the smaller value between 100% and 500px as the width */
3 width: min(100%, 500px);
4 background-color: lightsteelblue;
5}
6div.max {
7 /* Use the larger value between 100% and 500px as the width */
8 width: max(100%, 500px);
9 background-color: lightsteelblue;
10}
11div.clamp {
12 /* Adjust to fit within the range of 100px to 400px */
13 width: clamp(100px, 30%, 400px);
14 background-color: lightsteelblue;
15}Fungsi-fungsi ini digunakan untuk menentukan nilai secara dinamis.
min()memilih nilai terkecil dari satu set nilai.max()memilih nilai terbesar dari satu set nilai.clamp()menyesuaikan nilai dalam rentang antara nilai minimum, nilai yang disarankan, dan nilai maksimum.
repeat()
1/* Set three columns to be evenly spaced */
2grid-template-columns: repeat(3, 1fr);Fungsi repeat() digunakan dengan grid-template-columns dan grid-template-rows untuk membuat pola berulang.
linear-gradient() / radial-gradient()
1div.linear-gradient {
2 /* Linear gradient */
3 background: linear-gradient(to right, red, blue);
4}
5div.radial-gradient {
6 /* Radial gradient */
7 background: radial-gradient(circle, red, blue);
8}
9div.conic-gradient {
10 /* Conic gradient */
11 background: conic-gradient(from 0deg, red, yellow, blue, red);
12}- Fungsi-fungsi ini digunakan untuk membuat gradasi.
linear-gradientmembuat gradasi linear.radial-gradientmembuat gradasi radial. Anda dapat menentukaneclipsesebagai pengganticircleuntuk membuat gradasi elips.conic-gradientmembuat gradasi yang berubah warna berdasarkan sudut di sekitar pusat lingkaran.
Ringkasan
Fungsi CSS sangat berguna untuk mengatur tata letak dan gaya yang fleksibel. Dengan menggunakan fungsi-fungsi ini secara efektif, Anda dapat mencapai desain yang lebih dinamis dan responsif.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.