قواعد CSS `@`

Articles

قواعد CSS `@`

تشرح هذه المقالة قواعد CSS @۔

يمكنك التعرف على كيفية استخدام وكتابة قواعد @ مثل @import و @media۔

YouTube Video

HTML للمعاينة

css-at-rule.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 At Rules</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-at-rule.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS At(@) Rules</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS At(@) Rules</h2></header>
 19        <article>
 20            <h3>@import</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24@import url('styles.css');
 25</pre>
 26            </section>
 27        </article>
 28        <article>
 29            <h3>@media</h3>
 30            <section>
 31                <header><h4>CSS</h4></header>
 32<pre class="sample">
 33@media screen and (max-width: 600px) {
 34    body {
 35        background-color: lightblue;
 36    }
 37}
 38</pre>
 39            </section>
 40        </article>
 41        <article>
 42            <h3>@media Example(Screen Width)</h3>
 43            <section>
 44                <header><h4>CSS</h4></header>
 45<pre class="sample">
 46@media (min-width: 600px) {
 47    body {
 48        background-color: lightblue;
 49    }
 50}
 51@media (max-width: 599px) {
 52    body {
 53        background-color: lightpink;
 54    }
 55}
 56</pre>
 57            </section>
 58        </article>
 59        <article>
 60            <h3>@media Example(Orientation)</h3>
 61            <section>
 62                <header><h4>CSS</h4></header>
 63<pre class="sample">
 64@media (orientation: portrait) {
 65    body {
 66        font-size: 18px;
 67    }
 68}
 69@media (orientation: landscape) {
 70    body {
 71        font-size: 16px;
 72    }
 73}
 74</pre>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>@media Example(Resolution)</h3>
 79            <section>
 80                <header><h4>CSS</h4></header>
 81<pre class="sample">
 82@media (min-resolution: 2dppx) {
 83    body {
 84        background-image: url('high-res-image.png');
 85    }
 86}
 87</pre>
 88            </section>
 89        </article>
 90        <article>
 91            <h3>@media Example(AND Condition)</h3>
 92            <section>
 93                <header><h4>CSS</h4></header>
 94<pre class="sample">
 95@media (min-width: 600px) and (orientation: portrait) {
 96    body {
 97        background-color: lightgreen;
 98    }
 99}
