From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/@media/index.html | 384 +++++++++++++++++++++ files/ru/web/css/@media/inverted-colors/index.html | 83 +++++ files/ru/web/css/@media/orientation/index.html | 90 +++++ .../web/css/@media/prefers-color-scheme/index.html | 96 ++++++ .../css/@media/prefers-reduced-motion/index.html | 158 +++++++++ files/ru/web/css/@media/scripting/index.html | 83 +++++ 6 files changed, 894 insertions(+) create mode 100644 files/ru/web/css/@media/index.html create mode 100644 files/ru/web/css/@media/inverted-colors/index.html create mode 100644 files/ru/web/css/@media/orientation/index.html create mode 100644 files/ru/web/css/@media/prefers-color-scheme/index.html create mode 100644 files/ru/web/css/@media/prefers-reduced-motion/index.html create mode 100644 files/ru/web/css/@media/scripting/index.html (limited to 'files/ru/web/css/@media') diff --git a/files/ru/web/css/@media/index.html b/files/ru/web/css/@media/index.html new file mode 100644 index 0000000000..93f12082be --- /dev/null +++ b/files/ru/web/css/@media/index.html @@ -0,0 +1,384 @@ +--- +title: '@media' +slug: Web/CSS/@media +translation_of: Web/CSS/@media +--- +

{{CSSRef}}

+ +

Описание

+ +

At-правило @media в CSS связывает набор операторов, ограниченных фигурными скобками, в CSS блок, применяется при соблюдении условия одного или нескольких медиазапросов.

+ +
+

В JavaScript, at-правило @media может быть получено с помощью {{domxref("CSSMediaRule")}}, интерфейса объектной модели CSS.

+
+ +

Синтаксис

+ +

At-правило @media можно разместить не только на верхнем уровне CSS, но и внутри любого фрагмента условной группы-правил.

+ +
/* На верхнем уровне кода */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Вложено в другое условное at-правило */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+ +

Для рассмотрения синтаксиса медиазапросов, см. Использование медиазапросов.

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

A <media-query> is composed of a optional media type and/or a number of media features.

+ +

Типы

+ +
+
all
+
Подходит для всех устройств.
+
print
+
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
+
screen
+
Предназначен в первую очередь для цветных компьютерных экранов.
+
speech
+
Предназначен для синтезаторов речи.
+
+ +
Примечание: CSS2.1 и Media Queries 3 определили несколько дополнительных зачений (tty, tv, projection, handheld, braille, embossed, aural), но они устарели в Media Queries 4 и не рекомендуется к использованию.
+ +

Media Features

+ +

Each media feature tests for one specific feature of the browser or device.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ИмяSummaryNotes
widthViewport width
heightViewport height
aspect-ratioWidth-to-height aspect ratio of the viewport
orientationOrientation of the viewport
resolutionPixel density of the output device
scanScanning process of the output device
gridIs the device a grid or bitmap?
update-frequencyHow quickly (if at all) can the output device modify the appearance of the contentAdded in Media Queries Level 4
overflow-blockHow does the output device handle content that overflows the viewport along the block axis?Added in Media Queries Level 4
overflow-inlineCan content that overflows the viewport along the inline axis be scrolled?Added in Media Queries Level 4
colorNumber of bits per color component of the output device, or zero if the device isn't color.
color-indexNumber of entries in the output device's color lookup table, or zero if the device does not use such a table.
display-modeThe display mode of the application, as specified in the web app manifest's display member.Defined in the Web App Manifest spec.
monochromeBits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome.
inverted-colorsIs the user agent or underlying OS inverting colors?Added in Media Queries Level 4
pointerIs the primary input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4
hoverDoes the primary input mechanism allow the user to hover over elements?Added in Media Queries Level 4
any-pointerIs any available input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4
any-hoverDoes any available input mechanism allow the user to hover over elements?Added in Media Queries Level 4
light-levelCurrent ambient light levelAdded in Media Queries Level 4
scriptingIs scripting (e.g. JavaScript) available?Added in Media Queries Level 4
device-width {{obsolete_inline}}Width of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-height {{obsolete_inline}}Height of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-aspect-ratio {{obsolete_inline}}Width-to-height aspect ratio of the output deviceDeprecated in Media Queries Level 4
-webkit-device-pixel-ratio {{non-standard_inline}}Number of physical device pixels per CSS pixelNonstandard; WebKit/Blink-specific. If possible, use the resolution media feature instead.
-webkit-transform-3d {{non-standard_inline}}Are CSS 3D {{cssxref("transform")}}s supported?Nonstandard; WebKit/Blink-specific
-webkit-transform-2d {{non-standard_inline}}Are CSS 2D {{cssxref("transform")}}s supported?Nonstandard; WebKit-specific
-webkit-transition {{non-standard_inline}}Are CSS {{cssxref("transition")}}s supported?Nonstandard; WebKit-specific
-webkit-animation {{non-standard_inline}}Are CSS {{cssxref("animation")}}s supported?Nonstandard; WebKit-specific
+ +

