الأحرف الخاصة والدوال في 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 هو آلية لتجاوز أحرف معينة أو يونيكود بحيث يمكن استخدامها في المحددات وفقًا لقواعد تركيبية محددة۔ على سبيل المثال، عند احتواء معرفات عناصر 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 ۔

هروب أحرف اليونيكود

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.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

تفاصيل منتقيات الخصائص في CSS الفئات الوهمية والعناصر الوهمية في CSS