100</pre>
101            </section>
102        </article>
103        <article>
104            <h3>@media Example(OR Condition)</h3>
105            <section>
106                <header><h4>CSS</h4></header>
107<pre class="sample">
108@media (max-width: 400px), (orientation: landscape) {
109    body {
110        color: gray;
111    }
112}
113</pre>
114            </section>
115        </article>
116        <article>
117            <h3>@media Example(NOT Condition)</h3>
118            <section>
119                <header><h4>CSS</h4></header>
120<pre class="sample">
121@media not all and (min-width: 600px) {
122    body {
123        font-size: 14px;
124    }
125}
126</pre>
127            </section>
128        </article>
129        <article>
130            <h3>@font-face</h3>
131            <section>
132                <header><h4>CSS</h4></header>
133<pre class="sample">
134@font-face {
135  font-family: 'CustomFont';
136  src: url('customfont.woff2') format('woff2'),
137       url('customfont.woff') format('woff');
138}
139</pre>
140            </section>
141        </article>
142        <article>
143            <h3>@keyframes</h3>
144            <section>
145                <header><h4>CSS</h4></header>
146<pre class="sample">
147@keyframes slidein {
148    from {
149        transform: translateX(100%);
150    }
151    to {
152        transform: translateX(0%);
153    }
154}
155
156div {
157    animation: slidein 2s ease-in-out;
158}
159</pre>
160            </section>
161        </article>
162        <article>
163            <h3>@supports</h3>
164            <section>
165                <header><h4>CSS</h4></header>
166<pre class="sample">
167@supports (display: grid) {
168    .container {
169        display: grid;
170    }
171}
172</pre>
173            </section>
174        </article>
175        <article>
176            <h3>@page</h3>
177            <section>
178                <header><h4>CSS</h4></header>
179<pre class="sample">
180@page {
181    size: A4;
182    margin: 2cm;
183}
184</pre>
185            </section>
186        </article>
187        <article>
188            <h3>@charset</h3>
189            <section>
190                <header><h4>CSS</h4></header>
191<pre class="sample">
192@charset "UTF-8";
193</pre>
194            </section>
195        </article>
196        <article>
197            <h3>@layer</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201@layer reset {
202    h1 {
203        margin: 0;
204    }
205}
206@layer base {
207    h1 {
208        font-size: 24px;
209        color: blue;
210    }
211}
212@layer theme {
213    h1 {
214        color: red;
215    }
216}
217</pre>
218                <header><h4>HTML</h4></header>
219<pre>
220&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
221&lt;p&gt;
222    This page demonstrates how to apply styles to
223    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
224&lt;/p&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <h1>CSS Layer Test</h1>
229                    <p>
230                        This page demonstrates how to apply styles to
231                        the <code>&lt;h1&gt;</code> element using CSS layers.
232                    </p>
233                </section>
234            </section>
235        </article>
236        <article>
237            <h3>@layer with order</h3>
238            <section>
239                <header><h4>CSS</h4></header>
240<pre class="sample">
241@layer theme, base, reset;
242
243@layer reset {
244    h1 {
245        margin: 0;
246    }
247}
248@layer base {
249    h1 {
250        font-size: 24px;
251        color: blue;
252    }
253}
254@layer theme {
255    h1 {
256        color: red;
257    }
258}
259</pre>
260                <header><h4>HTML</h4></header>
261<pre>
262&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
263&lt;p&gt;
264    This page demonstrates how to apply styles to
265    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
266&lt;/p&gt;
267</pre>
268                <header><h4>HTML+CSS</h4></header>
269                <section class="sample-view">
270                    <h1>CSS Layer Test</h1>
271                    <p>
272                        This page demonstrates how to apply styles to
273                        the <code>&lt;h1&gt;</code> element using CSS layers.
274                    </p>
275                </section>
276            </section>
277        </article>
278        <article>
279            <h3>@import &amp; @layer</h3>
280            <section>
281                <header><h4>CSS</h4></header>
282<pre class="sample">
283@import url('css/reset.css') layer(reset);
284@import url('css/base.css') layer(base);
285@import url('css/theme.css') layer(theme);
286</pre>
287                <header><h4>HTML</h4></header>
288<pre>
289&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
290&lt;p&gt;
291    This page demonstrates how to apply styles to
292    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
293&lt;/p&gt;
294</pre>
295                <header><h4>HTML+CSS</h4></header>
296                <section class="sample-view">
297                    <h1>CSS Layer Test</h1>
298                    <p>
299                        This page demonstrates how to apply styles to
300                        the <code>&lt;h1&gt;</code> element using CSS layers.
301                    </p>
302                </section>
303            </section>
304        </article>
305    </main>
306</body>
307</html>

قواعد CSS `@`

قواعد CSS @ (القواعد الخاصة) هي تعليمات خاصة تُستخدم للتحكم في سلوك وأنماط تطبيق أوراق الأنماط۔ على عكس خصائص CSS العادية، تقوم قواعد @ بتطبيق الأنماط أو استيراد الموارد الخارجية بناءً على شروط معينة۔ تشمل القواعد الممثلة لـ @ مثل @media و @import و @keyframes وغيرها۔

أنواع القواعد الشرطية النموذجية `@`

`@import`

1@import url('styles.css');

تُستخدم @import لاستيراد ملفات CSS أخرى إلى ورقة الأنماط الحالية۔ يسمح هذا بإعادة استخدام ملفات CSS الخارجية بسهولة۔

النقاط:

يجب كتابة @import في بداية ورقة الأنماط۔
يُفضل تجنبها في المشاريع الكبيرة بسبب تأثيرها على الأداء۔

`@media`

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}

تستخدم @media استعلامات الوسائط لتطبيق الأنماط بناءً على شروط محددة (مثل عرض الشاشة، الدقة، إلخ.)۔ تُستخدم بشكل متكرر في تنفيذ التصميم التفاعلي۔

الشروط المستخدمة بشكل شائع

