Articles
CSS'e Giriş
CSS `@` Kuralları

CSS `@` Kuralları

Bu makale, CSS @ kurallarını açıklamaktadır.

@import ve @media gibi @ kurallarının nasıl yazıldığını ve kullanımını öğrenebilirsiniz.

YouTube Video

Önizleme için 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 @ Kuralları

CSS @ kuralları (at-rules), stillerin davranışını ve uygulama koşullarını kontrol etmek için kullanılan özel talimatlardır. Normal CSS özelliklerinden farklı olarak, @ kuralları koşullu olarak stilleri uygular veya harici kaynakları içe aktarır. Temsilci @ kurallarına @media, @import ve @keyframes gibi kurallar dahildir.

Örnek @ Kurallarının Türleri

@import 

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

@import, diğer CSS dosyalarını mevcut stil dosyasına dahil etmek için kullanılır. Bu, harici CSS dosyalarının kolayca yeniden kullanılmasını sağlar.

Dikkat Edilmesi Gereken Noktalar:

  • @import, stil dosyasının başında yazılmalıdır.
  • Performansı etkilediği için büyük projelerde kullanılmaktan kaçınılmalıdır.

@media 

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}
  • @media, belirli koşullara (örneğin: ekran genişliği, çözünürlük vb.) bağlı olarak stilleri uygulamak için medya sorgularını kullanır. Duyarlı tasarımların uygulamasında sıkça kullanılır.

Sık Kullanılan Koşullar

Aşağıdakiler, medya sorgularında sıkça kullanılan yaygın koşullardır.

Genişliğe Dayalı Koşullar 
 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}
  • Minimum genişlik (min-width), genişlik belirtilen değere eşit veya daha büyük olduğunda stilleri uygular.
  • Maksimum genişlik (max-width), genişlik belirtilen değere eşit veya daha küçük olduğunda stilleri uygular.
Cihaz Yönlendirmesi (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}
  • Cihaz yönlendirmesi (orientation), dikey (portrait) veya yatay (landscape) olarak ayarlanabilir.
Çözünürlük (resolution) 
1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}
  • Stiller, çözünürlük (resolution) temelinde uygulanabilir.
  • Bu örnekte, yüksek çözünürlüklü ekranlar için yüksek çözünürlüklü bir arka plan resmi belirtilmiştir.

Koşulları Birleştirme

Medya sorguları ayrıca birden fazla koşulu birleştirebilir.

VE Koşulu (and) 
1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}
  • VE koşulu, tüm koşullar karşılandığında stilleri uygular.
  • Bu örnekte, ekran genişliği 600px veya daha büyük olduğunda ve dikey yönlendirmede, body arka plan rengi açık yeşil olarak ayarlanır.
VEYA Koşulu (,) 
1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}
  • VEYA koşulu, herhangi bir koşul karşılandığında stilleri uygular.
  • Bu örnekte, ekran genişliği 400px veya daha küçük olduğunda ya da yatay yönlendirmede, body metin rengi gri olarak ayarlanır.
Değil Koşulu (not) 
1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}
  • DEĞİL koşulu, koşul karşılanmadığında stilleri uygular.
  • Bu örnekte, tüm cihazlar için, ekran genişliği 600px veya daha büyük olmadığında, body yazı tipi boyutu 14px olarak ayarlanır.

@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, web yazı tiplerini tanımlamak için kullanılır. Bu kural ile harici yazı tipleri indirilebilir ve bir web sayfasında uygulanabilir.

  • Standart yazı tiplerine bağlı kalınmadan özel yazı tipleri kullanılabilir.
  • Yazı tipi dosyasının boyutuna dikkat edilmesi gerekir.

@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 animasyonları oluşturmak için kullanılır. Bir animasyonun her adımında stiller belirlenebilir.

  • Animasyonlar üzerinde ayrıntılı kontrol sağlar.
  • animation özelliği ile birlikte kullanılır.

@supports 

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

@supports, bazı CSS özelliklerinin tarayıcı tarafından desteklenip desteklenmediğini kontrol eder ve sonuca göre stiller uygular.

  • Eski ve yeni tarayıcılar arasında uyumluluğu korumaya yardımcı olur.
  • Özellik algılama yoluyla alternatif özellikler uygulanabilir.

@page 

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

@page, yazdırma için stilleri kontrol etmek için kullanılır. Sayfa boyutunu ve kenar boşluklarını ayarlamak için faydalıdır.

Dikkat Edilmesi Gereken Noktalar:

  • Baskı medyası için stiller ayarlamak amacıyla kullanılır.
  • Ayrıca başlıklar ve altbilgiler gibi belirli sayfa öğelerinin stillerini özelleştirebilirsiniz.

@charset 

1@charset "UTF-8";

@charset, bir CSS dosyasının karakter kodlamasını belirtir. Genellikle UTF-8 belirtilir.

  • Stil sayfasının başında belirtilmelidir.
  • Özellikle çok dilli web siteleri için kullanılır.

@layer

