อักขระพิเศษและฟังก์ชั่นใน CSS

Articles

บทความนี้อธิบายเกี่ยวกับอักขระพิเศษและฟังก์ชันใน CSS

คุณสามารถเรียนรู้เกี่ยวกับอักขระพิเศษและฟังก์ชั่นเช่น calc() และ var() ใน CSS

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

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 &amp; 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&lt;div id="my.id"&gt;Dot Example&lt;/div&gt;
 39&lt;div id="my[id]"&gt;Bracket Example&lt;/div&gt;
 40&lt;div id="my#id"&gt;Sharp Example&lt;/div&gt;
 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&lt;div class="123abc"&gt;Numeric Class&lt;/div&gt;
 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&lt;div class="content-unicode"&gt;Copyright&lt;/div&gt;
 88&lt;div class="content-backslash"&gt;This is a backslash example&lt;/div&gt;
 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&lt;div class=&quot;user@name&quot;&gt;User&lt;/div&gt;
114&lt;div id=&quot;section$&quot;&gt;Section&lt;/div&gt;
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&lt;p class="calc-width"&gt;
139    &lt;span&gt;First Text&lt;/span&gt;
140&lt;/p&gt;
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&lt;p class="rgb"&gt;
166    &lt;span&gt;First Text&lt;/span&gt;
167&lt;/p&gt;
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&lt;p class="hsl"&gt;
195    &lt;span&gt;First Text&lt;/span&gt;
196&lt;/p&gt;
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&lt;div class="bg-image"&gt;
218    &lt;span&gt;First Text&lt;/span&gt;
219&lt;/div&gt;
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&lt;p class="main-color"&gt;
247    &lt;span&gt;First Text&lt;/span&gt;
248&lt;/p&gt;
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&lt;a href="#section1" title="Section 1"&gt;Click here&lt;/a&gt;
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&lt;div class="min"&gt;min(100%, 500px)&lt;/div&gt;
299&lt;div class="max"&gt;max(100%, 500px)&lt;/div&gt;
300&lt;div class="clamp"&gt;clamp(100px, 30%, 400px)&lt;/div&gt;
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&lt;div class="linear-gradient"&gt;linear-gradient&lt;/div&gt;
341&lt;div class="radial-gradient"&gt;radial-gradient&lt;/div&gt;
342&lt;div class="conic-gradient"&gt;radial-gradient&lt;/div&gt;
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>

ตัวอักษรพิเศษและการทำให้ไม่ติดอยู่ใน CSS

อักขระ escape ใน CSS เป็นเทคนิคสำหรับจัดการอักขระบางตัวอย่างปลอดภัย โดยการ escape สัญลักษณ์พิเศษหรืออักขระที่มีความหมายตามไวยากรณ์ คุณสามารถใช้งานได้อย่างปลอดภัยภายใน selectors หรือ strings

ภาพรวมของตัวอักษรทำให้ไม่ติดใน CSS

การ escape ใน CSS คือกลไกสำหรับ escape อักขระบางตัวหรือ unicode เพื่อให้สามารถใช้งานใน selectors ตามกฎไวยากรณ์เฉพาะได้ ตัวอย่างเช่น เมื่อ ID ของ HTML element หรือ class name มีสัญลักษณ์พิเศษ (#, @, . เป็นต้น) หรือเมื่อจัดการกับ class name หรือ ID ที่เริ่มต้นด้วยตัวเลข อักขระ escape จะมีประโยชน์

การทำให้ไม่ติดถูกใช้หลัก ๆ เพื่อวัตถุประสงค์ดังต่อไปนี้:

ใช้ตัวอักษรพิเศษเป็นตัวเลือก
จัดการ ID หรือชื่อคลาสที่ขึ้นต้นด้วยตัวเลข
ทำให้ไม่ติดสัญลักษณ์พิเศษหรือตัวอักษรที่ไม่ใช่ ASCII

ไวยากรณ์พื้นฐานสำหรับการทำให้ไม่ติด

อักขระ escape ใน CSS เขียนด้วยเครื่องหมาย backslash (\) โดยการใส่ backslash ไว้หน้าตัวอักขระที่ต้องการ escape อักขระเหล่านั้นจะถูกตีความเป็นอักขระปกติ

การทำให้ไม่ติดตัวอักษรพิเศษ

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}

ตามตัวอย่างนี้ จำเป็นต้องทำการ escape เมื่อใช้อักขระพิเศษใน CSS selectors
#, ., [, และ ] เป็นอักขระพิเศษใน CSS หาก ID มีอักขระเหล่านี้ การ escape เป็นสิ่งจำเป็น

การทำให้ไม่ติดของ ID หรือชื่อคลาสที่ขึ้นต้นด้วยตัวเลข

1<div class="123abc">Numeric Class</div>

1.\31 23abc {
2    font-weight: bold;
3    color: blue;
4}

ใน CSS หาก ID หรือ class name เริ่มต้นด้วยตัวเลข การเขียนโดยตรงจะไม่ถูกต้อง ในกรณีดังกล่าว ให้ใช้การ escape
ในที่นี้ เรากำลัง escape ตัวเลข 1 ที่อยู่ต้นของ 123abc 1 เขียนในรูปแบบ Unicode เป็น U+0031 และ escape ด้วย backslash และช่องว่างเป็น \31

การทำให้ไม่ติดของตัวอักษร Unicode

1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3    content: "\00A9"; /* copyright symbol */
4    color: blue;
5}