Примеры

+ +
@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}{{Spec2('Compat')}}Стандартизация -webkit-device-pixel-ratio и -webkit-transform-3d.
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}Определяет базовый синтаксис правила @media.
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}} +

Добавлены scripting, pointer, hover, light-level, update-frequency, overflow-block и overflow-inline.
+ Исключены все media типы за исключением screen, print, speech, и all.

+
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}{{Spec2('CSS3 Media Queries')}}Нет изменений.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}{{Spec2('CSS2.1')}}Первоначальное определение.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка(all, print, screen)1.0{{ CompatGeckoDesktop(1.7) }}6.09.21.3
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}9.2{{CompatNo}}
Media features1.0{{ CompatGeckoDesktop(1.7) }}9.09.21.3
display-mode media feature{{CompatUnknown}}{{ CompatGeckoDesktop(47) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка (all, print, screen)1.0{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}9.0{{CompatNo}}
Media features1.0{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
display-mode media feature{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/css/@media/inverted-colors/index.html b/files/ru/web/css/@media/inverted-colors/index.html new file mode 100644 index 0000000000..f56c90108b --- /dev/null +++ b/files/ru/web/css/@media/inverted-colors/index.html @@ -0,0 +1,83 @@ +--- +title: inverted-colors +slug: Web/CSS/@media/inverted-colors +tags: + - '@media' + - CSS + - Media Queries + - Reference + - media feature +translation_of: Web/CSS/@media/inverted-colors +--- +
{{cssref}}
+ +

CSS медиа функция inverted-colors может использоваться для проверки, инвертирует ли {{glossary("user agent")}} или ОС цвета.

+ +

Синтаксис

+ +

Функция inverted-colors указана в качестве значения ключевого слова, выбранного из списка ниже.

+ +
+
none
+
+

Цвета отображаются нормально.

+
+
inverted
+
Все пиксели в отображаемой области были инвертированы.
+
+ +

Примеры

+ +

HTML

+ +
<p>Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия желтого по черному). Если нет, он должен быть красным на светло-сером.</p>
+<p>Если текст серого цвета, ваш браузер не поддерживает медиа-функцию `inverted-colors`.</p>
+ +

CSS

+ +
p {
+  color: gray;
+}
+
+@media (inverted-colors: inverted) {
+  p {
+    background: black;
+    color: yellow;
+  }
+}
+
+@media (inverted-colors: none) {
+  p {
+    background: #eee;
+    color: red;
+  }
+}
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#inverted', 'inverted-colors')}}{{Spec2('CSS4 Media Queries')}}Отложено до Media Queries Level 5.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.at-rules.media.inverted-colors")}}

diff --git a/files/ru/web/css/@media/orientation/index.html b/files/ru/web/css/@media/orientation/index.html new file mode 100644 index 0000000000..723c964b8f --- /dev/null +++ b/files/ru/web/css/@media/orientation/index.html @@ -0,0 +1,90 @@ +--- +title: Ориентация +slug: Web/CSS/@media/orientation +translation_of: Web/CSS/@media/orientation +--- +
{{cssref}}
+ +

CSS медиа-функции orientation может использоваться для проверки ориентации области {{glossary("просмотра")}} (или поля страницы для медийных страниц).

+ +
+

Примечание: Эта функция не соответствует ориентации устройства. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведет к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.

+
+ +

Синтаксис

+ +

Функция orientation указывается в качестве значения ключевого слова, выбранного из списка ниже.

+ +

Значения ключевых слов

+ +
+
portrait
+
Окно просмотра находится в портретной ориентации, то есть высота больше или равна ширине.
+
landscape
+
Окно просмотра находится в альбомной ориентации, то есть ширина больше высоты.
+
+ +

Пример

+ +

HTML

+ +
<div>Вставка 1</div>
+<div>Вставка 2</div>
+<div>Вставка 3</div>
+
+ +

CSS

+ +
body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}
+ +

Результат

+ +

{{EmbedLiveSample("Example")}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS4 Media Queries')}}Бе изменений.
{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS3 Media Queries')}}Начальное определение.
+ +

Совместимость браузеров

+ + + +

{{Compat("css.at-rules.media.orientation")}}

diff --git a/files/ru/web/css/@media/prefers-color-scheme/index.html b/files/ru/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..d857696181 --- /dev/null +++ b/files/ru/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,96 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Reference + - prefers-color-scheme +translation_of: Web/CSS/@media/prefers-color-scheme +--- +

CSS медиа функция prefers-color-scheme может использоваться для определения того, светлую или тёмную тему использует пользователь в операционной системе.

+ +

Синтаксис

+ +
+
no-preference
+
Указывает, что пользователь не сделал никаких предпочтений, известных системе. Значение этого ключевого слова оценивается как false в логическом контексте.
+
light
+
Указывает, что пользователь выбрал светлую тему в операционной системе.
+
dark
+
Указывает, что пользователь выбрал тёмную тему в операционной системе.
+
+ +

Примеры

+ +

В этом примере используется элемент с черным фоном и белым текстом, если пользователь выбрал светлую тему в операционной системе, то цвета будут инвертированы.

+ +

HTML

+ +
<div class="day">Day (initial)</div>
+<div class="day light-scheme">Day (changes in light scheme)</div>
+<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>
+
+<div class="night">Night (initial)</div>
+<div class="night light-scheme">Night (changes in light scheme)</div>
+<div class="night dark-scheme">Night (changes in dark scheme)</div>
+ +

CSS

+ +
.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+ +

Result

+ +

{{EmbedLiveSample("Примеры")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
+

{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}

+ 		{{Spec2('CSS5 Media Queries')}}Изначальное определение.
+ +

Совместимость с браузерами

+ +

{{Compat("css.at-rules.media.prefers-color-scheme")}}

+ +

Смотрите также

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
diff --git a/files/ru/web/css/@media/prefers-reduced-motion/index.html b/files/ru/web/css/@media/prefers-reduced-motion/index.html new file mode 100644 index 0000000000..b7f007c5a9 --- /dev/null +++ b/files/ru/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,158 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +tags: + - '@media' + - CSS + - Media Queries + - Reference + - media feature +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +

CSS медиа функция prefers-reduced-motion может использоваться для определения того, запросил ли пользователь, чтобы ОС минимизировала количество анимации или движения, которые она использует.

+ +

Синтаксис

+ +
+
no-preference
+
Указывает, что пользователь не сделал никаких предпочтений, известных системе.
+
reduce
+
Указывает, что пользователь уведомил ОС, что он предпочитает интерфейс, который минимизирует количество движения или анимации, предпочтительно до точки, где удаляются все несущественные движения.
+
+ +

Примеры

+ +

В этом примере присутствует раздражающая анимация, если вы не включите «Уменьшить движение» в настройках доступности.

+ +

HTML

+ +
<div class="animation">animated box</div>
+
+ +

CSS

+ +
.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+    -webkit-animation: none;
+  }
+}
+
+ + + +

Результат

+ +

{{EmbedLiveSample("Examples")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}{{Spec2('CSS5 Media Queries')}}Изначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

+ +

Смотрите также

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
diff --git a/files/ru/web/css/@media/scripting/index.html b/files/ru/web/css/@media/scripting/index.html new file mode 100644 index 0000000000..92fcbf3192 --- /dev/null +++ b/files/ru/web/css/@media/scripting/index.html @@ -0,0 +1,83 @@ +--- +title: scripting +slug: Web/CSS/@media/scripting +translation_of: Web/CSS/@media/scripting +--- +
{{cssref}}
+ +

CSS медиа функция scripting может использоваться для проверки доступности скриптов (таких как JavaScript)

+ +

Синтаксис

+ +

Функция scripting указывается в качестве значения ключевого слова, выбранного из списка ниже.

+ +
+
none
+
Скрипты полностью недоступны в текущем документе.
+
initial-only
+
Скрипты включаются во время начальной загрузки страницы, но не после.
+
enabled
+
Скрипты поддерживаются и активны в текущем документе.
+
+ +

Примеры

+ +

HTML

+ +
<p class="script-none">You do not have scripting available. :-(</p>
+<p class="script-initial-only">Your scripting is only enabled during the initial page load. Weird.</p>
+<p class="script-enabled">You have scripting enabled! :-)</p>
+
+ +

CSS

+ +
p {
+  color: lightgray;
+}
+
+@media (scripting: none) {
+  .script-none {
+     color: red;
+  }
+}
+
+@media (scripting: initial-only) {
+  .script-initial-only {
+    color: red;
+  }
+}
+
+@media (scripting: enabled) {
+  .script-enabled {
+    color: red;
+  }
+}
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#scripting', 'scripting')}}{{Spec2('CSS4 Media Queries')}}Отложено до Media Queries Level 5.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.at-rules.media.scripting")}}

-- cgit v1.2.3-54-g00ecf