diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-07-15 13:01:50 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-15 13:01:50 -0400 |
| commit | 037a4118c4324d39fdef8bd23f9dd21b02f50946 (patch) | |
| tree | 22dac72fd38b56df6f2caf0fb7f21cb187179e76 /files/pl/web/css | |
| parent | 335d06b805fab26d8d4b3e1378e7722c12f715fe (diff) | |
| download | translated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.tar.gz translated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.tar.bz2 translated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.zip | |
delete pages that were never translated from en-US (pl, part 1) (#1549)
Diffstat (limited to 'files/pl/web/css')
| -rw-r--r-- | files/pl/web/css/attribute_selectors/index.html | 238 | ||||
| -rw-r--r-- | files/pl/web/css/background-size/index.html | 187 | ||||
| -rw-r--r-- | files/pl/web/css/box-decoration-break/index.html | 202 | ||||
| -rw-r--r-- | files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html | 609 | ||||
| -rw-r--r-- | files/pl/web/css/media_queries/using_media_queries/index.html | 643 |
5 files changed, 0 insertions, 1879 deletions
diff --git a/files/pl/web/css/attribute_selectors/index.html b/files/pl/web/css/attribute_selectors/index.html deleted file mode 100644 index 93ffda8fec..0000000000 --- a/files/pl/web/css/attribute_selectors/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: Selektory artybutów -slug: Web/CSS/Attribute_selectors -translation_of: Web/CSS/Attribute_selectors ---- -<div>{{CSSRef}}</div> - -<p><strong>Selektor atrybutów </strong>CSS dopasowuje elementy w oparciu o obecność lub wartość danego atrybutu.</p> - -<pre class="brush: css no-line-numbers">/* <a> Element z artybutem "title" */ -a[title] { - color: purple; -} - -/* <a> elemente href zawierajacy "https://example.org" */ -a[href="https://example.org"] { - color: green; -} - -/* <a> element href zawirający "example" */ -a[href*="example"] { - font-size: 2em; -} - -/* <a> elementy href kończące się na ".org" */ -a[href$=".org"] { - font-style: italic; -} - -/* <a> elementy, których atrybut klasy zawiera słowo "logo" */ -a[class~="logo"] { - padding: 2px; -}</pre> - -<h2 id="Syntax">Syntax</h2> - -<dl> - <dt><code>[<em>attr</em>]</code></dt> -</dl> - -<p>Reprezentuje elementy z atrybutem o nazwie attr.</p> - -<dl> - <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> - <dd>Reprezentuje elementy z atrybutem o nazwie attr, którego wartością jest "value".</dd> - <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value is a whitespace-separated list of words, one of which is exactly <em>value</em>.</dd> - <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value can be exactly <em>value</em> or can begin with <em>value</em> immediately followed by a hyphen, <code>-</code> (U+002D). It is often used for language subcode matches.</dd> - <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value is prefixed (preceded) by <em>value</em>.</dd> - <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value is suffixed (followed) by <em>value</em>.</dd> - <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> - <dd>Represents elements with an attribute name of <em>attr</em> whose value contains at least one occurrence of <em>value</em> within the string.</dd> - <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> - <dd>Adding an <code>i</code> (or <code>I</code>) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).</dd> - <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt> - <dd>Adding an <code>s</code> (or <code>S</code>) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Links">Links</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">a { - color: blue; -} - -/* Internal links, beginning with "#" */ -a[href^="#"] { - background-color: gold; -} - -/* Links with "example" anywhere in the URL */ -a[href*="example"] { - background-color: silver; -} - -/* Links with "insensitive" anywhere in the URL, - regardless of capitalization */ -a[href*="insensitive" i] { - color: cyan; -} - -/* Links with "cAsE" anywhere in the URL, -with matching capitalization */ -a[href*="cAsE" s] { - color: pink; -} - -/* Links that end in ".org" */ -a[href$=".org"] { - color: red; -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><ul> - <li><a href="#internal">Internal link</a></li> - <li><a href="http://example.com">Example link</a></li> - <li><a href="#InSensitive">Insensitive internal link</a></li> - <li><a href="http://example.org">Example org link</a></li> -</ul></pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample("Links")}}</p> - -<h3 id="Languages">Languages</h3> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">/* All divs with a `lang` attribute are bold. */ -div[lang] { - font-weight: bold; -} - -/* All divs without a `lang` attribute are italicized. */ -div:not([lang]) { - <span class="st">font-style: italic;</span> -} - -/* All divs in US English are blue. */ -div[lang~="en-us"] { - color: blue; -} - -/* All divs in Portuguese are green. */ -div[lang="pt"] { - color: green; -} - -/* All divs in Chinese are red, whether - simplified (zh-CN) or traditional (zh-TW). */ -div[lang|="zh"] { - color: red; -} - -/* All divs with a Traditional Chinese - `data-lang` are purple. */ -/* Note: You could also use hyphenated attributes - without double quotes */ -div[data-lang="zh-TW"] { - color: purple; -} -</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> -<div lang="pt">Olá Mundo!</div> -<div lang="zh-CN">世界您好！</div> -<div lang="zh-TW">世界您好！</div> -<div data-lang="zh-TW">世界您好！</div> -</pre> - -<h4 id="Result_2">Result</h4> - -<p>{{EmbedLiveSample("Languages")}}</p> - -<h3 id="HTML_ordered_lists">HTML ordered lists</h3> - -<p>The HTML specification requires the {{htmlattrxref("type", "input")}} attribute to be matched case-insensitively due to it primarily being used in the {{HTMLElement("input")}} element, trying to use attribute selectors to with the {{htmlattrxref("type", "ol")}} attribute of an {{HTMLElement("ol", "ordered list")}} doesn't work without the <a href="#case-sensitive">case-sensitive</a> modifier.</p> - -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css">/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */ -ol[type="a"] { - list-style-type: lower-alpha; - background: red; -} - -ol[type="a" s] { - list-style-type: lower-alpha; - background: lime; -} - -ol[type="A" s] { - list-style-type: upper-alpha; - background: lime; -}</pre> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html;"><ol type="A"> - <li>Example list</li> -</ol></pre> - -<h4 id="Result_3">Result</h4> - -<p>{{EmbedLiveSample("HTML_ordered_lists")}}</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 Selectors", "#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS3 Selectors")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.selectors.attribute")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{CSSxRef("attr")}}</li> - <li>Selecting a single element: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, or {{DOMxRef("Element.querySelector()")}}</li> - <li>Selecting all matching elements: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, or {{DOMxRef("Element.querySelectorAll()")}}</li> - <li>The above methods are all implemented based on the {{DOMxRef("ParentNode")}} mixin; see {{DOMxRef("ParentNode.querySelector()")}} and {{DOMxRef("ParentNode.querySelectorAll()")}}</li> -</ul> diff --git a/files/pl/web/css/background-size/index.html b/files/pl/web/css/background-size/index.html deleted file mode 100644 index bceed2abcd..0000000000 --- a/files/pl/web/css/background-size/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: background-size -slug: Web/CSS/background-size -translation_of: Web/CSS/background-size ---- -<div>{{CSSRef}}</div> - -<p><code style=""><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Właściwość </span></font><strong>background-size</strong></code> określa wielkość elementu <code>background-image.</code> Obrazek może pozostać w jego domyślnych wymiarach, rozciągnięty do nowych wymiarów lub ustawiony tak, aby zajmował całą dostępną przestrzeń zachowując swoje proporcje.</p> - -<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div> - -<p class="hidden">Źródło tego interaktywnego przykładu jest zlokalizowane na GitHub. Jeśli chcesz wspierać projekt interaktywnych przykładów sklonuj (clone) <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam pull request.</p> - -<p>Przestrzenie nie zapełnione przez <code>background-image</code> wypełnia {{cssxref("background-color")}}, <code>background-color</code> będzie widoczny jeżeli obrazek jest przezroczysty.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers">/* Wartości słowne */ -background-size: cover; -background-size: contain; - -/* Właściwości z jedną wartością */ -/* szerokość obrazka (wysokość stanie się 'auto') */ -background-size: 50%; -background-size: 3.2em; -background-size: 12px; -background-size: auto; - -/* Właściwości z dwoma wartościami */ -/* pierwsza wartość: szerokość obrazka, druga wartość: wysokość */ -background-size: 50% auto; -background-size: 3em 25%; -background-size: auto 6px; -background-size: auto auto; - -/* Wiele teł */ -background-size: auto, auto; /* Not to be confused with `auto auto` */ -background-size: 50%, 25%, 25%; -background-size: 6px, auto, contain; - -/* Wartości globalne */ -background-size: inherit; -background-size: initial; -background-size: unset; -</pre> - -<p>Właściwość <code>background-size</code> jest określana w jeden z podanych sposobów:</p> - -<ul> - <li>Używając wartości słownych <code><a href="#contain">contain</a></code> lub <code><a href="#cover">cover</a></code>.</li> - <li>Używając tylko wartości długości, w tym przypadku wysokość jest domyślnie ustawiona na <code><a href="#auto">auto</a></code><a href="#auto">.</a></li> - <li>Używając obu wartości (width i height), każda z wartości może być określona jako długość {{cssxref("<length>")}}, w procentach {{cssxref("<percentage>")}} lub <code><a href="#auto">auto</a></code>.</li> -</ul> - -<p>Aby określić wielkość wielu teł, odziel wartości dla każdego tła przecinkami.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt id="contain"><code>contain</code></dt> - <dd>Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania czy przycinania.</dd> - <dt id="cover"><code>cover</code></dt> - <dd>Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania. Jeżeli proporcje obrazu są inne od elementu, jest on przycinany pionowo lub poziomo - tak, żeby nie zostało puste miejsce.</dd> - <dt id="auto"><code>auto</code></dt> - <dd>Skaluje tło w odpowiednim kierunku, po to aby zachować jego nieodłączne proporcje.</dd> - <dt id="length">{{cssxref("<length>")}}</dt> - <dd>Rozciąga obrazek w odpowiednim kierunku do określonej długości. Nie można używać wartości ujemnych.</dd> - <dt id="percentage">{{cssxref("<percentage>")}}</dt> - <dd>[do przetłumaczenia na: Polski]</dd> - <dd>Stretches the image in the corresponding dimension to the specified percentage of the <em>background positioning area</em>. The background positioning area is determined by the value of {{cssxref("background-origin")}} (by default, the padding box). However, if the background's {{cssxref("background-attachment")}} value is <code>fixed</code>, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.</dd> -</dl> - -<h3 id="Intrinsic_dimensions_and_proportions">Intrinsic dimensions and proportions</h3> - -<p>The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:</p> - -<ul> - <li>A bitmap image (such as JPG) always has intrinsic dimensions and proportions.</li> - <li>A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.</li> - <li>CSS {{cssxref("<gradient>")}}s have no intrinsic dimensions or intrinsic proportions.</li> - <li>Background images created with the {{cssxref("element()")}} function use the intrinsic dimensions and proportions of the generating element.</li> -</ul> - -<div class="note"> -<p><strong>Note:</strong> The behavior of <code><gradient></code>s changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area.</p> -</div> - -<div class="note"> -<p><strong>Note:</strong> In Gecko, background images created using the {{cssxref("element()")}} function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.</p> -</div> - -<p>Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:</p> - -<dl> - <dt>If both components of <code>background-size</code> are specified and are not <code>auto</code>:</dt> - <dd>The background image is rendered at the specified size.</dd> - <dt>If the <code>background-size</code> is <code>contain</code> or <code>cover</code>:</dt> - <dd>While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.</dd> - <dt>If the <code>background-size</code> is <code>auto</code> or <code>auto auto</code>:</dt> - <dd> - <ul> - <li>If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.</li> - <li>If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.</li> - <li>If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if <code>contain</code> had been specified instead.</li> - <li>If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.</li> - <li>If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.</li> - </ul> - </dd> - <dd> - <div class="note"><strong>Note:</strong> SVG images have a <code><a href="/en-US/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> attribute that defaults to the equivalent of <code>contain</code>. In Firefox 43, as opposed to Chrome 52, an explicit <code>background-size</code> causes <code>preserveAspectRatio</code> to be ignored.</div> - </dd> - <dt>If the <code>background-size</code> has one <code>auto</code> component and one non-<code>auto</code> component:</dt> - <dd> - <ul> - <li>If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.</li> - <li>If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.</li> - </ul> - </dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.</p> -</div> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<p>Please see <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a> for examples.</p> - -<h2 id="Notes">Notes</h2> - -<p>If you use a <code><gradient></code> as the background and specify a <code>background-size</code> to go with it, it's best not to specify a size that uses a single <code>auto</code> component, or is specified using only a width value (for example, <code>background-size: 50%</code>). Rendering of <code><gradient></code>s in such cases changed in Firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> and with <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a>.</p> - -<pre class="brush: css">.gradient-example { - width: 50px; - height: 100px; - background-image: linear-gradient(blue, red); - - /* Not safe to use */ - background-size: 25px; - background-size: 50%; - background-size: auto 50px; - background-size: auto 50%; - - /* Safe to use */ - background-size: 25px 50px; - background-size: 50% 50%; -} -</pre> - -<p>Note that it's particularly not recommended to use a pixel dimension and an <code>auto</code> dimension with a <code><gradient></code>, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.</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('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("css.properties.background-size")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></li> - <li><a href="/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds">Scaling of SVG backgrounds</a></li> - <li>{{cssxref("object-fit")}}</li> -</ul> diff --git a/files/pl/web/css/box-decoration-break/index.html b/files/pl/web/css/box-decoration-break/index.html deleted file mode 100644 index 5873b850fb..0000000000 --- a/files/pl/web/css/box-decoration-break/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: box-decoration-break -slug: Web/CSS/box-decoration-break -tags: - - CSS - - CSS Fragmentation - - CSS Property - - Experimental -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> - -<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>Support on inline elements</td> - <td>{{ CompatVersionUnknown() }}{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop(32.0)}} [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}{{property_prefix("-o")}}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>Support on non-inline element</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(32.0)}} [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Support on inline elements</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoMobile("32.0")}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>Support on non-inline element</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("32.0")}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Note that Firefox implemented an non-standard version of this property before Firefox 32 named {{ Cssxref("-moz-background-inline-policy") }}. That property is unsupported since Firefox 32.</p> - -<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/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html deleted file mode 100644 index eb9d550390..0000000000 --- a/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ /dev/null @@ -1,609 +0,0 @@ ---- -title: Auto-placement in CSS Grid Layout -slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout -translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout ---- -<p>Poza możliwością umieszczania elementów</p> - -<div id="placement_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; -} -</pre> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<p>{{ EmbedLiveSample('placement_1', '500', '230') }}</p> -</div> - -<h2 id="Default_rules_for_auto-placement">Default rules for auto-placement</h2> - -<p>As you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. The default flow is to arrange items by row. Grid will lay an item out into each cell of row 1. If you have created additional rows using the <code>grid-template-rows</code> property then grid will continue placing items in these rows. If the grid does not have enough rows in the explicit grid to place all of the items new <em>implicit</em> rows will be created.</p> - -<h3 id="Sizing_rows_in_the_implicit_grid">Sizing rows in the implicit grid</h3> - -<p>The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.</p> - -<p>You can however control the size of these rows with the property <code>grid-auto-rows</code>. To cause all created rows to be 100 pixels tall for example you would use:</p> - -<div id="placement_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: 100px; -} -</pre> - -<p>{{ EmbedLiveSample('placement_2', '500', '330') }}</p> -</div> - -<p>You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.</p> - -<div id="placement_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four - <br>This cell - <br>Has extra - <br>content. - <br>Max is auto - <br>so the row expands. - </div> - <div>Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: minmax(100px, auto); -} -</pre> - -<p>{{ EmbedLiveSample('placement_3', '500', '330') }}</p> -</div> - -<p>You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as <code>200px</code>. This will continue for as long as content is added to the implicit grid. <strong>Track listings are not supported in Firefox.</strong></p> - -<div id="placement_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: 100px 200px; -} -</pre> - -<p>{{ EmbedLiveSample('placement_4', '500', '330') }}</p> -</div> - -<h3 id="Auto-placement_by_column">Auto-placement by column</h3> - -<p>You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of <code>column</code>. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.</p> - -<p>In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.</p> - -<div id="placement_5"> -<pre class="brush: css">.wrapper { - display: grid; - grid-template-rows: repeat(3, 200px); - grid-gap: 10px; - grid-auto-flow: column; - grid-auto-columns: 300px 100px; -} -</pre> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> -</div> -</pre> - -<p>{{ EmbedLiveSample('placement_5', '500', '640') }}</p> -</div> - -<h2 id="The_order_of_auto_placed_items">The order of auto placed items</h2> - -<p>A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">Grid item placement algorithm</a>, however for most of us we just need to remember a few simple rules for our items.</p> - -<h3 id="Order_modified_document_order">Order modified document order</h3> - -<p>Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the <code>order</code> property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.</p> - -<h3 id="Items_with_placement_properties">Items with placement properties</h3> - -<p>The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.</p> - -<div id="placement_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> - <div>Nine</div> - <div>Ten</div> - <div>Eleven</div> - <div>Twelve</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-auto-rows: 100px; - grid-gap: 10px; -} - .wrapper div:nth-child(2) { - grid-column: 3; - grid-row: 2 / 4; - } - .wrapper div:nth-child(5) { - grid-column: 1 / 3; - grid-row: 1 / 3; -} -</pre> - -<p>{{ EmbedLiveSample('placement_6', '500', '450') }}</p> -</div> - -<h3 id="Deal_with_items_that_span_tracks">Deal with items that span tracks</h3> - -<p>You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to <code>span 2</code>. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.</p> - -<p>You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.</p> - -<div id="placement_7"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> - <div>Nine</div> - <div>Ten</div> - <div>Eleven</div> - <div>Twelve</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-auto-rows: 100px; - grid-gap: 10px; -} -.wrapper div:nth-child(4n+1) { - grid-column-end: span 2; - grid-row-end: span 2; - background-color: #ffa94d; -} - .wrapper div:nth-child(2) { - grid-column: 3; - grid-row: 2 / 4; - } - .wrapper div:nth-child(5) { - grid-column: 1 / 3; - grid-row: 1 / 3; -} -</pre> - -<p>{{ EmbedLiveSample('placement_7', '500', '770') }}</p> -</div> - -<h3 id="Filling_in_the_gaps">Filling in the gaps</h3> - -<p>So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.</p> - -<p>To do this, add the property {{cssxref("grid-auto-flow")}} with a value of <code>dense</code> to the container. This is the same property you use to change the flow order to <code>column</code>, so if you were working in columns you would add both values <code>grid-auto-flow: column dense</code>.</p> - -<p>Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.</p> - -<div id="placement_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two</div> - <div>Three</div> - <div>Four</div> - <div>Five</div> - <div>Six</div> - <div>Seven</div> - <div>Eight</div> - <div>Nine</div> - <div>Ten</div> - <div>Eleven</div> - <div>Twelve</div> -</div> -</pre> - -<pre class="brush: css">.wrapper div:nth-child(4n+1) { - grid-column-end: span 2; - grid-row-end: span 2; - background-color: #ffa94d; -} - .wrapper div:nth-child(2) { - grid-column: 3; - grid-row: 2 / 4; - } - .wrapper div:nth-child(5) { - grid-column: 1 / 3; - grid-row: 1 / 3; -} -.wrapper { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-auto-rows: 100px; - grid-gap: 10px; - grid-auto-flow: dense; -} -</pre> - -<p>{{ EmbedLiveSample('placement_8', '500', '730') }}</p> -</div> - -<h3 id="Anonymous_grid_items">Anonymous grid items</h3> - -<p>There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of <code>grid</code> to <code>display: grid</code>. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.</p> - -<pre class="brush: css"><div class="grid"> - I am a string and will become an anonymous item - <div>A grid item</div> - <div>A grid item</div> -</div> -</pre> - -<p>Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.</p> - -<h3 id="Use_cases_for_auto-placement">Use cases for auto-placement</h3> - -<p>Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of <code>landscape</code> to span two column tracks. I then use <code>grid-auto-flow: dense</code> to create a densely packed grid.</p> - -<div id="placement_9"> -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - grid-gap: 10px; - grid-auto-flow: dense; - list-style: none; - margin: 1em auto; - padding: 0; - max-width: 800px; -} -.wrapper li { - border: 1px solid #ccc; -} -.wrapper li.landscape { - grid-column-end: span 2; -} -.wrapper li img { - display: block; - object-fit: cover; - width: 100%; - height: 100%; -} -</pre> - -<pre class="brush: html"><ul class="wrapper"> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> - <li><img src="https://placehold.it/200x300" alt="placeholder"></li> -</ul> -</pre> - -<p>{{ EmbedLiveSample('placement_9', '500', '1300') }}</p> -</div> - -<p>Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of <code>dt</code> and <code>dd</code> items. In my example I am allowing auto-placement to place the items, however I have classes that start a <code>dt</code> in column 1, and <code>dd</code> in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.</p> - -<div id="placement_10"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <dl> - <dt>Mammals</dt> - <dd>Cat</dd> - <dd>Dog</dd> - <dd>Mouse</dd> - <dt>Fish</dt> - <dd>Guppy</dd> - <dt>Birds</dt> - <dd>Pied Wagtail</dd> - <dd>Owl</dd> - </dl> -</div> -</pre> - -<pre class="brush: css">dl { - display: grid; - grid-template-columns: auto 1fr; - max-width: 300px; - margin: 1em; - line-height: 1.4; -} -dt { - grid-column: 1; - font-weight: bold; -} -dd { - grid-column: 2; - } -</pre> - -<p>{{ EmbedLiveSample('placement_10', '500', '230') }}</p> -</div> - -<h2 id="What_can’t_we_do_with_auto-placement_yet">What can’t we do with auto-placement (yet)?</h2> - -<p>There are a couple of things that often come up as questions. Currently we can’t do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.There is <a href="https://github.com/w3c/csswg-drafts/issues/796">an issue raised about this</a> on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.</p> - -<p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/pl/web/css/media_queries/using_media_queries/index.html b/files/pl/web/css/media_queries/using_media_queries/index.html deleted file mode 100644 index 8944867c66..0000000000 --- a/files/pl/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,643 +0,0 @@ ---- -title: Using media queries -slug: Web/CSS/Media_Queries/Using_media_queries -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -<p><span class="seoSummary">M<strong>edia query</strong> składa się z jej typu oraz przynajmniej jednego wyrażenia, zadaniem którego jest określenie zakresu działania kodu css, poprzez użycie takich wartości jak szerokość, wysokość czy kolor. Media queries zostały dodane w specyfikacji <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, pozwalając na przygotowanie określonego stylu zawartości strony, w zależności od urządzenia docelowego dla kodu, bez potrzeby zmiany samej treści w każdym z przypadków. </span></p> - -<h2 id="Składnia">Składnia</h2> - -<p>Każda Media query składa się z <a href="/pl/docs/CSS/@media">typu medium docelowego</a>, a także, zgodnie ze specyfikacją CSS3, zawiera jedno lub więcej wyrażeń logicznych (ang. media features), które zwracają wartość true lub false. Wynik query jest prawdziwy, jeżeli typ medium jest zgodny z aktualnym urządzaniem (np. gdy rozdzielczość ekranu jest zgodna z podanymi warunkami). Media query zostanie wykonana, tylko jeśli wszystkie jej wyrażenia <strong>będą prawdziwe.</strong> </p> - -<pre class="brush: html"><!-- Media query użyta na elemencie link --> -<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> - -<!-- Media query w środku arkusza stylów --> -<style> -@media (max-width: 600px) { - .facet_sidebar { - display: none; - } -} -</style> -</pre> - -<p>Jeżeli warunki zostaną spełnione, wskazane arkusze stylów, lub zasady CSS w przypadku stylu osadzonego, zostaną załadowane, zgodnie z zasadą kaskadowości css. Należy zaznaczyć, że załączone style za pomocą znacznika <code>link</code> będą pobierane niezależnie od tego czy media query zostanie wykonana.</p> - -<p>Dopóki nie użyjesz operatorów <code>not</code> lub <code>optional</code>, typ medium nie jest wymagany i dla danej query nadany zostanie typ <code>all</code>.</p> - -<h3 id="Operatory_logiczne">Operatory logiczne</h3> - -<p>Możesz tworzyć zaawansowane media queries za pomocą operatorów logicznych - <code>not</code>, <code>and</code> oraz <code>only</code>. Operator <code>and</code> używany jest do łączenia wielu wyrażeń logicznych, w jedną media query. Nakładają one wymaganie, aby każda zeleżność była prawdziwa, wykonując przez to podany zestaw styli. Operator <code>not</code> używany jest do zanegowanie całej media query. Celem operatora <code>only</code> jest zaaplikowanie CSS'a tylko w przypadku, gdy wszystkie warunki są spełnione ( użyteczne gdy chcemy zapobiec użyciu znacznika media przez starsze przeglądarki. Jak już wspomnieliśmy, używając operatorów <code>only</code> oraz <code>not</code> musisz określić typ medium.</p> - -<p>Możesz również połączyć wiele media queries w listę, oddzielając kolejne wyrażenia media średnikiem. Jeżeli jakakolwiek query jest prawdziwa, całe wyrażenie zwróci true. Takie wyrażenie jest równoznaczne z logicznym operatorem <code>or</code></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">@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">@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">@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">@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" 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" style="font-size: 14px;">@media not (all and (monochrome)) { ... } -</pre> - -<p>... rather than like this:</p> - -<pre class="brush: css" 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" style="font-size: 14px;">@media not screen and (color), print and (color) -</pre> - -<p>It is evaluated like this:</p> - -<pre class="brush: css" 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"><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>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("Media/Visual")}}<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">@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">@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("Media/Visual")}}<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">@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"><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("Media/Visual")}}, {{cssxref("Media/Tactile")}}<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">@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("Media/Visual")}}, {{cssxref("Media/Tactile")}}<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">@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("Media/Visual")}}, {{cssxref("Media/Tactile")}}<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"><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("Media/Visual")}}, {{cssxref("Media/Tactile")}}<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" 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">@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("Media/Visual")}}, {{cssxref("Media/Tactile")}}<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("Media/Visual")}}<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">@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">@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("Media/Visual")}}<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">@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">@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">@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("Media/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">@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("Media/Visual")}}, {{cssxref("Media/Tactile")}}<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">@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"><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">@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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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>@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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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("Media/Visual")}}<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> - -<p> </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> |