תווים מיוחדים ופונקציות ב-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

תווי בריחה ב-CSS הם טכניקות להתמודדות בטוחה עם תווים מסוימים. על ידי בריחת סמלים מיוחדים או תווים עם משמעות תחבירית, ניתן להשתמש בהם בבטחה בתוך סלקטורים או מחרוזות.

סקירה כללית על תווי בריחה ב-CSS

בריחה ב-CSS היא מנגנון לבריחת תווים מסוימים או Unicode כדי שיהיה ניתן להשתמש בהם בסלקטורים על פי כללי תחביר מסוימים. לדוגמה, כאשר מזהי אלמנטים ב-HTML או שמות מחלקות מכילים סמלים מיוחדים (#, @, . וכדומה), או כאשר מתמודדים עם שמות מחלקות או מזהים המתחילים במספרים, תווי בריחה הם שימושיים.

שימוש בבריחה מיועד בעיקר למטרות הבאות:

שימוש בתווים מיוחדים כסלקטורים
התמודדות עם מזהים או שמות מחלקות המתחילים במספרים
בריחה של סמלים מיוחדים או תווים שאינם ASCII

תחביר בסיסי לבריחה

תווים לבריחה נכתבים ב-CSS באמצעות לוכסן הפוך (\). על ידי הצבת לוכסן הפוך לפני התווים שיש לברוח מהם, הם מפורשים כתווים רגילים.

בריחה של תווים מיוחדים

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}

כפי שניתן לראות בדוגמה זו, יש צורך בבריחה כאשר משתמשים בתווים מיוחדים בתוך סלקטורים ב-CSS.
#, ., [, ו-] הם תווים מיוחדים ב-CSS. אם תווים אלו נכללים במזהים, יש צורך בבריחה.

בריחת מזהים או שמות מחלקות המתחילים במספרים

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

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

ב-CSS, אם מזהה או שם מחלקה מתחילים במספר, כתיבתם ישירות אינה תקפה. במקרים כאלה, יש להשתמש בהתחמקות.
כאן, אנו מתחמקים מהספרה הראשונה 1 ב-123abc. 1 מיוצג כ- Unicode U+0031 ומתחמק באמצעות לוכסן הפוך ורווח כ- \31 .

התחמקות מתווים של Unicode

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

כאשר מתחמקים מתווים של Unicode, יש לציין מספר הקסדצימלי בן 6 ספרות אחרי הלוכסן ההפוך.
הקוד הזה מראה כיצד להציג את סימן © (זכויות יוצרים) ב-CSS.

התחמקות בתוך מחרוזות

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

כשמשתמשים בלוכסן הפוך במחרוזות ב-CSS (כמו במאפיין content), יש להשתמש בלוכסן כפול.
בדוגמה זו, נכתב \\ כדי להציג לוכסן הפוך במחרוזת.

דוגמה מעשית: עיצוב אלמנטים ב-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}

כאן, אנו מתחמקים מאלמנטים המכילים תווים מיוחדים כמו @ ו-$.

סיכום

תווים מתחמקים ב-CSS הם שימושיים ביותר לטיפול נכון בבוחרים ובמחרוזות במקרים מיוחדים. הבנת הצורך בהתחמקות עוזרת להימנע משגיאות בעת עיצוב אלמנטים מורכבים ב-HTML. במיוחד כאשר עוסקים בשמות מחלקות או מזהים המתחילים בתווים מיוחדים או במספרים, הכרחי להתחמק בעזרת לוכסן הפוך.

פונקציות ב-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() משמשת לחישוב דינמי של ערכים כמו רוחב וגובה של אלמנטים. ניתן להשתמש באופרטורים +, -, *, / כדי לשלב ערכים יחסיים (%) וערכים מוחלטים (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() מציינת שלושה ערכים לאדום, ירוק וכחול (בטווח של 0 עד 255), בעוד ש-rgba() כוללת גם ערך אלפא לשקיפות.

`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() משתמשות בגוון, רוויה ובהירות כדי להגדיר צבעים. 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). ניתן להגדיר משתנים של CSS ולהשתמש בהם בתכונות אחרות.

`attr()`

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

הפונקציה attr() משמשת כדי להשתמש בערכי מאפייני HTML בסגנונות CSS. היא משמשת בעיקר בתוך המאפיין content של פסאודו-אלמנטים כדי להציג באופן דינמי ערכי מאפיינים של אלמנטים. עם זאת, יש לנקוט בזהירות מאחר שתמיכת הדפדפנים מוגבלת.

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

פרטים על בוררי מאפיינים ב-CSS מחלקות-פסאודו ואלמנטים-פסאודו ב-CSS