فيما يلي الشروط الشائعة التي تُستخدم بشكل متكرر في استعلامات الوسائط۔

الشروط بناءً على العرض

 1@media (min-width: 600px) {
 2    body {
 3        background-color: lightblue;
 4    }
 5}
 6@media (max-width: 599px) {
 7    body {
 8        background-color: lightpink;
 9    }
10}

العرض الأدنى (min-width) يطبق الأنماط عندما يكون العرض مساويًا للقيمة المحددة أو أكبر منها۔
العرض الأقصى (max-width) يطبق الأنماط عندما يكون العرض مساويًا للقيمة المحددة أو أقل منها۔

اتجاه الجهاز (`orientation`)

 1@media (orientation: portrait) {
 2    body {
 3        font-size: 18px;
 4    }
 5}
 6@media (orientation: landscape) {
 7    body {
 8        font-size: 16px;
 9    }
10}

اتجاه الجهاز (orientation) يمكن ضبطه على عمودي أو أفقي۔

الدقة (`resolution`)

1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}

يمكن تطبيق الأنماط بناءً على الدقة (resolution)۔
في هذا المثال، تم تحديد صورة خلفية عالية الدقة للشاشات ذات الدقة العالية۔

دمج الشروط

يمكن أن تجمع استعلامات الوسائط أيضًا بين شروط متعددة۔

شرط AND (`and`)

1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}

يطبق شرط AND الأنماط عند تحقق جميع الشروط۔
في هذا المثال، عندما يكون عرض الشاشة 600px أو أكثر وفي وضع الاتجاه العمودي، يتم تعيين لون خلفية body إلى الأخضر الفاتح۔

شرط OR (`,`)

1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}

يطبق شرط OR الأنماط عند تحقق أي شرط۔
في هذا المثال، عندما يكون عرض الشاشة 400px أو أقل، أو في وضع الاتجاه الأفقي، يتم تعيين لون نص body إلى الرمادي۔

شرط NOT (`not`)

1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}

يطبق شرط NOT الأنماط عندما لا يتحقق الشرط۔
في هذا المثال، لجميع الأجهزة، عندما يكون عرض الشاشة أقل من 600px، يتم تعيين حجم خط body إلى 14px۔

`@font-face`

1@font-face {
2  font-family: 'CustomFont';
3  src: url('customfont.woff2') format('woff2'),
4       url('customfont.woff') format('woff');
5}

تُستخدم @font-face لتعريف خطوط الويب۔ باستخدام هذه القاعدة، يمكن تنزيل الخطوط الخارجية وتطبيقها على صفحة الويب۔

يمكن استخدام الخطوط المخصصة بدلاً من الاعتماد على الخطوط القياسية۔
يجب الانتباه إلى حجم ملف الخط۔

`@keyframes`

 1@keyframes slidein {
 2  from {
 3    transform: translateX(100%);
 4  }
 5  to {
 6    transform: translateX(0%);
 7  }
 8}
 9
10div {
11  animation: slidein 2s ease-in-out;
12}

تُستخدم @keyframes لإنشاء الرسوم المتحركة باستخدام CSS۔ يمكن تحديد الأنماط في كل خطوة من خطوات الرسوم المتحركة۔

يتيح التحكم التفصيلي في الرسوم المتحركة۔
يُستخدم بالتزامن مع خاصية animation۔

`@supports`

1@supports (display: grid) {
2  .container {
3    display: grid;
4  }
5}

تتحقق @supports مما إذا كانت ميزات CSS معينة مدعومة في المتصفح وتُطبق الأنماط بناءً على النتيجة۔

يساعد في الحفاظ على التوافق بين المتصفحات القديمة والجديدة۔
يمكن تطبيق البدائل من خلال الكشف عن الميزات۔

`@page`

1@page {
2  size: A4;
3  margin: 2cm;
4}

تُستخدم @page للتحكم في الأنماط الخاصة بالطباعة۔ إنه مفيد لتحديد حجم الصفحة وهوامشها۔

النقاط:

يُستخدم لتحديد الأنماط لوسائط الطباعة۔
يمكنك أيضًا تخصيص أنماط عناصر الصفحة المحددة مثل الرؤوس والتذييلات۔