@layer, CSS'de stil sayfalarının önceliğini düzenlemek için kullanılan yeni bir @ kuralıdır ve birden fazla CSS kuralının katmanlar halinde gruplanmasını ve yönetilmesini sağlar. Bu kural, büyük stil sayfalarında veya birden fazla harici stil sayfası içeren projelerde CSS çakışmalarını önlemeyi kolaylaştırmak için özellikle faydalıdır.

CSS stil sayfalarında öncelik genellikle 'cascade' ile belirlenir, ancak @layer kullanılarak stil önceliği daha esnek ve açık bir şekilde kontrol edilebilir.

Temel Sözdizimi 

1@layer <layer-name> {
2  /* Styles within this layer */
3}
  • @layer kullanarak stilleri tanımladığınızda, sözdizimi aşağıdaki gibi olur.
 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}
  • Örneğin, şu şekilde farklı katmanlarda stiller tanımlayabilirsiniz:
  • Bu durumda reset, base ve theme katmanları sırasıyla tanımlanır ve nihai h1 stili, theme katmanının içeriği tarafından belirlenir, bu nedenle color: red; uygulanır.

Birden fazla katmanın önceliği

@layer'in güçlü bir özelliği, katmanlar arasındaki stil önceliğini yönetmeyi sağlamasıdır. Yukarıdaki örnekte, theme katmanı son tanımlandığı için diğer katmanlarda tanımlanan stilleri geçersiz kılar.

Ek olarak, @layer, harici stil sayfalarındaki veya diğer kütüphanelerden yüklenen CSS dosyalarındaki öncelik sıralamasını yönetmek için kullanılabilir.

Küresel öncelik 
 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 katmanlarının sırası önceliklidir, sonradan tanımlanan stiller öncelik kazanır. Örneğin, katmanların sırasını aşağıdaki gibi açıkça belirtebilirsiniz.
  • Bu, stillerin theme, base ve reset sırasıyla uygulanmasını sağlar, hatta theme katmanı önce tanımlanmış olsa bile.

@import ve @layer kullanımı 

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 ile @layeri birleştirerek dış stil dosyalarındaki katmanları yönetmek de mümkündür.
  • Bu, dış stil dosyalarının farklı katmanlara yerleştirilerek önceliklerinin yönetilmesini sağlar.

@layer ile ilgili temel noktalar

@layer, büyük projelerde stil çakışmalarını önlemek için kullanışlı bir yöntem sunan güçlü bir CSS stil yönetim aracıdır. Birden fazla stil kaynağıyla çalışırken stil önceliğini açık bir şekilde yönetmek için özellikle dikkat çekicidir. Aşağıdaki noktaları akılda tutmak iyi olacaktır.

  • Stilleri katmanlara ayırarak kademeli önceliği kontrol edebilirsiniz.
  • @import ile birlikte kullanarak dış CSS dosyalarını katman yönetimine dahil edebilirsiniz.
  • Birden fazla katman tanımlamak, stil çakışmalarını önleyebilir.

Bu, stil çakışmalarını en aza indirir ve karmaşık stil yönetimi gerektiren projelerde bile verimli tasarım yapmayı sağlar.

@layer kullanımına örnekler

@layer kullanırken, katman adlandırma kuralları, import sırası ve projenin ölçeğine uygun katman sayısı gibi noktaları dikkate alabilirsiniz.

Katman Adlandırma

Katman isimleri, projenin yapısına ve amacına göre belirlenir. Katman adlandırma için yaygın örnekler şunlardır:.

1@layer base, layout, components, utilities;
  • base: Reset ve tipografi gibi temel stilleri tanımlayan bir katman.
  • layout: Sayfa düzeni ve grid sistemleri için stilleri tanımlayan bir katman.
  • components: Butonlar ve kartlar gibi yeniden kullanılabilir UI bileşenleri için stilleri tanımlayan bir katman.
  • utilities: Özel yardımcı sınıflar için (margin, padding, text-center gibi) stilleri tanımlayan bir katman.
Net Import Sırası 
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);
  • Birden çok CSS dosyası ile çalışırken @import kullanarak net bir sıra belirlemek önemlidir. Bu sıra, istenilen önceliğin korunmasını sağlar.
Katmanları Birleştirme ve Basitleştirme 
 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}
  • Küçük ölçekli projelerde, katman sayısını sınırlamak karmaşıklığı azaltabilir.

Özet

CSS @ kuralları, web tasarımında esnek stil uygulanmasını ve performans artışını destekleyen güçlü araçlardır. @media, @keyframes ve @supports, cihaz farklılıkları ve tarayıcı uyumluluğunu göz önünde bulundurarak stil uygulamayı kolaylaştırır. Ayrıca, @import ve @font-face, daha zengin ifadeler için dış kaynakların etkili bir şekilde dahil edilmesini sağlar.

Bu @ kurallarını anlayarak ve doğru bir şekilde kullanarak daha etkili CSS kodlaması yapılabilir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

CSS Pseudo-sınıflar ve Pseudo-elementler