initial commit

2 files changed, 383 insertions, 0 deletions

diff --git a/files/tr/web/api/css_object_model/index.html b/files/tr/web/api/css_object_model/index.html
new file mode 100644
index 0000000000..e799a59ee4
--- /dev/null
+++ b/files/tr/web/api/css_object_model/index.html
@@ -0,0 +1,204 @@
+---
+title: CSS Object Model (CSSOM)
+slug: Web/API/CSS_Object_Model
+tags:
+  - API
+  - CSSOM
+translation_of: Web/API/CSS_Object_Model
+---
+<div>{{DefaultAPISidebar('CSSOM')}}</div>
+
+<p class="summary"><strong>CSS Object Model</strong>, CSS'in JavaScript ile yönetilmesine imkan tanıyan bir API setidir. DOM ile oldukça benzerdir. Ancak CSSOM, HTML'den ziyade CSS içindir. CSSOM ile kullanıcılar CSS'i okuyabilir ya da dinamik olarak değiştirebilirler.</p>
+
+<h2 id="Referanslar">Referanslar</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("CaretPosition")}}</li>
+ <li>{{domxref("CSS")}}</li>
+ <li>{{domxref("CSSCharsetRule")}}</li>
+ <li>{{domxref("CSSConditionRule")}}</li>
+ <li>{{domxref("CSSCounterStyleRule")}}</li>
+ <li>{{domxref("CSSFontFaceRule")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesMap")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesRule")}}</li>
+ <li>{{domxref("CSSGroupingRule")}}</li>
+ <li>{{domxref("CSSImportRule")}}</li>
+ <li>{{domxref("CSSKeyframeRule")}}</li>
+ <li>{{domxref("CSSKeyframesRule")}}</li>
+ <li>{{domxref("CSSMarginRule")}}</li>
+ <li>{{domxref("CSSMediaRule")}}</li>
+ <li>{{domxref("CSSNamespaceRule")}}</li>
+ <li>{{domxref("CSSPageRule")}}</li>
+ <li>{{domxref("CSSRule")}}</li>
+ <li>{{domxref("CSSRuleList")}}</li>
+ <li>{{domxref("CSSStyleDeclaration")}}</li>
+ <li>{{domxref("CSSStyleSheet")}}</li>
+ <li>{{domxref("CSSStyleRule")}}</li>
+ <li>{{domxref("CSSSupportsRule")}}</li>
+ <li>{{domxref("CSSVariablesMap")}}</li>
+ <li>{{domxref("CSSViewportRule")}}</li>
+ <li>{{domxref("ElementCSSInlineStyle")}}</li>
+ <li>{{DOMxRef("FontFace")}}</li>
+ <li>{{DOMxRef("FontFaceSet")}}</li>
+ <li>{{DOMxRef("FontFaceSetLoadEvent")}}</li>
+ <li>{{domxref("GeometryUtils")}}</li>
+ <li>{{domxref("GetStyleUtils")}}</li>
+ <li>{{domxref("LinkStyle")}}</li>
+ <li>{{domxref("MediaList")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{DOMxRef("MediaQueryListEvent")}}</li>
+ <li>{{DOMxRef("MediaQueryListListener")}}</li>
+ <li>{{domxref("PseudoElement")}}</li>
+ <li>{{domxref("Screen")}}</li>
+ <li>{{domxref("StyleSheet")}}</li>
+ <li>{{domxref("StyleSheetList")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
+</div>
+
+<p>Several other interfaces are also extended by the CSSOM-related specifications: {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p>
+
+<h3 id="CSS_Typed_Object_Model" name="CSS_Typed_Object_Model">CSS Typed Object Model {{experimental_inline}}</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("CSSImageValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSKeywordValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathInvert")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathMax")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathMin")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathNegate")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathProduct")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathSum")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMatrixComponent")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSNumericArray")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSNumericValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSPerspective")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSPositionValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSRotate")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSScale")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSSkew")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSSkewX")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSSkewY")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSStyleValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSTransformComponent")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSTransformValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSTranslate")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSUnitValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSUnparsedValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSVariableReferenceValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("StylePropertyMap")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("StylePropertyMapReadOnly")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Obsolete_CSSOM_interfaces" name="Obsolete_CSSOM_interfaces">Eski CSSOM Arayüzleri {{obsolete_inline}}</h3>
+
+<p>{{obsolete_header}}</p>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("CSSPrimitiveValue")}} {{obsolete_inline}}</li>
+ <li>{{DOMxRef("CSSValue")}} {{obsolete_inline}}</li>
+ <li>{{DOMxRef("CSSValueList")}} {{obsolete_inline}}</li>
+</ul>
+</div>
+
+<h2 id="Öğretici_Materyaller">Öğretici Materyaller</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements">Elementlerin Boyutunun Belirlenmesi</a> (DHTML/Ajax dönemlerinde olduğu gibi biraz güncellenmesi gerekiyor).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation">Ekran oryantasyonunun yönetilmesi</a></li>
+</ul>
+
+<h2 id="Özellikler">Özellikler</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Typed OM")}}</td>
+   <td>{{Spec2("CSS Typed OM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Painting API")}}</td>
+   <td>{{Spec2("CSS Painting API")}}</td>
+   <td>Extended the {{DOMxRef("CSS")}} interface with the {{DOMxRef("CSS.paintWorklet","paintWorklet")}} static property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Defined the {{DOMxRef("Screen")}} and {{DOMxRef("MediaQueryList")}} interfaces and the {{DOMxRef("MediaQueryListEvent")}} event and {{DOMxRef("MediaQueryListListener")}} event listener.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>Extended the {{DOMxRef("CSS")}} interface and provides the base for the modern CSSOM specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Screen Orientation")}}</td>
+   <td>{{Spec2("Screen Orientation")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td>{{DOMxRef("CSS")}} arayüzü tanımlandı.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles")}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>İlk tanımlama.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2>
+
+<p>Tüm bu özellikler yıllar içinde azar azar farklı tarayıcılara eklendi: Basit bir tabloyla özetlenemeyecek kadar karmaşık bir süreç olduğundan lütfen kullanılabilirlik için belirli arayüzlere bakın.</p>
+
+<h2 id="Ayrıca_Bkz.">Ayrıca Bkz.</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a></li>
+</ul>
diff --git a/files/tr/web/api/css_object_model/managing_screen_orientation/index.html b/files/tr/web/api/css_object_model/managing_screen_orientation/index.html
new file mode 100644
index 0000000000..c02e0c1215
--- /dev/null
+++ b/files/tr/web/api/css_object_model/managing_screen_orientation/index.html
@@ -0,0 +1,179 @@
+---
+title: Ekran Oryantasyonunu Yönetmek
+slug: Web/API/CSS_Object_Model/Managing_screen_orientation
+tags:
+  - API
+  - CSSOM
+  - Ekran Konumu
+  - Ekran Oryantasyonu
+  - Oryantasyon
+  - Uzman
+translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation
+---
+<div>{{DefaultAPISidebar("CSSOM View")}}{{SeeCompatTable}}</div>
+
+<h2 id="Özet">Özet</h2>
+
+<p>Ekran oryantasyonu <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">cihaz oryantasyonundan</a> bir miktar farklı bir terim. Cihazın kendi oryantasyonunu tespit etme yeteneği olmasa bile ekranının her zaman bir oryantasyonu vardır. Eğer cihaz bu yeteneğe sahip ise web uygulamasının arayüzünü korumak veya uyarlamak için ekranı yönetme yeteneğine sahip olması faydalı bir özellik.</p>
+
+<p>Ekran oryantasyonunu yönetebilek için hem CSS'e hem Javascript'e dayanan çeşitli yöntemler mevcut. Bu yöntemlerden ilki <a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">orientation media query CSS </a>kullanarak tarayıcının yatay modda (genişliğin yükseklikten uzun olduğu mod) veya dikey modda (yüksekliğin genişlikten uzun olduğu mod) içeriğin ekrandaki yerleşimini ayarlamasını sağlamak.</p>
+
+<p>İkinci yöntem ise Javascript Screen orientation API kullanılarak ekranın mevcut oryantasyonun alınması ve sabitlenmesi.</p>
+
+<h2 id="Oryantasyona_göre_yerleşim_planını_ayarlamak">Oryantasyona göre yerleşim planını ayarlamak</h2>
+
+<p>Cihazın oryantasyonu değiştiğinde içeriğin ekrandaki yerleşiminin de değişmesi en çok istenilen durumlardan biri. Örneğin buton çubuğunun cihazın oryantasyonu bounca uzamasını istiyoruz. Media query kullanarak kolay ve otomatik bir şekilde yapabiliriz.</p>
+
+<p>Aşağıdaki HTML kodu üzerinden bir örnek yapalım.</p>
+
+<pre class="brush: html">&lt;ul id="toolbar"&gt;
+  &lt;li&gt;A&lt;/li&gt;
+  &lt;li&gt;B&lt;/li&gt;
+  &lt;li&gt;C&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.&lt;/p&gt;
+</pre>
+
+<p>CSS ekranın oryatasyonuna göre çalışacak özel stiller için media query'lere güveniyor.</p>
+
+<pre class="brush: css">/* Önce ortak stiller tanımlayalım */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+</pre>
+
+<p>Ortak stillerimiz hazır olduğuna göre oryantasyona göre çalışacak özel durumları tanımlamaya başlayabiliriz.</p>
+
+<pre class="brush: css">/* Dikey modda buton çubuğunun üstte olmasını istiyoruz */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* Yatay modda buton çubuğunun solda durmasını istiyoruz */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+</pre>
+
+<p>Ve sonuç:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Portrait</th>
+   <th scope="col">Landscape</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</td>
+   <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Not:</strong> Oryantasyon media query'si  tarayıcı penceresinin(veya iframe'in) oryantasyonuna göre bu stilleri çalıştırıyor cihazın oryantasyonuna göre değil.</p>
+</div>
+
+<h2 id="Ekran_oryantasyonunu_sabitlemek">Ekran oryantasyonunu sabitlemek</h2>
+
+<div class="warning">
+<p><strong>Warning:</strong> Bu API şu anda deneysel bir çalışma ve <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> ile <a href="/en-US/docs/Mozilla/Firefox_for_Android" title="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> 'de  <code>moz</code> önekiyle, Windows 8.1 ve üstünde Internet Explorer'larda ise ms önekiyle kullanılabilir durumda.</p>
+</div>
+
+<p>Bazı cihazlar (genellikle mobil cihazlar) kullanıcının kendi ekranındakileri her zaman okuyabileceğine garanti vererek ekran oryantasyonunu kendi oryantasyonuna göre dinamik olarak değiştirebiliyor. Bu davranış içerik metinlerden oluşuyorken çok iyi çalışmasına rağmen oryantasyona bağlı oyun gibi içeriklerde uygulamayı tamamen kullanılmaz hale getirebiliyor.</p>
+
+<p>Screen Orientation API bu şekilde negatif etkisi olan değişimlerin engellenmesi için geliştirildi.</p>
+
+<h3 id="Oryantasyon_değişikliğini_dinleme">Oryantasyon değişikliğini dinleme</h3>
+
+<p>Cihaz oryantasyonunu her değiştirdiğinde {{event("orientationchange")}} event'i tetiklenir ve  o anki oryantasyonu {{domxref("Screen.orientation")}} özelliğiyle okunabilir.</p>
+
+<pre class="brush: js">screen.addEventListener("orientationchange", function () {
+  console.log("Ekranın oryantasyonu: " + screen.orientation);
+});
+</pre>
+
+<h3 id="Oryantasyon_değişikliğini_engelleme">Oryantasyon değişikliğini engelleme</h3>
+
+<p>Bir web uygulaması ekranın oryantasyonunu kendi ihityaçlarına uyacak şekilde sabitleyebilir. Ekranın oryantasyonunu sabitlemek için {{domxref("Screen.lockOrientation()")}}  metodu kullanılırken sabitlemeyi kaldırmak için ise {{domxref("Screen.unlockOrientation()")}} metodu kullanılabilir.</p>
+
+<p>{{domxref("Screen.lockOrientation()")}} parametre olarak ekranın nasıl sabitlenmesi gerektiğine göre String (veya birden çok string) parametre alır. Geçerli parametre değerleri: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code> . (Bu değerler hakkında detaylı bilgi için Bkz: {{domxref("Screen.lockOrientation")}}).</p>
+
+<pre class="brush: js">screen.lockOrientation('landscape');</pre>
+
+<div class="note">
+<p><strong>Not:</strong>Ekranı sabitlemek web uygulaması bağımlıdır. Eğer uygulama A yatay moda sabitlenmiş ve uygulama B dkey moda sabitlenmiş ise A'dan B'ye ya da B'den A'ya geçildiğinde {{event("orientationchange")}} event'i tetiklenmez. Çünkü ikisi de kendi oryantasyonlarını korumaktadır.</p>
+
+<p>Ancak oryantasyonu sabitlerken istenen mevcut oryantasyon değişerek sabitlenen oryantasyona geçildiyse {{event("orientationchange")}} event'i tetiklenir.</p>
+</div>
+
+<h2 id="Firefox_OS_ve_Android_Manifest_ile_oryantasyonu_sabitleme">Firefox OS ve Android: Manifest ile oryantasyonu sabitleme</h2>
+
+<p>Firefox OS ve Firefox Android (yakında Firefox masaüstü de) için oryantasyonu sabitlemenin özel bir yolu uygulamanın manifest dosyasının <a href="/en-US/Apps/Build/Manifest#orientation">orientation </a>alanına istenen oryantasyon modunu yazmak. Örneğin dikey mod için:</p>
+
+<pre class="brush: json">"orientation": "portrait"</pre>
+
+<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2>
+
+<ul>
+ <li>{{domxref("Screen.orientation")}}</li>
+ <li>{{domxref("Screen.lockOrientation()")}}</li>
+ <li>{{domxref("Screen.unlockOrientation()")}}</li>
+ <li>{{domxref("Screen.onorientationchange")}}</li>
+ <li><a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">The orientation media query</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li>
+</ul>