`@charset`

1@charset "UTF-8";

@charset يحدد تشفير الأحرف لملف CSS۔ يتم تحديد UTF-8 بشكل أساسي۔

يجب تحديده في بداية ورقة الأنماط۔
تُستخدم بشكل خاص للمواقع متعددة اللغات۔

`@layer`

@layer هي قاعدة جديدة تُستخدم لتنظيم أولوية أوراق الأنماط في CSS، مما يسمح بتجميع وإدارة قواعد CSS متعددة باستخدام الطبقات۔ تعتبر هذه القاعدة مفيدة بشكل خاص في أوراق الأنماط الكبيرة أو المشاريع التي تشمل أوراق أنماط خارجية متعددة لتسهيل تجنب تعارضات CSS۔

في أوراق أنماط CSS، يتم تحديد الأولوية عادةً بواسطة 'الكاسكيد'، ولكن باستخدام @layer، يمكن التحكم في أولوية الأنماط بمرونة ووضوح أكبر۔

الصياغة الأساسية

1@layer <layer-name> {
2  /* Styles within this layer */
3}

عند تعريف الأنماط باستخدام @layer، ستكون الصياغة كالتالي۔

 1@layer reset {
 2    h1 {
 3        margin: 0;
 4    }
 5}
 6@layer base {
 7    h1 {
 8        font-size: 24px;
 9        color: blue;
10    }
11}
12@layer theme {
13    h1 {
14        color: red;
15    }
16}

على سبيل المثال، يمكنك تعريف الأساليب في طبقات مختلفة هكذا:
في هذه الحالة، يتم تعريف طبقات reset و base و theme على التوالي، ويتم تحديد النمط النهائي لـ h1 بواسطة محتويات طبقة theme، مما يؤدي إلى تطبيق color: red;۔

أولوية الطبقات المتعددة

الميزة القوية لـ @layer هي أنها تتيح إدارة أولوية الأنماط بين الطبقات۔ في المثال أعلاه، لأن طبقة theme تم تعريفها أخيرًا، فإنها تقوم بتجاوز الأنماط المعرفة في الطبقات الأخرى۔

بالإضافة إلى ذلك، يمكن استخدام @layer لإدارة سلسلة الأولويات في أوراق أنماط خارجية أو ملفات CSS المحملة من مكتبات أخرى۔

الأولوية العالمية

 1@layer theme, base, reset;
 2
 3@layer reset {
 4    h1 {
 5        margin: 0;
 6    }
 7}
 8@layer base {
 9    h1 {
10        font-size: 24px;
11        color: blue;
12    }
13}
14@layer theme {
15    h1 {
16        color: red;
17    }
18}

يتم إعطاء الأولوية لترتيب الطبقات داخل الكاسكيد في CSS، مع إعطاء الأنماط المحددة لاحقًا الأفضلية۔ على سبيل المثال، يمكنك تحديد ترتيب الطبقات صراحةً بكتابتها بهذا الشكل۔
يضمن هذا أن يتم تطبيق الأنماط بالترتيب: theme، ثم base، وأخيراً reset، حتى إذا تم تعريف طبقة theme أولاً۔

استخدام `@import` مع `@layer`

1@import url('css/reset.css') layer(reset);
2@import url('css/base.css') layer(base);
3@import url('css/theme.css') layer(theme);

من خلال الجمع بين @import و @layer، يمكن أيضًا إدارة الطبقات في أوراق أنماط خارجية۔
يتيح ذلك وضع أوراق أنماط خارجية في طبقات مختلفة، مما يدير أولويتها۔

النقاط الرئيسية لـ `@layer`

@layer هي أداة قوية في إدارة أنماط CSS، وتوفر طريقة مريحة لتجنب تعارض الأنماط في المشاريع الكبيرة۔ تعتبر هذه الأداة مميزة بشكل خاص لإدارة أولوية الأنماط بشكل موجز عند التعامل مع مصادر أنماط متعددة۔ سيكون من الجيد مراعاة النقاط التالية۔

