diff options
Diffstat (limited to 'files/tr/web/css/display/index.html')
| -rw-r--r-- | files/tr/web/css/display/index.html | 446 |
1 files changed, 0 insertions, 446 deletions
diff --git a/files/tr/web/css/display/index.html b/files/tr/web/css/display/index.html deleted file mode 100644 index 2b26ff1cd5..0000000000 --- a/files/tr/web/css/display/index.html +++ /dev/null @@ -1,446 +0,0 @@ ---- -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> - -{{csssyntax}} - -<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 } -<p style="display:none"> invisible text </p> -</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> |