เมื่อทำการ escape อักขระ Unicode ให้ระบุเลขฐานสิบหก 6 หลักหลังเครื่องหมาย backslash
โค้ดนี้แสดงวิธีการแสดง © (สัญลักษณ์ลิขสิทธิ์) ใน CSS

การทำให้ไม่ติดภายในสตริง

1.content-backslash::after {
2    content: " : \\";
3    color: blue;
4}

เมื่อใช้ backslash ใน strings ภายใน CSS (เช่น property content) จะต้องใช้ backslash สองตัว
ในตัวอย่างนี้ เขียน \\ เพื่อแสดง backslash ใน string

ตัวอย่างการใช้งาน: การจัดรูปแบบองค์ประกอบ HTML ด้วยอักขระพิเศษ

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}

ในที่นี้ เรากำลัง escape elements ที่มีอักขระพิเศษ @ และ $

สรุป

อักขระ escape ใน CSS มีประโยชน์มากสำหรับการจัดการ selectors และ strings อย่างถูกต้องในกรณีพิเศษ การเข้าใจว่าเมื่อใดควรทำการ escape ช่วยหลีกเลี่ยงข้อผิดพลาดเมื่อจัดรูปแบบ HTML elements ที่ซับซ้อน โดยเฉพาะเมื่อจัดการกับ class name หรือ ID ที่เริ่มต้นด้วยอักขระพิเศษหรือตัวเลข การ escape ด้วย backslash เป็นสิ่งสำคัญ

ฟังก์ชันใน CSS

ใน CSS คุณสามารถใช้ฟังก์ชันเพื่อระบุหรือคำนวณสไตล์แบบไดนามิก ในที่นี้ เราจะแนะนำฟังก์ชัน CSS บางตัวที่ใช้งานทั่วไป

`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}

ฟังก์ชัน calc() ใช้สำหรับคำนวณค่าต่างๆ เช่น ความกว้างและความสูงของ elements แบบไดนามิก คุณสามารถใช้ตัวดำเนินการ +, -, *, / เพื่อผสมผสานค่าที่สัมพันธ์กัน (%) และค่าที่แน่นอน (px) ในการจัดเลย์เอาต์

`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}

ฟังก์ชัน rgb() และ rgba() ใช้เพื่อระบุสี rgb() ระบุค่าสำหรับสีแดง (red), สีเขียว (green) และสีน้ำเงิน (blue) จำนวนสามค่า (ช่วง 0 ถึง 255) ขณะที่ rgba() ยังเพิ่มค่าความโปร่งใส (alpha)

`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() และ hsla() ใช้ค่าเฉดสี (hue), ความอิ่มตัวของสี (saturation) และความสว่าง (lightness) เพื่อระบุสี hsla() ยังสามารถระบุค่าความโปร่งใสได้

`url()`

1div.bg-image {
2    background-image: url('image.jpg');
3}

ฟังก์ชัน url() ใช้เพื่อระบุเส้นทางไปยังภาพพื้นหลังหรือทรัพยากรอื่นๆ

`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}

ฟังก์ชัน var() ใช้เพื่อการทำงานกับสมบัติที่กำหนดเอง (CSS variables) คุณสามารถกำหนดตัวแปร CSS และใช้ในสมบัติอื่นๆ ได้

`attr()`

1/* Example of using the attr() function */
2a::after {
3    content: " (" attr(title) ")";
4}

ฟังก์ชัน attr() ใช้สำหรับดึงค่าแอตทริบิวต์ HTML มาใช้ในสไตล์ CSS มันถูกใช้งานส่วนใหญ่ในคุณสมบัติ content ของ pseudo-elements เพื่อแสดงค่าของแอตทริบิวต์ขององค์ประกอบอย่างไดนามิก อย่างไรก็ตาม ต้องใช้ด้วยความระมัดระวังเนื่องจากการสนับสนุนในเบราว์เซอร์มีข้อจำกัด

`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}

ฟังก์ชันเหล่านี้ใช้เพื่อกำหนดค่าแบบไดนามิก

min() เลือกค่าที่น้อยที่สุดจากชุดของค่า
max() เลือกค่าที่มากที่สุดจากชุดของค่า
clamp() ปรับค่าให้อยู่ในช่วงระหว่างค่าต่ำสุด แนะนำ และค่าสูงสุด

`repeat()`

1/* Set three columns to be evenly spaced */
2grid-template-columns: repeat(3, 1fr);

ฟังก์ชัน repeat() ใช้ร่วมกับ grid-template-columns และ grid-template-rows เพื่อสร้างรูปแบบซ้ำๆ

`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}

ฟังก์ชันเหล่านี้ใช้สำหรับสร้างการไล่ระดับสี
- linear-gradient สร้างการไล่ระดับสีแบบเชิงเส้น
- radial-gradient สร้างการไล่ระดับสีแบบรัศมี คุณสามารถกำหนด eclipse แทน circle เพื่อสร้างการไล่ระดับสีแบบวงรี
- conic-gradient สร้างการไล่ระดับสีที่เปลี่ยนสีไปตามมุมรอบจุดศูนย์กลางของวงกลม

สรุป

ฟังก์ชัน CSS มีประโยชน์อย่างมากสำหรับการตั้งค่าเลย์เอาต์และสไตล์ที่ยืดหยุ่น ด้วยการใช้สิ่งเหล่านี้อย่างมีประสิทธิภาพ คุณสามารถสร้างการออกแบบที่ตอบสนองและไดนามิกมากยิ่งขึ้นได้

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

รายละเอียดของ Attribute Selectors ใน CSS CSS คลาสเทียมและส่วนเทียม