1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
---
title: CSS nasıl çalışır
slug: Öğren/CSS/Ilk_adimlar/CSS_nasil_calisir
tags:
- Başlangıç
- Beginner
- CSS
- DOM
- Eğitim
- Learn
translation_of: Learn/CSS/First_steps/How_CSS_works
---
<p>{{LearnSidebar}}<br>
{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
<p class="summary">CSS'in temellerini, ne için kullanıldığını ve basit stil sayfalarının nasıl yazılacağını öğrendin. Bu derste, bir tarayıcının CSS ve HTML'yi nasıl ele alıp bir web sayfasına dönüştürdüğüne bir göz atacağız.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Ön koşullar:</th>
<td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.)</td>
</tr>
<tr>
<th scope="row">Amaç:</th>
<td>CSS ve HTML'nin tarayıcı tarafında naısl ayrıştırıldığının ve bir tarayıcı CSS ile karşılaştığında ne olduğunun temellerini anlamak.</td>
</tr>
</tbody>
</table>
<h2 id="CSS_gerçekten_nasıl_çalışır">CSS gerçekten nasıl çalışır?</h2>
<p>Tarayıcı bir belgeyi görüntülediğinde, belgenin içeriği ile stil bilgisini birleştirmektedir. Bunuda aşağıda listelediğimiz birkaç aşamada işler. Bunun, tarayıcının bir web sayfasını yüklediğinde sergilediği davranışın çok basite indirgenmiş bir sürümü olduğunu ve farklı tarayıcıların işlemi farklı şekillerde ele alabileceğini unutma . Ancak kabaca olan budur.</p>
<ol>
<li>Tarayici HTML'yi yükler(Örn. onu ağdan alır).</li>
<li>{{Glossary("HTML")}}'yi bir {{Glossary("DOM")}}'a (<em>Belge Nesnesi Modeli</em>) dönüştürür. DOM, bilgisayarın belleğindeki belleği temsil eder. DOM, sonraki bölümde biraz daha ayrıntılı olarak açıklanacak.</li>
<li>Tarayıcı daha sonra gömülü resimler ve videolar gibi HTML belgesi ile bağlantılı kaynaların çoğunu ve bağlantılı CSS'leri yükler! JavaScript süreç içinde biraz daha sonra ele alınacaktır. Ancak burada kafanda karışıklık olmaması için hakkında konuşmayacağız.</li>
<li>Tarayıcı, yüklenen CSS'de bulduğu seçicilere bağlı olarak kural seçici türlerine göre(örn, öğe, sınıf, kimlik vb.) kümeler. DOM'daki hangi düğümlere hangi kuralların uygualanması gerektiğini belirler ve bunlara gerektiği şekilde stil ekler(Bu ara adıma işleme ağacı denir).</li>
<li>Ağacı oluşturma, kurallar uygulandıktan sonra görünmesi gereken şekil yapıya yerleştirilir.</li>
<li>Sayfanın görsel görüntüsü ekrana getirilir(bu aşamaya boyama denir).</li>
</ol>
<p>Aşağıdaki şema, işlemin basit bir görünümünü sunar.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p>
<h2 id="DOM_hakkında">DOM hakkında</h2>
<p>DOM'un ağaca benzer bir yapısı vardır. Biçimlendirme dilindeki her öğe, nitelik ve metin parçası ağaç yapsında bir {{Glossary("Node/DOM","DOM düğümü")}} haline gelir. Düğümler, diğer DOM düğümleriyle olan ilişkileriyle tanımlanır. Bazı öğeler, alt düğümlerin ebeveynleridir ve alt düğümlerin de kardeşleri vardır.</p>
<p>DOM'u anlamak, CSS'ni tasarlamana, hataları ayıklamana ve bakımını yapmana yardımcı olur. Çünkü DOM, CSS'in ve belgenin buluştuğu yerdir. Tarayıcıda DevTools ile çalışmaya başladığında, hangi kuralların geçerli olduğunu görmek için öğeleri seçerken DOM'da geziyor olacaksın.</p>
<h2 id="Gerçek_bir_DOM_örneği">Gerçek bir DOM örneği</h2>
<p>Uzun ve sıkıcı bir açıklamadan ziyade, gerçek bir HTML kesitinin DOM'a nasıl dönüştürüldüğünü görmek için bir örneğe bakalım.</p>
<p>Aşağıdaki HTML kodunu ele alalım:</p>
<pre class="brush: html notranslate"><p>
Let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p></pre>
<p>DOM'da, <code><p></code> nesnemize karşılık gelen düğüm(<code>P</code>) bir ebeveyndir. Düğümümüzün çocukları bir adet metin düğümü ve üç adet <code><span></code> öğemize karşılık gelen (<code>SPAN</code>) düğümüdür. <code>SPAN</code> Düğümlerimizde kendi metin düğümlerinin ebeveynleridir.</p>
<pre class="notranslate">P
├─ "Let's use:"
├─ SPAN
| └─ "Cascading"
├─ SPAN
| └─ "Style"
└─ SPAN
└─ "Sheets"</pre>
<p>Bir tarayıcının önceki HTML kesitini nasıl yorumladığını gösterdik. Tarayıcı yukarıdaki DOM ağacını işler ve ardından bunu tarayıcıda şu şekilde görüntüler :</p>
<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p>
<div class="hidden">
<pre class="brush: css notranslate">p {margin:0;}</pre>
</div>
<h2 id="DOMa_CSS_uygulama">DOM'a CSS uygulama</h2>
<p>Diyelim ki belgemize stil vermek için biraz CSS ekledik. HTML kesitimiz aşağıdaki gibidir:</p>
<pre class="brush: html notranslate"><p>
Let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p></pre>
<p>Diyelimki ona aşağıdaki CSS'i uyguladık:</p>
<pre class="brush: css notranslate">span {
border: 1px solid black;
background-color: lime;
}</pre>
<p>Tarayıcı HTML'yi çözümleyecek ve bundan bir DOM oluşturacak, ardından CSS'i çözümleyecektir. CSS'de bulunan tek kuralın bir <code>span</code> seçicisi olması nedeniyle, tarayıcı CSS'i çok hızlı bir şekilde sıralayabilecektir. Bu kuralı <code><span></code> öğelerinin üçünede uygulayacak ve son görseli renklendirecektir.</p>
<p>Güncellenen çıktı aşağıdaki gibidir:</p>
<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p>
<p>Bir sonraki kısımdaki <a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS Hata Ayıklama</a> dersimizde, CSS sorunlarını ayıklamak için tarayıcıda DevTools'u kullanacağız ve tarayıcının CSS'i nasıl yorumladığı hakkında daha fazla bilgi edineceğiz.</p>
<h2 id="Tarayıcı_anlamadığı_bir_CSS_ile_karşılaşırsa_ne_olur">Tarayıcı anlamadığı bir CSS ile karşılaşırsa ne olur?</h2>
<p><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">Daha önceki bir derste</a> tarayıcıların aynı anda yeni çıkan CSS kodlarını uygulamadığından bahsetmiştim. Ayrıca, birçok kişi bir tarayıcının en son sürümünü kullanmamaktadır. CSS'in her zaman geliştirildiği ve bu nedenle tarayıcıların tanıyabileceklerinin ötesinde olduğu göz önüne alındığında, bir tarayıcı tanımadığı bir CSS seçici veya bildirimiyle karşılaştığında ne olacağını merak edebilirsin.</p>
<p>Cevap; hiç bir şey yapmaması ve sadece bir sonraki CSS parçasına geçmesidir!</p>
<p>Bir tarayıcı kurallarını çözümlediğinde anlamadığı bir özellik veya değerle karşılaşırsa, onu yok sayar ve bir sonraki bildirime geçer. Bir hata yaptıysan yada bir nitelik veya değer çok yeniyse ve tarayıcın bunu henüz desteklemiyorsa bildirimi veya kuralı yok sayar.</p>
<div id="Skipping_example">
<pre class="brush: html notranslate"><p> I want this text to be large, bold and blue.</p></pre>
<pre class="brush: css notranslate">p {
font-weight: bold;
colour: blue; /* incorrect spelling of the color property */
font-size: 200%;
}</pre>
</div>
<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p>
<p>Tarayıcıların bu yaklaşımı çok faydalıdır. Bu, bildirimin anlaşılmadığında herhangi bir hata almayacağını bilerek, yeni CSS bildirimlerini bir geliştirme olarak kullanabileceğin anlamına gelir — tarayıcı yeni özelliği alıp almaması bizim için sorun teşkil etmez. Cascade (art arda denetimin)'ın çalışma şekli ve tarayıcıların aynı nitelikte iki kuralın olduğu bir stil sayfasıyla karşılaştıklarında son CSS'i kullanmaları gerçeğiyle birleştiğinde, yeni CSS'i desteklemeyen tarayılar için alternatifler sunabilirsin.</p>
<p>Bu, yeni ve her tarayıcı tarafından desteklenmeyen bir nitelik/değer kullanmak istediğinde işine yarar. Örneğin, bazı eski tarayıcılar <code>calc()</code> fonksiyonunu bir değer olarak desteklemez. Peki bunun için ne yapabilirim? Bir kutu için piksel cinsinden genişlik verebilirim (<code>width: 500px)</code>, sonrada <code>calc(100% - 50px)</code> fonksiyonuyla bir değer vermeye devam edebilirim. Eski tarayıcılar, <code>calc()</code> fonksiyonunu anlamadıkları için ilgili satırı yok sayarak piksel sürümünü kullanırlar. Yeni tarayıcılarda çizgiyi piksel kullanarak yorumlacak ancak daha sonraki basamakta <code>calc()</code> fonksiyonunu görüp bu kuraldaki değeri uygulayacaklardır. Önceki satırdaki değer geçersiz sayacaklardır.</p>
<pre class="brush: css notranslate">.box {
width: 500px;
width: calc(100% - 50px);
}</pre>
<p>Sonraki derste çeşitli tarayıcıları desteklemenin daha birçok yolunu inceleyeceğiz.</p>
<h2 id="Ve_sonunda">Ve sonunda</h2>
<p>Bu kısmı neredeyse bitirdin; yapacak sadece bir işimiz kaldı. Bir sonraki makalede <a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">öğrendiklerini uygulacak</a> ve bu süreçte bazı CSS'leri test edeceksin.</p>
<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
<h2 id="Bu_kısımda">Bu kısımda</h2>
<ol>
<li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS Nedir?</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygula </a></li>
</ol>
|
