1 files changed, 446 insertions, 0 deletions
diff --git a/files/tr/web/css/display/index.html b/files/tr/web/css/display/index.html
new file mode 100644
index 0000000000..b6ee8f9389
--- /dev/null
+++ b/files/tr/web/css/display/index.html
@@ -0,0 +1,446 @@
+---
+title: display
+slug: Web/CSS/display
+tags:
+  - CSS
+  - CSS özelliği
+  - Referans
+translation_of: Web/CSS/display
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Özet">Özet</h2>
+
+<p><strong><code>display</code> </strong>özelliği, bir eleman için kullanılan kutu görüntüleme türünü belirler. HTML'de, varsayılan <code>display</code> değeri, daha önceden belirlenmiş HTML spesifikasyonlarından ya da tarayıcı/kullanıcı varsayılan stil şablonundan alınır. XML'de varsayılan <code>display</code> değeri <code>inline</code>'dır.</p>
+
+<p>Bir çok farklı kutu görüntüleme tipi olmasıyla birlikte, <code>none </code>değeri bir elementi görüntülemeye kapatır, bu değeri kullandığınızda, bütün alt elemanlar da görüntülenmezler. Belge, o eleman yokmuş gibi görüntülenir.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sözdizimi_kuralları">Sözdizimi kuralları</h2>
+
+<pre class="brush:css">display: none;
+display: inline;
+display: block;
+display: inline-block;
+display: contents;
+display: list-item;
+display: inline-list-item;
+display: table;
+display: inline-table;
+display: table-cell;
+display: table-column;
+display: table-column-group;
+display: table-footer-group;
+display: table-header-group;
+display: table-row;
+display: table-row-group;
+display: table-caption;
+display: flex;
+display: inline-flex;
+display: grid;
+display: inline-grid;
+display: ruby;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+display: run-in;
+
+/* Global values */
+display: inherit;
+display: initial;
+display: unset;
+</pre>
+
+<h3 id="Değerler">Değerler</h3>
+
+<p><em><strong>display-value </strong></em>bir elementin görüntülenme biçimini tanımlamak için kullanılan bir değerdir.</p>
+
+<dl>
+ <dd>
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <td class="header" colspan="1">Değer kümesi</td>
+    <td class="header">Değer</td>
+    <td class="header">Tanım</td>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td colspan="1" rowspan="4">Basic values (CSS 1)</td>
+    <td><code>none</code></td>
+    <td>
+     <p>Elementi görüntülemeye kapatır.(Tasarım değişikliğe uğramaz.);bütün alt elementler de görüntülenmez. Belge, bu element yokmuş gibi davranır.</p>
+
+     <p>Görüntülemeye kapadığınız elementin kutu boyutlarının halen tasarımda var olmasını istiyorsanız {{cssxref("visibility")}} özelliğine gözatın.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>inline</code></td>
+    <td>bir veya daha fazla satıriçi kutusu oluşturur.</td>
+   </tr>
+   <tr>
+    <td><code>block</code></td>
+    <td>blok element kutusu oluşturur.</td>
+   </tr>
+   <tr>
+    <td><code>list-item</code></td>
+    <td>Element içerik için bir blok kutusu oluşturur, ve içeriği listeye ayırır.</td>
+   </tr>
+   <tr>
+    <td>Gelişletilmiş değerler (CSS 2.1)</td>
+    <td><code>inline-block</code></td>
+    <td>inline-block değeri, kendisini çevreleyen bir block element alanı oluşturur.</td>
+   </tr>
+   <tr>
+    <td colspan="1" rowspan="10">Table model değerler (CSS 2.1)</td>
+    <td><code>inline-table</code></td>
+    <td><code>inline-table  </code>değeri HTML üzerinde direkt olarak bir mapping'e sahip değildir.  {{HTMLElement("table")}} HTML elementi gibi davranır ancak farklı olarak, block elementi değil, inline-block özelliklerini taşır.</td>
+   </tr>
+   <tr>
+    <td><code>table</code></td>
+    <td>Bu elementler block {{HTMLElement("table")}} gibi davranır.</td>
+   </tr>
+   <tr>
+    <td><code>table-caption</code></td>
+    <td>Bu elementler {{HTMLElement("caption")}} HTML elementler gibi davranır.</td>
+   </tr>
+   <tr>
+    <td><code>table-cell</code></td>
+    <td>Bu elementler {{HTMLElement("td")}} gibi davranır..</td>
+   </tr>
+   <tr>
+    <td><code>table-column</code></td>
+    <td>Bu elementler {{HTMLElement("col")}} gibi davranır.</td>
+   </tr>
+   <tr>
+    <td><code>table-column-group</code></td>
+    <td>Bu elementler {{HTMLElement("colgroup")}} gibi davranır.</td>
+   </tr>
+   <tr>
+    <td><code>table-footer-group</code></td>
+    <td>Bu elementler {{HTMLElement("tfoot")}} gibi davranır.</td>
+   </tr>
+   <tr>
+    <td><code>table-header-group</code></td>
+    <td>Bu elementler {{HTMLElement("thead")}} gibi davranır.</td>
+   </tr>
+   <tr>
+    <td><code>table-row</code></td>
+    <td>Bu elementler {{HTMLElement("tr")}} gibi davranır.</td>
+   </tr>
+   <tr>
+    <td><code>table-row-group</code></td>
+    <td>Bu elementler {{HTMLElement("tbody")}} gibi davranır.</td>
+   </tr>
+   <tr>
+    <td colspan="1">CSS3 liste değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td>
+    <td><a href="https://drafts.csswg.org/css-lists/#valdef-display-inline-list-item">inline-list-item</a></td>
+    <td>The inline-list-item display value makes the element a list item, with the effects described above. Additionally, the outside value of list-style-position computes to inside on this element. Otherwise, this display value is treated identically to inline.</td>
+   </tr>
+   <tr>
+    <td colspan="1" rowspan="2">Flexbox model değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td>
+    <td><code>flex</code></td>
+    <td>Element, block elementi gibi davranır ve flexbox modeline uygun olarak görünür.</td>
+   </tr>
+   <tr>
+    <td><code>inline-flex</code></td>
+    <td>Element inline element gibi davranır ve flexbox modeline uygun olarak görünür.</td>
+   </tr>
+   <tr>
+    <td colspan="1" rowspan="2">Grid box model değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>) {{experimental_inline}}</td>
+    <td><code>grid</code></td>
+    <td>
+     <p>Element, block elementi gibi davranır ve<br>
+      grid modeline uygun olarak görünür.</p>
+
+     <div class="note">Deneyimlenebileceği üzere, <a href="/en-US/docs/CSS/display#Browser_Compatibility" title="https://developer.mozilla.org/en/CSS/display#Browser_Compatibility">çoğu tarayıcı henüz desteklememektedir</a>. Özellikle <code>-moz-grid</code> 'in display:grid'e ait bir prefix olmadığını belirtmeliyiz. -moz-grid <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=616605#c10" title="https://bugzilla.mozilla.org/show_bug.cgi?id=616605#c10">XUL layout model</a> 'de belirtilen ve kullanmamanız gereken bir prefix'tir.</div>
+    </td>
+   </tr>
+   <tr>
+    <td><code>inline-grid</code></td>
+    <td>Element inline element gibi davranır ve grid modeline bağlı olarak içeriği kapsar.</td>
+   </tr>
+   <tr>
+    <td colspan="1" rowspan="5">Ruby formatting model values (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>){{experimental_inline}}</td>
+    <td><code>ruby</code></td>
+    <td>Element inline element gibi davranır ve<br>
+     içeriği ruby format modelinde kapsar {{HTMLElement("ruby")}} gibi davranır.</td>
+   </tr>
+   <tr>
+    <td><code>ruby-base</code></td>
+    <td>Bu elementler {{HTMLElement("rb")}} gibi davranır.</td>
+   </tr>
+   <tr>
+    <td><code>ruby-text</code></td>
+    <td>Bu elementler {{HTMLElement("rt")}} gibi davranır</td>
+   </tr>
+   <tr>
+    <td><code>ruby-base-container</code></td>
+    <td>These elements behave like {{HTMLElement("rbc")}} elements generated as anonymous boxes.</td>
+   </tr>
+   <tr>
+    <td><code>ruby-text-container</code></td>
+    <td>These elements behave like {{HTMLElement("rtc")}} elements.</td>
+   </tr>
+   <tr>
+    <td colspan="1" rowspan="2">Experimental values {{experimental_inline}}</td>
+    <td><code>run-in</code></td>
+    <td>
+     <ul>
+      <li>If the run-in box contains a block box, same as block.</li>
+      <li>If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.</li>
+      <li>If an inline box follows, the run-in box becomes a block box.</li>
+     </ul>
+    </td>
+   </tr>
+   <tr>
+    <td><code>contents</code></td>
+    <td>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p><a href="/samples/cssref/display.html">View Live Examples</a></p>
+
+<pre class="brush: css">p.secret  { display: none }
+&lt;p style="display:none"&gt; invisible text &lt;/p&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#valdef-display-inline-list-item', 'display')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Added the inline-list-item values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+   <td>Added the <code>run-in</code> and <code>contents</code> values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Added the <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, and <code>ruby-text-container </code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Grid')}}</td>
+   <td>Added the grid box model values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Added the flexible box model values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Added the table model values and <code>inline-block<em>.</em></code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition. Basic values: <code>none</code>, <code>block</code>, <code>inline</code>, and <code>list-item</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td><code>none</code>, <code>inline</code> and <code>block</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>inline-block</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>5.5 [4]</td>
+   <td>7.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>list-item</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>6.0</td>
+   <td>7.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>inline-list-item</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [6]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td rowspan="2"><code>run-in</code> {{experimental_inline}}</td>
+   <td>1.0 [5]</td>
+   <td rowspan="2">{{CompatNo}}</td>
+   <td rowspan="2">8.0</td>
+   <td rowspan="2">7.0</td>
+   <td>1.0 (85) [5]</td>
+  </tr>
+  <tr>
+   <td>
+    <p>4.0</p>
+
+    <p>Removed in 32</p>
+   </td>
+   <td>
+    <p>5.0 (532.5)</p>
+
+    <p>Removed in 8.0</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>inline-table</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>8.0</td>
+   <td>7.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-header-group</code>, <code>table-row-group</code>, <code>table-footer-group</code>, <code>table-row</code>, and <code>table-caption</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>8.0</td>
+   <td>7.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>flex</code></td>
+   <td>21.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}} [1]<br>
+    {{CompatGeckoDesktop("20.0")}}</td>
+   <td>11</td>
+   <td>12.50</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>inline-flex</code></td>
+   <td>21.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}} [1]<br>
+    {{CompatGeckoDesktop("20.0")}}</td>
+   <td>11</td>
+   <td>12.50</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0{{property_prefix("-ms")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>inline-grid</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0{{property_prefix("-ms")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, <code>ruby-text-container</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34.0")}} [3]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contents</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("37")}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>7.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to <code>true</code>. Multi-line flexbox are supported since Firefox 28.</p>
+
+<p>[2] In Firefox 36, it the preference governing this feature was off by default.</p>
+
+<p>[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.</p>
+
+<p>[4] Natural inline elements only</p>
+
+<p>[5] Not before inline-elements</p>
+
+<p>[6] See {{bug(1105868)}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Cssxref("visibility")}}, {{Cssxref("float")}}, {{Cssxref("position")}}</li>
+ <li>{{Cssxref("flex")}}</li>
+</ul>