من خلال فصل الأنماط بالطبقات، يمكنك التحكم في أولوية الكاسكيد۔
من خلال استخدامه بجانب @import، يمكنك تضمين ملفات CSS الخارجية في إدارة الطبقات۔
يمكن أن يمنع تحديد طبقات متعددة تعارض الأنماط۔

هذا يقلل من تصادم الأنماط ويسمح بتصميم فعال حتى في المشاريع التي تتطلب إدارة أنماط معقدة۔

أمثلة على استخدام `@layer`

عند استخدام @layer، يمكنك أخذ نقاط مثل اتفاقيات تسمية الطبقات، ترتيب الاستيراد، وعدد الطبقات المناسب لحجم المشروع في الاعتبار۔

تسمية الطبقات

يتم تحديد أسماء الطبقات بناءً على هيكل المشروع والغرض منه۔ تشمل الأمثلة الشائعة لتسمية الطبقات ما يلي:۔

1@layer base, layout, components, utilities;

base: طبقة تحدد الأنماط الأساسية مثل إعادة التعيين وأنماط الطباعة۔
layout: طبقة تحدد الأنماط لتخطيط الصفحة وأنظمة الشبكة۔
components: طبقة تحدد الأنماط لعناصر واجهة المستخدم القابلة لإعادة الاستخدام مثل الأزرار والبطاقات۔
utilities: طبقة تحدد الأنماط لفئات الأدوات المساعدة (مثلًا، margin, padding, text-center)۔

ترتيب استيراد واضح

1@import url('base.css') layer(base);
2@import url('layout.css') layer(layout);
3@import url('components.css') layer(components);
4@import url('utilities.css') layer(utilities);

عند التعامل مع ملفات CSS متعددة، من المهم تحديد ترتيب واضح باستخدام @import۔ يضمن هذا الترتيب الحفاظ على الأولوية المقصودة۔

دمج وتبسيط الطبقات

 1@layer common {
 2  body {
 3    margin: 0;
 4    padding: 0;
 5    box-sizing: border-box;
 6  }
 7
 8  .container {
 9    max-width: 1200px;
10    margin: 0 auto;
11  }
12}

في المشاريع صغيرة الحجم، يمكن أن يقلل تقييد عدد الطبقات من التعقيد۔

الملخص

تعد قواعد CSS @ أدوات قوية تدعم تطبيق الأنماط بمرونة وتعزز الأداء في تصميم الويب۔ @media و@keyframes و@supports تسهّل تصميم الأنماط مع مراعاة اختلاف الأجهزة وتوافق المتصفحات۔ بالإضافة إلى ذلك، فإن @import و@font-face يسمحان بدمج الموارد الخارجية بكفاءة لتعبير أكثر ثراءً۔

فهم واستخدام هذه القواعد @ بشكل صحيح يتيح كتابة CSS أكثر فعالية۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

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

قواعد CSS `@`

YouTube Video

HTML للمعاينة

قواعد CSS @

أنواع القواعد الشرطية النموذجية @

@import

النقاط:

@media

الشروط المستخدمة بشكل شائع

الشروط بناءً على العرض

اتجاه الجهاز (orientation)

الدقة (resolution)

دمج الشروط

شرط AND (and)

شرط OR (,)

شرط NOT (not)

@font-face

@keyframes

@supports

@page

النقاط:

@charset

@layer

الصياغة الأساسية

أولوية الطبقات المتعددة

الأولوية العالمية

استخدام @import مع @layer

النقاط الرئيسية لـ @layer

أمثلة على استخدام @layer

تسمية الطبقات

ترتيب استيراد واضح

دمج وتبسيط الطبقات

الملخص

YouTube Video

قواعد CSS `@`

أنواع القواعد الشرطية النموذجية `@`

`@import`

`@media`

اتجاه الجهاز (`orientation`)

الدقة (`resolution`)

شرط AND (`and`)

شرط OR (`,`)

شرط NOT (`not`)

`@font-face`

`@keyframes`

`@supports`

`@page`

`@charset`

`@layer`

استخدام `@import` مع `@layer`

النقاط الرئيسية لـ `@layer`

أمثلة على استخدام `@layer`