diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-07-15 12:58:54 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-15 12:58:54 -0400 |
| commit | 9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd (patch) | |
| tree | 6fd33b1d14bd8f53a73291e4afa6f9d6400f1964 /files/de/web/css | |
| parent | fe0831846de29cce74db723e625c90b1ef966d9d (diff) | |
| download | translated-content-9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd.tar.gz translated-content-9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd.tar.bz2 translated-content-9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd.zip | |
delete pages that were never translated from en-US (de, part 1) (#1548)
Diffstat (limited to 'files/de/web/css')
| -rw-r--r-- | files/de/web/css/_doublecolon_placeholder/index.html | 150 | ||||
| -rw-r--r-- | files/de/web/css/box-decoration-break/index.html | 136 | ||||
| -rw-r--r-- | files/de/web/css/containing_block/index.html | 258 | ||||
| -rw-r--r-- | files/de/web/css/css_values_and_units/index.html | 493 | ||||
| -rw-r--r-- | files/de/web/css/media_queries/testing_media_queries/index.html | 88 | ||||
| -rw-r--r-- | files/de/web/css/media_queries/using_media_queries/index.html | 644 | ||||
| -rw-r--r-- | files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html | 88 | ||||
| -rw-r--r-- | files/de/web/css/object-position/index.html | 147 | ||||
| -rw-r--r-- | files/de/web/css/perspective-origin/index.html | 391 | ||||
| -rw-r--r-- | files/de/web/css/shorthand_properties/index.html | 159 | ||||
| -rw-r--r-- | files/de/web/css/visual_formatting_model/index.html | 144 |
11 files changed, 0 insertions, 2698 deletions
diff --git a/files/de/web/css/_doublecolon_placeholder/index.html b/files/de/web/css/_doublecolon_placeholder/index.html deleted file mode 100644 index 7f10c944d4..0000000000 --- a/files/de/web/css/_doublecolon_placeholder/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: '::placeholder' -slug: 'Web/CSS/::placeholder' -tags: - - CSS - - Referenz -translation_of: 'Web/CSS/::placeholder' ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>Das <strong><code>::placeholder</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-Element</a> stellt den <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">Platzhaltertext</a> eines <a href="/en-US/docs/Learn/HTML/Forms">Formular-</a>Elements dar.</p> - -<pre class="brush: css no-line-numbers">::placeholder { - color: blue; - font-size: 1.5em; -}</pre> - -<p>Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p> - -<div class="note"> -<p><strong>Note:</strong> In Firefox, the appearance of placeholder text is a translucent gray color by default.</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -{{csssyntax}} - -<h2 id="Beispiele">Beispiele</h2> - -<h3 id="Red_text">Red text</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush:html line-numbers language-html"><input placeholder="Type something here!"></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">input::placeholder { - color: red; - font-size: 1.2em; - font-style: italic; -}</pre> - -<h4 id="Ergebnis">Ergebnis</h4> - -<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p> - -<h3 id="Green_text">Green text</h3> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush:html line-numbers language-html"><input placeholder="Type something here..."></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">input::placeholder { - color: green; -} -</pre> - -<h4 id="Ergebnis_2">Ergebnis</h4> - -<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<h3 id="Color_contrast">Color contrast</h3> - -<h4 id="Contrast_Ratio">Contrast Ratio</h4> - -<p>Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.</p> - -<p>It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.</p> - -<p>Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.</p> - -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h4 id="Usability">Usability</h4> - -<p>Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an {{htmlelement("input")}} element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.</p> - -<p>An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> to programmatically associate the {{HTMLElement("input")}} with its hint.</p> - -<p>With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use <code>aria-describedby</code> to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.</p> - -<pre class="brush:html line-numbers language-html"><label for="user-email">Your email address</label> -<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span> -<input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> -</pre> - -<ul> - <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> -</ul> - -<h3 id="Windows_High_Contrast_Mode">Windows High Contrast Mode</h3> - -<p>Placeholder text will appear with the same styling as user-entered text content when rendered in <a href="/en-US/docs/Web/CSS/-ms-high-contrast">Windows High Contrast Mode</a>. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.</p> - -<ul> - <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li> -</ul> - -<h3 id="Labels">Labels</h3> - -<p>Placeholders are not a replacement for the {{htmlelement("label")}} element. Without a label that has been programmatically associated with an input using a combination of the {{htmlattrxref("for", "label")}} and {{htmlattrxref("id")}} attributes, assistive technology such as screen readers cannot parse {{htmlelement("input")}} elements.</p> - -<ul> - <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li> - <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> -</ul> - -<h2 id="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('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td> - <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.selectors.placeholder")}}</p> -</div> - -<h2 id="Siehe_auch">Siehe auch</h2> - -<ul> - <li>The {{cssxref(":placeholder-shown")}} pseudo-class styles an element that <em>has</em> an active placeholder.</li> - <li>Related HTML elements: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> - <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li> -</ul> diff --git a/files/de/web/css/box-decoration-break/index.html b/files/de/web/css/box-decoration-break/index.html deleted file mode 100644 index 1aaf5b37d0..0000000000 --- a/files/de/web/css/box-decoration-break/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: box-decoration-break -slug: Web/CSS/box-decoration-break -tags: - - CSS - - CSS Fragmentation - - CSS Property - - Experimental - - Reference -translation_of: Web/CSS/box-decoration-break ---- -<p>{{CSSRef}}{{SeeCompatTable}}</p> - -<h2 id="Summary">Summary</h2> - -<p>The <strong><code>box-decoration-break</code></strong> CSS property specifies how the {{ Cssxref("background") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }}, {{ Cssxref("margin") }} and {{ Cssxref("clip") }} of an element is applied when the box for the element is fragmented. Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a fragment.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css">box-decoration-break: slice; -box-decoration-break: clone; - -box-decoration-break: initial; -box-decoration-break: inherit; -box-decoration-break: unset; -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>slice</code></dt> - <dd>The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.</dd> - <dt><code>clone</code></dt> - <dd>Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }} and {{ Cssxref("box-shadow") }}, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with {{ Cssxref("background-repeat") }}: <code>no-repeat</code> may be repeated multiple times.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Inline_box_fragments">Inline box fragments</h3> - -<p>An inline element that contains line-breaks styled with:</p> - -<pre class="brush:css">.example { - background: linear-gradient(to bottom right, yellow, green); - box-shadow: - 8px 8px 10px 0px deeppink, - -5px -5px 5px 0px blue, - 5px 5px 15px 0px yellow; - padding: 0em 1em; - border-radius: 16px; - border-style: solid; - margin-left: 10px; - font: 24px sans-serif; - line-height: 2; -} - -... -<span class="example">The<br>quick<br>orange fox</span></pre> - -<p>Results in:</p> - -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p> - -<p>Adding <code>box-decoration-break:clone</code> to the above styles:</p> - -<pre class="brush:css"> -webkit-box-decoration-break: clone; - -o-box-decoration-break: clone; - box-decoration-break: clone; -</pre> - -<p>Results in:</p> - -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p> - -<p>You can <a href="https://mdn.mozillademos.org/files/8179/box-decoration-break-inline.html">try the two inline examples above</a> in your browser.</p> - -<p>Here's an example of an inline element using a large <code>border-radius</code> value. The second <code>"iM"</code> has a line-break between the <code>"i"</code> and the <code>"M"</code>. For comparison, the first <code>"iM"</code> is without line-breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.</p> - -<p><img alt="A screenshot of the rendering of the second inline element example." src="https://mdn.mozillademos.org/files/8189/box-decoration-break-slice-inline-2.png" style="height: 184px; width: 108px;"></p> - -<p><a href="https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html">Try the above example</a> in your browser.</p> - -<h3 id="Block_box_fragments">Block box fragments</h3> - -<p>A block element with similar styles as above, first without any fragmentation:</p> - -<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p> - -<p>Fragmenting the above block into three columns results in:</p> - -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p> - -<p>Note that stacking these pieces vertically will result in the non-fragmented rendering.</p> - -<p>Now the same example styled with <code>box-decoration-break:clone</code></p> - -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p> - -<p>Note here that each fragment has an identical replicated border, box-shadow and background.</p> - -<p>You can <a href="https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html">try the block examples above</a> in your browser.</p> - -<h2 id="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 Fragmentation', '#break-decoration', 'box-decoration-break') }}</td> - <td>{{ Spec2('CSS3 Fragmentation') }}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -{{Compat("css.properties.box-decoration-break")}} - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> -</ul> diff --git a/files/de/web/css/containing_block/index.html b/files/de/web/css/containing_block/index.html deleted file mode 100644 index 94577e99cc..0000000000 --- a/files/de/web/css/containing_block/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Layout und der enthaltende Block -slug: Web/CSS/Containing_block -translation_of: Web/CSS/Containing_block ---- -<div>{{cssref}}</div> - -<p>The size and position of an element are often impacted by its <strong>containing block</strong>. Most often, the containing block is the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a> of an element's nearest <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level</a> ancestor, but this is not always the case. <span class="seoSummary">In this article, we examine the factors that determine an element's containing block.</span></p> - -<p>When a user agent (such as your browser) lays out a document, it generates a box for every element. Each box is divided into four areas:</p> - -<ol start="1"> - <li>Content area</li> - <li>Padding area</li> - <li>Border area</li> - <li>Margin area</li> -</ol> - -<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> - -<p>Many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. Let's investigate the factors that determine what an element's containing block is.</p> - -<h2 id="Effects_of_the_containing_block">Effects of the containing block</h2> - -<p>Before learning what determines the containing block of an element, it's useful to know why it matters in the first place.</p> - -<p>The size and position of an element are often impacted by its containing block. Percentage values that are applied to the {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, and offset properties of an absolutely positioned element (i.e., which has its {{cssxref("position")}} set to <code>absolute</code> or <code>fixed</code>) are computed from the element's containing block.</p> - -<h2 id="Identifying_the_containing_block">Identifying the containing block</h2> - -<p>The process for identifying the containing block depends entirely on the value of the element's {{cssxref("position")}} property:</p> - -<ol start="1"> - <li>If the <code>position</code> property is <code><strong>static</strong></code>, <code><strong>relative</strong></code>, or <strong><code>sticky</code></strong>, the containing block is formed by the edge of the <em>content box</em> of the nearest ancestor element that is either <strong>a block container</strong> (such as an inline-block, block, or list-item element) or <strong>establishes a formatting context</strong> (such as a table container, flex container, grid container, or the block container itself).</li> - <li>If the <code>position</code> property is <code><strong>absolute</strong></code>, the containing block is formed by the edge of the <em>padding box</em> of the nearest ancestor element that has a <code>position</code> value other than <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code>, or <code>sticky</code>).</li> - <li>If the <code>position</code> property is <code><strong>fixed</strong></code>, the containing block is established by the {{glossary("viewport")}} (in the case of continuous media) or the page area (in the case of paged media).</li> - <li>If the <code>position</code> property is <code><strong>absolute</strong></code> or <code><strong>fixed</strong></code>, the containing block may also be formed by the edge of the <em>padding box</em> of the nearest ancestor element that has the following: - <ol start="1"> - <li>A {{cssxref("transform")}} or {{cssxref("perspective")}} value other than <code>none</code></li> - <li>A {{cssxref("will-change")}} value of <code>transform</code> or <code>perspective</code></li> - <li>A {{cssxref("filter")}} value other than <code>none</code> or a <code>will-change</code> value of <code>filter</code> (only works on Firefox).</li> - <li>A {{cssxref("contain")}} value of <code>paint</code> (e.g. <code>contain: paint;</code>)</li> - </ol> - </li> -</ol> - -<div class="note"> -<p><strong>Note:</strong> The containing block in which the root element ({{HTMLElement("html")}}) resides is a rectangle called the <strong>initial containing block</strong>. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).</p> -</div> - -<h2 id="Calculating_percentage_values_from_the_containing_block">Calculating percentage values from the containing block</h2> - -<p>As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are <strong>box model properties</strong> and <strong>offset properties</strong>:</p> - -<ol start="1"> - <li>The {{cssxref("height")}}, {{cssxref("top")}}, and {{cssxref("bottom")}} properties compute percentage values from the <code>height</code> of the containing block.</li> - <li>The {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, and {{cssxref("margin")}} properties compute percentage values from the <code>width</code> of the containing block.</li> -</ol> - -<h2 id="Some_examples">Some examples</h2> - -<p>The HTML code for all our examples is:</p> - -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> - -<p>Only the CSS is altered in each instance below.</p> - -<h3 id="Example_1">Example 1</h3> - -<p>In this example, the paragraph is statically positioned, so its containing block is {{HTMLElement("section")}} because it's the nearest ancestor that is a block container.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> -</div> - -<pre class="brush: css notranslate">body { - background: beige; -} - -section { - display: block; - width: 400px; - height: 160px; - background: lightgray; -} - -p { - width: 50%; /* == 400px * .5 = 200px */ - height: 25%; /* == 160px * .25 = 40px */ - margin: 5%; /* == 400px * .05 = 20px */ - padding: 5%; /* == 400px * .05 = 20px */ - background: cyan; -} -</pre> - -<p>{{EmbedLiveSample('Example_1','100%','300')}}</p> - -<h3 id="Example_2">Example 2</h3> - -<p>In this example, the paragraph's containing block is the {{HTMLElement("body")}} element, because <code><section></code> is not a block container (because of <code>display: inline</code>) and doesn’t establish a formatting context.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> -</div> - -<pre class="brush: css notranslate">body { - background: beige; -} - -section { - display: inline; - background: lightgray; -} - -p { - width: 50%; /* == half the body's width */ - height: 200px; /* Note: a percentage would be 0 */ - background: cyan; -} -</pre> - -<p>{{EmbedLiveSample('Example_2','100%','300')}}</p> - -<h3 id="Example_3">Example 3</h3> - -<p>In this example, the paragraph's containing block is <code><section></code> because the latter's <code>position</code> is <code>absolute</code>. The paragraph's percentage values are affected by the <code>padding</code> of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were <code>border-box</code> this would not be the case.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> -</div> - -<pre class="brush: css notranslate">body { - background: beige; -} - -section { - position: absolute; - left: 30px; - top: 30px; - width: 400px; - height: 160px; - padding: 30px 20px; - background: lightgray; -} - -p { - position: absolute; - width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */ - height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */ - margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ - padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ - background: cyan; -} -</pre> - -<p>{{EmbedLiveSample('Example_3','100%','300')}}</p> - -<h3 id="Example_4">Example 4</h3> - -<p>In this example, the paragraph's <code>position</code> is <code>fixed</code>, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> -</div> - -<pre class="brush: css notranslate">body { - background: beige; -} - -section { - width: 400px; - height: 480px; - margin: 30px; - padding: 15px; - background: lightgray; -} - -p { - position: fixed; - width: 50%; /* == (50vw - (width of vertical scrollbar)) */ - height: 50%; /* == (50vh - (height of horizontal scrollbar)) */ - margin: 5%; /* == (5vw - (width of vertical scrollbar)) */ - padding: 5%; /* == (5vw - (width of vertical scrollbar)) */ - background: cyan; -} -</pre> - -<p>{{EmbedLiveSample('Example_4','100%','300')}}</p> - -<h3 id="Example_5">Example 5</h3> - -<p>In this example, the paragraph's <code>position</code> is <code>absolute</code>, so its containing block is <code><section></code>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't <code>none</code>.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> -</div> - -<pre class="brush: css notranslate">body { - background: beige; -} - -section { - transform: rotate(0deg); - width: 400px; - height: 160px; - background: lightgray; -} - -p { - position: absolute; - left: 80px; - top: 30px; - width: 50%; /* == 200px */ - height: 25%; /* == 40px */ - margin: 5%; /* == 20px */ - padding: 5%; /* == 20px */ - background: cyan; -} -</pre> - -<p>{{EmbedLiveSample('Example_5','100%','300')}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{css_key_concepts}}</li> - <li>The {{cssxref("all")}} property resets all CSS declarations to a given known state</li> -</ul> diff --git a/files/de/web/css/css_values_and_units/index.html b/files/de/web/css/css_values_and_units/index.html deleted file mode 100644 index 7cde234d24..0000000000 --- a/files/de/web/css/css_values_and_units/index.html +++ /dev/null @@ -1,493 +0,0 @@ ---- -title: CSS values and units -slug: Web/CSS/CSS_Values_and_Units -translation_of: Web/CSS/CSS_Values_and_Units ---- -<div>{{CSSRef}}</div> - -<p class="summary"><span class="seoSummary">Jede CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types -- values and units -- that CSS properties accept.</span> Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.</p> - -<h2 id="Textual_data_types">Textual data types</h2> - -<ul> - <li>{{cssxref("<custom-ident>")}}</li> - <li>Pre-defined keywords as an <code><ident></code></li> - <li>{{cssxref("<string>")}}</li> - <li>{{cssxref("<url>")}}</li> -</ul> - -<p>Text data types are either <code><string></code>, a quoted series of characters, or an <code><ident></code>, a "CSS Identifier" which is an unquoted string. A <code><string></code> must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as <code><ident></code> or <code><custom-ident></code>, must be unquoted.</p> - -<p>In the CSS specifications, values that can be defined by the web developer, like keyframe animations, font-family names, or grid areas are listed as a {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}}, or both.</p> - -<p>When both quoted and unquoted user defined text values are permitted, the specification will list <code><custom-ident> | <string></code>, meaning quotes are optional, such as is the case with animation names:</p> - -<pre class="brush: css notranslate">@keyframe validIdent { - /* keyframes go here */ -} -@keyframe 'validString' { - /* keyframes go here */ -}</pre> - -<p>Some text values are not valid if encompassed in quotes. For example, the value of {{cssxref("grid-area")}} can be a <code><custom-ident></code>, so if we had a grid area named <code>content</code> we would use it without quotes:</p> - -<pre class="brush: css notranslate">.item { - grid-area: content; -} -</pre> - -<p>In comparison, a data type that is a {{cssxref("<string>")}}, such as a string value of the {{cssxref("content")}} property, must be quoted:</p> - -<pre class="brush: css notranslate">.item::after { - content: "This is my content."; -} -</pre> - -<p>While you can generally create any name you want, including using emojis, the identifier can't be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code>, start with a digit or two dashes, and generally you don't want it to be any other pre-defined CSS keyword. See the {{cssxref("<custom-ident>")}} and {{cssxref("<string>")}} reference pages for more details.</p> - -<h3 id="Pre-defined_keyword_values">Pre-defined keyword values</h3> - -<p>Pre-defined keywords are text values defined by the specification for that property. These keywords are also CSS Identifiers and are therefore used without quotes.</p> - -<p>When viewing CSS property value syntax in a CSS specification or the MDN property page, allowable keywords will be listed in the following form. The following values are the pre-defined keyword values allowed for {{cssxref("float")}}.</p> - -<pre class="syntaxbox notranslate">left <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre> - -<p>Such values are used without quotes:</p> - -<pre class="brush: css notranslate"><code>.box { - float: left; -} -</code></pre> - -<h3 id="CSS-wide_values">CSS-wide values</h3> - -<p>In addition to the pre-defined keywords that are part of the specification for a property, all CSS properties accept the CSS-wide property values {{cssxref("initial")}}, {{cssxref("inherit")}}, and {{cssxref("unset")}}, which explicitly specify defaulting behaviors.</p> - -<p>The <code>initial</code> keyword represents the value specified as the property’s initial value. The <code>inherit</code> keyword represents the computed value of the property on the element’s parent, provided it is inherited.</p> - -<p>The <code>unset</code> keyword acts as either <code>inherit</code> or <code>initial</code>, depending on whether the property is inherited or not.</p> - -<p>A fourth value of {{cssxref("revert")}} was added in the Cascade Level 4 specification, but it does not currently have good browser support.</p> - -<h3 id="URLs">URLs</h3> - -<p>A {{cssxref("<url>")}} type uses functional notation, which accepts a <code><string></code> that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.</p> - -<pre class="brush: css notranslate"><code>.box { - background-image: url("images/my-background.png"); -}</code> - -<code>.box { - background-image: url("https://www.exammple.com/images/my-background.png"); -}</code> -</pre> - -<p>The parameter for <code>url()</code> can be either quoted or unquoted. If unquoted, it is parsed as a <code><url-token></code>, which has extra requirements including the escaping of certain characters. See {{cssxref("<url>")}} for more information.</p> - -<h2 id="Numeric_data_types">Numeric data types</h2> - -<ul> - <li>{{cssxref("<integer>")}}</li> - <li>{{cssxref("<number>")}}</li> - <li>{{cssxref("<dimension>")}}</li> - <li>{{cssxref("<percentage>")}}</li> -</ul> - -<h3 id="Integers">Integers</h3> - -<p>An integer is one or more decimal digits, <code>0</code> through <code>9</code>, such as <code>1024</code> or <code>-55</code>. An integer may be preceded by a <code>+</code> or <code>-</code> symbol, with no space between the symbol and the integer.</p> - -<h3 id="Numbers">Numbers</h3> - -<p>A {{cssxref("<number>")}} represents a real number, which may or may not have a decimal point with a fractional component, for example <code>0.255</code>, <code>128</code> or <code>-1.2</code>. Numbers may also be preceded by a <code>+</code> or <code>-</code> symbol.</p> - -<h3 id="Dimensions">Dimensions</h3> - -<p>A {{cssxref("<dimension>")}} is a <code><number></code> with a unit attached to it, for example <code>45deg</code>, <code>100ms</code>, or <code>10px</code>. The attached unit identifier is case insensitive. There is never a space or any other characters between a the number and the unit identifier: i.e. <code>1 cm</code> is not valid.</p> - -<p>CSS uses dimensions to specify:</p> - -<ul> - <li>{{cssxref("<length>")}} (Distance units)</li> - <li>{{cssxref("<angle>")}}</li> - <li>{{cssxref("<time>")}}</li> - <li>{{cssxref("<frequency>")}}</li> - <li>{{cssxref("<resolution>")}}</li> -</ul> - -<p>These are all covered in subsections below.</p> - -<h4 id="Distance_units">Distance units</h4> - -<p>Where a distance unit, also known as a length, is allowed as a value for a property, this is described as the {{cssxref("<length>")}} type. There are two types of lengths in CSS: relative and absolute.</p> - -<p>Relative length units specify a length in relation to something else. For example, <code>em</code> is relative to the font size on the element and <code>vh</code> is relative to the viewport height.</p> - -<table class="standard-table"> - <caption> - <h4 id="Relative_length_units">Relative length units</h4> - </caption> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Relative to</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>em</code></td> - <td>Font size of the element.</td> - </tr> - <tr> - <td><code>ex</code></td> - <td>x-height of the element's font.</td> - </tr> - <tr> - <td><code>cap</code></td> - <td>Cap height (the nominal height of capital letters) of the element's font.</td> - </tr> - <tr> - <td><code>ch</code></td> - <td>Average character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.</td> - </tr> - <tr> - <td><code>ic</code></td> - <td>Average character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.</td> - </tr> - <tr> - <td><code>rem</code></td> - <td>Font size of the root element.</td> - </tr> - <tr> - <td><code>lh</code></td> - <td>Line height of the element.</td> - </tr> - <tr> - <td><code>rlh</code></td> - <td>Line height of the root element.</td> - </tr> - <tr> - <td><code>vw</code></td> - <td>1% of viewport's width.</td> - </tr> - <tr> - <td><code>vh</code></td> - <td>1% of viewport's height.</td> - </tr> - <tr> - <td><code>vi</code></td> - <td>1% of viewport's size in the root element's inline axis.</td> - </tr> - <tr> - <td><code>vb</code></td> - <td>1% of viewport's size in the root element's block axis.</td> - </tr> - <tr> - <td><code>vmin</code></td> - <td>1% of viewport's smaller dimension.</td> - </tr> - <tr> - <td><code>vmax</code></td> - <td>1% of viewport's larger dimension.</td> - </tr> - </tbody> -</table> - -<p>Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, <code>mm</code> is a physical millimeter, 1/10th of a centimeter.</p> - -<table class="standard-table"> - <caption> - <h4 id="Absolute_length_units">Absolute length units</h4> - </caption> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Name</th> - <th scope="col">Equivalent to</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>cm</code></td> - <td>Centimeters</td> - <td>1cm = 96px/2.54</td> - </tr> - <tr> - <td><code>mm</code></td> - <td>Millimeters</td> - <td>1mm = 1/10th of 1cm</td> - </tr> - <tr> - <td><code>Q</code></td> - <td>Quarter-millimeters</td> - <td>1Q = 1/40th of 1cm</td> - </tr> - <tr> - <td><code>in</code></td> - <td>Inches</td> - <td>1in = 2.54cm = 96px</td> - </tr> - <tr> - <td><code>pc</code></td> - <td>Picas</td> - <td>1pc = 1/16th of 1in</td> - </tr> - <tr> - <td><code>pt</code></td> - <td>Points</td> - <td>1pt = 1/72th of 1in</td> - </tr> - <tr> - <td><code>px</code></td> - <td>Pixels</td> - <td>1px = 1/96th of 1in</td> - </tr> - </tbody> -</table> - -<p>When including a length value, if the length is <code>0</code>, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.</p> - -<h4 id="Angle_units">Angle units</h4> - -<p>Angle values are represented by the type {{cssxref("<angle>")}} and accept the following values:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Name</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>deg</code></td> - <td>Degrees</td> - <td>There are 360 degrees in a full circle.</td> - </tr> - <tr> - <td><code>grad</code></td> - <td>Gradians</td> - <td>There are 400 gradians in a full circle.</td> - </tr> - <tr> - <td><code>rad</code></td> - <td>Radians</td> - <td>There are 2π radians in a full circle.</td> - </tr> - <tr> - <td><code>turn</code></td> - <td>Turns</td> - <td>There is 1 turn in a full circle.</td> - </tr> - </tbody> -</table> - -<h4 id="Time_units">Time units</h4> - -<p>Time values are represented by the type {{cssxref("<time>")}}. When including a time value, the unit identifier -- the <code>s</code> or <code>ms</code> -- is required. It accepts the following values.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Name</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>s</code></td> - <td>Seconds</td> - <td></td> - </tr> - <tr> - <td><code>ms</code></td> - <td>Milliseconds</td> - <td>There are 1,000 milliseconds in a second.</td> - </tr> - </tbody> -</table> - -<h4 id="Frequency_units">Frequency units</h4> - -<p>Frequency values are represented by the type {{cssxref("<frequency>")}}. It accepts the following values.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Name</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>Hz</code></td> - <td>Hertz</td> - <td>Represents the number of occurrences per second.</td> - </tr> - <tr> - <td><code>kHz</code></td> - <td>KiloHertz</td> - <td>A kiloHertz is 1000 Hertz.</td> - </tr> - </tbody> -</table> - -<p><code>1Hz</code>, which can also be written as <code>1hz</code> or <code>1HZ</code>, is one cycle per second.</p> - -<h4 id="Resolution_unit">Resolution unit</h4> - -<p>Resolution units are represented by the type {{cssxref("<resolution>")}}. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>dpi</code></td> - <td>Dots per inch.</td> - </tr> - <tr> - <td><code>dpcm</code></td> - <td>Dots per centimetre.</td> - </tr> - <tr> - <td><code>dppx</code>, <code>x</code></td> - <td>Dots per px unit.</td> - </tr> - </tbody> -</table> - -<h3 id="Percentages">Percentages</h3> - -<p>A {{cssxref("<percentage>")}} is a type that represents a fraction of some other value.</p> - -<p>Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.</p> - -<p>As an example, if you specify the {{cssxref("width")}} of a box as a percentage, it refers to the percentage of the box's parent's computed width:</p> - -<pre class="brush: css notranslate">.box { - width: 50%; -}</pre> - -<h3 id="Mixing_percentages_and_dimensions">Mixing percentages and dimensions</h3> - -<p>Some properties accept a dimension that could be either one of two types, for example a <code><length></code> <strong>or</strong> a <code><percentage></code>. In this case the allowed value is detailed in the specification as a combination unit, e.g. {{cssxref("<length-percentage>")}}. Other possible combinations are as follows:</p> - -<ul> - <li>{{cssxref("<frequency-percentage>")}}</li> - <li>{{cssxref("<angle-percentage>")}}</li> - <li>{{cssxref("<time-percentage>")}}</li> -</ul> - -<h3 id="Special_data_types_defined_in_other_specs">Special data types (defined in other specs)</h3> - -<ul> - <li>{{cssxref("<color>")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("<position>")}}</li> -</ul> - -<h4 id="Color">Color</h4> - -<p>The {{cssxref("<color>")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the <a href="https://drafts.csswg.org/css-color-3/">CSS Color Module</a>.</p> - -<h4 id="Image">Image</h4> - -<p>The {{cssxref("<image>")}} value specifies all the different types of image that can be used in CSS, and is defined in the <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a>.</p> - -<h4 id="Position">Position</h4> - -<p>The {{cssxref("<position>")}} type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a {{cssxref("background-position")}} and therefore specified in the <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders specification</a>.</p> - -<h3 id="Functional_notation">Functional notation</h3> - -<ul> - <li>{{cssxref("calc()")}}</li> - <li>{{cssxref("min", "min()")}}</li> - <li>{{cssxref("max", "max()")}}</li> - <li>{{cssxref("clamp", "clamp()")}}</li> - <li>{{cssxref("toggle", "toggle()")}}</li> - <li>{{cssxref("attr", "attr()")}}</li> -</ul> - -<p><a href="/en-US/docs/Web/CSS/CSS_Functionals">Functional notation</a> is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis <code>(</code> followed by the argument(s) to the notation followed by a right parenthesis <code>)</code>. Functions can take multiple arguments, which are formatted similarly to a CSS property value.</p> - -<p>White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for <code>min()</code>, <code>max()</code> and <code>clamp()</code> functions.)</p> - -<p>Some legacy functional notations such as <code>rgba()</code> use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.</p> - -<h2 id="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("CSS4 Values")}}</td> - <td>{{Spec2("CSS4 Values")}}</td> - <td>Adds the <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> and <code>rlh</code> units.<br> - Adds the <code>min()</code>, <code>max()</code> and <code>clamp()</code> functional notation<br> - Adds <code>toggle()</code></td> - </tr> - <tr> - <td>{{SpecName("CSS3 Values")}}</td> - <td>{{Spec2("CSS3 Values")}}</td> - <td>Adds <code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td> - </tr> - <tr> - <td>{{SpecName("CSS4 Colors")}}</td> - <td>{{Spec2("CSS4 Colors")}}</td> - <td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br> - Adds color keyword <code>rebeccapurple</code>.<br> - Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br> - Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Colors")}}</td> - <td>{{Spec2("CSS3 Colors")}}</td> - <td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td> - </tr> - <tr> - <td>{{SpecName("CSS4 Images")}}</td> - <td>{{Spec2("CSS4 Images")}}</td> - <td> - <p>Adds <code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code></p> - </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Images")}}</td> - <td>{{Spec2("CSS3 Images")}}</td> - <td>Initial definition of image.</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS1")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Types">CSS Basic Data Types</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">Introduction to CSS: Values and Units </a></li> -</ul> diff --git a/files/de/web/css/media_queries/testing_media_queries/index.html b/files/de/web/css/media_queries/testing_media_queries/index.html deleted file mode 100644 index c30abd2ccd..0000000000 --- a/files/de/web/css/media_queries/testing_media_queries/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Media Queries programmatisch testen -slug: Web/CSS/Media_Queries/Testing_media_queries -translation_of: Web/CSS/Media_Queries/Testing_media_queries ---- -<div>{{cssref}}</div> - -<p>The {{Glossary("DOM")}} provides features that can test the results of a <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a> programmatically, via the {{domxref("MediaQueryList")}} interface and its methods and properties. Once you've created a <code>MediaQueryList</code> object, you can check the result of the query or receive notifications when the result changes.</p> - -<h2 id="Creating_a_media_query_list">Creating a media query list</h2> - -<p>Before you can evaluate the results of a media query, you need to create the <code>MediaQueryList</code> object representing the query. To do this, use the {{domxref("window.matchMedia")}} method.</p> - -<p>For example, to set up a query list that determines if the device is in landscape or portrait orientation:</p> - -<pre class="brush: js notranslate">const mediaQueryList = window.matchMedia("(orientation: portrait)"); -</pre> - -<h2 id="Checking_the_result_of_a_query">Checking the result of a query</h2> - -<p>Once you've created your media query list, you can check the result of the query by looking at the value of its <code>matches</code> property:</p> - -<pre class="brush: js notranslate">if (mediaQueryList.matches) { - /* The viewport is currently in portrait orientation */ -} else { - /* The viewport is not currently in portrait orientation, therefore landscape */ -} -</pre> - -<h2 id="Receiving_query_notifications">Receiving query notifications</h2> - -<p>If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a <a href="/en-US/docs/Web/API/EventTarget/addEventListener">listener</a> than to poll the query's result. To do this, call the <code>addListener()</code> method on the {{domxref("MediaQueryList")}} object, with a callback function to invoke when the media query status changes (e.g., the media query test goes from <code>true</code> to <code>false</code>):</p> - -<pre class="brush: js notranslate">// Create the query list. -const mediaQueryList = window.matchMedia("(orientation: portrait)"); - -// Define a callback function for the event listener. -function handleOrientationChange(mql) { - // ... -} - -// Run the orientation change handler once. -handleOrientationChange(mediaQueryList); - -// Add the callback function as a listener to the query list. -mediaQueryList.addListener(handleOrientationChange); -</pre> - -<p>This code creates the orientation-testing media query list, then adds an event listener to it. After adding the listener, we also call the listener directly. This makes our listener perform adjustments based on the current device orientation; otherwise, our code might assume the device is in portrait mode at startup, even if it's actually in landscape mode.</p> - -<p>The <code>handleOrientationChange()</code> function would look at the result of the query and handle whatever we need to do on an orientation change:</p> - -<pre class="brush: js notranslate">function handleOrientationChange(evt) { - if (evt.matches) { - /* The viewport is currently in portrait orientation */ - } else { - /* The viewport is currently in landscape orientation */ - } -} -</pre> - -<p>Above, we define the parameter as <code>evt</code> — an event object. This makes sense because <a href="/en-US/docs/Web/API/MediaQueryList#Browser_compatibility">newer implementations of <code>MediaQueryList</code></a> handle event listeners in a standard way. They no longer use the unusual {{domxref("MediaQueryListListener")}} mechanism, but a standard event listener setup, passing an <a href="/en-US/docs/Web/API/Event">event object</a> of type {{domxref("MediaQueryListEvent")}} as the argument to the callback function.</p> - -<p>This event object also includes the {{domxref("MediaQueryListEvent.media","media")}} and {{domxref("MediaQueryListEvent.matches","matches")}} properties, so you can query these features of the <code>MediaQueryList</code> by directly accessing it, or accessing the event object.</p> - -<h2 id="Ending_query_notifications">Ending query notifications</h2> - -<p>To stop receiving notifications about changes to the value of your media query, call <code>removeListener()</code> on the <code>MediaQueryList</code>, passing it the name of the previously-defined callback function:</p> - -<pre class="brush: js notranslate">mediaQueryList.removeListener(handleOrientationChange); -</pre> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<h3 id="MediaQueryList_interface"><code>MediaQueryList</code> interface</h3> - - - -<p>{{Compat("api.MediaQueryList")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li> - <li>{{domxref("window.matchMedia()")}}</li> - <li>{{domxref("MediaQueryList")}}</li> - <li>{{domxref("MediaQueryListEvent")}}</li> -</ul> diff --git a/files/de/web/css/media_queries/using_media_queries/index.html b/files/de/web/css/media_queries/using_media_queries/index.html deleted file mode 100644 index 77efb6a299..0000000000 --- a/files/de/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,644 +0,0 @@ ---- -title: Media Queries verwenden -slug: Web/CSS/Media_Queries/Using_media_queries -tags: - - NeedsTranslation -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -<div>{{cssref}}</div> - -<p>A <strong>media query</strong> consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.</p> - -<h2 id="Syntax">Syntax</h2> - -<p>Media queries consist of a <a class="internal" href="/en-US/docs/CSS/@media" title="/en-US/docs/CSS/@media">media type</a> and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on <strong>and</strong> all expressions in the media query are true.</p> - -<pre class="brush: html notranslate"><!-- CSS media query on a link element --> -<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> - -<!-- CSS media query within a stylesheet --> -<style> -@media (max-width: 600px) { - .facet_sidebar { - display: none; - } -} -</style></pre> - -<p>When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their <code><link></code> tags <a href="http://scottjehl.github.com/CSS-Download-Tests/" title="http://scottjehl.github.com/CSS-Download-Tests/">will still download</a> even if their media queries would return false (they will not apply, however).</p> - -<p>Unless you use the <code>not</code> or <code>only</code> operators, the media type is optional and the <code>all</code><span style="line-height: 1.572;"> </span><span style="line-height: 1.572;">type will be implied</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">.</span></p> - -<h3 id="Logical_operators">Logical operators</h3> - -<p>You can compose complex media queries using logical operators, including <code>not</code>, <code>and</code>, and <code>only</code>. The <code>and</code> operator is used for combining multiple <a href="#Media_features" title="#Media_features">media features</a> together into a single media query, requiring each chained feature to return true in order for the query to be true. The <code>not</code> operator is used to negate an entire media query. The <code>only</code> operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. If you use the <code>not</code> or <code>only</code> operators, you <em>must</em> specify an explicit media type.</p> - -<p>You can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the entire media statement returns true. This is equivalent to an <code>or</code> operator.</p> - -<h4 id="and">and</h4> - -<p>The <code>and</code> keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied <code>all</code> media type, could look like this:</p> - -<pre class="brush: css notranslate">@media (min-width: 700px) { ... }</pre> - -<p>If, however, you wanted this to apply only if the display is in landscape, you could use an <code>and</code> operator to chain the media features together.</p> - -<pre class="brush: css notranslate">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> - -<p>Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an <code>and</code> operator.</p> - -<pre class="brush: css notranslate">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> - -<p>Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.</p> - -<h4 id="comma-separated_lists">comma-separated lists</h4> - -<p>Comma-separated lists behave like the logical operator <code>or</code> when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.</p> - -<p>For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:</p> - -<pre class="brush: css notranslate">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> - -<p>Above, if I were on a <code>screen</code> device with a viewport width of 800px, the media statement would return true because the first part, interpreted as <code>@media all and (min-width: 700px)</code> would apply to my device and therefore return true, despite the fact that my <code>screen</code> device would fail the <code>handheld</code> media type check in the second media query. Likewise, if I were on a <code>handheld</code> device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.</p> - -<h4 id="not">not</h4> - -<p>The <code>not</code> keyword applies to the whole media query and returns true if the media query would otherwise return false (such as <code>monochrome</code> on a color display or a screen width of 600px with a <code>min-width: 700px</code> feature query). A <code>not</code> will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The <code>not</code> keyword cannot be used to negate an individual feature query, only an entire media query. <span style="line-height: 1.572;">For example, the </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> is evaluated last in the following query:</span></p> - -<pre class="brush: css notranslate" style="font-size: 14px;">@media not all and (monochrome) { ... } -</pre> - -<p>This means that the query is evaluated like this:</p> - -<pre class="brush: css notranslate" style="font-size: 14px;">@media not (all and (monochrome)) { ... } -</pre> - -<p>... rather than like this:</p> - -<pre class="brush: css notranslate" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> - -<p>As another example, look at the following media query:</p> - -<pre class="brush: css notranslate" style="font-size: 14px;">@media not screen and (color), print and (color) -</pre> - -<p>It is evaluated like this:</p> - -<pre class="brush: css notranslate" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> - -<h4 id="only">only</h4> - -<p><span style="line-height: 21px;">The </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> keyword prevents older browsers that do not support media queries with media features from applying the given styles:</span></p> - -<pre class="brush: html notranslate"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> -</pre> - -<h3 id="Pseudo-BNF_for_those_of_you_that_like_that_kind_of_thing">Pseudo-BNF (for those of you that like that kind of thing)</h3> - -<pre class="notranslate">media_query_list: <media_query> [, <media_query> ]* -media_query: [[only | not]? <media_type> [ and <expression> ]*] - | <expression> [ and <expression> ]* -expression: ( <media_feature> [: <value>]? ) -media_type: all | aural | braille | handheld | print | - projection | screen | tty | tv | embossed -media_feature: width | min-width | max-width - | height | min-height | max-height - | device-width | min-device-width | max-device-width - | device-height | min-device-height | max-device-height - | aspect-ratio | min-aspect-ratio | max-aspect-ratio - | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio - | color | min-color | max-color - | color-index | min-color-index | max-color-index - | monochrome | min-monochrome | max-monochrome - | resolution | min-resolution | max-resolution - | scan | grid</pre> - -<p>Media queries are case insensitive. Media queries involving unknown media types are always false.</p> - -<div class="note"><strong>Note:</strong> Parentheses are required around expressions; failing to use them is an error.</div> - -<h2 id="Media_features">Media features</h2> - -<p>Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints. This avoids using the "<" and ">" symbols, which would conflict with HTML and XML. If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.</p> - -<div class="note"><strong>Note:</strong> If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, querying the aspect ratio of an aural device always results in false.</div> - -<h3 id="color">color</h3> - -<p><strong>Value:</strong> {{cssxref("<color>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.</p> - -<div class="note"><strong>Note:</strong> If the color components have different numbers of bits per color component, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.</div> - -<h4 id="Examples">Examples</h4> - -<p>To apply a style sheet to all color devices:</p> - -<pre class="brush: css notranslate">@media all and (color) { ... } -</pre> - -<p>To apply a style sheet to devices with at least 4 bits per color component:</p> - -<pre class="brush: css notranslate">@media all and (min-color: 4) { ... } -</pre> - -<h3 id="color-index">color-index</h3> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of entries in the color look-up table for the output device.</p> - -<h4 id="Examples_2">Examples</h4> - -<p>To indicate that a style sheet should apply to all devices using indexed color, you can do:</p> - -<pre class="brush: css notranslate">@media all and (color-index) { ... } -</pre> - -<p>To apply a style sheet to indexed color devices with at least 256 colors:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> -</pre> - -<h3 id="aspect-ratio">aspect-ratio</h3> - -<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> - -<h4 id="Example">Example</h4> - -<p>The following selects a special style sheet to use for when the display area is at least as wide as it is high.</p> - -<pre class="brush: css notranslate">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> - -<p>This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.</p> - -<h3 id="device-aspect-ratio">device-aspect-ratio</h3> - -<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> - -<h4 id="Example_2">Example</h4> - -<p>The following selects a special style sheet to use for widescreen displays.</p> - -<pre class="brush: css notranslate">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> - -<p>This selects the style when the aspect ratio is either 16:9 or 16:10.</p> - -<h3 id="device-height">device-height</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> - -<h4 id="Example_3">Example</h4> - -<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> -</pre> - -<h3 id="device-width">device-width</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> - -<h4 id="Example_4">Example</h4> - -<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:</p> - -<pre class="brush: html notranslate" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> - -<h3 id="grid">grid</h3> - -<p><strong>Value:</strong> <code><mq-boolean></code> which is an {{cssxref("<integer>")}} that can only have the <code>0</code> and <code>1</code> value.<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.</p> - -<h4 id="Example_5">Example</h4> - -<p>To apply a style to handheld devices with a 15-character or narrower display:</p> - -<pre class="brush: css notranslate">@media handheld and (grid) and (max-width: 15em) { ... } -</pre> - -<div class="note"><strong>Note:</strong> The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.</div> - -<h3 id="height">height</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>The <code>height</code> media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).</p> - -<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> - -<h3 id="monochrome">monochrome</h3> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of bits per pixel on a monochrome (greyscale) device. If the device isn't monochrome, the device's value is 0.</p> - -<h4 id="Examples_3">Examples</h4> - -<p>To apply a style sheet to all monochrome devices:</p> - -<pre class="brush: css notranslate">@media all and (monochrome) { ... } -</pre> - -<p>To apply a style sheet to monochrome devices with at least 8 bits per pixel:</p> - -<pre class="brush: css notranslate">@media all and (min-monochrome: 8) { ... } -</pre> - -<h3 id="orientation">orientation</h3> - -<p><strong>Value:</strong> <code>landscape</code> | <code>portrait</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.</p> - -<h4 id="Example_6">Example</h4> - -<p>To apply a style sheet only in portrait orientation:</p> - -<pre class="brush: css notranslate">@media all and (orientation: portrait) { ... }</pre> - -<div class="note"><strong>Note:</strong> This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.</div> - -<h3 id="resolution">resolution</h3> - -<p><strong>Value:</strong> {{cssxref("<resolution>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the resolution (pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).</p> - -<h4 id="Example_7">Example</h4> - -<p>To apply a style sheet to devices with at least 300 dots per inch of resolution:</p> - -<pre class="brush: css notranslate">@media print and (min-resolution: 300dpi) { ... } -</pre> - -<p>To replace the old <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2) </span>syntax:</p> - -<pre class="brush: css notranslate">@media screen and (min-resolution: 2dppx) { ... }</pre> - -<h3 id="scan">scan</h3> - -<p><strong>Value:</strong> <code>progressive</code> | <code>interlace</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/TV")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Describes the scanning process of television output devices.</p> - -<h4 id="Example_8">Example</h4> - -<p>To apply a style sheet only to progressive scanning televisions:</p> - -<pre class="brush: css notranslate">@media tv and (scan: progressive) { ... } -</pre> - -<h3 id="width">width</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>The <code>width</code> media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).</p> - -<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> - -<h4 id="Examples_4">Examples</h4> - -<p>If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:</p> - -<pre class="brush: css notranslate">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } -</pre> - -<p>This media query specifies a style sheet that applies to printed media wider than 8.5 inches:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" media="print and (min-width: 8.5in)" - href="http://foo.com/mystyle.css" /> -</pre> - -<p>This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:</p> - -<pre class="brush: css notranslate">@media screen and (min-width: 500px) and (max-width: 800px) { ... } -</pre> - -<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2> - -<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.</p> - -<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}</p> - -<p><strong>Value:</strong> {{cssxref("<number>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Gives the number of device pixels per CSS pixel.</p> - -<div class="geckoVersionNote"> -<p><strong>Do not use this feature. </strong></p> - -<p>Use the <code>resolution</code> feature with the <code>dppx</code> unit instead.<br> - <br> - <code>-moz-device-pixel-ratio</code> may be used for compatibility with Firefox older than 16 and <code>-webkit-device-pixel-ratio</code> with WebKit-based browsers that do not support <code>dppx</code>.</p> - -<p>Example:</p> - -<pre class="notranslate">@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ - (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ - (min-resolution: 2dppx), /* The standard way */ - (min-resolution: 192dpi) /* dppx fallback */ </pre> - -<p>See this <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG article</a> for compatibility good practices regarding <code>resolution</code> and <code>dppx</code>.</p> -</div> - -<div class="note"><strong>Note</strong>: This media feature is also implemented by Webkit and by <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 for Windows Phone 8.1</a> as <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. The min and max prefixes as implemented by Gecko are named <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> and <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; but the same prefixes as implemented by Webkit are named <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> and <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> - -<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> - -<p><strong>Value:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8 | windows-win10</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:</p> - -<ul> - <li><code>windows-xp</code></li> - <li><code>windows-vista</code></li> - <li><code>windows-win7</code></li> - <li><code>windows-win8</code></li> - <li><code>windows-win10</code></li> -</ul> - -<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<h4 id="Example_9">Example</h4> - -<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> - -<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p> - -<ul> - <li><code>aero</code></li> - <li><code>luna-blue</code></li> - <li><code>luna-olive</code></li> - <li><code>luna-silver</code></li> - <li><code>royale</code></li> - <li><code>generic</code></li> - <li><code>zune</code></li> -</ul> - -<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p> - -<h2 id="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</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome("21") }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatIE("9.0") }}</td> - <td>{{ CompatOpera("9") }}</td> - <td>{{ CompatSafari("4") }}</td> - </tr> - <tr> - <td>grid</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }} [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>resolution</td> - <td>{{ CompatChrome("29") }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }} [2]<br> - {{ CompatGeckoDesktop("8.0") }} [3]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>scan</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }} [4]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</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 Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>grid</code> media type is not supported</p> - -<p>[2] Supports {{cssxref("<integer>")}} values;</p> - -<p>[3] Supports {{cssxref("<number>")}} values, as per the spec.</p> - -<p>[4] <code>tv</code> media type is not supported</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> - <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li> - <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> - <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li> - <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li> -</ul> diff --git a/files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html deleted file mode 100644 index 004ff3a78e..0000000000 --- a/files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Verwendung von Media Queries für Barrierefreiheit -slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility -translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility ---- -<p><strong>Media Queries</strong> can also be used to help users with disabilities understand your website better.</p> - -<h2 id="Reduced_Motion">Reduced Motion</h2> - -<p>Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p> - -<p>Also, this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or computers.</p> - -<h3 id="Syntax">Syntax</h3> - -<dl> - <dt><code><dfn>no-preference</dfn></code></dt> - <dd>Indicates that the user has made no preference known to the system.</dd> - <dt><code><dfn>reduce</dfn></code></dt> - <dd>Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.</dd> -</dl> - -<h3 id="Example">Example</h3> - -<p>This example has an annoying animation unless you turn on Reduce Motion in your accessibility preferences.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div class="animation">animated box</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">.animation { - -webkit-animation: vibrate 0.3s linear infinite both; - animation: vibrate 0.3s linear infinite both; -} - -@media (prefers-reduced-motion: reduce) { - .animation { - animation: none; - } -} -</pre> - -<h2 id="High_Contrast_Mode">High Contrast Mode</h2> - -<div>{{CSSRef}}{{Non-standard_header}}</div> - -<p>The <strong>-ms-high-contrast</strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature</a> is a <a href="/en-US/docs/Web/CSS/Microsoft_extensions">Microsoft extension</a> that describes whether the application is being displayed in high contrast mode, and with what color variation.</p> - -<p>This will help not only users with low vision and contrast sensitivity issues but also users that are working on a computer or phone with direct sunlight.</p> - -<h3 id="Syntax_2">Syntax</h3> - -<p>The <strong><code>-ms-high-contrast</code></strong> media feature is specified as one of the following values.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>active</code></dt> - <dd> - <p>Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation.</p> - </dd> - <dt><code>black-on-white</code></dt> - <dd> - <p>Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a black-on-white color variation.</p> - </dd> - <dt><code>white-on-black</code></dt> - <dd> - <p>Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a white-on-black color variation.</p> - </dd> -</dl> - -<h3 id="Example_2">Example</h3> - -<p>The following declarations will match applications that are being displayed in high contrast mode with any color variation, a black-on-white color variation, and a white-on-black color variation, respectively.</p> - -<pre class="brush: css notranslate">@media screen and (-ms-high-contrast: active) { - /* All high contrast styling rules */ -} -@media screen and (-ms-high-contrast: black-on-white) { - div { background-image: url('image-bw.png'); } -} -@media screen and (-ms-high-contrast: white-on-black) { - div { background-image: url('image-wb.png'); } -} -</pre> diff --git a/files/de/web/css/object-position/index.html b/files/de/web/css/object-position/index.html deleted file mode 100644 index d42372ad90..0000000000 --- a/files/de/web/css/object-position/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: object-position -slug: Web/CSS/object-position -translation_of: Web/CSS/object-position ---- -<div>{{CSSRef}}</div> - -<p>Die Eigenschaft <strong><code>object-position </code></strong>bestimmt die Ausrichtung des Elements in seiner Box.</p> - -<pre class="brush:css no-line-numbers">/* <position> Werte */ -object-position: 100px 50px; - -/* Globale Werte */ -object-position: inherit; -object-position: initial; -object-position: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<h3 id="Values" name="Values">Values</h3> - -<dl> - <dt><code><position></code></dt> - <dd>Is a {{ cssxref("<position>") }}, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">Example</h2> - -<h3 id="HTML_content">HTML content</h3> - -<pre class="brush: html"><img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> -<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> -</pre> - -<h3 id="CSS_content">CSS content</h3> - -<pre class="brush: css">img { - width: 300px; - height: 250px; - border: 1px solid black; - background-color: silver; - margin-right: 1em; - object-fit: none; -} - -#object-position-1 { - object-position: 10px; -} - -#object-position-2 { - object-position: 100% 10%; -} -</pre> - -<h3 id="Output">Output</h3> - -<p>{{ EmbedLiveSample('Example', '100%','300px') }}</p> - -<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('CSS4 Images', '#the-object-position', 'object-position')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>The <code>from-image</code> and <code>flip</code> keywords have been added.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Initial definition</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</th> - </tr> - <tr> - <td>Basic support</td> - <td>31.0</td> - <td>{{ CompatGeckoDesktop("36") }}</td> - <td>{{CompatNo}}</td> - <td>11.60{{ property_prefix("-o") }}<br> - 19.0</td> - <td>10.0</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 Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.4.4</td> - <td>{{ CompatGeckoDesktop("36") }}</td> - <td>{{CompatNo}}</td> - <td>11.5{{ property_prefix("-o") }}<br> - 24</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -<br> -[1] WebKit Nightly fixed in bug <a href="https://bugs.webkit.org/show_bug.cgi?id=122811">122811</a>.</div> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> -</ul> diff --git a/files/de/web/css/perspective-origin/index.html b/files/de/web/css/perspective-origin/index.html deleted file mode 100644 index c1d0249b99..0000000000 --- a/files/de/web/css/perspective-origin/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: perspective-origin -slug: Web/CSS/perspective-origin -translation_of: Web/CSS/perspective-origin ---- -<div>{{CSSRef}}</div> - -<p>Die <a href="/de/docs/CSS">CSS</a>-Eigenschaft <strong><code>perspective-origin</code></strong> <a href="/en-US/docs/CSS">CSS</a> property determines the position at which the viewer is looking. It is used as the <em>vanishing point</em> by the {{cssxref("perspective")}} property.</p> - -<div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div> - - - -<p>The <strong><code>perspective-origin</code> </strong>and {{cssxref('perspective')}} properties are attached to the parent of a child transformed in 3-dimensional space, unlike the <code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code> transform function which is placed on the element being transformed.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css no-line-numbers notranslate">/* One-value syntax */ -perspective-origin: x-position; - -/* Two-value syntax */ -perspective-origin: x-position y-position; - -/* When both x-position and y-position are keywords, - the following is also valid */ -perspective-origin: y-position x-position; - -/* Global values */ -perspective-origin: inherit; -perspective-origin: initial; -perspective-origin: unset; -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><em>x-position</em></dt> - <dd>Indicates the position of the abscissa of the <em>vanishing point</em>. It can have one of the following values: - <ul> - <li>{{cssxref("<length-percentage>")}} indicating the position as an absolute length value or relative to the width of the element. The value may be negative.</li> - <li><code>left</code>, a keyword being a shortcut for the <code>0</code> length value.</li> - <li><code>center</code>, a keyword being a shortcut for the <code>50%</code> percentage value.</li> - <li><code>right</code>, a keyword being a shortcut for the <code>100%</code> percentage value.</li> - </ul> - </dd> - <dt><em>y-position</em></dt> - <dd>Indicates the position of the ordinate of the <em>vanishing point</em>. It can have one of the following values: - <ul> - <li>{{cssxref("<length-percentage>")}} indicating the position as an absolute length value or relative to the height of the element. The value may be negative.</li> - <li><code>top</code>, a keyword being a shortcut for the <code>0</code> length value.</li> - <li><code>center</code>, a keyword being a shortcut for the <code>50%</code> percentage value.</li> - <li><code>bottom</code>, a keyword being a shortcut for the <code>100%</code> percentage value.</li> - </ul> - </dd> -</dl> - -<h2 id="Formal_definition">Formal definition</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax">Formal syntax</h2> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Changing_the_perspective_origin">Changing the perspective origin</h3> - -<p>This example shows cubes with popular <code>perspective-origin</code> values.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><section> - -<figure> - <figcaption><code>perspective-origin: top left;</code></figcaption> - <div class="container"> - <div class="cube potl"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <figcaption><code>perspective-origin: top;</code></figcaption> - <div class="container"> - <div class="cube potm"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <figcaption><code>perspective-origin: top right;</code></figcaption> - <div class="container"> - <div class="cube potr"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <figcaption><code>perspective-origin: left;</code></figcaption> - <div class="container"> - <div class="cube poml"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <figcaption><code>perspective-origin: 50% 50%;</code></figcaption> - <div class="container"> - <div class="cube pomm"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <figcaption><code>perspective-origin: right;</code></figcaption> - <div class="container"> - <div class="cube pomr"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <figcaption><code>perspective-origin: bottom left;</code></figcaption> - <div class="container"> - <div class="cube pobl"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <figcaption><code>perspective-origin: bottom;</code></figcaption> - <div class="container"> - <div class="cube pobm"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <figcaption><code>perspective-origin: bottom right;</code></figcaption> - <div class="container"> - <div class="cube pobr"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <figcaption><code>perspective-origin: -200% -200%;</code></figcaption> - <div class="container"> - <div class="cube po200200neg"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <figcaption><code>perspective-origin: 200% 200%;</code></figcaption> - <div class="container"> - <div class="cube po200200pos"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <figcaption><code>perspective-origin: 200% -200%;</code></figcaption> - <div class="container"> - <div class="cube po200200"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -</section> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">/* perspective-origin values (unique per example) */ -.potl { - perspective-origin: top left; -} -.potm { - perspective-origin: top; -} -.potr { - perspective-origin: top right; -} -.poml { - perspective-origin: left; -} -.pomm { - perspective-origin: 50% 50%; -} -.pomr { - perspective-origin: right; -} -.pobl { - perspective-origin: bottom left; -} -.pobm { - perspective-origin: bottom; -} -.pobr { - perspective-origin: bottom right; -} -.po200200neg { - perspective-origin: -200% -200%; -} -.po200200pos { - perspective-origin: 200% 200%; -} -.po200200 { - perspective-origin: 200% -200%; -} - -/* Define the container div, the cube div, and a generic face */ -.container { - width: 100px; - height: 100px; - margin: 24px; - border: none; -} - -.cube { - width: 100%; - height: 100%; - backface-visibility: visible; - perspective: 300px; - transform-style: preserve-3d; -} - -.face { - display: block; - position: absolute; - width: 100px; - height: 100px; - border: none; - line-height: 100px; - font-family: sans-serif; - font-size: 60px; - color: white; - text-align: center; -} - -/* Define each face based on direction */ -.front { - background: rgba(0, 0, 0, 0.3); - transform: translateZ(50px); -} -.back { - background: rgba(0, 255, 0, 1); - color: black; - transform: rotateY(180deg) translateZ(50px); -} -.right { - background: rgba(196, 0, 0, 0.7); - transform: rotateY(90deg) translateZ(50px); -} -.left { - background: rgba(0, 0, 196, 0.7); - transform: rotateY(-90deg) translateZ(50px); -} -.top { - background: rgba(196, 196, 0, 0.7); - transform: rotateX(90deg) translateZ(50px); -} -.bottom { - background: rgba(196, 0, 196, 0.7); - transform: rotateX(-90deg) translateZ(50px); -} - -/* Make the layout a little nicer */ -section { - background-color: #EEE; - padding: 10px; - font-family: sans-serif; - text-align: left; - display: grid; - grid-template-columns: repeat(3, 1fr); -}</pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}</p> - -<h2 id="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('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.properties.perspective-origin")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS Transforms</a></li> - <li>{{cssxref('transform-style')}}</li> - <li>{{cssxref('transform-function')}}</li> - <li>{{cssxref('perspective')}}</li> - <li><code><a href="/en-US/docs/Web/CSS/transform-function/perspective">transform: perspective()</a></code> function</li> -</ul> diff --git a/files/de/web/css/shorthand_properties/index.html b/files/de/web/css/shorthand_properties/index.html deleted file mode 100644 index f5fbfabc44..0000000000 --- a/files/de/web/css/shorthand_properties/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Kurzformat Eigenschaft -slug: Web/CSS/Shorthand_properties -translation_of: Web/CSS/Shorthand_properties -original_slug: Web/CSS/Kurzformat_Eigenschaft ---- -<div>{{cssref}}</div> - -<p class="summary"><strong><dfn>Shorthand properties</dfn></strong> are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.</p> - -<p>The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.</p> - -<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Tricky edge cases</h2> - -<p>Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:</p> - -<ol> - <li>A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it <strong>overrides</strong> previously set values. Therefore: - - <pre class="brush:css notranslate">background-color: red; -background: url(images/bg.gif) no-repeat left top; -</pre> - will not set the color of the background to <code>red</code> but to {{cssxref("background-color")}}'s default, <code>transparent</code>, as the second rule has precedence.</li> - <li>Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword <code>inherit</code> can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword <code>inherit</code>.</li> - <li>Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories: - <ol> - <li>Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges: - <table> - <tbody> - <tr> - <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td> - <td><em>The 1-value syntax</em>: <code>border-width: 1em</code> — The unique value represents all edges</td> - </tr> - <tr> - <td><img alt="border2.png" src="/files/3647/border2.png"></td> - <td><em>The 2-value syntax</em>: <code>border-width: 1em 2em</code> — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.</td> - </tr> - <tr> - <td><img alt="border3.png" src="/files/3648/border3.png"></td> - <td><em>The 3-value syntax</em>: <code>border-width: 1em 2em 3em</code> — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge</td> - </tr> - <tr> - <td><img alt="border4.png" src="/files/3649/border4.png"></td> - <td> - <p><em>The 4-value syntax</em>: <code>border-width: 1em 2em 3em 4em</code> — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word <em>trouble</em>: TRBL) (You can also remember it as the order that the hands would rotate on a clock: <code>1em</code> starts in the 12 o'clock position, then <code>2em</code> in the 3 o'clock position, then <code>3em</code> in the 6 o'clock position, and <code>4em</code> in the 9 o'clock position).</p> - </td> - </tr> - </tbody> - </table> - </li> - <li>Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners: - <table> - <tbody> - <tr> - <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td> - <td><em>The 1-value syntax</em>: <code>border-radius: 1em</code> — The unique value represents all corners</td> - </tr> - <tr> - <td><img alt="corner2.png" src="/files/3651/corner2.png"></td> - <td><em>The 2-value syntax</em>: <code>border-radius: 1em 2em</code> — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.</td> - </tr> - <tr> - <td><img alt="corner3.png" src="/files/3652/corner3.png"></td> - <td><em>The 3-value syntax</em>: <code>border-radius: 1em 2em 3em</code> — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner</td> - </tr> - <tr> - <td><img alt="corner4.png" src="/files/3653/corner4.png"></td> - <td> - <p><em>The 4-value syntax</em>: <code>border-radius: 1em 2em 3em 4em</code> — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.</p> - </td> - </tr> - </tbody> - </table> - </li> - </ol> - </li> -</ol> - -<h2 id="Background_Properties" name="Background_Properties">Background properties</h2> - -<p>A background with the following properties ...</p> - -<pre class="brush:css notranslate">background-color: #000; -background-image: url(images/bg.gif); -background-repeat: no-repeat; -background-position: left top;</pre> - -<p>... can be shortened to just one declaration:</p> - -<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat left top;</pre> - -<p>(The shorthand form is actually the equivalent of the longhand properties above plus <code>background-attachment: scroll</code> and, in CSS3, some additional properties.)</p> - -<p>See {{cssxref("background")}} for more detailed information, including CSS3 properties.</p> - -<h2 id="Font_Properties" name="Font_Properties">Font properties</h2> - -<p>The following declarations ...</p> - -<pre class="brush:css notranslate">font-style: italic; -font-weight: bold; -font-size: .8em; -line-height: 1.2; -font-family: Arial, sans-serif;</pre> - -<p>... can be shortened to the following:</p> - -<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre> - -<p>This shorthand declaration is actually equivalent to the longhand declarations above plus <code>font-variant: normal</code> and <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p> - -<h2 id="Border_Properties" name="Border_Properties">Border properties</h2> - -<p>With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...</p> - -<pre class="brush:css notranslate">border-width: 1px; -border-style: solid; -border-color: #000;</pre> - -<p>... can be simplified as:</p> - -<pre class="brush:css notranslate">border: 1px solid #000;</pre> - -<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Margin and padding properties</h2> - -<p>Shorthand versions of margin and padding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values. The following CSS declarations ...</p> - -<pre class="brush:css notranslate">margin-top: 10px; -margin-right: 5px; -margin-bottom: 10px; -margin-left: 5px;</pre> - -<p>... are the same as the following declaration using the four value shorthand. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").</p> - -<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre> - -<p>Margin shorthand rules for one, two, three and four value declarations are:</p> - -<ul> - <li>When <strong>one</strong> value is specified, it applies the same margin to <strong>all four sides</strong>.</li> - <li>When <strong>two</strong> values are specified, the first margin applies to the <strong>top and bottom</strong>, the second to the <strong>left and right</strong>.</li> - <li>When <strong>three</strong> values are specified, the first margin applies to the <strong>top</strong>, the second to the <strong>left and right</strong>, the third to the <strong>bottom</strong>.</li> - <li>When <strong>four</strong> values are specified, the margins apply to the <strong>top</strong>, <strong>right</strong>, <strong>bottom</strong>, and <strong>left</strong> in that order (clockwise).</li> -</ul> - -<h2 id="The_universal_shorthand_property" name="The_universal_shorthand_property">The universal shorthand property</h2> - -<p>CSS provides a universal shorthand property, {{cssxref("all")}}, which applies its value to every property in the document. Its purpose is to change the properties' inheritance model to one of:</p> - -<p>{{page("/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}</p> - -<p>See <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a> or <a href="/en-US/docs/Web/CSS/Cascade">Introducing the CSS Cascade</a> for more information about how inheritance works in CSS.</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{css_key_concepts}}</li> - <li>Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li> -</ul> diff --git a/files/de/web/css/visual_formatting_model/index.html b/files/de/web/css/visual_formatting_model/index.html deleted file mode 100644 index 01c9f8a5b9..0000000000 --- a/files/de/web/css/visual_formatting_model/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: CSS Visuelles Formatierungsmodell -slug: Web/CSS/Visual_formatting_model -translation_of: Web/CSS/Visual_formatting_model ---- -<div>{{CSSRef}}</div> - -<p class="summary">In CSS The <strong>Visual Formatting Model</strong> describes how user agents take the document tree, and process and display it for visual media. This includes {{glossary("continuous media")}} such as a computer screen and {{glossary("paged media")}} such as a book or document printed by browser print functions. Most of the information applies equally to continuous and paged media.</p> - -<p>In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:</p> - -<ul> - <li>Box dimensions and type.</li> - <li>Positioning scheme (normal flow, float, and absolute positioning).</li> - <li>Relationships between elements in the document tree.</li> - <li>External information (e.g., viewport size, intrinsic dimensions of images, etc.).</li> -</ul> - -<p>Much of the information about the visual formatting model is defined in CSS2, however, various level 3 specifications have added to this information. When reading specifications you will often find references to the model as defined in CSS2, so an understanding of the model and the terms used to describe it in CSS2 is valuable when reading other layout specifications.</p> - -<p>In this document we define the model and introduce some of the related terms and concepts, linking to more specific pages on MDN for further details.</p> - -<h2 id="The_role_of_the_viewport">The role of the viewport</h2> - -<p>In continuous media, the {{glossary("viewport")}} is the viewing area of the browser window. User agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device.</p> - -<p>If the viewport is smaller than the size of the document then the user agent needs to offer a way to scroll to the parts of the document that are not displayed. We most often see this as scrolling in the <strong>block dimension</strong> — vertically in a horizontal, top-to-bottom language. However, you might design something that requires scrolling in the <strong>inline dimension</strong> too.</p> - -<h2 id="Box_generation">Box generation</h2> - -<p><strong>Box generation</strong> is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect their visual formatting. The type of the box generated depends on the value of the CSS {{cssxref("display")}} property.</p> - -<p>Initially defined in CSS2, the <code>display</code> property is extended in the <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. In addition, some of the terminologies around the display have been updated and clarified in the years since CSS2.</p> - -<p>CSS takes your source document and renders it onto a canvas. To do this, it generates an intermediary structure, the <strong>box tree</strong>, which represents the formatting structure of the rendered document. Each box in the box tree represents its corresponding element (or pseudo-element) in space and/or time on the canvas, while each text run in the box tree likewise represents the contents of its corresponding text nodes.</p> - -<p>Then, for each element, CSS generates zero or more boxes as specified by that element’s <code>display</code> property value.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Boxes are often referred to by their display type — e.g. a box generated by an element with <code>display: block</code> is called a "block box" or just a "block". Note however that block boxes, block-level boxes and box containers are all subtly different; see the {{anch("Block boxes")}} section below for more details.</p> -</div> - -<h3 id="The_principal_box">The principal box</h3> - -<p>When an element generates one or more boxes, one of them is the <strong>principal box</strong>, which contains its descendant boxes and generated content in the box tree, and is also the box involved in any positioning scheme.</p> - -<p>Some elements may generate additional boxes in addition to the principal box, for example <code>display: list-item</code> generates more than one box (e.g. a <strong>principal block box</strong> and a <strong>child marker box</strong>). And some values (such as <code>none</code> or <code>contents</code>) cause the element and/or its descendants to not generate any boxes at all.</p> - -<h3 id="Anonymous_boxes">Anonymous boxes</h3> - -<p>An <strong>anonymous box</strong> is created when there is not an HTML element to use for the box. This situation happens when, for example, you declare <code>display: flex</code> on a parent element, and directly inside there is a run of text not contained in another element. In order to fix the box tree, an anonymous box is created around that run of text. It will then behave as a flex item, however, it cannot be targeted and styled like a regular box because there is no element to target.</p> - -<p>{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-flex.html", '100%', 720)}}</p> - -<p>The same thing happens when you have text runs interspersed with block elements. In the next example I have a string inside a <code><div></code>; in the middle of my string is a <code><p></code> element containing part of the text.</p> - -<p>{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-block.html", '100%', 720)}}</p> - -<p>The string is split into three boxes in the box tree. The part of the string before the paragraph element is wrapped in an anonymous box, then we have the <code><p></code>, which generates a box, and then another anonymous box.</p> - -<p>Something to consider about these anonymous boxes is that they inherit styles from their direct parent, but you cannot change how they look by targeting the anonymous box. In my examples, I am using a direct child selector to target the children of the container. This does not change the anonymous boxes, as they are not a child of the parent block.</p> - -<p><strong>Inline anonymous boxes</strong> are created when a string is split by an inline element, for example, a sentence that includes a section wrapped with <code><em></em></code>. This splits the sentence into three inline boxes — an anonymous inline box before the emphasized section, the section wrapped in the <code><em></code> element, then a final anonymous inline box. As with the anonymous block boxes, these anonymous inline boxes cannot be styled independently in the way the <code><em></code> can; they just inherit the styles of their container.</p> - -<p>Other formatting contexts also create anonymous boxes. <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a> behaves in the same way as the <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> example above, turning strings of text into a grid item with an anonymous box. <a href="/en-US/docs/Web/CSS/CSS_Columns">Multiple-column</a> layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targetted. <a href="/en-US/docs/Web/CSS/CSS_Table">Table layout</a> will add anonymous boxes to create a proper table structure — for example adding an anonymous table row — if there was no box with <code>display: table-row</code>.</p> - -<h3 id="Line_boxes">Line boxes</h3> - -<p><strong>Line boxes</strong> are the boxes that wrap each line of text. You can see the difference between line boxes and their containing block if you float an item and then follow it by a block that has a background color.</p> - -<p>In the following example, the line boxes following the floated <code><div></code> are shortened to wrap around the float. The background of the box runs behind the float, as the floated item has been taken out of flow.</p> - -<p>{{EmbedGHLiveSample("css-examples/visual-formatting/line-boxes.html", '100%', 720)}}</p> - -<h2 id="Positioning_schemes_and_in-flow_and_out-of-flow_elements">Positioning schemes and in-flow and out-of-flow elements</h2> - -<p>In CSS, a box may be laid out according to three positioning schemes — <strong>normal flow</strong>, <strong>floats</strong>, or <strong>absolute positioning</strong>.</p> - -<h3 id="Normal_flow">Normal flow</h3> - -<p>In CSS, the normal flow includes block-level formatting of block boxes, inline-level formatting of inline boxes, and also includes relative and sticky positioning of block-level and inline-level boxes.</p> - -<p>Read more about <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">flow layout</a> in CSS.</p> - -<h3 id="Floats">Floats</h3> - -<p>In the float model, a box is first laid out according to the normal flow, then taken out of the flow and positioned, typically to the left or right. Content may flow along the side of a float.</p> - -<p>Find out more about <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>.</p> - -<h3 id="Absolute_positioning">Absolute positioning</h3> - -<p>In the absolute positioning model (which also includes fixed positioning), a box is removed from the normal flow entirely and assigned a position with respect to a containing block (which is the viewport in the case of fixed positioning).</p> - -<p>An element is called <strong>out of flow</strong> if it is floated, absolutely positioned, or is the root element. An element is called <strong>in-flow</strong> if it is not out of the flow.</p> - -<p>Read about <a href="/en-US/docs/Web/CSS/CSS_Positioning">CSS Positioned Layout</a>.</p> - -<h2 id="Formatting_contexts_and_the_display_property">Formatting contexts and the display property</h2> - -<p>Boxes can be described as having an <strong>outer display type</strong>, which is <code>block</code> or <code>inline</code>. This outer display type refers to how the box behaves alongside other elements on the page.</p> - -<p>Boxes also have an inner display type, dictating how their children behave. For normal block and inline layout, or normal flow, this display type is <code>flow</code>. This means that the child elements will also be either <code>block</code> or <code>inline</code>.</p> - -<p>However, the inner display type might be something like <code>grid</code> or <code>flex</code>, in which case the direct children will display as a grid, or flex items. In such a case the element is described as creating a grid or flex <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts">formatting context</a>. In many ways this is similar to a block formatting context, however, the children behave as flex or grid items rather than items in normal flow.</p> - -<p>The interactions between block-level and inline-level boxes are described in the MDN documentation for {{cssxref("display")}}.</p> - -<p>In addition, the references for specific values of display explain how these formatting contexts work in terms of box layout.</p> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Table">CSS Table Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters">Lists</a></li> -</ul> - -<h3 id="Independent_formatting_contexts">Independent formatting contexts</h3> - -<p>Elements either participate in the formating context of their containing block or establish an independent formatting context. A grid container, for example, establishes a new <strong>Grid Formatting Context</strong> for its children.</p> - -<p><strong>Independent formatting contexts</strong> contain floats, and margins do not collapse across formatting context boundaries. Therefore, creating a new block formatting context can ensure that floats remain inside a box. Developers sometimes clear floats by changing the value of the {{cssxref("overflow")}} property, as this creates a new block formatting context. The newer value of <code>display: flow-root</code> creates a new <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a> in order to gain the useful effects of this, without any unwanted issues caused by changing the value of overflow.</p> - -<h3 id="Block_boxes">Block boxes</h3> - -<p>In specifications, block boxes, block-level boxes, and block containers are all referred to as <strong>block boxes</strong> in certain places. These things are somewhat different and the term block box should only be used if there is no ambiguity.</p> - -<h4 id="Block_containers">Block containers</h4> - -<p>A <strong>block container</strong> either contains only inline-level boxes participating in an inline formatting context, or only block-level boxes participating in a block formatting context. For this reason, we see the behavior explained above, where anonymous boxes are introduced to ensure all of the items can participate in a block or inline formatting context. An element is a block container only if it contains block-level or inline-level boxes.</p> - -<h4 id="Inline-level_and_block-level_boxes">Inline-level and block-level boxes</h4> - -<p>These are the boxes contained inside the block container that are participating in inline or block layout, respectively.</p> - -<h4 id="Block_boxes_2">Block boxes</h4> - -<p>A block box is a block-level box that is also a block container. As described in CSS <code>display</code>, it is possible for a box to be a block-level box, but not also a block container (it might be a flex or grid container for example).</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{css_key_concepts}}</li> -</ul> |