Articles
מבוא ל-CSS
כללי CSS `@`

כללי 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 @ (כללי at) הם הוראות מיוחדות המשמשות לשליטה בהתנהגות ובתנאי היישום של גיליונות סגנון. בניגוד לתכונות 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 משתמש בשאילתות מדיה ליישום סגנונות על סמך תנאים מסוימים (כגון רוחב מסך, רזולוציה וכו'). נעשה בו שימוש תכוף ביישום עיצוב רספונסיבי.

תנאים נפוצים בשימוש

התנאים הבאים הם תנאים נפוצים שמשתמשים בהם לעיתים קרובות ב-Media Queries.

תנאים מבוססי רוחב 
 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) יכול להיות מוגדר כ-אנכי (portrait) או אופקי (landscape).
רזולוציה (resolution) 
1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}
  • ניתן ליישם סגנונות על בסיס רזולוציה (resolution).
  • בדוגמה זו, תמונת רקע ברזולוציה גבוהה מוגדרת עבור מסכים בעלי רזולוציה גבוהה.

שילוב תנאים

Media Queries יכולים לשלב גם מספר תנאים.

תנאי 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 קדימויות בדרך כלל נקבעות לפי 'cascade', אבל עם @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 cascade, כאשר סגנונות שמוגדרים מאוחר יותר גוברים. לדוגמה, ניתן להגדיר באופן מפורש את סדר השכבות על ידי כתיבתן כך.
  • דבר זה מבטיח שהסגנונות ייושמו בסדר של 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 Video

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