From 037a4118c4324d39fdef8bd23f9dd21b02f50946 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 15 Jul 2021 13:01:50 -0400 Subject: delete pages that were never translated from en-US (pl, part 1) (#1549) --- files/pl/web/css/attribute_selectors/index.html | 238 -------- files/pl/web/css/background-size/index.html | 187 ------ files/pl/web/css/box-decoration-break/index.html | 202 ------- .../auto-placement_in_css_grid_layout/index.html | 609 ------------------- .../media_queries/using_media_queries/index.html | 643 --------------------- 5 files changed, 1879 deletions(-) delete mode 100644 files/pl/web/css/attribute_selectors/index.html delete mode 100644 files/pl/web/css/background-size/index.html delete mode 100644 files/pl/web/css/box-decoration-break/index.html delete mode 100644 files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html delete mode 100644 files/pl/web/css/media_queries/using_media_queries/index.html (limited to 'files/pl/web/css') 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 ---- -
{{CSSRef}}
- -

Selektor atrybutów CSS dopasowuje elementy w oparciu o obecność lub wartość danego atrybutu.

- -
/* <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;
-}
- -

Syntax

- -
-
[attr]
-
- -

Reprezentuje elementy z atrybutem o nazwie attr.

- -
-
[attr=value]
-
Reprezentuje elementy z atrybutem o nazwie attr, którego wartością jest "value".
-
[attr~=value]
-
Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
-
[attr|=value]
-
Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.
-
[attr^=value]
-
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
-
[attr$=value]
-
Represents elements with an attribute name of attr whose value is suffixed (followed) by value.
-
[attr*=value]
-
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
-
[attr operator value i]
-
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
-
[attr operator value s] {{Experimental_Inline}}
-
Adding an s (or S) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).
-
- -

Examples

- - - -

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;
-}
- -

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>
- -

Result

- -

{{EmbedLiveSample("Links")}}

- -

Languages

- -

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]) {
-  font-style: italic;
-}
-
-/* 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;
-}
-
- -

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>
-
- -

Result

- -

{{EmbedLiveSample("Languages")}}

- -

HTML ordered lists

- -

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 case-sensitive modifier.

- -

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;
-}
- -

HTML

- -
<ol type="A">
-  <li>Example list</li>
-</ol>
- -

Result

- -

{{EmbedLiveSample("HTML_ordered_lists")}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS4 Selectors")}}Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}{{Spec2("CSS2.1")}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.selectors.attribute")}}

- -

See also

- - 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 ---- -
{{CSSRef}}
- -

Właściwość background-size określa wielkość elementu background-image. 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.

- -
{{EmbedInteractiveExample("pages/css/background-size.html")}}
- - - -

Przestrzenie nie zapełnione przez background-image wypełnia {{cssxref("background-color")}}, background-color będzie widoczny jeżeli obrazek jest przezroczysty.

- -

Syntax

- -
/* 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;
-
- -

Właściwość background-size jest określana w jeden z podanych sposobów:

- - - -

Aby określić wielkość wielu teł, odziel wartości dla każdego tła przecinkami.

- -

Values

- -
-
contain
-
Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania czy przycinania.
-
cover
-
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.
-
auto
-
Skaluje tło w odpowiednim kierunku, po to aby zachować jego nieodłączne proporcje.
-
{{cssxref("<length>")}}
-
Rozciąga obrazek w odpowiednim kierunku do określonej długości. Nie można używać wartości ujemnych.
-
{{cssxref("<percentage>")}}
-
[do przetłumaczenia na: Polski]
-
Stretches the image in the corresponding dimension to the specified percentage of the background positioning area. 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 fixed, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.
-
- -

Intrinsic dimensions and proportions

- -

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:

- - - -
-

Note: The behavior of <gradient>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.

-
- -
-

Note: 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.

-
- -

Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:

- -
-
If both components of background-size are specified and are not auto:
-
The background image is rendered at the specified size.
-
If the background-size is contain or cover:
-
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.
-
If the background-size is auto or auto auto:
-
-
    -
  • If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
    • -
  • If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.
    • -
  • If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if contain had been specified instead.
    • -
  • 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.
    • -
  • 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.
    • -
-
-
-
Note: SVG images have a preserveAspectRatio attribute that defaults to the equivalent of contain. In Firefox 43, as opposed to Chrome 52, an explicit background-size causes preserveAspectRatio to be ignored.
-
-
If the background-size has one auto component and one non-auto component:
-
-
    -
  • 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.
    • -
  • 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.
    • -
-
-
- -
-

Note: 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.

-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Please see Scaling background images for examples.

- -

Notes

- -

If you use a <gradient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%). Rendering of <gradient>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 the CSS3 background-size specification and with the CSS3 Image Values gradient specification.

- -
.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%;
-}
-
- -

Note that it's particularly not recommended to use a pixel dimension and an auto dimension with a <gradient>, 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.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}}Initial definition.
- -

{{cssinfo}}

- -

Browser compatibility

- -

{{Compat("css.properties.background-size")}}

- -

See also

- - 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 ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

Summary

- -

The box-decoration-break 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.

- -

{{cssinfo}}

- -

Syntax

- -
box-decoration-break: slice;
-box-decoration-break: clone;
-
-box-decoration-break: initial;
-box-decoration-break: inherit;
-box-decoration-break: unset;
-
- -

Values

- -
-
slice
-
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.
-
clone
-
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") }}: no-repeat may be repeated multiple times.
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Inline box fragments

- -

An inline element that contains line-breaks styled with:

- -
.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>
- -

Results in:

- -

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

- -

Adding box-decoration-break:clone to the above styles:

- -
  -webkit-box-decoration-break: clone;
-  -o-box-decoration-break: clone;
-  box-decoration-break: clone;
-
- -

Results in:

- -

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

- -

You can try the two inline examples above in your browser.

- -

Here's an example of an inline element using a large border-radius value. The second "iM" has a line-break between the "i" and the "M". For comparison, the first "iM" 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.

- -

A screenshot of the rendering of the second inline element example.

- -

Try the above example in your browser.

- -

Block box fragments

- -

A block element with similar styles as above, first without any fragmentation:

- -

A screenshot of the rendering of the block element used in the examples without any fragmentation.

- -

Fragmenting the above block into three columns results in:

- -

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

- -

Note that stacking these pieces vertically will result in the non-fragmented rendering.

- -

Now the same example styled with box-decoration-break:clone

- -

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

- -

Note here that each fragment has an identical replicated border, box-shadow and background.

- -

You can try the block examples above in your browser.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}{{ Spec2('CSS3 Fragmentation') }}Initial definition
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support on inline elements{{ CompatVersionUnknown() }}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(32.0)}} [1]{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{property_prefix("-o")}}{{ CompatUnknown() }}
Support on non-inline element{{CompatNo}}{{CompatGeckoDesktop(32.0)}} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support on inline elements{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("32.0")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Support on non-inline element{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("32.0")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}
-
- -

[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.

- -

See also

- - 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 ---- -

Poza możliwością umieszczania elementów

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -

{{ EmbedLiveSample('placement_1', '500', '230') }}

-
- -

Default rules for auto-placement

- -

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 grid-template-rows 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 implicit rows will be created.

- -

Sizing rows in the implicit grid

- -

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.

- -

You can however control the size of these rows with the property grid-auto-rows. To cause all created rows to be 100 pixels tall for example you would use:

- -
- - -
<div class="wrapper">
-    <div>One</div>
-    <div>Two</div>
-    <div>Three</div>
-    <div>Four</div>
-    <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px;
-}
-
- -

{{ EmbedLiveSample('placement_2', '500', '330') }}

-
- -

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.

- -
- - -
<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>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: minmax(100px, auto);
-}
-
- -

{{ EmbedLiveSample('placement_3', '500', '330') }}

-
- -

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 200px. This will continue for as long as content is added to the implicit grid. Track listings are not supported in Firefox.

- -
- - -
<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>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px 200px;
-}
-
- -

{{ EmbedLiveSample('placement_4', '500', '330') }}

-
- -

Auto-placement by column

- -

You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of column. 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")}}.

- -

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.

- -
-
.wrapper {
-    display: grid;
-    grid-template-rows: repeat(3, 200px);
-    grid-gap: 10px;
-    grid-auto-flow: column;
-    grid-auto-columns: 300px 100px;
-}
-
- - - -
<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>
-
- -

{{ EmbedLiveSample('placement_5', '500', '640') }}

-
- -

The order of auto placed items

- -

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 Grid item placement algorithm, however for most of us we just need to remember a few simple rules for our items.

- -

Order modified document order

- -

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 order 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.

- -

Items with placement properties

- -

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.

- -
- - -
<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>
-
- -
.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;
-}
-
- -

{{ EmbedLiveSample('placement_6', '500', '450') }}

-
- -

Deal with items that span tracks

- -

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 span 2. 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.

- -

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.

- -
- - -
<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>
-
- -
.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;
-}
-
- -

{{ EmbedLiveSample('placement_7', '500', '770') }}

-
- -

Filling in the gaps

- -

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.

- -

To do this, add the property {{cssxref("grid-auto-flow")}} with a value of dense to the container. This is the same property you use to change the flow order to column, so if you were working in columns you would add both values grid-auto-flow: column dense.

- -

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.

- -
- - -
<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>
-
- -
.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;
-}
-
- -

{{ EmbedLiveSample('placement_8', '500', '730') }}

-
- -

Anonymous grid items

- -

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 grid to display: grid. 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.

- -
<div class="grid">
-  I am a string and will become an anonymous item
-  <div>A grid item</div>
-  <div>A grid item</div>
-</div>
-
- -

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.

- -

Use cases for auto-placement

- -

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 landscape to span two column tracks. I then use grid-auto-flow: dense to create a densely packed grid.

- -
-
.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%;
-}
-
- -
<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>
-
- -

{{ EmbedLiveSample('placement_9', '500', '1300') }}

-
- -

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 dt and dd items. In my example I am allowing auto-placement to place the items, however I have classes that start a dt in column 1, and dd in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.

- -
- - -
<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>
-
- -
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;
- }
-
- -

{{ EmbedLiveSample('placement_10', '500', '230') }}

-
- -

What can’t we do with auto-placement (yet)?

- -

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 an issue raised about this on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.

- -

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.

- - 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 ---- -

Media query 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 CSS3, 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. 

- -

Składnia

- -

Każda Media query składa się z typu medium docelowego, 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 będą prawdziwe. 

- -
<!-- 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>
-
- -

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 link będą pobierane niezależnie od tego czy media query zostanie wykonana.

- -

Dopóki nie użyjesz operatorów not lub optional, typ medium nie jest wymagany i dla danej query nadany zostanie typ all.

- -

Operatory logiczne

- -

Możesz tworzyć zaawansowane media queries za pomocą operatorów logicznych - not, and oraz only. Operator and 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 not używany jest do zanegowanie całej media query. Celem operatora only 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 only oraz not musisz określić typ medium.

- -

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 or

- -

and

- -

The and 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 all media type, could look like this:

- -
@media (min-width: 700px) { ... }
- -

If, however, you wanted this to apply only if the display is in landscape, you could use an and operator to chain the media features together.

- -
@media (min-width: 700px) and (orientation: landscape) { ... }
- -

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 and operator.

- -
@media tv and (min-width: 700px) and (orientation: landscape) { ...  }
- -

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.

- -

comma-separated lists

- -

Comma-separated lists behave like the logical operator or 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.

- -

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:

- -
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
- -

Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interpreted as @media all and (min-width: 700px) would apply to my device and therefore return true, despite the fact that my screen device would fail the handheld media type check in the second media query. Likewise, if I were on a handheld 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.

- -

not

- -

The not keyword applies to the whole media query and returns true if the media query would otherwise return false (such as monochrome on a color display or a screen width of 600px with a min-width: 700px feature query). A not 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 not keyword cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query:

- -
@media not all and (monochrome) { ... }
-
- -

This means that the query is evaluated like this:

- -
@media not (all and (monochrome)) { ... }
-
- -

... rather than like this:

- -
@media (not all) and (monochrome) { ... }
- -

As another example, look at the following media query:

- -
@media not screen and (color), print and (color)
-
- -

It is evaluated like this:

- -
@media (not (screen and (color))), print and (color)
- -

only

- -

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

- -
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
-
- -

Pseudo-BNF (for those of you that like that kind of thing)

- -
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
- -

Media queries are case insensitive.  Media queries involving unknown media types are always false.

- -
Note: Parentheses are required around expressions; failing to use them is an error.
- -

Media features

- -

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.

- -
Note: 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.
- -

color

- -

Value: {{cssxref("<color>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: yes

- -

Indicates the number of bits per color component of the output device.  If the device is not a color device, this value is zero.

- -
Note: 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.
- -

Examples

- -

To apply a style sheet to all color devices:

- -
@media all and (color) { ... }
-
- -

To apply a style sheet to devices with at least 4 bits per color component:

- -
@media all and (min-color: 4) { ... }
-
- -

color-index

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: yes

- -

Indicates the number of entries in the color look-up table for the output device.

- -

Examples

- -

To indicate that a style sheet should apply to all devices using indexed color, you can do:

- -
@media all and (color-index) { ... }
-
- -

To apply a style sheet to indexed color devices with at least 256 colors:

- -
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
-
- -

aspect-ratio

- -

Value: {{cssxref("<ratio>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

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).

- -

Example

- -

The following selects a special style sheet to use for when the display area is at least as wide as it is high.

- -
@media screen and (min-aspect-ratio: 1/1) { ... }
- -

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.

- -

device-aspect-ratio

- -

Value: {{cssxref("<ratio>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

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).

- -

Example

- -

The following selects a special style sheet to use for widescreen displays.

- -
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
- -

This selects the style when the aspect ratio is either 16:9 or 16:10.

- -

device-height

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

- -

Example

- -

To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:

- -
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
-
- -

device-width

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

- -

Example

- -

To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:

- -
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
- -

grid

- -

Value: <mq-boolean> which is an {{cssxref("<integer>")}} that can only have the 0 and 1 value.
- Media: all
- Accepts min/max prefixes: no

- -

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.

- -

Example

- -

To apply a style to handheld devices with a 15-character or narrower display:

- -
@media handheld and (grid) and (max-width: 15em) { ... }
-
- -
Note: 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.
- -

height

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

The height 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).

- -
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.
- -

monochrome

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: yes

- -

Indicates the number of bits per pixel on a monochrome (greyscale) device.  If the device isn't monochrome, the device's value is 0.

- -

Examples

- -

To apply a style sheet to all monochrome devices:

- -
@media all and (monochrome) { ... }
-
- -

To apply a style sheet to monochrome devices with at least 8 bits per pixel:

- -
@media all and (min-monochrome: 8) { ... }
-
- -

orientation

- -

Value: landscape | portrait
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

Example

- -

To apply a style sheet only in portrait orientation:

- -
@media all and (orientation: portrait) { ... }
- -
Note: 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.
- -

resolution

- -

Value: {{cssxref("<resolution>")}}
- Media: {{cssxref("Media/Bitmap", "bitmap")}}
- Accepts min/max prefixes: yes

- -

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).

- -

Example

- -

To apply a style sheet to devices with at least 300 dots per inch of resolution:

- -
@media print and (min-resolution: 300dpi) { ... }
-
- -

To replace the old (min-device-pixel-ratio: 2) syntax:

- -
@media screen and (min-resolution: 2dppx) { ... }
- -

scan

- -

Value: progressive | interlace
- Media: {{cssxref("Media/TV")}}
- Accepts min/max prefixes: no

- -

Describes the scanning process of television output devices.

- -

Example

- -

To apply a style sheet only to progressive scanning televisions:

- -
@media tv and (scan: progressive) { ... }
-
- -

width

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Accepts min/max prefixes: yes

- -

The width 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).

- -
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.
- -

Examples

- -

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:

- -
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
-
- -

This media query specifies a style sheet that applies to printed media wider than 8.5 inches:

- -
<link rel="stylesheet" media="print and (min-width: 8.5in)"
-    href="http://foo.com/mystyle.css" />
-
- -

This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:

- -
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
-
- -

Mozilla-specific media features

- -

Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.

- -

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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 pseudo-class.

- -

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

- -

Value: {{cssxref("<number>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: yes

- -

Gives the number of device pixels per CSS pixel.

- -
-

Do not use this feature.

- -

Use the resolution feature with the dppx unit instead.
-
- -moz-device-pixel-ratio may be used for compatibility with Firefox older than 16 and -webkit-device-pixel-ratio with WebKit-based browsers that do not support dppx.

- -

Example:

- -
@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 */
- -

See this CSSWG article for compatibility good practices regarding resolution and dppx.

-
- -
Note: This media feature is also implemented by Webkit and by IE 11 for Windows Phone 8.1 as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.
- -

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

- -

Value: windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:

- - - -

This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

- -

Example

- -

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.

- -

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

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.

- -

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

- -

Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

- - - -

This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
grid{{ CompatUnknown() }}{{ CompatNo() }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
resolution{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} [2]
- {{ CompatGeckoDesktop("8.0") }} [3]		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
scan{{ CompatUnknown() }}{{ CompatNo() }} [4]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

[1] grid media type is not supported

- -

[2] Supports {{cssxref("<integer>")}} values;

- -

[3] Supports {{cssxref("<number>")}} values, as per the spec.

- -

[4] tv media type is not supported

- -

 

- -

See also

- - -- cgit v1.2.3-54-g00ecf