From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001 From: Alexey Istomin Date: Sat, 20 Mar 2021 18:37:44 +0300 Subject: Restore "ё" letter in Russian translation (#239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder --- .../css/@counter-style/additive-symbols/index.html | 2 +- .../ru/web/css/@font-face/font-display/index.html | 12 +-- files/ru/web/css/@font-face/index.html | 6 +- files/ru/web/css/@font-feature-values/index.html | 4 +- files/ru/web/css/@media/inverted-colors/index.html | 2 +- files/ru/web/css/@media/orientation/index.html | 2 +- files/ru/web/css/@page/index.html | 4 +- files/ru/web/css/@viewport/index.html | 6 +- files/ru/web/css/_colon_-moz-focusring/index.html | 2 +- .../web/css/_colon_-moz-only-whitespace/index.html | 2 +- files/ru/web/css/_colon_any-link/index.html | 2 +- files/ru/web/css/_colon_default/index.html | 2 +- files/ru/web/css/_colon_dir/index.html | 2 +- files/ru/web/css/_colon_disabled/index.html | 6 +- files/ru/web/css/_colon_enabled/index.html | 2 +- files/ru/web/css/_colon_first-child/index.html | 2 +- files/ru/web/css/_colon_focus-visible/index.html | 2 +- files/ru/web/css/_colon_focus/index.html | 2 +- files/ru/web/css/_colon_fullscreen/index.html | 4 +- files/ru/web/css/_colon_indeterminate/index.html | 4 +- files/ru/web/css/_colon_is/index.html | 4 +- files/ru/web/css/_colon_left/index.html | 2 +- files/ru/web/css/_colon_target/index.html | 4 +- files/ru/web/css/_colon_visited/index.html | 4 +- files/ru/web/css/_colon_where/index.html | 8 +- .../css/_doublecolon_-moz-progress-bar/index.html | 4 +- files/ru/web/css/_doublecolon_slotted/index.html | 10 +-- .../web/css/adjacent_sibling_combinator/index.html | 4 +- files/ru/web/css/align-items/index.html | 8 +- files/ru/web/css/all/index.html | 4 +- files/ru/web/css/angle/index.html | 2 +- files/ru/web/css/animation-delay/index.html | 2 +- files/ru/web/css/animation-direction/index.html | 6 +- files/ru/web/css/animation-duration/index.html | 2 +- files/ru/web/css/animation-fill-mode/index.html | 16 ++-- .../web/css/animation-iteration-count/index.html | 4 +- files/ru/web/css/animation-name/index.html | 4 +- files/ru/web/css/animation-play-state/index.html | 2 +- .../web/css/animation-timing-function/index.html | 2 +- files/ru/web/css/appearance/index.html | 2 +- files/ru/web/css/at-rule/index.html | 10 +-- files/ru/web/css/attribute_selectors/index.html | 10 +-- files/ru/web/css/backdrop-filter/index.html | 4 +- files/ru/web/css/backface-visibility/index.html | 6 +- files/ru/web/css/background-attachment/index.html | 8 +- files/ru/web/css/background-blend-mode/index.html | 2 +- files/ru/web/css/background-clip/index.html | 2 +- files/ru/web/css/background-image/index.html | 6 +- files/ru/web/css/background-position-x/index.html | 4 +- files/ru/web/css/background-position/index.html | 6 +- files/ru/web/css/background-repeat/index.html | 2 +- files/ru/web/css/background-size/index.html | 12 +-- files/ru/web/css/background/index.html | 6 +- files/ru/web/css/block-size/index.html | 6 +- files/ru/web/css/border-image-slice/index.html | 2 +- files/ru/web/css/border-radius/index.html | 6 +- files/ru/web/css/border-width/index.html | 2 +- files/ru/web/css/border/index.html | 2 +- files/ru/web/css/bottom/index.html | 2 +- files/ru/web/css/box-shadow/index.html | 2 +- files/ru/web/css/box-sizing/index.html | 2 +- files/ru/web/css/calc()/index.html | 2 +- files/ru/web/css/class_selectors/index.html | 2 +- files/ru/web/css/clear/index.html | 4 +- files/ru/web/css/clip-path/index.html | 6 +- files/ru/web/css/color_value/index.html | 90 +++++++++++----------- files/ru/web/css/column-count/index.html | 2 +- files/ru/web/css/column-rule-color/index.html | 2 +- files/ru/web/css/column-rule-style/index.html | 2 +- files/ru/web/css/column-rule/index.html | 8 +- files/ru/web/css/column_combinator/index.html | 2 +- files/ru/web/css/containing_block/index.html | 8 +- files/ru/web/css/content/index.html | 16 ++-- .../detecting_css_animation_support/index.html | 6 +- files/ru/web/css/css_animations/tips/index.html | 8 +- .../css_animations/using_css_animations/index.html | 22 +++--- .../using_multiple_backgrounds/index.html | 4 +- .../index.html | 2 +- .../box_alignment_in_flexbox/index.html | 12 +-- files/ru/web/css/css_box_alignment/index.html | 16 ++-- .../introduction_to_the_css_box_model/index.html | 8 +- .../css/css_colors/color_picker_tool/index.html | 2 +- .../using_multi-column_layouts/index.html | 2 +- .../aligning_items_in_a_flex_container/index.html | 4 +- .../backwards_compatibility_of_flexbox/index.html | 6 +- .../basic_concepts_of_flexbox/index.html | 16 ++-- .../mastering_wrapping_of_flex_items/index.html | 12 +-- files/ru/web/css/css_flow_layout/index.html | 6 +- .../intro_to_formatting_contexts/index.html | 6 +- .../basic_concepts_of_grid_layout/index.html | 32 ++++---- .../box_alignment_in_css_grid_layout/index.html | 14 ++-- .../index.html | 20 ++--- .../css_grid_layout/grid_template_areas/index.html | 32 ++++---- files/ru/web/css/css_grid_layout/index.html | 2 +- .../layout_using_named_grid_lines/index.html | 28 +++---- .../line-based_placement_with_css_grid/index.html | 28 +++---- .../index.html | 14 ++-- .../relationship_of_grid_layout/index.html | 34 ++++---- .../ru/web/css/css_grid_layout/subgrid/index.html | 2 +- .../using_css_counters/index.html | 34 ++++---- .../adding_z-index/index.html | 2 +- .../understanding_z_index/index.html | 2 +- .../the_stacking_context/index.html | 12 +-- .../css/css_scroll_snap/basic_concepts/index.html | 2 +- files/ru/web/css/css_selectors/index.html | 6 +- .../using_css_transitions/index.html | 10 +-- files/ru/web/css/cursor/index.html | 2 +- files/ru/web/css/descendant_combinator/index.html | 2 +- files/ru/web/css/display-listitem/index.html | 2 +- files/ru/web/css/display-outside/index.html | 6 +- files/ru/web/css/display/index.html | 8 +- files/ru/web/css/filter/index.html | 2 +- files/ru/web/css/flex-basis/index.html | 8 +- files/ru/web/css/flex-direction/index.html | 4 +- files/ru/web/css/flex-grow/index.html | 2 +- files/ru/web/css/flex-wrap/index.html | 2 +- files/ru/web/css/flex/index.html | 2 +- files/ru/web/css/float/index.html | 2 +- files/ru/web/css/font-family/index.html | 2 +- files/ru/web/css/font-variant-ligatures/index.html | 6 +- files/ru/web/css/font-weight/index.html | 8 +- files/ru/web/css/font/index.html | 2 +- files/ru/web/css/grid-area/index.html | 4 +- files/ru/web/css/grid-auto-flow/index.html | 4 +- files/ru/web/css/grid-row-start/index.html | 2 +- files/ru/web/css/grid-template-areas/index.html | 2 +- files/ru/web/css/grid-template-columns/index.html | 4 +- files/ru/web/css/grid-template-rows/index.html | 2 +- files/ru/web/css/grid/index.html | 6 +- files/ru/web/css/hanging-punctuation/index.html | 4 +- files/ru/web/css/hyphens/index.html | 2 +- files/ru/web/css/image-set()/index.html | 2 +- files/ru/web/css/index.html | 2 +- files/ru/web/css/inherit/index.html | 6 +- files/ru/web/css/initial/index.html | 2 +- files/ru/web/css/inset/index.html | 2 +- files/ru/web/css/integer/index.html | 2 +- files/ru/web/css/isolation/index.html | 4 +- files/ru/web/css/justify-content/index.html | 6 +- files/ru/web/css/justify-items/index.html | 16 ++-- .../breadcrumb_navigation/index.html | 4 +- files/ru/web/css/layout_cookbook/index.html | 4 +- .../layout_cookbook/split_navigation/index.html | 2 +- .../css/layout_cookbook/sticky_footers/index.html | 2 +- files/ru/web/css/line-break/index.html | 2 +- files/ru/web/css/list-style-image/index.html | 2 +- files/ru/web/css/margin-inline-start/index.html | 2 +- files/ru/web/css/margin-left/index.html | 2 +- files/ru/web/css/margin-right/index.html | 2 +- files/ru/web/css/margin/index.html | 8 +- files/ru/web/css/max-block-size/index.html | 2 +- files/ru/web/css/media_queries/index.html | 4 +- .../media_queries/testing_media_queries/index.html | 6 +- .../media_queries/using_media_queries/index.html | 6 +- files/ru/web/css/object-fit/index.html | 6 +- files/ru/web/css/opacity/index.html | 8 +- files/ru/web/css/order/index.html | 2 +- files/ru/web/css/orphans/index.html | 2 +- files/ru/web/css/overflow-block/index.html | 2 +- files/ru/web/css/overflow-wrap/index.html | 4 +- files/ru/web/css/overflow/index.html | 2 +- files/ru/web/css/overscroll-behavior/index.html | 2 +- files/ru/web/css/padding-left/index.html | 2 +- files/ru/web/css/padding/index.html | 2 +- files/ru/web/css/paint-order/index.html | 2 +- files/ru/web/css/perspective/index.html | 2 +- files/ru/web/css/pointer-events/index.html | 2 +- files/ru/web/css/position/index.html | 22 +++--- files/ru/web/css/radial-gradient()/index.html | 12 +-- files/ru/web/css/ratio/index.html | 2 +- files/ru/web/css/reference/index.html | 2 +- .../web/css/repeating-linear-gradient()/index.html | 8 +- files/ru/web/css/selector_list/index.html | 8 +- files/ru/web/css/shorthand_properties/index.html | 2 +- files/ru/web/css/specificity/index.html | 18 ++--- files/ru/web/css/syntax/index.html | 8 +- files/ru/web/css/time/index.html | 4 +- files/ru/web/css/touch-action/index.html | 2 +- .../css/transform-function/rotate3d()/index.html | 2 +- .../css/transform-function/scale3d()/index.html | 2 +- .../web/css/transform-function/skew()/index.html | 8 +- files/ru/web/css/transform-style/index.html | 2 +- files/ru/web/css/transform/index.html | 6 +- files/ru/web/css/transition/index.html | 4 +- files/ru/web/css/universal_selectors/index.html | 8 +- files/ru/web/css/used_value/index.html | 2 +- files/ru/web/css/user-select/index.html | 4 +- .../web/css/using_css_custom_properties/index.html | 4 +- files/ru/web/css/vertical-align/index.html | 6 +- files/ru/web/css/visibility/index.html | 2 +- .../ru/web/css/visual_formatting_model/index.html | 2 +- files/ru/web/css/white-space/index.html | 2 +- files/ru/web/css/will-change/index.html | 8 +- files/ru/web/css/word-spacing/index.html | 6 +- 194 files changed, 595 insertions(+), 595 deletions(-) (limited to 'files/ru/web/css') diff --git a/files/ru/web/css/@counter-style/additive-symbols/index.html b/files/ru/web/css/@counter-style/additive-symbols/index.html index c8781e4d40..4ea2a2dc87 100644 --- a/files/ru/web/css/@counter-style/additive-symbols/index.html +++ b/files/ru/web/css/@counter-style/additive-symbols/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/@counter-style/additive-symbols ---

Описание

-

Дескриптор аддитивных символов аналогичен дескриптору {{cssxref('symbols')}} и позволяет пользователю указывать символы которые будут использоваться для представлений счетчика, когда значение дескриптора {{cssxref('system')}}  аддитивное. Дескриптор additive-symbols определяет так называемые аддитивные кортежи, каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес. Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.

+

Дескриптор аддитивных символов аналогичен дескриптору {{cssxref('symbols')}} и позволяет пользователю указывать символы которые будут использоваться для представлений счётчика, когда значение дескриптора {{cssxref('system')}}  аддитивное. Дескриптор additive-symbols определяет так называемые аддитивные кортежи, каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес. Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.

Когда значение системного дескриптора является циклическим, числовым, буквенным, символическим или фиксированным, дескриптор symbols используется вместо аддитивных символов для указания символов счетчика.

diff --git a/files/ru/web/css/@font-face/font-display/index.html b/files/ru/web/css/@font-face/font-display/index.html index 603b7a8a66..e1466f1b1a 100644 --- a/files/ru/web/css/@font-face/font-display/index.html +++ b/files/ru/web/css/@font-face/font-display/index.html @@ -7,11 +7,11 @@ translation_of: Web/CSS/@font-face/font-display

Описание

-

Дескриптор font-display определяет то, как шрифт, подключенный через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.

+

Дескриптор font-display определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.

Временная шкала отображения шрифтов

-

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

+

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

Период блокировки шрифта (Font block period)
@@ -39,13 +39,13 @@ font-display: optional;
auto
Стратегию загрузки шрифта определяет пользовательский агент.
block
-
Для шрифта задается короткий период блокировки и бесконечный период подмены.
+
Для шрифта задаётся короткий период блокировки и бесконечный период подмены.
swap
-
Для шрифта не задается период блокировки и задается бесконечный период подмены.
+
Для шрифта не задаётся период блокировки и задаётся бесконечный период подмены.
fallback
-
Для шрифта задается очень короткий период блокировки и короткий период подмены.
+
Для шрифта задаётся очень короткий период блокировки и короткий период подмены.
optional
-
Для шрифта задается очень короткий период блокировки и не задается период подмены.
+
Для шрифта задаётся очень короткий период блокировки и не задаётся период подмены.

Официальный синтаксис

diff --git a/files/ru/web/css/@font-face/index.html b/files/ru/web/css/@font-face/index.html index 6382b864b4..b638ecc425 100644 --- a/files/ru/web/css/@font-face/index.html +++ b/files/ru/web/css/@font-face/index.html @@ -11,7 +11,7 @@ tags: - типографика translation_of: Web/CSS/@font-face --- -
@font-face CSS @-правило позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url().
+
@font-face CSS @-правило позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url().
 
@@ -19,7 +19,7 @@ translation_of: Web/CSS/@font-face
 
-
Распространенным случаем является одновременное использование url() и local(), чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.
+
Распространённым случаем является одновременное использование url() и local(), чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.
 
@@ -56,7 +56,7 @@ translation_of: Web/CSS/@font-face
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.
{{cssxref("@font-face/src", "src")}}
-
Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.
+
Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.

Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format():

diff --git a/files/ru/web/css/@font-feature-values/index.html b/files/ru/web/css/@font-feature-values/index.html index d04e91a2d0..7a122d3ad6 100644 --- a/files/ru/web/css/@font-feature-values/index.html +++ b/files/ru/web/css/@font-feature-values/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/@font-feature-values } -

Правило @font-feature-values может использоваться как на вернем уровне вашего CSS так и внутри любого условного CSS правила.

+

Правило @font-feature-values может использоваться как на вернём уровне вашего CSS так и внутри любого условного CSS правила.

Синтаксис

@@ -84,5 +84,5 @@ translation_of: Web/CSS/@font-feature-values

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

    -
  • Свойство {{cssxref("font-variant-alternates")}} которое использует значения, определенные этим правилом.
  • +
  • Свойство {{cssxref("font-variant-alternates")}} которое использует значения, определённые этим правилом.
diff --git a/files/ru/web/css/@media/inverted-colors/index.html b/files/ru/web/css/@media/inverted-colors/index.html index f56c90108b..123d6d7eeb 100644 --- a/files/ru/web/css/@media/inverted-colors/index.html +++ b/files/ru/web/css/@media/inverted-colors/index.html @@ -30,7 +30,7 @@ translation_of: Web/CSS/@media/inverted-colors

HTML

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

CSS

diff --git a/files/ru/web/css/@media/orientation/index.html b/files/ru/web/css/@media/orientation/index.html index 723c964b8f..055dffc88d 100644 --- a/files/ru/web/css/@media/orientation/index.html +++ b/files/ru/web/css/@media/orientation/index.html @@ -8,7 +8,7 @@ translation_of: Web/CSS/@media/orientation

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

-

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

+

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

Синтаксис

diff --git a/files/ru/web/css/@page/index.html b/files/ru/web/css/@page/index.html index d61e6d2ca3..04daa7d53e 100644 --- a/files/ru/web/css/@page/index.html +++ b/files/ru/web/css/@page/index.html @@ -2,7 +2,7 @@ title: '@page' slug: Web/CSS/@page tags: - - Верстка + - Вёрстка - печать - страница translation_of: Web/CSS/@page @@ -99,5 +99,5 @@ translation_of: Web/CSS/@page

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

    -
  • Смотрите тикет [META] CSS Paged Media Module Level 3 в Bugzilla для отслеживания прогресса по теме (базовый страничный счетчик, и т.д.)
  • +
  • Смотрите тикет [META] CSS Paged Media Module Level 3 в Bugzilla для отслеживания прогресса по теме (базовый страничный счётчик, и т.д.)
diff --git a/files/ru/web/css/@viewport/index.html b/files/ru/web/css/@viewport/index.html index 56ee461658..cbbaf38b69 100644 --- a/files/ru/web/css/@viewport/index.html +++ b/files/ru/web/css/@viewport/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/@viewport

Кратко

-

@viewport CSS at-rule содержит набор вложенных дескрипторов в блоке CSS, который разделен фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.

+

@viewport CSS at-rule содержит набор вложенных дескрипторов в блоке CSS, который разделён фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.

Синтаксис

@@ -32,13 +32,13 @@ translation_of: Web/CSS/@viewport
max-width
Используется при определении ширины видового экрана при первом отображении документа.
width
-
Сокращенный дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).
+
Сокращённый дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).
min-height
Используется при определении высоты видового экрана при первом отображении документа.
max-height
Используется при определении высоты видового экрана при первом отображении документа.
height
-
Сокращенный дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).
+
Сокращённый дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).
zoom
Устанавливает начальный коэффициент масштабирования.
min-zoom
diff --git a/files/ru/web/css/_colon_-moz-focusring/index.html b/files/ru/web/css/_colon_-moz-focusring/index.html index 872ef81e58..c194469e7a 100644 --- a/files/ru/web/css/_colon_-moz-focusring/index.html +++ b/files/ru/web/css/_colon_-moz-focusring/index.html @@ -33,7 +33,7 @@ translation_of: 'Web/CSS/:-moz-focusring'

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

-

Этот псевдокласс пока еще не определен ни в одной спецификации, хотя и прошел этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.

+

Этот псевдокласс пока ещё не определён ни в одной спецификации, хотя и прошёл этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.

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

diff --git a/files/ru/web/css/_colon_-moz-only-whitespace/index.html b/files/ru/web/css/_colon_-moz-only-whitespace/index.html index 48c095accb..83a7a93462 100644 --- a/files/ru/web/css/_colon_-moz-only-whitespace/index.html +++ b/files/ru/web/css/_colon_-moz-only-whitespace/index.html @@ -72,7 +72,7 @@ div { {{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}} {{Spec2("CSS4 Selectors")}} - Определен впервые + Определён впервые diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html index 95ede05087..839d8323c6 100644 --- a/files/ru/web/css/_colon_any-link/index.html +++ b/files/ru/web/css/_colon_any-link/index.html @@ -5,7 +5,7 @@ tags: - ':any-link' - CSS - Web - - Верстка + - Вёрстка - Гиперссылки - Справка - Ссылки diff --git a/files/ru/web/css/_colon_default/index.html b/files/ru/web/css/_colon_default/index.html index 45ac8c1819..e13201061e 100644 --- a/files/ru/web/css/_colon_default/index.html +++ b/files/ru/web/css/_colon_default/index.html @@ -14,7 +14,7 @@ input:default { background-color: lime; }
-

Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс :default найдет все эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.

+

Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс :default найдёт все эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.

Синтаксис

diff --git a/files/ru/web/css/_colon_dir/index.html b/files/ru/web/css/_colon_dir/index.html index 09422f6f13..4cf0bccb4b 100644 --- a/files/ru/web/css/_colon_dir/index.html +++ b/files/ru/web/css/_colon_dir/index.html @@ -19,7 +19,7 @@ translation_of: 'Web/CSS/:dir'
-

Примечание: В HTML, направление задается атрибутом {{htmlattrxref("dir")}}. В других форматах могут использоваться иные методы.

+

Примечание: В HTML, направление задаётся атрибутом {{htmlattrxref("dir")}}. В других форматах могут использоваться иные методы.

Синтаксис

diff --git a/files/ru/web/css/_colon_disabled/index.html b/files/ru/web/css/_colon_disabled/index.html index 86a34bd10a..0c5812445b 100644 --- a/files/ru/web/css/_colon_disabled/index.html +++ b/files/ru/web/css/_colon_disabled/index.html @@ -9,7 +9,7 @@ translation_of: 'Web/CSS/:disabled'

Описание

-

CSS псевдокласс :disabled находит любой отключенный элемент. Элемент отключен, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включенное состояние, когда его можно активировать или сфокусировать.

+

CSS псевдокласс :disabled находит любой отключённый элемент. Элемент отключён, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включённое состояние, когда его можно активировать или сфокусировать.

Примеры

@@ -17,9 +17,9 @@ translation_of: 'Web/CSS/:disabled'
input:disabled
-
Выберет все отключенные поля ввода
+
Выберет все отключённые поля ввода
select.country:disabled
-
Найдёт все отключенные select элементы с классом country
+
Найдёт все отключённые select элементы с классом country

Пример использования

diff --git a/files/ru/web/css/_colon_enabled/index.html b/files/ru/web/css/_colon_enabled/index.html index 7e83a52a5d..99e4402da0 100644 --- a/files/ru/web/css/_colon_enabled/index.html +++ b/files/ru/web/css/_colon_enabled/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/:enabled'

Описание

-

CSS псевдокласс :enabled находит любой включенный элемент. Элемент включен, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключенное состояние, когда его нельзя активировать или сфокусировать.

+

CSS псевдокласс :enabled находит любой включённый элемент. Элемент включён, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключённое состояние, когда его нельзя активировать или сфокусировать.

Пример

diff --git a/files/ru/web/css/_colon_first-child/index.html b/files/ru/web/css/_colon_first-child/index.html index d31fc8acd2..927a3a5098 100644 --- a/files/ru/web/css/_colon_first-child/index.html +++ b/files/ru/web/css/_colon_first-child/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:first-child'
>
 /* Выбирает любой <p>, который является первым элементом
-   среди своих братьев и сестер */
+   среди своих братьев и сестёр */
 p:first-child {
   color: lime;
 }
diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html index 3156d5c66e..a509c175d3 100644 --- a/files/ru/web/css/_colon_focus-visible/index.html +++ b/files/ru/web/css/_colon_focus-visible/index.html @@ -17,7 +17,7 @@ translation_of: 'Web/CSS/:focus-visible'

Базовый пример

-

В этом примере селектор :focus-visible использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щелкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью :focus.

+

В этом примере селектор :focus-visible использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью :focus.

<input value="Default styles"><br>
 <button>Default styles</button><br>
diff --git a/files/ru/web/css/_colon_focus/index.html b/files/ru/web/css/_colon_focus/index.html
index 206b74a0e9..af809f7761 100644
--- a/files/ru/web/css/_colon_focus/index.html
+++ b/files/ru/web/css/_colon_focus/index.html
@@ -102,7 +102,7 @@ input:focus {
 

Поддержка браузерами

- +

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

diff --git a/files/ru/web/css/_colon_fullscreen/index.html b/files/ru/web/css/_colon_fullscreen/index.html index 5dc0c1afec..c527af137f 100644 --- a/files/ru/web/css/_colon_fullscreen/index.html +++ b/files/ru/web/css/_colon_fullscreen/index.html @@ -2,7 +2,7 @@ title: ':fullscreen' slug: 'Web/CSS/:fullscreen' tags: - - Верстка + - Вёрстка - полноэкранный режим - псевдокласс - экран @@ -36,7 +36,7 @@ translation_of: 'Web/CSS/:fullscreen' <button id="fs-toggle">Toggle Fullscreen</button>
-

{{HTMLElement("button")}} с ID "fs-toggle" будет изменятся между бледно-красный и бледно-зеленый в зависимости от того, находится ли документ в полноэкранном режиме.

+

{{HTMLElement("button")}} с ID "fs-toggle" будет изменятся между бледно-красный и бледно-зелёный в зависимости от того, находится ли документ в полноэкранном режиме.

CSS

diff --git a/files/ru/web/css/_colon_indeterminate/index.html b/files/ru/web/css/_colon_indeterminate/index.html index d4cf598129..e601e36af1 100644 --- a/files/ru/web/css/_colon_indeterminate/index.html +++ b/files/ru/web/css/_colon_indeterminate/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:indeterminate'

CSS псевдокласс :indeterminate находит элементы в неопределённом состоянии.

-
/* Выбирает все элементы <input>, которые находятся в неопределенном состоянии */
+
/* Выбирает все элементы <input>, которые находятся в неопределённом состоянии */
 input:indeterminate {
   background: lime;
 }
@@ -32,7 +32,7 @@ input:indeterminate {

Чекбокс и радио переключатели

-

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

+

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

HTML

diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html index cd8f1848d1..d365dfa795 100644 --- a/files/ru/web/css/_colon_is/index.html +++ b/files/ru/web/css/_colon_is/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:is'

:is() это функция псевдокласс CSS принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.

-

Заметьте, что в данный момент браузеры поддерживают ее функционал как :matches(), или даже как более старый, префиксный псевдокласс — :any(), включая старые версии Chrome, Firefox, и Safari. :any() работает точно таким же образом как и :matches()/:is(), за исключением того, что  :any() требует постановку префиксов и не поддерживает комплексные селекторы.

+

Заметьте, что в данный момент браузеры поддерживают её функционал как :matches(), или даже как более старый, префиксный псевдокласс — :any(), включая старые версии Chrome, Firefox, и Safari. :any() работает точно таким же образом как и :matches()/:is(), за исключением того, что  :any() требует постановку префиксов и не поддерживает комплексные селекторы.

/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
 :is(header, main, footer) p:hover {
@@ -19,7 +19,7 @@ translation_of: 'Web/CSS/:is'
   cursor: pointer;
 }
 
-/* Пример приведенный выше эквивалентен следующему */
+/* Пример приведённый выше эквивалентен следующему */
 header p:hover,
 main p:hover,
 footer p:hover {
diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html
index 88f406851d..8a9fcbb9b2 100644
--- a/files/ru/web/css/_colon_left/index.html
+++ b/files/ru/web/css/_colon_left/index.html
@@ -2,7 +2,7 @@
 title: ':left'
 slug: 'Web/CSS/:left'
 tags:
-  - Верстка
+  - Вёрстка
   - Псевдоклассы
 translation_of: 'Web/CSS/:left'
 ---
diff --git a/files/ru/web/css/_colon_target/index.html b/files/ru/web/css/_colon_target/index.html
index 46d0f88746..d3f5c5a0ef 100644
--- a/files/ru/web/css/_colon_target/index.html
+++ b/files/ru/web/css/_colon_target/index.html
@@ -2,7 +2,7 @@
 title: ':target'
 slug: 'Web/CSS/:target'
 tags:
-  - Верстка
+  - Вёрстка
   - Псевдоклассы
 translation_of: 'Web/CSS/:target'
 ---
@@ -153,7 +153,7 @@ p:target i {
   cursor: pointer;
 }
 
-/* Обертка lightbox  */
+/* Обёртка lightbox  */
 .lightbox .close::before {
   left: 0;
   top: 0;
diff --git a/files/ru/web/css/_colon_visited/index.html b/files/ru/web/css/_colon_visited/index.html
index f4288a183b..c1b516e912 100644
--- a/files/ru/web/css/_colon_visited/index.html
+++ b/files/ru/web/css/_colon_visited/index.html
@@ -12,9 +12,9 @@ translation_of: 'Web/CSS/:visited'
 

CSS псевдокласс :visited позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :visited до правила :link, но после других, определённых LVHA-порядком: :link:visited:hover:active.

-

Замечание: Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, fill и stroke. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосвященных ссылок вместо него (но если прозрачность - 0, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосвященных ссылок).

+

Замечание: Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, fill и stroke. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосвящённых ссылок вместо него (но если прозрачность - 0, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосвящённых ссылок).

-

Несмотря на то, что цвет может меняться, метод getComputedStyle наврёт и всегда будет давать значение цвета непосвященных ссылок.

+

Несмотря на то, что цвет может меняться, метод getComputedStyle наврёт и всегда будет давать значение цвета непосвящённых ссылок.

Для дополнительной информации об ограничениях и их причин, смотрите Приватность и селектор :visited.

diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html index 3eb34a7c0e..5a7b922577 100644 --- a/files/ru/web/css/_colon_where/index.html +++ b/files/ru/web/css/_colon_where/index.html @@ -14,13 +14,13 @@ translation_of: 'Web/CSS/:where'
/* Выбирает любой параграф внутри header, main
-   или footer на который наведен курсор мыши */
+   или footer на который наведён курсор мыши */
 :where(header, main, footer) p:hover {
   color: red;
   cursor: pointer;
 }
 
-/* Пример приведенный выше эквивалентен следующему */
+/* Пример приведённый выше эквивалентен следующему */
 header p:hover,
 main p:hover,
 footer p:hover {
@@ -54,7 +54,7 @@ footer p:hover {
 
 

В этом примере показывается как работает :where(), а так же демонстрируется разница между :where() и :is().

-

Возьмем следующий HTML-код:

+

Возьмём следующий HTML-код:

<article>
   <h2>:is()-styled links</h2>
@@ -109,7 +109,7 @@ footer p:hover {
   color: blue;
 }
-

Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри :is() выше, чем специфичность селектора вышеприведенного кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.

+

Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри :is() выше, чем специфичность селектора вышеприведённого кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.

В то время как, селекторы перечисленные внутри :where() имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.

diff --git a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html index 635676abae..a23502ee59 100644 --- a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html +++ b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html @@ -18,7 +18,7 @@ translation_of: 'Web/CSS/::-moz-progress-bar'

HTML

<progress value="30" max="100">30%</progress>
-<progress max="100">Неопределенный бар прогресса</progress>
+<progress max="100">Неопределённый бар прогресса</progress>

CSS

@@ -26,7 +26,7 @@ translation_of: 'Web/CSS/::-moz-progress-bar' background-color: red; } -/* Задает неопределенным барам нулевую ширину */ +/* Задаёт неопределённым барам нулевую ширину */ :indeterminate::-moz-progress-bar { width: 0; }
diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html index d0663700f2..34e36b8578 100644 --- a/files/ru/web/css/_doublecolon_slotted/index.html +++ b/files/ru/web/css/_doublecolon_slotted/index.html @@ -5,16 +5,16 @@ translation_of: 'Web/CSS/::slotted' ---
{{ CSSRef }}
-

CSS псевдо-элемент ::slotted() представляет собой любой элемент, помещенный в слот внутри HTML-шаблона (дополнительная информация в Using templates and slots).

+

CSS псевдо-элемент ::slotted() представляет собой любой элемент, помещённый в слот внутри HTML-шаблона (дополнительная информация в Using templates and slots).

-

Это работает только при использовании внутри CSS, помещенного в shadow DOM. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещенный в слот; он нацелен только на фактические элементы.

+

Это работает только при использовании внутри CSS, помещённого в shadow DOM. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.

-
/* Выбирает любой элемент, помещенный в слот */
+
/* Выбирает любой элемент, помещённый в слот */
 ::slotted(*) {
   font-weight: bold;
 }
 
-/* Выбирает только <span>, помещенный в слот */
+/* Выбирает только <span>, помещённый в слот */
 ::slotted(span) {
   font-weight: bold;
 }
@@ -64,7 +64,7 @@ translation_of: 'Web/CSS/::slotted'
   }
 })
-

Вы увидите, что при заполнении элемента style содержимым мы выбираем все  slotted-элементы (::slotted(*)) и задаем им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые еще не были успешно заполнены.

+

Вы увидите, что при заполнении элемента style содержимым мы выбираем все  slotted-элементы (::slotted(*)) и задаём им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые ещё не были успешно заполнены.

Элемент выглядит следующим образом при вставке на страницу:

diff --git a/files/ru/web/css/adjacent_sibling_combinator/index.html b/files/ru/web/css/adjacent_sibling_combinator/index.html index 42893ac5e3..d5762bba46 100644 --- a/files/ru/web/css/adjacent_sibling_combinator/index.html +++ b/files/ru/web/css/adjacent_sibling_combinator/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/Adjacent_sibling_combinator ---

{{CSSRef("Selectors")}}

-

Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определенным в первой части элементом.

+

Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определённым в первой части элементом.

Синтакс

@@ -29,7 +29,7 @@ translation_of: Web/CSS/Adjacent_sibling_combinator

{{EmbedLiveSample('Example_1', 200, 100)}}

-

Так же может использоваться для задания стиля определенного класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:

+

Так же может использоваться для задания стиля определённого класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:

img + span.caption {
   font-style: italic;
diff --git a/files/ru/web/css/align-items/index.html b/files/ru/web/css/align-items/index.html
index 9d5a7f5843..705ea1dea0 100644
--- a/files/ru/web/css/align-items/index.html
+++ b/files/ru/web/css/align-items/index.html
@@ -42,10 +42,10 @@ align-items: unset;
  
normal
Эффект этого ключевого слова зависит от режима макета, в котором мы находимся::
    -
  • В абсолютно позиционированных макетах ключевое слово ведет себя как start в замененных абсолютно позиционированных блоках, и как stretch во всех других абсолютно позиционированных блоках.
  • -
  • В статическом положении абсолютно позиционированных макетов ключевое слово ведет себя как stretch.
  • -
  • Для гибких элементов ключевое слово ведет себя как stretch.
  • -
  • Для элементов сетки это ключевое слово ведет к поведению, аналогичному stretch, за исключением полей с соотношением сторон или внутренних размеров, где оно ведет себя как start.
  • +
  • В абсолютно позиционированных макетах ключевое слово ведёт себя как start в заменённых абсолютно позиционированных блоках, и как stretch во всех других абсолютно позиционированных блоках.
  • +
  • В статическом положении абсолютно позиционированных макетов ключевое слово ведёт себя как stretch.
  • +
  • Для гибких элементов ключевое слово ведёт себя как stretch.
  • +
  • Для элементов сетки это ключевое слово ведёт к поведению, аналогичному stretch, за исключением полей с соотношением сторон или внутренних размеров, где оно ведёт себя как start.
  • Это свойство не применяется к блокам уровня блока и к ячейкам таблицы.
diff --git a/files/ru/web/css/all/index.html b/files/ru/web/css/all/index.html index 632ac959d2..1510ac6c3b 100644 --- a/files/ru/web/css/all/index.html +++ b/files/ru/web/css/all/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/all

Описание

-

Сокращенное свойство CSS all сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.

+

Сокращённое свойство CSS all сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.

{{cssinfo}}

@@ -78,7 +78,7 @@ blockquote { blockquote { background-color: skyblue; color: red; }
{{EmbedLiveSample("ex0", "200", "125")}} -

{{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определенным фоном и цветом текста. Он также ведет себя как block элемент : текст, который следует за ним, находится под ним.

+

{{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определённым фоном и цветом текста. Он также ведёт себя как block элемент : текст, который следует за ним, находится под ним.

diff --git a/files/ru/web/css/angle/index.html b/files/ru/web/css/angle/index.html index 782c6c4fe5..c4a228aca3 100644 --- a/files/ru/web/css/angle/index.html +++ b/files/ru/web/css/angle/index.html @@ -46,7 +46,7 @@ translation_of: Web/CSS/angle Angle180.png - Развернутый угол: 180deg = 200grad = 0.5turn 3.1416rad + Развёрнутый угол: 180deg = 200grad = 0.5turn 3.1416rad AngleMinus90.png diff --git a/files/ru/web/css/animation-delay/index.html b/files/ru/web/css/animation-delay/index.html index 55e5c537eb..48c0109f18 100644 --- a/files/ru/web/css/animation-delay/index.html +++ b/files/ru/web/css/animation-delay/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/animation-delay

Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.

-

При указании отрицательного значения, анимация также начнется непременно, но ее воспроизведение начнется не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.

+

При указании отрицательного значения, анимация также начнётся непременно, но её воспроизведение начнётся не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.

{{cssinfo}}

diff --git a/files/ru/web/css/animation-direction/index.html b/files/ru/web/css/animation-direction/index.html index 52d0de3720..f07376ed79 100644 --- a/files/ru/web/css/animation-direction/index.html +++ b/files/ru/web/css/animation-direction/index.html @@ -7,9 +7,9 @@ translation_of: Web/CSS/animation-direction

Описание

-

CSS-свойство animation-direction определяет, должна ли анимация воспроизводиться вперед, назад или переменно вперед и назад.
+

CSS-свойство animation-direction определяет, должна ли анимация воспроизводиться вперёд, назад или переменно вперёд и назад.

- Также удобно использовать сокращенное свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.

+ Также удобно использовать сокращённое свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.

{{cssinfo}}

@@ -35,7 +35,7 @@ animation-direction: unset;
normal
-
Анимация проигрывается вперед каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.
+
Анимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.
reverse
Анимация проигрывается наоборот, с последнего положения до первого и потом снова сбрасывается в конечное положение и снова проигрывается.
alternate
diff --git a/files/ru/web/css/animation-duration/index.html b/files/ru/web/css/animation-duration/index.html index 7ca194463f..65e47aea2b 100644 --- a/files/ru/web/css/animation-duration/index.html +++ b/files/ru/web/css/animation-duration/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/animation-duration

Значение по умолчанию 0s определяет, что анимация не должна выполняться.

-

Удобно использовать сокращенное свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.

+

Удобно использовать сокращённое свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.

{{cssinfo}}

diff --git a/files/ru/web/css/animation-fill-mode/index.html b/files/ru/web/css/animation-fill-mode/index.html index 2549e3ac2d..855d8dad42 100644 --- a/files/ru/web/css/animation-fill-mode/index.html +++ b/files/ru/web/css/animation-fill-mode/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/animation-fill-mode

Описание

-

CSS свойство animation-fill-mode определяет, как нужно применять стили к объекту анимации до и после ее выполнения.

+

CSS свойство animation-fill-mode определяет, как нужно применять стили к объекту анимации до и после её выполнения.

{{cssinfo}}

@@ -32,7 +32,7 @@ animation-fill-mode: both, forwards, none;
none
-
Стили анимации не будут применены к элементу до и после ее выполнения.
+
Стили анимации не будут применены к элементу до и после её выполнения.
forwards
По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}: @@ -56,22 +56,22 @@ animation-fill-mode: both, forwards, none; - + - + - + - + @@ -114,8 +114,8 @@ animation-fill-mode: both, forwards, none;
<p>Наведите курсор мыши на серый блок</p>
 <div class="demo">
-  <div class="grows">Этот просто растет</div>
-  <div class="growsandstays">Этот растет и остается большим</div>
+  <div class="grows">Этот просто растёт</div>
+  <div class="growsandstays">Этот растёт и остаётся большим</div>
 </div>

CSS

diff --git a/files/ru/web/css/animation-iteration-count/index.html b/files/ru/web/css/animation-iteration-count/index.html index 653e843e65..9039dcfedb 100644 --- a/files/ru/web/css/animation-iteration-count/index.html +++ b/files/ru/web/css/animation-iteration-count/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/animation-iteration-count

CSS свойство animation-iteration-count определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.

-

Наиболее удобно использовать это свойство в сокращенном варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.

+

Наиболее удобно использовать это свойство в сокращённом варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.

{{cssinfo}}

@@ -36,7 +36,7 @@ animation-iteration-count: 2, 0, infinite;
infinite
Анимация повторяется бесконечно.
<number>
-
Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведет половину анимационного цикла).
+
Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведёт половину анимационного цикла).

Правила синтаксиса

diff --git a/files/ru/web/css/animation-name/index.html b/files/ru/web/css/animation-name/index.html index 2e6ff16b28..a81e2e82d6 100644 --- a/files/ru/web/css/animation-name/index.html +++ b/files/ru/web/css/animation-name/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/animation-name -

Часто удобно использовать сокращенное свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.

+

Часто удобно использовать сокращённое свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.

Синтаксис

@@ -40,7 +40,7 @@ animation-name: unset
none
Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.
{{cssxref("custom-ident","<custom-ident>")}}
-
Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учета регистра от a до z, цифр от 0 до 9, подчеркивания (_), и/или черты (-). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть none, unset, initial, или inherit в любой комбинации случаев.
+
Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учёта регистра от a до z, цифр от 0 до 9, подчёркивания (_), и/или черты (-). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть none, unset, initial, или inherit в любой комбинации случаев.

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

diff --git a/files/ru/web/css/animation-play-state/index.html b/files/ru/web/css/animation-play-state/index.html index 293765d1e9..fc92ee5605 100644 --- a/files/ru/web/css/animation-play-state/index.html +++ b/files/ru/web/css/animation-play-state/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/animation-play-state

Свойство animation-play-state определяет состояние анимации, паузы или проигрыша. Это можно использовать, чтобы определить текущее состояние анимации, например, в скриптах.

-

Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнется с начала.

+

Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнётся с начала.

{{cssinfo}}

diff --git a/files/ru/web/css/animation-timing-function/index.html b/files/ru/web/css/animation-timing-function/index.html index 5b4d0660b6..5e0e2e857d 100644 --- a/files/ru/web/css/animation-timing-function/index.html +++ b/files/ru/web/css/animation-timing-function/index.html @@ -50,7 +50,7 @@ translation_of: Web/CSS/animation-timing-function
<timingfunction>
-
Каждый {{cssxref("<timing-function>")}} представляет функцию расчета времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.
+
Каждый {{cssxref("<timing-function>")}} представляет функцию расчёта времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.

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

diff --git a/files/ru/web/css/appearance/index.html b/files/ru/web/css/appearance/index.html index 3ae986fbd9..b84ac013b4 100644 --- a/files/ru/web/css/appearance/index.html +++ b/files/ru/web/css/appearance/index.html @@ -2624,7 +2624,7 @@ div{ color: black;

Примеры

-

Нижеприведенный пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:

+

Нижеприведённый пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:

.exampleone {
   -moz-appearance: toolbarbutton;
diff --git a/files/ru/web/css/at-rule/index.html b/files/ru/web/css/at-rule/index.html
index 38cf88c874..f318aebe28 100644
--- a/files/ru/web/css/at-rule/index.html
+++ b/files/ru/web/css/at-rule/index.html
@@ -18,17 +18,17 @@ translation_of: Web/CSS/At-rule
 
  • {{cssxref("@charset")}} — Определяет кодировку символов, используемый таблицей стилей.
  • {{cssxref("@import")}} — Сообщает движку CSS включить внешнюю таблицу стилей.
  • -
  • {{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имен XML.
  • +
  • {{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имён XML.
  • Вложенные at-правила — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы.
      -
    • {{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенного с помощью медиавыражения.
    • +
    • {{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определённого с помощью медиавыражения.
    • {{cssxref("@supports")}} — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.
    • {{cssxref("@document")}} {{experimental_inline}} — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.
    • -
    • {{cssxref("@page")}} — Описывает аспект изменений макета, который будет применен при печати документа.
    • +
    • {{cssxref("@page")}} — Описывает аспект изменений макета, который будет применён при печати документа.
    • {{cssxref("@font-face")}} — Описывает аспект внешнего шрифта для загрузки.
    • {{cssxref("@keyframes")}} — Описывает аспект промежуточных шагов в последовательности анимации CSS.
    • {{cssxref("@viewport")}} {{experimental_inline}} — Описывает аспекты области просмотра для устройств с маленьким экраном. (в настоящее время на стадии разработки проекта)
    • -
    • {{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределенного набора стилей.
    • +
    • {{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределённого набора стилей.
    • {{cssxref("@font-feature-values")}} (плюс @swash, @ornaments, @annotation, @stylistic, @styleset и @character-variant)
      — Определите общие имена в {{cssxref("font-option-alternates")}} для функции, которая по-разному активируется в OpenType (at the Candidate Recommendation stage, but only implemented in Gecko as of writing)
    @@ -45,7 +45,7 @@ translation_of: Web/CSS/At-rule
  • {{cssxref("@document")}}. (deferred to Level 4 of CSS Spec)
-

Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределенное количество вложений.

+

Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределённое количество вложений.

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

diff --git a/files/ru/web/css/attribute_selectors/index.html b/files/ru/web/css/attribute_selectors/index.html index 2b8ac3861c..f2affc9d98 100644 --- a/files/ru/web/css/attribute_selectors/index.html +++ b/files/ru/web/css/attribute_selectors/index.html @@ -15,15 +15,15 @@ translation_of: Web/CSS/Attribute_selectors
[attr=value]
Обозначает элемент с именем атрибута attr и значением в точности совпадающим с value.
[attr~=value]
-
Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value
+
Обозначает элемент с именем атрибута attr значением которого является набор слов разделённых пробелами, одно из которых в точности равно value
[attr|=value]
Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подходом.
[attr^=value]
Обозначает элемент с именем атрибута attr значение которого начинается с "value"
[attr$=value]
-
Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"
+
Обозначает элемент с именем атрибута attr чьё значение заканчивается на "value"
[attr*=value]
-
Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.
+
Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки "value" как подстроки.

Пример

@@ -31,13 +31,13 @@ translation_of: Web/CSS/Attribute_selectors
/* Все span с атрибутом "lang" будут жирными */
 span[lang] {font-weight:bold;}
 
-/* Все span в Португалии будут зелеными */
+/* Все span в Португалии будут зелёными */
 span[lang="pt"] {color:green;}
 
 /* Все span с американским английским будут синими */
 span[lang~="en-us"] {color: blue;}
 
-/* Любые span на китайском языке будут красными, как на упрощенном китайском (zh-CN) так и на традиционном (zh-TW) */
+/* Любые span на китайском языке будут красными, как на упрощённом китайском (zh-CN) так и на традиционном (zh-TW) */
 span[lang|="zh"] {color: red;}
 
 /* Все внутренние ссылки будут иметь золотой фон */
diff --git a/files/ru/web/css/backdrop-filter/index.html b/files/ru/web/css/backdrop-filter/index.html
index b971c15abd..48b9e9cc09 100644
--- a/files/ru/web/css/backdrop-filter/index.html
+++ b/files/ru/web/css/backdrop-filter/index.html
@@ -41,9 +41,9 @@ translation_of: Web/CSS/backdrop-filter
 
 
none
-
Фильтр отключен для фона
+
Фильтр отключён для фона
<filter-function-list>
-
Перечень фильтров, разделенных пробелами функций {{cssxref("<filter-function>")}} или SVG фильтра, которые применены для фона.
+
Перечень фильтров, разделённых пробелами функций {{cssxref("<filter-function>")}} или SVG фильтра, которые применены для фона.

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

diff --git a/files/ru/web/css/backface-visibility/index.html b/files/ru/web/css/backface-visibility/index.html index f6bf261e3b..870c9de709 100644 --- a/files/ru/web/css/backface-visibility/index.html +++ b/files/ru/web/css/backface-visibility/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/backface-visibility ---
{{CSSRef}}{{SeeCompatTable}}
-

Свойство backface-visibility определяет, видно ли заднюю грань элемента, когда он повернут к пользователю.

+

Свойство backface-visibility определяет, видно ли заднюю грань элемента, когда он повёрнут к пользователю.

{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}
@@ -30,9 +30,9 @@ backface-visibility: unset;
visible
-
Задняя сторона видна, когда повернута к пользователю.
+
Задняя сторона видна, когда повёрнута к пользователю.
hidden
-
Задняя поверхность скрыта, что делает элемент невидимым, когда он повернутый от пользователя.
+
Задняя поверхность скрыта, что делает элемент невидимым, когда он повёрнутый от пользователя.

Официальный синтаксис

diff --git a/files/ru/web/css/background-attachment/index.html b/files/ru/web/css/background-attachment/index.html index c88a2fc71d..d16e4fe743 100644 --- a/files/ru/web/css/background-attachment/index.html +++ b/files/ru/web/css/background-attachment/index.html @@ -28,7 +28,7 @@ background-attachment: inherit; background-attachment: initial; background-attachment: unset;
-

Значение свойства background-attachment задается одним из ключевых значений из списка ниже.

+

Значение свойства background-attachment задаётся одним из ключевых значений из списка ниже.

Значения

@@ -38,7 +38,7 @@ background-attachment: unset;
local
Фон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.
scroll
-
Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплен к границе элемента.)
+
Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплён к границе элемента.)

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

@@ -72,7 +72,7 @@ background-attachment: unset;

Поддержка нескольких фоновых изображений

-

Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные <attachment> для каждого фона, разделенных запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.

+

Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные <attachment> для каждого фона, разделённых запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.

HTML

@@ -118,7 +118,7 @@ background-attachment: unset; - + diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html index e55a99aa83..405a76ed14 100644 --- a/files/ru/web/css/background-blend-mode/index.html +++ b/files/ru/web/css/background-blend-mode/index.html @@ -29,7 +29,7 @@ background-blend-mode: unset;
<blend-mode>
-
{{cssxref("<blend-mode>")}} обозначающий режим наложения, который применен. Может быть несколько значений, разделенных запятыми.
+
{{cssxref("<blend-mode>")}} обозначающий режим наложения, который применён. Может быть несколько значений, разделённых запятыми.

Пример

diff --git a/files/ru/web/css/background-clip/index.html b/files/ru/web/css/background-clip/index.html index ddc05598eb..7c7f5bc3dc 100644 --- a/files/ru/web/css/background-clip/index.html +++ b/files/ru/web/css/background-clip/index.html @@ -112,7 +112,7 @@ background-clip: unset;

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

    -
  • Свойство {{cssxref("clip-path")}} создает область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.
  • +
  • Свойство {{cssxref("clip-path")}} создаёт область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.
  • Свойства фона: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}
  • Введение в блочную модель CSS
diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html index 095ff8ee1e..cdcf7b8c79 100644 --- a/files/ru/web/css/background-image/index.html +++ b/files/ru/web/css/background-image/index.html @@ -14,9 +14,9 @@ translation_of: Web/CSS/background-image

Свойство CSS  background-image устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.

-

Границы {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и ее границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.

+

Границы {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.

-

Если указанное изображение не может быть нарисовано (например, когда файл, определенный указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none.

+

Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none.

Обратите внимание: Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.
@@ -36,7 +36,7 @@ background-image: inherit;
none
Это ключевое слово обозначает отсутствие изображений.
<image>
-
{{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделенных запятыми, поскольку поддерживается несколько фонов.
+
{{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживается несколько фонов.

Официальный синтаксис

diff --git a/files/ru/web/css/background-position-x/index.html b/files/ru/web/css/background-position-x/index.html index 3aaa1af51e..ffebd13721 100644 --- a/files/ru/web/css/background-position-x/index.html +++ b/files/ru/web/css/background-position-x/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/background-position-x -

Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} примененными после его объявления.

+

Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} применёнными после его объявления.

Синтаксис

@@ -41,7 +41,7 @@ background-position-x: initial; background-position-x: unset; -

Свойство background-position-x принимает одно или несколько значений, разделенных запятыми.

+

Свойство background-position-x принимает одно или несколько значений, разделённых запятыми.

Значения

diff --git a/files/ru/web/css/background-position/index.html b/files/ru/web/css/background-position/index.html index dcd216c010..97620ff7d2 100644 --- a/files/ru/web/css/background-position/index.html +++ b/files/ru/web/css/background-position/index.html @@ -43,7 +43,7 @@ background-position: initial; background-position: unset; -

Свойство background-position указывается в виде одного или нескольких значений <position>, разделенных запятыми.

+

Свойство background-position указывается в виде одного или нескольких значений <position>, разделённых запятыми.

Значения

@@ -83,7 +83,7 @@ background-position: unset;

Примеры

-

Каждый из этих примеров использует свойство {{cssxref("background")}} для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.

+

Каждый из этих примеров использует свойство {{cssxref("background")}} для создания жёлтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.

HTML

@@ -102,7 +102,7 @@ div { margin-bottom: 12px; } -/* В этих примерах используется сокращенное свойство 'background' */ +/* В этих примерах используется сокращённое свойство 'background' */ .exampleone { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat; } diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html index 76eb8e36a1..ad4d0bffd0 100644 --- a/files/ru/web/css/background-repeat/index.html +++ b/files/ru/web/css/background-repeat/index.html @@ -177,7 +177,7 @@ div { - + diff --git a/files/ru/web/css/background-size/index.html b/files/ru/web/css/background-size/index.html index f93b74acd7..71c948b9e4 100644 --- a/files/ru/web/css/background-size/index.html +++ b/files/ru/web/css/background-size/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/background-size

Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.

-
Предупреждение: Если значение этого свойства не задано в сокращенном свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства background-size, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращенного свойства.
+
Предупреждение: Если значение этого свойства не задано в сокращённом свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства background-size, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.

{{cssinfo}}

@@ -68,7 +68,7 @@ background-size: unset;

Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.

-
Предупреждение: Это не определенное в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.
+
Предупреждение: Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.

Визуализированный размер фонового изображения затем вычисляется следующим способом:

@@ -76,14 +76,14 @@ background-size: unset;
Если оба атрибута в background-size заданы и различны от auto:
Фоновое изображение отображается в указанном размере.
Если background-size содержит contain или cover:
-
Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает ее. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.
+
Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.
Если background-size установлен как auto или auto auto:
-
Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан contain. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определенным этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.
+
Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан contain. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.
Если background-size содержит один атрибут auto и один не-auto:
Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.
-

Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, еще не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.

+

Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.

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

@@ -95,7 +95,7 @@ background-size: unset;

Замечания

-

Если вы указываете градиент в качестве фона и указали background-size, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задается с использованием только значения ширины (для примера, background-size: 50%). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения.

+

Если вы указываете градиент в качестве фона и указали background-size, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, background-size: 50%). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения.

.bar {
        width: 50px; height: 100px;
diff --git a/files/ru/web/css/background/index.html b/files/ru/web/css/background/index.html
index 7b39d9589c..fafdb12cc3 100644
--- a/files/ru/web/css/background/index.html
+++ b/files/ru/web/css/background/index.html
@@ -5,7 +5,7 @@ translation_of: Web/CSS/background
 ---
 
{{CSSRef("CSS Background")}}
-
Сокращенное CSS свойство background  устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.
+
Сокращённое CSS свойство background  устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.
@@ -15,7 +15,7 @@ translation_of: Web/CSS/background

Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, и {{cssxref("background-attachment")}}.

-

Как и во всех сокращенных свойствах, любые пропущенные вложенные значения будут установлены в свои изначальные значения.

+

Как и во всех сокращённых свойствах, любые пропущенные вложенные значения будут установлены в свои изначальные значения.

@@ -54,7 +54,7 @@ background: no-repeat center/80% url("../img/image.png");
<repeat-style>
Смотри {{cssxref("background-repeat")}}
<bg-size>
-
Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <position>, разделенного символом '/'.
+
Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <position>, разделённого символом '/'.

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

diff --git a/files/ru/web/css/block-size/index.html b/files/ru/web/css/block-size/index.html index 413705bb6d..c7d9f6ada4 100644 --- a/files/ru/web/css/block-size/index.html +++ b/files/ru/web/css/block-size/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/block-size ---
{{CSSRef}}{{SeeCompatTable}}
-

Свойство block-size CSS задает горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.

+

Свойство block-size CSS задаёт горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.

/* <length> values */
 block-size: 300px;
@@ -37,7 +37,7 @@ block-size: initial;
 block-size: unset;
 
-

Если режим записи (writing mode) ориентирован по вертикали, то значение block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задает другое измерение элемента.

+

Если режим записи (writing mode) ориентирован по вертикали, то значение block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задаёт другое измерение элемента.

{{cssinfo}}

@@ -92,7 +92,7 @@ block-size: unset;

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

- +

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

diff --git a/files/ru/web/css/border-image-slice/index.html b/files/ru/web/css/border-image-slice/index.html index 9841ac6e97..4a7890a181 100644 --- a/files/ru/web/css/border-image-slice/index.html +++ b/files/ru/web/css/border-image-slice/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/border-image-slice

Описание

-

CSS свойство border-image-slice  делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путем указания 4 внутренних смещений.

+

CSS свойство border-image-slice  делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesЧетыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.

diff --git a/files/ru/web/css/border-radius/index.html b/files/ru/web/css/border-radius/index.html index 3a597a4b3b..d08dd0e681 100644 --- a/files/ru/web/css/border-radius/index.html +++ b/files/ru/web/css/border-radius/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-radius ---
{{CSSRef}}
-

border-radius — это CSS-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закругленность каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.

+

border-radius — это CSS-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.

{{EmbedInteractiveExample("pages/css/border-radius.html")}}
@@ -22,7 +22,7 @@ translation_of: Web/CSS/border-radius

Свойство border-radius не применяется к элементам таблицы, когда свойство {{Cssxref ("border-collapse")}} имеет значение collapse.

-
Замечание: Как и с любым другим сокращенным свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.
+
Замечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.

Синтаксис

@@ -39,7 +39,7 @@ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; -/* Синтаксис из двух радиусов также может применяться ко всем четырем углам */ +/* Синтаксис из двух радиусов также может применяться ко всем четырём углам */ /* (первые значения радиуса) /радиус */ border-radius: 10px 5% / 20px; diff --git a/files/ru/web/css/border-width/index.html b/files/ru/web/css/border-width/index.html index 05b2360748..19fe6770ab 100644 --- a/files/ru/web/css/border-width/index.html +++ b/files/ru/web/css/border-width/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/border-width

Summary

-

CSS свойство {{cssxref("border-width")}} определяет ширину рамки элемента. Но обычно ее задают не отдельно, а в составе свойства {{cssxref("border")}}.

+

CSS свойство {{cssxref("border-width")}} определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства {{cssxref("border")}}.

{{cssinfo}}

diff --git a/files/ru/web/css/border/index.html b/files/ru/web/css/border/index.html index 6ae7e6460b..93ce8b8020 100644 --- a/files/ru/web/css/border/index.html +++ b/files/ru/web/css/border/index.html @@ -25,7 +25,7 @@ border: medium dashed green;

 

-

Замечание: Рекомендуется использовать border, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}  принимают до четырех значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырех границ.

+

Замечание: Рекомендуется использовать border, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}  принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.

Синтаксис

diff --git a/files/ru/web/css/bottom/index.html b/files/ru/web/css/bottom/index.html index c0190058df..5ecde8ca47 100644 --- a/files/ru/web/css/bottom/index.html +++ b/files/ru/web/css/bottom/index.html @@ -150,7 +150,7 @@ div {

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

- +

{{Compat("css.properties.bottom")}}

diff --git a/files/ru/web/css/box-shadow/index.html b/files/ru/web/css/box-shadow/index.html index b50dded28d..3366118622 100644 --- a/files/ru/web/css/box-shadow/index.html +++ b/files/ru/web/css/box-shadow/index.html @@ -53,7 +53,7 @@ box-shadow: unset;
  • Если задано только два значения, они интерпретируется как <offset-x><offset-y> values.
  • Если задано третье значение, оно понимается как <blur-radius>.
  • -
  • Если задано четвертое значение, оно интерпретируется <spread-radius>.
  • +
  • Если задано четвёртое значение, оно интерпретируется <spread-radius>.
  • Дополнительно, можно задать ключевое слово inset.
  • diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html index f0d5760e9e..72dda8d87a 100644 --- a/files/ru/web/css/box-sizing/index.html +++ b/files/ru/web/css/box-sizing/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/box-sizing
    content-box
    -
    Это значение по умолчанию, определенное в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box {width: 350px; border: 10px solid black;}  будет иметь ширину 370 пикселей.
    +
    Это значение по умолчанию, определённое в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box {width: 350px; border: 10px solid black;}  будет иметь ширину 370 пикселей.
    Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)
    diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html index 5dd08d22f0..550760de0a 100644 --- a/files/ru/web/css/calc()/index.html +++ b/files/ru/web/css/calc()/index.html @@ -44,7 +44,7 @@ translation_of: Web/CSS/calc()

    Позиционирование объекта в окне с помощью отступа

    -

    calc() делает простым позиционирование объекта с помощью отступа. В этом примере создается баннер занимающий в ширину все окно с отступами по краям в 40px. 

    +

    calc() делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. 

    .banner {
       position: absolute;
    diff --git a/files/ru/web/css/class_selectors/index.html b/files/ru/web/css/class_selectors/index.html
    index 714ac4588e..99c15c63d6 100644
    --- a/files/ru/web/css/class_selectors/index.html
    +++ b/files/ru/web/css/class_selectors/index.html
    @@ -7,7 +7,7 @@ translation_of: Web/CSS/Class_selectors
     
     

    Краткое описание

    -

    В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделенный пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведенному в селекторе.

    +

    В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделённый пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведённому в селекторе.

    Синтаксис

    diff --git a/files/ru/web/css/clear/index.html b/files/ru/web/css/clear/index.html index 241ee74c7a..146132dfe3 100644 --- a/files/ru/web/css/clear/index.html +++ b/files/ru/web/css/clear/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/clear

    Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же контексте форматирования блоков

    -

    Заметка: Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется clearfix, и один из способов сделать это - это заменит clear замененный {{cssxref("::after")}} псевдоэлемент на нем.

    +

    Заметка: Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется clearfix, и один из способов сделать это - это заменит clear заменённый {{cssxref("::after")}} псевдоэлемент на нем.

    #container::after {
       content: "";
    @@ -224,7 +224,7 @@ p {
     
     

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

    - +

    {{Compat("css.properties.clear")}}

    diff --git a/files/ru/web/css/clip-path/index.html b/files/ru/web/css/clip-path/index.html index 69fe7f99ed..55a8b1259a 100644 --- a/files/ru/web/css/clip-path/index.html +++ b/files/ru/web/css/clip-path/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/clip-path ---
    {{CSSRef}}{{SeeCompatTable}}
    -

    CSS свойство clip-path создает ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (circle()).

    +

    CSS свойство clip-path создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (circle()).

    Историческая справка: Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} .

    @@ -456,14 +456,14 @@ svg text.em {
    inset(), circle(), ellipse(), polygon()
    Функция {{cssxref("<basic-shape>")}}. Размер и положение области определяется значением <geometry-box>. Если геометрия не определена,border-box будет использоваться в качестве блока.
    <geometry-box>
    -
    Если определен в комбинации с <basic-shape>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений: +
    Если определён в комбинации с <basic-shape>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений:
    fill-box
    Использует границы объекта в качестве базовой области.
    stroke-box
    Использует stroke bounding box в качестве базовой области.
    view-box
    -
    Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом viewBox и ширина и высота базового блока устанавливаются равными значениям атрибута viewBox.​​​​​​​
    +
    Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определён для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом viewBox и ширина и высота базового блока устанавливаются равными значениям атрибута viewBox.​​​​​​​
    margin-box
    Использует margin box в качестве базового блока.
    border-box
    diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html index 08edbe380a..9af9b77755 100644 --- a/files/ru/web/css/color_value/index.html +++ b/files/ru/web/css/color_value/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/color_value

    В <color> может быть определена любым из следующих способов can.

      -
    • Использование или подключенного свойства веденного в параметр (например, blue или transparent)
    • +
    • Использование или подключённого свойства ведённого в параметр (например, blue или transparent)
    • Использование кубической системы координат RGB (via the #-hexadecimal or the rgb() and rgba() functional notations)Цветовая модель представлена виде куба
    • Использование цилиндрической системы координат HSL (через функциональные обозначения hsl() и hsla()
    @@ -21,7 +21,7 @@ translation_of: Web/CSS/color_value

    Синтаксис 

    -

    Для типа данных задается <color>  с помощью одного из следующих параметров.

    +

    Для типа данных задаётся <color>  с помощью одного из следующих параметров.

    Заметка: значения <color> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили устройств вывода.

    @@ -29,12 +29,12 @@ translation_of: Web/CSS/color_value

    Ключевые цвета

    -

    Ключевые слова для цвета - это идентификаторы без учета регистра, представляющие определенный цвет, например red, blue, black или lightseagreen. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имен. 

    +

    Ключевые слова для цвета - это идентификаторы без учёта регистра, представляющие определённый цвет, например red, blue, black или lightseagreen. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имен. 

    Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:

      -
    • HTML распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определенный алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и SVG.
    • +
    • HTML распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определённый алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и SVG.
    • В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.
    • Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.
    • Несколько ключевых слов являются псевдонимами друг для друга: @@ -977,11 +977,11 @@ translation_of: Web/CSS/color_value

      Ключевое слово transparent представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически transparent - это ярлык для rgba (0,0,0,0).

      -

      Примечание по совместимости: чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что transparent должен быть вычислен в Альфа-предварительно умноженном цветовом пространстве. Однако имейте в виду, что старые браузеры могут рассматривать его как черный с Альфа-значением 0.

      +

      Примечание по совместимости: чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что transparent должен быть вычислен в Альфа-предварительно умноженном цветовом пространстве. Однако имейте в виду, что старые браузеры могут рассматривать его как чёрный с Альфа-значением 0.

      -

      Историческая запись: transparent не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <color> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, transparent был переопределен как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <color>.

      +

      Историческая запись: transparent не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <color> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, transparent был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <color>.

      currentColor ключевое слово

      @@ -1002,7 +1002,7 @@ translation_of: Web/CSS/color_value

      RGB цвет

      -

      Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелеными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.

      +

      Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелёными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.

      Синтаксис

      @@ -1014,13 +1014,13 @@ translation_of: Web/CSS/color_value
      Шестнадцатеричное представление: #RRGGBB[AA]
      -
      R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F). A is optional. For example, #ff0000 is equivalent to #ff0000ffR (красный), G (зеленый), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, #ff0000 эквивалентно #ff0000ff.
      +
      R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F). A is optional. For example, #ff0000 is equivalent to #ff0000ffR (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, #ff0000 эквивалентно #ff0000ff.
      Шестнадцатеричное представление: #RGB[A]
      -
      R (красный), G (зеленый), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трехзначная нотация (#RGB) является более короткой версией шестизначной формы (#RRGGBB). Например, #f09 имеет тот же цвет, что и #ff0099. Кроме того, четырехзначная нотация RGB (#RGB) является более короткой версией восьмизначной формы (#RRGGBBAA). Например, #0f38 имеет тот же цвет, что и #00ff3388.
      +
      R (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трёхзначная нотация (#RGB) является более короткой версией шестизначной формы (#RRGGBB). Например, #f09 имеет тот же цвет, что и #ff0099. Кроме того, четырёхзначная нотация RGB (#RGB) является более короткой версией восьмизначной формы (#RRGGBBAA). Например, #0f38 имеет тот же цвет, что и #00ff3388.
      Функциональная нотация: rgb(R, G, B[, A]) или rgba(R, G, B, A)
      -
      R (красный), G (зеленый) и B (синий) могут быть либо {{cssxref("<number>")}}s, либо {{cssxref("<percentage>")}}s, где число 255 соответствует 100%. А (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).
      +
      R (красный), G (зелёный) и B (синий) могут быть либо {{cssxref("<number>")}}s, либо {{cssxref("<percentage>")}}s, где число 255 соответствует 100%. А (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).
      Функциональная нотация: rgb(R G B[ A]) or rgba(R G B A)
      -
      CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.
      +
      CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.

      Пример

      @@ -1068,20 +1068,20 @@ rgb(1e2, .5e1, .5e0, +.25e2%)
      RGB вариации прозрачности
      /* Шестнадцатеричный синтаксис */
      -#3a30                    /*   0% непрозрачный зеленый цвет */ 
      -#3A3F                    /* полный непрозрачный зеленый цвет */ 
      -#33aa3300                /*   0% непрозрачный зеленый цвет */ 
      -#33AA3380                /* 50% непрозрачный зеленый цвет */ 
      +#3a30                    /*   0% непрозрачный зелёный цвет */ 
      +#3A3F                    /* полный непрозрачный зелёный цвет */ 
      +#33aa3300                /*   0% непрозрачный зелёный цвет */ 
      +#33AA3380                /* 50% непрозрачный зелёный цвет */ 
       
       /* Функциональный синтаксис */
      -rgba(51, 170, 51, .1)    /* непрозрачный зеленый цвет на 10%  */ 
      -rgba(51, 170, 51, .4)    /* непрозрачный зеленый цвет на */ 
      -rgba(51, 170, 51, .7)    /* непрозрачный зеленый цвет на 70% */ 
      -rgba(51, 170, 51,  1)    /* полный непрозрачный зеленый цвет  */ 
      +rgba(51, 170, 51, .1)    /* непрозрачный зелёный цвет на 10%  */ 
      +rgba(51, 170, 51, .4)    /* непрозрачный зелёный цвет на */ 
      +rgba(51, 170, 51, .7)    /* непрозрачный зелёный цвет на 70% */ 
      +rgba(51, 170, 51,  1)    /* полный непрозрачный зелёный цвет  */ 
       
       /* Синтаксис пробелов */
      -rgba(51 170 51 / 0.4)    /* непрозрачный зеленый цвет  на 40%*/ 
      -rgba(51 170 51 / 40%)    /* непрозрачный зеленый цвет на 40% */
      +rgba(51 170 51 / 0.4)    /* непрозрачный зелёный цвет  на 40%*/ 
      +rgba(51 170 51 / 40%)    /* непрозрачный зелёный цвет на 40% */
       
       /* Функциональный синтаксис со значением floats */
       rgba(255, 0, 153.6, 1)
      @@ -1092,7 +1092,7 @@ rgba(1e2, .5e1, .5e0, +.25e2%)
       
       

      Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.

      -

      Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и легкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).

      +

      Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и лёгкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).

      Синтаксис

      @@ -1104,14 +1104,14 @@ rgba(1e2, .5e1, .5e0, +.25e2%)
      Функциональная нотация: hsl(H, S, L[, A]) илиhsla(H, S, L, A)
      -
      H  (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в degS, rads, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=0 deg=360 град, с другими цветами, распространенными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обертывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.
      -
      S (насыщенность) и L (легкость) являются процентами. 100% насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). 100% легкость белый, 0% легкость черный, и 50% легкость “нормально.”
      +
      H  (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в degS, rads, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=0 deg=360 град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.
      +
      S (насыщенность) и L (лёгкость) являются процентами. 100% насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). 100% лёгкость белый, 0% лёгкость чёрный, и 50% лёгкость “нормально.”
      A (alpha) can be a {{cssxref("<number>")}} between 0 and 1, or a {{cssxref("<percentage>")}}, where the number 1 corresponds to 100% (full opacity). A (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).
      Функциональная нотация: hsl(H S L[ A]) or hsla(H S L A)
      -
      CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.
      +
      CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.

      Examples

      @@ -1212,7 +1212,7 @@ hsl(270 60% 50% / 15%)
    alternateчетноечётное 0% или from
    alternateнечетноенечётное 100% или to
    alternate-reverseчетноечётное 100% или to
    alternate-reverseнечетноенечётное 0% или from
    {{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}} {{Spec2('CSS3 Backgrounds')}}Сокращенное свойство было расширено для поддержки нескольких фонов и значения local.Сокращённое свойство было расширено для поддержки нескольких фонов и значения local.
    {{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}
    {{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}} {{Spec2('CSS3 Backgrounds')}}Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов space и round, а также для фона на элементе на уровне строки путем точного определения области рисования фона.Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов space и round, а также для фона на элементе на уровне строки путём точного определения области рисования фона.
    {{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}
    -
    Более светлая и более темная зелень
    +
    Более светлая и более тёмная зелень
    @@ -1328,17 +1328,17 @@ hsla(240 100% 50% / 5%)
    Background
    Фон рабочего стола.
    ButtonFace
    -
    Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом ButtonText цвет переднего плана.
    +
    Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом ButtonText цвет переднего плана.
    ButtonHighlight
    -
    Цвет границы, обращенной к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.
    +
    Цвет границы, обращённой к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.
    ButtonShadow
    -
    Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трехмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.
    +
    Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трёхмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.
    ButtonText
    Следует использовать с ButtonFace или ThreeDFace цвет фона.
    CaptionText
    Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона ActiveCaption.
    GrayText
    -
    Серый (отключен) текст.
    +
    Серый (отключён) текст.
    Highlight
    Элемент(ы), выбранный в элементе управления. Следует использовать с HighlightText текста цветом переднего плана.
    HighlightText
    @@ -1360,15 +1360,15 @@ hsla(240 100% 50% / 5%)
    Scrollbar
    Цвет фона полос прокрутки.
    ThreeDDarkShadow
    -
    Цвет более темной (как правило, внешней) из двух границ от источника света для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
    +
    Цвет более тёмной (как правило, внешней) из двух границ от источника света для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
    ThreeDFace
    -
    Should be used with the ButtonText foreground color. Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.
    +
    Should be used with the ButtonText foreground color. Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.
    ThreeDHighlight
    -
    Цвет более светлого (обычно внешнего) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
    +
    Цвет более светлого (обычно внешнего) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
    ThreeDLightShadow
    -
    Цвет более темной (обычно внутренней) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
    +
    Цвет более тёмной (обычно внутренней) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
    ThreeDShadow
    -
    Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.
    +
    Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
    Window
    Фон окна. Следует использовать с WindowText цвет переднего плана.
    WindowFrame
    @@ -1383,9 +1383,9 @@ hsla(240 100% 50% / 5%)
    -moz-ButtonDefault
    Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна.
    -moz-ButtonHoverFace
    -
    Цвет фона кнопки, на которую наведен указатель мыши (который будет Трехлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.
    +
    Цвет фона кнопки, на которую наведён указатель мыши (который будет Трёхлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.
    -moz-ButtonHoverText
    -
    Цвет текста кнопки, на которую наведен указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с--moz-ButtonHoverFace background color.
    +
    Цвет текста кнопки, на которую наведён указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с--moz-ButtonHoverFace background color.
    -moz-CellHighlight
    Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана -moz-CellHighlightText. См. также-moz-html-CellHighlight.
    -moz-CellHighlightText
    @@ -1400,7 +1400,7 @@ hsla(240 100% 50% / 5%)
    Цвет текста для диалоговых окон. Должен использоваться с цветом фона -moz-Dialog.
    -moz-dragtargetzone
    -moz-EvenTreeRow
    -
    {{gecko_minversion_inline("1.9")}} цвет фона для четных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте-moz-поле. См. также -moz-OddTreeRow.
    +
    {{gecko_minversion_inline("1.9")}} цвет фона для чётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте-moz-поле. См. также -moz-OddTreeRow.
    -moz-Field
    Text field background color. Should be used with the -moz-FieldText foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана-moz-FieldText.
    -moz-FieldText
    @@ -1435,7 +1435,7 @@ hsla(240 100% 50% / 5%)
    -moz-nativehyperlinktext
    {{Gecko_minversion_inline ("1.9.1")}} цвет гиперссылки платформы по умолчанию.
    -moz-OddTreeRow
    -
    {{gecko_minversion_inline("1.9")}} цвет фона для нечетных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте -moz-Field. Смотрите также -moz-EvenTreeRow.
    +
    {{gecko_minversion_inline("1.9")}} цвет фона для нечётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте -moz-Field. Смотрите также -moz-EvenTreeRow.
    -moz-win-communicationstext
    {{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с {{cssxref ("- moz-appearance")}}:- moz-win-communications-toolbox;.
    -moz-win-mediatext
    @@ -1445,7 +1445,7 @@ hsla(240 100% 50% / 5%) Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д.
    -moz-win-accentcolortext
    {{gecko_minversion_inline ("56")}}
    - Используется для доступа к цвету текста, размещенного над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.
    + Используется для доступа к цвету текста, размещённого над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.

    Расширения Цветовых Предпочтений Mozilla

    @@ -1460,16 +1460,16 @@ hsla(240 100% 50% / 5%)
    -moz-hyperlinktext
    Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.
    -moz-visitedhyperlinktext
    -
    Предпочтения пользователя для цвета текста посещенных ссылок. Должен использоваться с цветом фона документа по умолчанию.
    +
    Предпочтения пользователя для цвета текста посещённых ссылок. Должен использоваться с цветом фона документа по умолчанию.

    Интерполяция

    -

    В анимации и градиентах значения <color> интерполируются на каждый из их красных, зеленых и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени.

    +

    В анимации и градиентах значения <color> интерполируются на каждый из их красных, зелёных и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени.

    Соображения доступности

    -

    Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определенного сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.

    +

    Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.

    Технические характеристики

    @@ -1485,7 +1485,7 @@ hsla(240 100% 50% / 5%)
    - + @@ -1507,7 +1507,7 @@ hsla(240 100% 50% / 5%)

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

    - +

    {{Compat("css.properties.color")}}

    diff --git a/files/ru/web/css/column-count/index.html b/files/ru/web/css/column-count/index.html index b0f17d4069..633d6a186b 100644 --- a/files/ru/web/css/column-count/index.html +++ b/files/ru/web/css/column-count/index.html @@ -3,7 +3,7 @@ title: column-count slug: Web/CSS/column-count tags: - Свойство - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-count ---
    {{CSSRef}}
    diff --git a/files/ru/web/css/column-rule-color/index.html b/files/ru/web/css/column-rule-color/index.html index b0b7cb3ade..3019c7e417 100644 --- a/files/ru/web/css/column-rule-color/index.html +++ b/files/ru/web/css/column-rule-color/index.html @@ -2,7 +2,7 @@ title: column-rule-color slug: Web/CSS/column-rule-color tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule-color ---
    {{CSSRef}}
    diff --git a/files/ru/web/css/column-rule-style/index.html b/files/ru/web/css/column-rule-style/index.html index 70816fe051..a012d070de 100644 --- a/files/ru/web/css/column-rule-style/index.html +++ b/files/ru/web/css/column-rule-style/index.html @@ -2,7 +2,7 @@ title: column-rule-style slug: Web/CSS/column-rule-style tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule-style ---
    {{ CSSRef}}
    diff --git a/files/ru/web/css/column-rule/index.html b/files/ru/web/css/column-rule/index.html index d590860976..d48f043c0d 100644 --- a/files/ru/web/css/column-rule/index.html +++ b/files/ru/web/css/column-rule/index.html @@ -2,7 +2,7 @@ title: column-rule slug: Web/CSS/column-rule tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule ---
    {{CSSRef}}
    @@ -13,7 +13,7 @@ translation_of: Web/CSS/column-rule -

    Эта краткая форма записи задает индивидуальные  column-rule-* свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.

    +

    Эта краткая форма записи задаёт индивидуальные  column-rule-* свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.

    Примечание: Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).

    @@ -32,13 +32,13 @@ column-rule: initial; column-rule: unset; -

    Свойство column-rule указывается в виде одного, двух или трех значений, перечисленных ниже, в любом порядке.

    +

    Свойство column-rule указывается в виде одного, двух или трёх значений, перечисленных ниже, в любом порядке.

    Значения

    <'column-rule-width'>
    -
    {{cssxref("<length>")}} или одно из трех ключевых свойств, thin, medium, или thick. См. подробно -  {{cssxref("border-width")}}.
    +
    {{cssxref("<length>")}} или одно из трёх ключевых свойств, thin, medium, или thick. См. подробно -  {{cssxref("border-width")}}.
    <'column-rule-style'>
    См. подробно {{cssxref("border-style")}} .
    <'column-rule-color'>
    diff --git a/files/ru/web/css/column_combinator/index.html b/files/ru/web/css/column_combinator/index.html index 9fad1a33a2..171d4fd7bc 100644 --- a/files/ru/web/css/column_combinator/index.html +++ b/files/ru/web/css/column_combinator/index.html @@ -2,7 +2,7 @@ title: Комбинатор столбцов slug: Web/CSS/Column_combinator tags: - - Верстка + - Вёрстка - Селекторы translation_of: Web/CSS/Column_combinator --- diff --git a/files/ru/web/css/containing_block/index.html b/files/ru/web/css/containing_block/index.html index fe3fdd2254..644b4d4d54 100644 --- a/files/ru/web/css/containing_block/index.html +++ b/files/ru/web/css/containing_block/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/Containing_block

    На размер и позицию элемента часто влияет его содержащий блок (containing block). Чаще всего содержащим блоком является content область (content area) ближайшего блочного (block-level) предка, но это не всегда так. В этой статье мы рассмотрим факторы, которые определяют содержащий блок элемента.

    -

    Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создает бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:

    +

    Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создаёт бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:

    1. Content область или область контента (content area).
    2. @@ -33,15 +33,15 @@ translation_of: Web/CSS/Containing_block

      Определение содержащего блока элемента полностью зависит от значения свойства {{cssxref("position")}}:

        -
      1. Если свойство position имеет значение  static, relative, или sticky, то содержащий блок задается краем content бокса ближайшего предка, который: +
      2. Если свойство position имеет значение  static, relative, или sticky, то содержащий блок задаётся краем content бокса ближайшего предка, который:
        • либо является блочным контейнером (block container), например, если его свойство display имеет значение inline-block, block или list-item.
        • либо устанавливает контекст форматирования (formatting context), например, контейнер таблицы (table container), flex-контейнер (flex container), grid-контейнер (grid container) или блочный контейнер (block container).
      3. -
      4. Если свойство position имеет значение absolute, то содержащий блок задается краем padding бокса ближайшего предка, у которого свойство position имеет значение отличное от static (fixed, absolute, relative или sticky).
      5. -
      6. Если свойство position имеет значение fixed, то содержащий блок задается: +
      7. Если свойство position имеет значение absolute, то содержащий блок задаётся краем padding бокса ближайшего предка, у которого свойство position имеет значение отличное от static (fixed, absolute, relative или sticky).
      8. +
      9. Если свойство position имеет значение fixed, то содержащий блок задаётся:
        • в случае непрерывного медиа (continuous media) областью просмотра (вьюпорт - {{glossary("viewport")}});
        • в случае страничного медиа (paged media) областью страницы.
        • diff --git a/files/ru/web/css/content/index.html b/files/ru/web/css/content/index.html index 180c415cef..6d71c72e8e 100644 --- a/files/ru/web/css/content/index.html +++ b/files/ru/web/css/content/index.html @@ -60,18 +60,18 @@ content: unset;
          {{cssxref("<string>")}}
          Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, \000A9 представляет собой символ авторского права.
          {{cssxref("<url>")}}
          -
          URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображен, он игнорируется или отображается значение по умолчанию.
          +
          URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображён, он игнорируется или отображается значение по умолчанию.
          {{cssxref("<image>")}}
          {{cssxref("<image>")}}, указанный типом данных {{cssxref("<url>")}} или {{cssxref("<gradient>")}}, или частью веб-страницы, определяемой функцией {{cssxref("element", "element()")}}, указывающей содержимое для обозначения.
          {{cssxref("<counter>")}}
          -
          Значение CSS счетчика, как правило число. Его можно отобразить с помощью функций  {{cssxref("counter()")}} или{{cssxref("counters()")}}.
          +
          Значение CSS счётчика, как правило число. Его можно отобразить с помощью функций  {{cssxref("counter()")}} или{{cssxref("counters()")}}.
          -

          Функция counter() имеет две формы записи: 'counter(имя)' или 'counter(имя, стиль)'. Сгенерированный текст - это значение самого вложенного счетчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию decimal).

          +

          Функция counter() имеет две формы записи: 'counter(имя)' или 'counter(имя, стиль)'. Сгенерированный текст - это значение самого вложенного счётчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию decimal).

          -

          Функция counters() также имеет две формы записи: 'counters(name, string)' или 'counters(name, string, style)'. Сгенерированный текст - это значение всех счетчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделенных указанной строкой. Счетчики отображаются в указанном стиле (по умолчанию decimal).

          +

          Функция counters() также имеет две формы записи: 'counters(name, string)' или 'counters(name, string, style)'. Сгенерированный текст - это значение всех счётчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделённых указанной строкой. Счётчики отображаются в указанном стиле (по умолчанию decimal).

          attr(x)
          -
          Значение атрибута x элемента в виде строки. Если атрибут x отсутствует, вернется пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.
          +
          Значение атрибута x элемента в виде строки. Если атрибут x отсутствует, вернётся пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.
          open-quote | close-quote
          Эти значения заменяются соответствующей строкой из свойства {{cssxref("quotes")}}.
          no-open-quote | no-close-quote
          @@ -123,7 +123,7 @@ q::after { } h1::before { - content: "Chapter "; /* Пробел в конце создает разделение + content: "Chapter "; /* Пробел в конце создаёт разделение между добавленным контентом и остальным контентом*/ } @@ -169,7 +169,7 @@ h1::before {

          CSS

          .new-entry::after {
          -  content: " New!";  /* Начальный пробел создает разделение
          +  content: " New!";  /* Начальный пробел создаёт разделение
                                   между добавленным контентом
                                   и остальным контентом */
             color: red;
          @@ -245,7 +245,7 @@ li {
           
           

          Проблемы доступности

          -

          Сгенерированный CSS контент не включен в DOM. Из-за этого он не будет представлен в  accessibility tree и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить ее в основной документ.

          +

          Сгенерированный CSS контент не включён в DOM. Из-за этого он не будет представлен в  accessibility tree и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить её в основной документ.

          • Accessibility support for CSS generated content – Tink
          • diff --git a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html index 785f85c87c..51b1c40887 100644 --- a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html +++ b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support ---
            {{CSSRef}}
            -

            CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придется решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.

            +

            CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придётся решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.

            Тестирование поддержки анимации CSS

            @@ -33,7 +33,7 @@ if( animation === false ) { }
          -

          Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для animationstring - animation , которая является свойством, которое мы хотим установить позже. Мы создаем массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.

          +

          Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для animationstring - animation , которая является свойством, которое мы хотим установить позже. Мы создаём массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.

          Затем мы проверяем, установлено ли свойство CSS {{cssxref("animation-name")}} в коллекции стилей для элемента, заданного переменной elem. Это означает, что браузер поддерживает CSS-анимацию без какого-либо префикса, чего на сегодняшний день никто из них не делает..

          @@ -80,7 +80,7 @@ if( animation === false ) {

          Следующая задача-фактически добавить ключевые кадры в CSS страницы. Первое, что нужно сделать, это посмотреть, есть ли уже таблица стилей в документе; если да, то мы просто вставляем описание ключевого кадра в эту таблицу стилей; это делается в строках 13-15.

          -

          Если таблицы стилей еще нет, то создается новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.

          +

          Если таблицы стилей ещё нет, то создаётся новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.

          View on JSFiddle

          diff --git a/files/ru/web/css/css_animations/tips/index.html b/files/ru/web/css/css_animations/tips/index.html index 495c3a3063..15929f6220 100644 --- a/files/ru/web/css/css_animations/tips/index.html +++ b/files/ru/web/css/css_animations/tips/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Animations/Tips

          Спецификация CSS Animations не предлагает способа запустить анимацию снова. Нет никакого волшебного метода resetAnimation () для элементов, и вы даже не можете просто установить элемент {{cssxref ("animation-play-state")}} в" running " снова. Вместо этого вы должны использовать хитрые трюки, чтобы запустить остановленную анимацию для воспроизведения.

          -

          Предлагаем вам один из способов, который мы считаем достаточно надежным и стабильным.

          +

          Предлагаем вам один из способов, который мы считаем достаточно надёжным и стабильным.

          HTML содержимое

          @@ -80,8 +80,8 @@ translation_of: Web/CSS/CSS_Animations/Tips
          1. Список классов CSS в элементе сбрасывается до простого "box". Это приводит к удалению всех других классов, которые в настоящее время применяются к элементу, включая класс "changing" , который обрабатывает анимацию. Другими словами, мы удаляем анимационный эффект из элемента. Однако изменения в списке классов не вступают в силу до тех пор, пока не будет завершен перерасчет стиля и не произойдет обновление, отражающее это изменение.
          2. -
          3. Чтобы убедиться, что стили пересчитаны, мы используем  {{domxref("window.requestAnimationFrame()")}} с колбэком. Наш колбэк выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчет стиля еще не произошел! 
          4. -
          5. Наш колбэк ловко вызывает requestAnimationFrame() второй раз! На этот раз колбэк выполняется до следующей перерисовки, то есть после того, как произошла перерасчет стиля. Этот колбэк добавляет класс "changing" обратно в элемент, так что перерисовка снова запустит анимацию.
          6. +
          7. Чтобы убедиться, что стили пересчитаны, мы используем  {{domxref("window.requestAnimationFrame()")}} с колбэком. Наш колбэк выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчёт стиля ещё не произошёл! 
          8. +
          9. Наш колбэк ловко вызывает requestAnimationFrame() второй раз! На этот раз колбэк выполняется до следующей перерисовки, то есть после того, как произошла перерасчёт стиля. Этот колбэк добавляет класс "changing" обратно в элемент, так что перерисовка снова запустит анимацию.

          Конечно, нам также нужно добавить обработчик событий к нашей кнопке "выполнить", чтобы она действительно что-то делала:

          @@ -94,7 +94,7 @@ translation_of: Web/CSS/CSS_Animations/Tips

          Остановка анимации

          -

          Простое удаление {{cssxref("animation-name")}} примененного к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:

          +

          Простое удаление {{cssxref("animation-name")}} применённого к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:

          1. Сделайте свою анимацию настолько самодостаточной, насколько это возможно. Это означает, что вы не должны полагаться на animation-direction: alternate. Вместо этого вы должны явно написать анимацию ключевого кадра, которая проходит через полную анимацию в одном прямом повторении.
          2. diff --git a/files/ru/web/css/css_animations/using_css_animations/index.html b/files/ru/web/css/css_animations/using_css_animations/index.html index 2f25d7922e..14ccbe0a77 100644 --- a/files/ru/web/css/css_animations/using_css_animations/index.html +++ b/files/ru/web/css/css_animations/using_css_animations/index.html @@ -41,7 +41,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy
            {{ cssxref("animation-iteration-count") }}
            Определяет количество повторений анимации; Вы можете использовать значение infinite для бесконечного повторения анимации.
            {{ cssxref("animation-direction") }}
            -
            Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.
            +
            Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.
            {{ cssxref("animation-fill-mode") }}
            Настраивает значения, используемые анимацией, до и после исполнения.
            {{ cssxref("animation-play-state") }}
            @@ -52,13 +52,13 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy

            После того, как вы настроили временные свойства (продолжительность, ускорение) анимации, вы должны определить внешний вид анимации. Это делается с помощью двух и более ключевых кадров после {{ cssxref("@keyframes") }}. Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.

            -

            В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to.

            +

            В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% её конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to.

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

            Примеры

            -
            Внимание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своем браузере, также содержат префиксы -webkit-.
            +
            Внимание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.

            Скольжение текста

            @@ -88,7 +88,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy

            В элемент {{ HTMLElement("p") }} можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.

            -

            Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (from). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .

            +

            Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (from). Здесь мы придаём элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .

            Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок {{ HTMLElement("p") }} приплывает к левому краю окна браузера.

            @@ -97,7 +97,7 @@ at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> -

            (Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

            +

            (Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)

            {{EmbedLiveSample("Скольжение_текста","100%","250")}}

            @@ -143,7 +143,7 @@ her in a languid, sleepy voice.</p>

            Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.

            -

            (Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

            +

            (Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)

            {{ EmbedLiveSample('Добавление_других_ключевых_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}

            @@ -233,9 +233,9 @@ her in a languid, sleepy voice.</p>

            Установка нескольких значений свойствам анимации  

            -

            CSS свойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.

            +

            CSS свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.

            -

            В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений  — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:

            +

            В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений  — по одному. В этом случае у всех трёх анимаций одинаковая продолжительность и число повторений:

            animation-name: fadeInOut, moveLeft300px, bounce;
             animation-duration: 3s;
            @@ -261,7 +261,7 @@ animation-iteration-count: 2, 1;

            Добавление CSS

            -

            Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction установлено alternate. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

            +

            Начнём с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction установлено alternate. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

            .slidein {
               -moz-animation-duration: 3s;
            @@ -316,7 +316,7 @@ animation-iteration-count: 2, 1;

            Добавление обработчика события анимации

            -

            Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

            +

            Будем использовать JavaScript для отслеживания всех трёх возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

            var e = document.getElementById("watchme");
             e.addEventListener("animationstart", listener, false);
            @@ -366,7 +366,7 @@ e.className = "slidein";
             
             

            HTML

            -

            Ради полноты картины приведем код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

            +

            Ради полноты картины приведём код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

            <body>
               <h1 id="watchme">Watch me move</h1>
            diff --git a/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
            index dc2ba0d32f..a17cf60839 100644
            --- a/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
            +++ b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
            @@ -18,7 +18,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Множественные_ф
             }
             
            -

            Вы можете сделать это сокращенным {{ cssxref("background") }} свойством и отдельными свойствами кроме {{ cssxref("background-color") }}. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

            +

            Вы можете сделать это сокращённым {{ cssxref("background") }} свойством и отдельными свойствами кроме {{ cssxref("background-color") }}. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

            Пример

            @@ -45,7 +45,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Множественные_ф

            {{EmbedLiveSample('Example','100%','400')}}

            -

            Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идет градиент и в самом низу фон с пузырями. Каждое последующее под-свойство ({{ cssxref("background-repeat") }} и {{ cssxref("background-position") }}) применяется к соответствующим фонам. Например первое значение свойства {{ cssxref("background-repeat") }} применяется к первому фону, и т.д.

            +

            Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идёт градиент и в самом низу фон с пузырями. Каждое последующее под-свойство ({{ cssxref("background-repeat") }} и {{ cssxref("background-position") }}) применяется к соответствующим фонам. Например первое значение свойства {{ cssxref("background-repeat") }} применяется к первому фону, и т.д.

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

            diff --git a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 3cd0e684d6..1969398293 100644 --- a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -20,7 +20,7 @@ original_slug: >-
            cursor:  [<url>,]* ключевое_слово
            -

            Это означает, что устанавливать можно любое количество URL-адресов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определенными спецификацией CSS, таких как auto или pointer.

            +

            Это означает, что устанавливать можно любое количество URL-адресов (отделённых запятой), которые должны сопровождаться одним из ключевых слов, определёнными спецификацией CSS, таких как auto или pointer.

            Например, такая последовательность значений допустима:

            diff --git a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html index 3fe63cc24c..b59b71c446 100644 --- a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html +++ b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox ---
            {{CSSRef}}
            -

            Спецификация Выравнивание Блоков подробно описывает, как выравнивание работает при использовании различных способов разметки. На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox. Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, ее следует читать вместе с основной страницей выравнивания блоков, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.

            +

            Спецификация Выравнивание Блоков подробно описывает, как выравнивание работает при использовании различных способов разметки. На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox. Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, её следует читать вместе с основной страницей выравнивания блоков, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.

            Основной пример

            @@ -25,7 +25,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
            • Главная ось = направление согласно атрибуту flex-direction = выравнивание через атрибут justify-content
            • -
            • Поперечная ось = проходит поперек главной оси = выравнивание через атрибут align-content, align-self/align-items
            • +
            • Поперечная ось = проходит поперёк главной оси = выравнивание через атрибут align-content, align-self/align-items

            Выравнивание по Главной Оси

            @@ -48,13 +48,13 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox

            Это означает, что атрибут justify-self нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.

            -

            Использовать атрибут align-self имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещен и в начало, и в конец.

            +

            Использовать атрибут align-self имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещён и в начало, и в конец.

            Выравнивание и свойство margin: auto

            -

            В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут justify-self. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации. В таком случае, можно использовать атрибут margin со значением auto. Атрибут с таким значением будет занимать все доступное пространство в своем измерении. Так работает центрирование блока со свойством margin:auto. Установив значение атрибутов margin-left и margin-right в значение auto, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.

            +

            В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут justify-self. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации. В таком случае, можно использовать атрибут margin со значением auto. Атрибут с таким значением будет занимать все доступное пространство в своём измерении. Так работает центрирование блока со свойством margin:auto. Установив значение атрибутов margin-left и margin-right в значение auto, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.

            -

            Установив значение атрибута{{cssxref ("margin")}} в auto для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделенную навигацию. Это хорошо работает с разметкой flexbox и свойствами выравнивания. Как только для элемента со свойством margin: auto не остается свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объеме, пытаясь уместиться в доступное пространство.

            +

            Установив значение атрибута{{cssxref ("margin")}} в auto для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделённую навигацию. Это хорошо работает с разметкой flexbox и свойствами выравнивания. Как только для элемента со свойством margin: auto не остаётся свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объёме, пытаясь уместиться в доступное пространство.

            {{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

            @@ -70,7 +70,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox

            На главной оси атрибут column-gap будет создавать разрывы фиксированного размера между соседними элементами.

            - На поперечной оси атрибут row-gap создает разрыв между соседними flex линиями, поэтому необходимо также установить атрибут flex-wrap в значение wrap, чтобы применить эффект.

            + На поперечной оси атрибут row-gap создаёт разрыв между соседними flex линиями, поэтому необходимо также установить атрибут flex-wrap в значение wrap, чтобы применить эффект.

            Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.

            diff --git a/files/ru/web/css/css_box_alignment/index.html b/files/ru/web/css/css_box_alignment/index.html index af449e8cff..e094c861ea 100644 --- a/files/ru/web/css/css_box_alignment/index.html +++ b/files/ru/web/css/css_box_alignment/index.html @@ -23,7 +23,7 @@ translation_of: Web/CSS/CSS_Box_Alignment

            Пример выравнивания раскладки сетки CSS

            -

            В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки {{cssxref("align-self")}} в центр.

            +

            В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путём установки {{cssxref("align-self")}} в центр.

            {{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

            @@ -73,7 +73,7 @@ translation_of: Web/CSS/CSS_Box_Alignment

            Контейнер выравнивания - это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.

            -

            На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.

            +

            На приведённом ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.

            @@ -88,7 +88,7 @@ translation_of: Web/CSS/CSS_Box_Alignment
            • Positional alignment (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.
            • Baseline alignment (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.
            • -
            • Distributed alignment (распределенное выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.
            • +
            • Distributed alignment (распределённое выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.

            Значения ключевых слов позиционирования

            @@ -109,7 +109,7 @@ translation_of: Web/CSS/CSS_Box_Alignment

            Помимо физических значений left и right, которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.

            -

            Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение justify-content start, это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение start приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.

            +

            Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение justify-content start, это приведёт к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение start приведёт к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.

            Оба этих примера имеют justify-content: start, однако местоположение начала изменяется в соответствии с режимом записи.

            @@ -127,11 +127,11 @@ translation_of: Web/CSS/CSS_Box_Alignment

            Исходное выравнивание содержимого - указание значения выравнивания базовой линии для justify-content или align-content - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.

            -

            Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование justify-self или align-self или при настройке этих значений в виде группы с justify-items и align-items.

            +

            Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путём добавления поля за пределами полей. Self alignment - это использование justify-self или align-self или при настройке этих значений в виде группы с justify-items и align-items.

            Distributed alignment

            -

            Ключевые слова распределенного выравнивания используются с параметрами align-content и justify-content. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:

            +

            Ключевые слова распределённого выравнивания используются с параметрами align-content и justify-content. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:

            • stretch
            • @@ -154,7 +154,7 @@ translation_of: Web/CSS/CSS_Box_Alignment

              safe и unsafe ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово safe будет выравниваться для start в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.

              -

              Если вы укажете unsafe, выравнивание будет выполнено, даже если это приведет к такой потере данных.

              +

              Если вы укажете unsafe, выравнивание будет выполнено, даже если это приведёт к такой потере данных.

              Пробелы между boxes

              @@ -168,7 +168,7 @@ translation_of: Web/CSS/CSS_Box_Alignment
            • {{cssxref("gap")}}
            -

            В приведенном ниже примере макет сетки использует сокращенную gap, чтобы установить разрыв 10px между дорожками строк и 2em разрыв между дорожками столбцов.

            +

            В приведённом ниже примере макет сетки использует сокращённую gap, чтобы установить разрыв 10px между дорожками строк и 2em разрыв между дорожками столбцов.

            {{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}

            diff --git a/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html index 1ad4642062..cb2b41fbb1 100644 --- a/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -16,19 +16,19 @@ original_slug: Web/CSS/box_model

            CSS Box model

            -

            Внутренняя область элемента (content area) содержит текст и другие элементы, расположенные внутри (контент или содержимое). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри content edge; её размеры называются ширина контента (content width или content-box width), и высота контента (content height или content-box height). Иногда еще говорят «внутренняя ширина/высота элемента»

            +

            Внутренняя область элемента (content area) содержит текст и другие элементы, расположенные внутри (контент или содержимое). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри content edge; её размеры называются ширина контента (content width или content-box width), и высота контента (content height или content-box height). Иногда ещё говорят «внутренняя ширина/высота элемента»

            -

            По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задается свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }}. Если же свойство  {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.

            +

            По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задаётся свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }}. Если же свойство  {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.

            Поля элемента (padding area) — это пустая область, окружающая контент. Она может быть залита каким-то цветом, покрыта фоновый картинкой, а её границы называются края полей (padding edge).

            Размеры полей задаются по отдельности с разных сторон свойствами {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} или общим свойством {{ cssxref("padding") }}.

            -

            Область рамки (border area) окружает поля элемента, а ее граница называется края рамки (border edge). Ширина рамки задается отдельным свойством  {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учетом полей и рамки иногда называют внешней шириной/высотой элемента.

            +

            Область рамки (border area) окружает поля элемента, а её граница называется края рамки (border edge). Ширина рамки задаётся отдельным свойством  {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учётом полей и рамки иногда называют внешней шириной/высотой элемента.

            Отступы (margin area) добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов.

            -

            Величина отступов задается по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.

            +

            Величина отступов задаётся по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.

            Отступы двух соседних элементов, расположенных друг над другом или вложенных друг в друга, могут накладываться. Это называется схлопывание границ (margin collapsing). Схлопываются только вертикальные отступы.

            diff --git a/files/ru/web/css/css_colors/color_picker_tool/index.html b/files/ru/web/css/css_colors/color_picker_tool/index.html index 499aa260fd..a148b4e9af 100644 --- a/files/ru/web/css/css_colors/color_picker_tool/index.html +++ b/files/ru/web/css/css_colors/color_picker_tool/index.html @@ -3212,7 +3212,7 @@ var ColorPickerTool = (function ColorPickerTool() {

            {{CSSRef}}

            -

            Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зеленый / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).

            +

            Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зелёный / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).

            Каждый цвет во время настройки представлен во всех 3-х стандартных форматах CSS, и, кроме того, на основе текущего выбранного цвета генерируется палитра для HSL, HSV и альфа-канала. Кнопкой "пипетка" можно переключаться между HSL или HSV форматами.

            diff --git a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html index 7bab55db18..af886ff78f 100644 --- a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/CSS/Using_multi-column_layouts ---

            {{CSSRef("CSS Multi-columns")}}

            -

            CSS разметка для многих колонок расширяет способ блочной разметки, чтобы позволить легкое описание нескольких колонок текста. Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.

            +

            CSS разметка для многих колонок расширяет способ блочной разметки, чтобы позволить лёгкое описание нескольких колонок текста. Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.

            К несчастью, это невозможно сделать с CSS и HTML без принудительного разбиения колонки в фиксированных позициях, или строго ограничить допустимую разметку в тексте, или использовать экстраординарный скрипт. Это ограничение снимается с помощью добавления новых CSS свойств, чтобы расширить традиционный блочный способ разметки.

            diff --git a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 3340d6cfae..61c6b3da9f 100644 --- a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -121,7 +121,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем

            Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content. Это обусловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство justify-content, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

            -

            В нашем первом примере с использованием свойства display: flex, примененным к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start. Все свободное место располагается в конце контейнера.

            +

            В нашем первом примере с использованием свойства display: flex, применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start. Все свободное место располагается в конце контейнера.

            Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

            @@ -203,7 +203,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем

            Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap, как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

            -

            Мое предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

            +

            Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

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

            diff --git a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index 9c407f61fa..25b5be5ea0 100644 --- a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -11,13 +11,13 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexb

            Как  и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.

            -

            Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы все равно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.

            +

            Flexbox был реализован экспериментальным путём в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счёте префиксы все равно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.

            В 2009 спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать display: box и несколько box-* свойств, которые делали то, что сегодня вы понимаете под flexbox.

            Очередное обновление спецификации поменяло синтаксис на display: flexbox — и опять с вендорными префиксами.

            -

            В конечном счете спецификация была обновлена, чтобы определить display: flex как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновленной версии спецификации отличная.

            +

            В конечном счёте спецификация была обновлена, чтобы определить display: flex как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновлённой версии спецификации отличная.

            Существует несколько старых статей, которые описывают более ранние версии flexbox, их довольно легко вычислить по тому, как они описывают создание flex-контейнера. Если вы нашли что-то вроде  display: box или display: flexbox, то это уже устаревшая информация.

            @@ -27,7 +27,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexb
            • Internet Explorer 10, который внедрил display: flexbox версию спецификации с префиксом -ms-.
            • -
            • UC Browser, который все еще поддерживает спецификацию версии 2009 год с display: box и префиксом -webkit-.
            • +
            • UC Browser, который все ещё поддерживает спецификацию версии 2009 год с display: box и префиксом -webkit-.

            Также возьмите на заметку, что Explorer 11 поддерживает современный display: flex, однако не без багов.

            diff --git a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index 23f034fb6f..874e9a5982 100644 --- a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---
            {{CSSRef}}
            -

            CSS модуль раскладки Flexible Box, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье дается краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.

            +

            CSS модуль раскладки Flexible Box, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье даётся краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.

            Когда мы описываем flexbox как одномерно-направленный, мы  имеем в виду, что flexbox имеет дело с макетом в одной плоскости за раз – либо в виде строки, либо в виде столбца. Как альтернативу можно упомянуть двумерную модель CSS Grid Layout, которая управляет и столбцами и строками одновременно.

            @@ -46,7 +46,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

            Начало и конец строки

            -

            Важно понимать, что flexbox не делает никаких предположений о режиме написания документа. Раньше CSS был сильно ориентирован на горизонтальный режим и режим письма слева направо. Современные методы верстки охватывают полный диапазон режимов письма, и поэтому мы больше не предполагаем, что строка текста будет начинаться в верхнем левом углу документа и будет проходить по направлению к правой стороне, а новые строки будут появляться одна под другой.

            +

            Важно понимать, что flexbox не делает никаких предположений о режиме написания документа. Раньше CSS был сильно ориентирован на горизонтальный режим и режим письма слева направо. Современные методы вёрстки охватывают полный диапазон режимов письма, и поэтому мы больше не предполагаем, что строка текста будет начинаться в верхнем левом углу документа и будет проходить по направлению к правой стороне, а новые строки будут появляться одна под другой.

            Вы можете прочитать больше о взаимосвязи между flexbox и спецификацией Writing Modes в следующей статье, однако следующее описание должно помочь объяснить, почему мы не говорим о левом, правом, верхнем и нижнем направлениях наших flex-элементов.

            @@ -64,7 +64,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

            Flex контейнер

            -

            Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаем значение flex или inline-flex для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.

            +

            Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаём значение flex или inline-flex для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.

            • Элементы отображаются в ряд (свойство flex-direction по умолчанию имеет значение row).
            • @@ -75,7 +75,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
            • Свойству {{cssxref("flex-wrap")}} задано значение nowrap.
            -

            Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обернуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.

            +

            Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обёрнуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.

            Вы можете увидеть принцип работы в живом примере ниже. Попробуйте отредактировать или добавить дополнительные элементы, чтобы проверить поведение flexbox.

            @@ -87,7 +87,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

            Если изменить значение свойства flex-direction на column, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра column-reverse, начало и конец столбца поменяются местами.

            -

            В приведенном ниже примере значение свойства flex-direction установлено как row-reverse. Попробуйте другие значения — row, column иcolumn-reverse, чтобы посмотреть как изменятся элементы контейнера.

            +

            В приведённом ниже примере значение свойства flex-direction установлено как row-reverse. Попробуйте другие значения — row, column иcolumn-reverse, чтобы посмотреть как изменятся элементы контейнера.

            {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

            @@ -105,7 +105,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

            Вы можете указать два свойства flex-direction и flex-wrap в одном {{cssxref("flex-flow")}}. Первое значение свойства определяет flex-direction, второе flex-wrap.

            -

            В приведенном ниже примере вы можете изменить первое значение на одно из доступных для flex-direction - row, row-reverse, column or column-reverse, а второе на wrap или nowrap, чтобы посмотреть как изменятся элементы контейнера.

            +

            В приведённом ниже примере вы можете изменить первое значение на одно из доступных для flex-direction - row, row-reverse, column or column-reverse, а второе на wrap или nowrap, чтобы посмотреть как изменятся элементы контейнера.

            {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

            @@ -123,7 +123,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

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

            -

            Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остается 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.

            +

            Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остаётся 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.

            This flex container has available space after laying out the items.

            @@ -131,7 +131,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

            Свойство flex-basis

            -

            Свойство flex-basis определяет размер доступного пространства элемента. Начальное значение этого свойства - auto - в этом случае браузер проверяет, имеют ли элементы размер. В приведенном выше примере все элементы имеют ширину 100px, и этот размер читается браузером как flex-basis.
            +

            Свойство flex-basis определяет размер доступного пространства элемента. Начальное значение этого свойства - auto - в этом случае браузер проверяет, имеют ли элементы размер. В приведённом выше примере все элементы имеют ширину 100px, и этот размер читается браузером как flex-basis.
            Если элементы не имеют размера, то для размера flex-basis используется размер контента. Вот почему, когда мы просто объявляем display: flex на родительском элементе для создания flex-элементов, все элементы перемещаются в ряд и занимают столько места, сколько им нужно для отображения их содержимого.

            Свойство flex-grow

            diff --git a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html index 6a31a4a6ea..92c797bcf4 100644 --- a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html +++ b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -72,24 +72,24 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

            В спецификации флексбоксов подробно рассказано, что должно происходить, когда элементы должны сворачиваться при установке параметра visibility: collapse на элементе. Смотрим документацию MDN для параметра {{cssxref("visibility")}}. Спецификация описывает поведение так:

            -

            “Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы.  Однако процесс обертывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - Сворачивание элементов

            +

            “Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы.  Однако процесс обёртывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - Сворачивание элементов

            Понимание этого поведения полезно, если вы планируете использовать яваскрипт на флекс-элементах и с его помощью прятать или показывать контент. Пример в спецификации демонстрирует один такой шаблон.

            -

            В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр visibility: collapse. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите visibility: collapse из CSS или измените значение на visible, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свернутыми элементами; высота флекс-контейнера при этом не изменится.

            +

            В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр visibility: collapse. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите visibility: collapse из CSS или измените значение на visible, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свёрнутыми элементами; высота флекс-контейнера при этом не изменится.

            -

            Примечание. Используйте Firefox для двух приведенных ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.

            +

            Примечание. Используйте Firefox для двух приведённых ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.

            {{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

            -

            Когда Вы работаете с многострочным флекс-контейнером, Вы должны помнить, что процесс обёртывания происходит после сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свернутым элементом в главной оси.

            +

            Когда Вы работаете с многострочным флекс-контейнером, Вы должны помнить, что процесс обёртывания происходит после сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свёрнутым элементом в главной оси.

            Это значит, что элементы могут оказаться на строке, отличной от той, на которой они начинались. В случае, если какой-то элемент отображается и скрывается, это может привести к тому, что элементы окажутся в другом ряду.

            -

            Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свернутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.

            +

            Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свёрнутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.

            {{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

            @@ -97,4 +97,4 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

            Разница между visibility: hidden и display: none

            -

            Когда Вы устанавливаете элементу display: none чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счетчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование visibility: hidden сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведет себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.

            +

            Когда Вы устанавливаете элементу display: none чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счётчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование visibility: hidden сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведёт себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.

            diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html index 80fddc9dab..3863c2862e 100644 --- a/files/ru/web/css/css_flow_layout/index.html +++ b/files/ru/web/css/css_flow_layout/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Flow_Layout ---
            {{CSSRef}}
            -

            Нормальный поток (normal flow) или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в нее могут быть внесены изменения, например, относительное позиционирование.

            +

            Нормальный поток (normal flow) или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в неё могут быть внесены изменения, например, относительное позиционирование.

            По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность вынимается из потока (out of flow), то она работает независимо.

            @@ -21,9 +21,9 @@ translation_of: Web/CSS/CSS_Flow_Layout

            Следующий пример показывает боксы уровня блока (block level) и уровня строки (inline level). Боксы уровня блока участвуют в блочном контексте форматирования, а боксы уровня строки в строчном контексте форматирования.

            -

            Два элемента параграфа с зеленой границей создают боксы уровня блока, отображающиеся один под другим.

            +

            Два элемента параграфа с зелёной границей создают боксы уровня блока, отображающиеся один под другим.

            -

            Первое предложение также содержит элемент span с голубым фоном. Он создает бокс уровня строки и, следовательно, размещается внутри предложения.

            +

            Первое предложение также содержит элемент span с голубым фоном. Он создаёт бокс уровня строки и, следовательно, размещается внутри предложения.

            {{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}

            diff --git a/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html index aed2f568ec..13069eaa00 100644 --- a/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html +++ b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -8,7 +8,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_ф

            В этой статье представлена концепция контекстов форматирования (formatting context). Существует несколько типов контекстов форматирования, например, блочный контекст форматирования (block formatting context, BFC), строчный контекст форматирования (inline formatting context), флексовый контекст форматирования (flex formatting context). В статье даны основы того, как они себя ведут, и как вы можете использовать это поведение.

            -

            Всё на странице является частью контекста форматирования (formatting context), который представляет собой область, в которой происходит раскладка контента по определенным правилам. Блочный контекст форматирования (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, флексовый контекст форматирования (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.

            +

            Всё на странице является частью контекста форматирования (formatting context), который представляет собой область, в которой происходит раскладка контента по определённым правилам. Блочный контекст форматирования (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, флексовый контекст форматирования (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.

            Блочные контексты форматирования

            @@ -16,9 +16,9 @@ original_slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_ф

            Создание нового блочного контекста форматирования

            -

            Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создает блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создает новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.

            +

            Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создаёт блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создаёт новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.

            -

            Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создается в следующих случаях:

            +

            Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создаётся в следующих случаях:

            • плавающие элементы ({{cssxref("float", "float: left", "#left")}} или {{cssxref("float", "float: right", "#right")}});
            • diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index a616e84382..964f414675 100644 --- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

              Расположение элемента

              -

              Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путем привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.

              +

              Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путём привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.

              Создание дополнительных полос для хранения контента

              @@ -33,7 +33,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

              Grid контейнер

              -

              Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

              +

              Мы создаём grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

              В этом примере есть div, содержащий класс wrapper с пятью потомками

              @@ -184,7 +184,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

              {{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

            -

            В следующем примере мы создаем грид с треком в  2fr и двумя треками по  1fr. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. 

            +

            В следующем примере мы создаём грид с треком в  2fr и двумя треками по  1fr. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. 

            .wrapper {
               display: grid;
            @@ -202,7 +202,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
             
             

            Задание треков с помощью нотации repeat()

            -

            В огромных гридах с большим количеством треков можно использовать нотацию repeat() , чтобы повторить структуру треков или ее часть. Например, такое задание грида:

            +

            В огромных гридах с большим количеством треков можно использовать нотацию repeat() , чтобы повторить структуру треков или её часть. Например, такое задание грида:

            .wrapper {
               display: grid;
            @@ -218,7 +218,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
             }
             
            -

            Repeat-нотацию можно использовать как часть списка треков. В следующем примере создается грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.

            +

            Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.

            .wrapper {
               display: grid;
            @@ -226,7 +226,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
             }
             
            -

            Repeat-нотация в качестве аргумента принимает список треков, поэтому с ее помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной 1fr следует трек шириной 2fr , и все это дело повторяется пять раз.

            +

            Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной 1fr следует трек шириной 2fr , и все это дело повторяется пять раз.

            .wrapper {
               display: grid;
            @@ -236,11 +236,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
             
             

            Явный и неявный грид

            -

            Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определенного данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создает строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задается автоматически в зависимости от находящегося в них контента.

            +

            Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определённого данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создаёт строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задаётся автоматически в зависимости от находящегося в них контента.

            Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств {{cssxref("grid-auto-rows")}} и {{cssxref("grid-auto-columns")}}.

            -

            В примере ниже мы задаем grid-auto-rows , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.

            +

            В примере ниже мы задаём grid-auto-rows , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.

            <div class="wrapper">
                <div>One</div>
            @@ -345,7 +345,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
             
             

            В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек. 

            -

            В следующем примере мы размещаем первые два элемента в нашем гриде из трех колоночных треков с помощью свойств {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}}. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.

            +

            В следующем примере мы размещаем первые два элемента в нашем гриде из трёх колоночных треков с помощью свойств {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}}. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.

            Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. 

            @@ -405,19 +405,19 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

            Grid-ячейки

            -

            Грид-ячейка (grid cell) - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определен для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.

            +

            Грид-ячейка (grid cell) - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определён для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.

            The first cell of the grid highlighted

            Grid-области

            -

            Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создает грид-область (grid area). Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. 

            +

            Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создаёт грид-область (grid area). Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. 

            A grid area

            Зазоры (Gutters)

            -

            Зазоры (Gutters) или аллеи (alleys) между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращенного свойства {{cssxref("grid-gap")}}. В примере ниже мы создаем зазор в 10 пикселей между колонками и в 1em между строками.

            +

            Зазоры (Gutters) или аллеи (alleys) между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращённого свойства {{cssxref("grid-gap")}}. В примере ниже мы создаём зазор в 10 пикселей между колонками и в 1em между строками.

            .wrapper {
                display: grid;
            @@ -465,7 +465,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
             
             

            Вложенные гриды

            -

            Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трехколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.

            +

            Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трёхколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.

            <div class="wrapper">
            @@ -483,7 +483,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
             
             

            Nested grid in flow

            -

            Если мы задаем для box1 значение display: grid , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.

            +

            Если мы задаём для box1 значение display: grid , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.

            .box1 {
                grid-column-start: 1;
            @@ -531,7 +531,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
             

            Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.

            -

            В приведенном выше примере мы можем отредактировать вложенный грид, изменив grid-template-columns: repeat(3, 1fr), на grid-template-columns: subgrid. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.

            +

            В приведённом выше примере мы можем отредактировать вложенный грид, изменив grid-template-columns: repeat(3, 1fr), на grid-template-columns: subgrid. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.

            .box1 {
                grid-column-start: 1;
            @@ -545,7 +545,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
             
             

            Размещение элементов с помощью z-index

            -

            Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещенными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:

            +

            Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещёнными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:

            <div class="wrapper">
            diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
            index 8ea1b8d352..80d1ad38af 100644
            --- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
            +++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
            @@ -5,9 +5,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
             ---
             

            Если вы знакомы с flexbox, вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием Box Alignment Level 3. Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.

            -

            Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера еще не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.

            +

            Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера ещё не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.

            -

            В этом руководстве представлены демонстрации того, как работает выравнивание ячеек в макете. Вы увидите много общего в том, как эти свойства и ценности работают в flexbox. Из-за того, что сетка двумерна и однобочечна, существует несколько небольших различий, за которыми вы должны следить. Поэтому мы начнем с рассмотрения двух осей, с которыми мы сталкиваемся при выравнивании объектов в сетке.

            +

            В этом руководстве представлены демонстрации того, как работает выравнивание ячеек в макете. Вы увидите много общего в том, как эти свойства и ценности работают в flexbox. Из-за того, что сетка двумерна и однобочечна, существует несколько небольших различий, за которыми вы должны следить. Поэтому мы начнём с рассмотрения двух осей, с которыми мы сталкиваемся при выравнивании объектов в сетке.

            Две оси grid layout

            @@ -100,7 +100,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

            Свойство {{cssxref ("align-items")}} устанавливает свойство {{cssxref ("align-self")}} для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя align-self по элементу сетки.

            -

            В следующем примере я использую свойство align-self, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения start, третий end и четвертый center.

            +

            В следующем примере я использую свойство align-self, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения start, третий end и четвёртый center.

        -

        В приведенном ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным желобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.

        +

        В приведённом ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным жёлобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.

        Свойство align-content применяется к контейнеру сетки, поскольку оно работает на всей сетке. Поведение по умолчанию в макете сетки start, поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:

        @@ -499,7 +499,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

        Стоит отметить, что использование этих значений пространственного распределения может привести к увеличению элементов в вашей сетке. Если элемент охватывает более одной дорожки сетки, так как дополнительное пространство добавляется между дорожками, этот предмет должен стать большим, чтобы поглотить пространство. Мы всегда работаем в строгой сетке. Поэтому, если вы решите использовать эти значения, убедитесь, что содержимое ваших треков может справиться с дополнительным пространством или что вы использовали свойства выравнивания для элементов, чтобы заставить их перемещаться в начало, а не растягиваться.

        -

        В приведенном ниже изображении я поместил сетку с align-content, со значением start рядом с сеткой, когда значение align-content имеет значение space-between. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:

        +

        В приведённом ниже изображении я поместил сетку с align-content, со значением start рядом с сеткой, когда значение align-content имеет значение space-between. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:

        Demonstrating how items become larger if we use space-between.

        diff --git a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index a481d519ad..d94570b6f2 100644 --- a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html +++ b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -8,7 +8,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode

        Логические и физические свойства и ценности

        -

        CSS полон физических слов позиционирования - слева и справа, сверху и снизу. Если мы позиционируем элемент с использованием абсолютного позиционирования, мы используем эти физические ключевые слова в качестве значений смещения, чтобы обжимать элемент вокруг. В нижеприведенном фрагменте кода элемент помещается в 20 пикселей сверху и 30 пикселей слева от контейнера:

        +

        CSS полон физических слов позиционирования - слева и справа, сверху и снизу. Если мы позиционируем элемент с использованием абсолютного позиционирования, мы используем эти физические ключевые слова в качестве значений смещения, чтобы обжимать элемент вокруг. В нижеприведённом фрагменте кода элемент помещается в 20 пикселей сверху и 30 пикселей слева от контейнера:

        .container {
           position: relative;
        @@ -25,15 +25,15 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode
         </div>
         
        -

        Еще одно место, где вы можете увидеть используемые физические ключевые слова, - это использовать text-align: right выравнивать текст вправо. В CSS есть также физические свойства. Мы добавляем поля, дополнения и границы, используя эти физические свойства {{cssxref ("margin-left")}}, {{cssxref ("padding-left")}} и т. д.

        +

        Ещё одно место, где вы можете увидеть используемые физические ключевые слова, - это использовать text-align: right выравнивать текст вправо. В CSS есть также физические свойства. Мы добавляем поля, дополнения и границы, используя эти физические свойства {{cssxref ("margin-left")}}, {{cssxref ("padding-left")}} и т. д.

        Мы называем эти ключевые слова и свойства физическими, потому что они относятся к экрану, на который вы смотрите. Слева всегда слева, независимо от того, в каком направлении работает ваш текст.

        -

        Это может стать проблемой при разработке сайта, который должен работать на нескольких языках, включая языки с текстом, начинающимся справа, а не слева. Браузеры хорошо справляются с направлением текста и вам даже не нужно работать на языке {{glossary ("rtl")}}, чтобы посмотреть. В приведенном ниже примере у меня есть два абзаца. У одного не установлено {{cssxref ("text-align")}}, второе имеет выравнивание текста (text-align) влево. Я добавил dir = "rtl" в элемент html, который переключает режим записи по умолчанию для документа на английском языке ltr. Вы можете видеть, что первый абзац остается слева направо, из-за оставленного значения выравнивания текста. Второе, однако, переключает направление и текст пробегает справа налево.

        +

        Это может стать проблемой при разработке сайта, который должен работать на нескольких языках, включая языки с текстом, начинающимся справа, а не слева. Браузеры хорошо справляются с направлением текста и вам даже не нужно работать на языке {{glossary ("rtl")}}, чтобы посмотреть. В приведённом ниже примере у меня есть два абзаца. У одного не установлено {{cssxref ("text-align")}}, второе имеет выравнивание текста (text-align) влево. Я добавил dir = "rtl" в элемент html, который переключает режим записи по умолчанию для документа на английском языке ltr. Вы можете видеть, что первый абзац остаётся слева направо, из-за оставленного значения выравнивания текста. Второе, однако, переключает направление и текст пробегает справа налево.

        A simple example of text direction.

        -

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

        +

        Это очень простой пример проблемы с физическими значениями и свойствами, которые используются в CSS. Они не позволяют браузеру выполнять работу по переключению режима записи, поскольку они делают предположение, что текст течёт слева направо и сверху вниз.

        Логические свойства и значения

        @@ -41,13 +41,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode

        Block и Inline

        -

        Как только мы начнем заниматься логическими, а не физическими свойствами, мы перестаем видеть мир как слева направо, так и сверху вниз. Нам нужна новая контрольная точка и именно здесь понимание использования блока и встроенных осей, которые мы встретили ранее в руководстве по выравниванию, становится очень полезным. Если вы можете начать видеть макет с точки зрения блочного и встроенного, то, как все работает в сетке, становится намного больше смысла.

        +

        Как только мы начнём заниматься логическими, а не физическими свойствами, мы перестаём видеть мир как слева направо, так и сверху вниз. Нам нужна новая контрольная точка и именно здесь понимание использования блока и встроенных осей, которые мы встретили ранее в руководстве по выравниванию, становится очень полезным. Если вы можете начать видеть макет с точки зрения блочного и встроенного, то, как все работает в сетке, становится намного больше смысла.

        An image showing the default direction of the Block and Inline Axes.

        Режимы записи CSS

        -

        Я собираюсь представить здесь еще одну спецификацию, которую я буду использовать в своих примерах: спецификация CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти разные режимы записи в CSS, а не только для поддержки языков, которые имеют другой режим записи на английском языке, но также и для творческих целей. Я буду использовать свойство {{cssxref ("write-mode")}}, чтобы внести изменения в режим записи, применяемый к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите, чтобы вы меняли в режиме записи, я бы рекомендовал вам прочитать Jen Simmons отличную статью о CSS Writing Modes. Это более подробно описано в этой спецификации, чем мы коснемся здесь.

        +

        Я собираюсь представить здесь ещё одну спецификацию, которую я буду использовать в своих примерах: спецификация CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти разные режимы записи в CSS, а не только для поддержки языков, которые имеют другой режим записи на английском языке, но также и для творческих целей. Я буду использовать свойство {{cssxref ("write-mode")}}, чтобы внести изменения в режим записи, применяемый к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите, чтобы вы меняли в режиме записи, я бы рекомендовал вам прочитать Jen Simmons отличную статью о CSS Writing Modes. Это более подробно описано в этой спецификации, чем мы коснёмся здесь.

        writing-mode

        @@ -61,7 +61,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode
      10. sideways-lr
      11. -

        Значение horizontal-tb является значением по умолчанию для текста в Интернете. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ передачи текста в нашем документе, соответствующий различным режимам записи, найденным по всему миру. Опять же, для получения полной информации об этом см. Jen’s article. В качестве простого примера у меня есть два параграфа ниже. Первый использует по умолчанию horizontal-tb, а второй использует vertical-rl. В тексте режима все еще выполняется влево-вправо, однако направление текста вертикально - встроенный текст теперь проходит вниз по странице, сверху вниз.

        +

        Значение horizontal-tb является значением по умолчанию для текста в Интернете. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ передачи текста в нашем документе, соответствующий различным режимам записи, найденным по всему миру. Опять же, для получения полной информации об этом см. Jen’s article. В качестве простого примера у меня есть два параграфа ниже. Первый использует по умолчанию horizontal-tb, а второй использует vertical-rl. В тексте режима все ещё выполняется влево-вправо, однако направление текста вертикально - встроенный текст теперь проходит вниз по странице, сверху вниз.

        -

        При определении сетки я задаю линиям имена, помещая их внутри квадратных скобок. Можете использовать любые имена, какие вам нравятся. Я задал имена main-start для начала и main-end для конца контейнера, причем как для строк, так и для столбцов. Затем определил центральный блок сетки как content-start и content-end, опять же как для столбцов, так и для строк. Но вам необязательно именовать все линии в вашей сетке, можете именовать только опорные линии вашего макета.

        +

        При определении сетки я задаю линиям имена, помещая их внутри квадратных скобок. Можете использовать любые имена, какие вам нравятся. Я задал имена main-start для начала и main-end для конца контейнера, причём как для строк, так и для столбцов. Затем определил центральный блок сетки как content-start и content-end, опять же как для столбцов, так и для строк. Но вам необязательно именовать все линии в вашей сетке, можете именовать только опорные линии вашего макета.

        .wrapper {
           display: grid;
        @@ -77,15 +77,15 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
         
         

        Теперь при линейном размещении вы можете смешивать номера строк или их имена. Именование строк полезно при создании адаптивного дизайна, в котором вы переопределяете саму сетку, а не положение содержимого внутри сетки.

        -

        Присвоение линиям нескольких имен

        +

        Присвоение линиям нескольких имён

        При необходимости можно присвоить строке более одного имени. Например, sidebar-end для обозначении конца области sidebar, и main-start для начала области main. Укажите имена внутри квадратных скобок через пробел [sidebar-end main-start]. В дальнейшем вы можете обращаться к этой строке по любому из этих имен.

        Неявные области сетки из именованных линий

        -

        Ранее уже упоминалось, что вы можете выбирать для линий любые имена. Такое имя является custom ident - именем, определяемым автором. При выборе имени вам нужно избегать слов, которые могут использоваться в спецификации, что приведет к путанице - например, span. Идентификаторы не заключаются в кавычки.

        +

        Ранее уже упоминалось, что вы можете выбирать для линий любые имена. Такое имя является custom ident - именем, определяемым автором. При выборе имени вам нужно избегать слов, которые могут использоваться в спецификации, что приведёт к путанице - например, span. Идентификаторы не заключаются в кавычки.

        -

        Хотя вы можете выбрать любые имена, но если вы добавляете -start и -end к линиям вокруг области, как в приведенном выше примере, то сетка создаст вам именованную область основного используемого имени. Возьмем приведенный выше пример, у меня есть content-start и content-end как для строк, так и для столбцов. Это означает, что будет создана также область сетки с именем content, которую можно по своему усмотрению.

        +

        Хотя вы можете выбрать любые имена, но если вы добавляете -start и -end к линиям вокруг области, как в приведённом выше примере, то сетка создаст вам именованную область основного используемого имени. Возьмём приведённый выше пример, у меня есть content-start и content-end как для строк, так и для столбцов. Это означает, что будет создана также область сетки с именем content, которую можно по своему усмотрению.

        -

        Вы можете использовать ключевое слово span. Следующий элемент будет расположен начиная с седьмой линии и займет три линии.

        +

        Вы можете использовать ключевое слово span. Следующий элемент будет расположен начиная с седьмой линии и займёт три линии.

        .item2 {
           grid-column: col-start 7 / span 3;
        @@ -293,14 +293,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
         
         

        The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

        -

        Синтаксис повтора также может принимать трек-лист , это не просто должен быть один размер трека, который повторяется. Приведенный ниже код создаст сетку из восьми дорожек с более узким столбцом ширины 1fr с именем col1-start и более широким столбцом 3fr с именем col2-start.

        +

        Синтаксис повтора также может принимать трек-лист , это не просто должен быть один размер трека, который повторяется. Приведённый ниже код создаст сетку из восьми дорожек с более узким столбцом ширины 1fr с именем col1-start и более широким столбцом 3fr с именем col2-start.

        .wrapper {
           grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
         }
         
        -

        Если Ваш повторяющийся синтаксис помещает две строки рядом друг с другом, то они будут объединены и создадут тот же результат, что и присвоение строке нескольких имен в неповторяющемся определении трека. Следующее определение создает четыре трека 1fr, каждый из которых имеет начальную и конечную линии.

        +

        Если Ваш повторяющийся синтаксис помещает две строки рядом друг с другом, то они будут объединены и создадут тот же результат, что и присвоение строке нескольких имён в неповторяющемся определении трека. Следующее определение создаёт четыре трека 1fr, каждый из которых имеет начальную и конечную линии.

        .wrapper {
           grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
        @@ -314,7 +314,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
         }
         
        -

        Если вы использовали список треков, то вы можете использовать ключевое слово span не только для охвата ряда строк, но и для охвата ряда строк с определенным именем..

        +

        Если вы использовали список треков, то вы можете использовать ключевое слово span не только для охвата ряда строк, но и для охвата ряда строк с определённым именем..

        -

        За последние три руководства вы обнаружили, что существует множество различных способов размещения элементов с помощью сетки. На первый взгляд это может показаться чрезмерно сложным, но помните, что вам не нужно использовать их все. На практике я нахожу, что для простых макетов хорошо работает использование именованных областей шаблонов, это дает хорошее визуальное представление о том, как выглядит ваш макет, и возможность легко перемещать элементы по сетке.

        +

        За последние три руководства вы обнаружили, что существует множество различных способов размещения элементов с помощью сетки. На первый взгляд это может показаться чрезмерно сложным, но помните, что вам не нужно использовать их все. На практике я нахожу, что для простых макетов хорошо работает использование именованных областей шаблонов, это даёт хорошее визуальное представление о том, как выглядит ваш макет, и возможность легко перемещать элементы по сетке.

        Если вы работаете со строгим макетом из нескольких столбцов, например, демонстрация именованных строк в последней части этого руководства работает очень хорошо. Если вы рассматриваете сеточные системы, в таких фреймворках, как Foundation или Bootstrap, которые основаны на сетке из 12 столбцов. Затем фреймворк импортирует код для выполнения всех вычислений, чтобы убедиться, что столбцы складываются до 100%. С помощью Grid layout единственный код, который нам нужен для нашего грид-фреймворка, - это:

        @@ -372,7 +372,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines }
        -

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

        +

        Затем мы можем использовать этот фреймворк для вёрстки нашей страницы. Например, чтобы создать макет из трёх столбцов с верхним и нижним колонтитулами, у меня может быть следующая разметка.

        -

        Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнете создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдете свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!

        +

        Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнёте создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдёте свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!

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

    diff --git a/files/ru/web/css/flex-grow/index.html b/files/ru/web/css/flex-grow/index.html index 3ce8182a72..740a6a9560 100644 --- a/files/ru/web/css/flex-grow/index.html +++ b/files/ru/web/css/flex-grow/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/flex-grow ---
    {{CSSRef}}
    -

    CSS-свойство flex-grow определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»). Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определенным различными коэффициентами flex-grow.

    +

    CSS-свойство flex-grow определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»). Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определённым различными коэффициентами flex-grow.

    На практике flex-grow используется вместе с другими flex-свойствами {{cssxref("flex-shrink")}} и {{cssxref("flex-basis")}}, и обычно определяется с помощью сокращения (shorthand) {{cssxref("flex")}}, чтобы убедиться, что все значения заданы.

    diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html index 345b55bbaa..339db730a5 100644 --- a/files/ru/web/css/flex-wrap/index.html +++ b/files/ru/web/css/flex-wrap/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/flex-wrap ---
    {{ CSSRef}}
    -

    Свойство CSS flex-wrap задает правила вывода flex-элементов —  в одну строку или в несколько, с переносом блоков. Если перенос разрешен, то возможно задать направление, в котором выводятся блоки.

    +

    Свойство CSS flex-wrap задаёт правила вывода flex-элементов —  в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.

    flex-wrap: nowrap;
     flex-wrap: wrap;
    diff --git a/files/ru/web/css/flex/index.html b/files/ru/web/css/flex/index.html
    index a0a28a86d8..e490167e82 100644
    --- a/files/ru/web/css/flex/index.html
    +++ b/files/ru/web/css/flex/index.html
    @@ -7,7 +7,7 @@ translation_of: Web/CSS/flex
     
     

    Описание

    -

    Свойство CSS flex - это сокращенное свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.

    +

    Свойство CSS flex - это сокращённое свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.

    {{cssinfo}}

    diff --git a/files/ru/web/css/float/index.html b/files/ru/web/css/float/index.html index d14d73e420..340654bd11 100644 --- a/files/ru/web/css/float/index.html +++ b/files/ru/web/css/float/index.html @@ -3,7 +3,7 @@ title: float slug: Web/CSS/float translation_of: Web/CSS/float --- -
    Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещен вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}
    +
    Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещён вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}

    Summary

    diff --git a/files/ru/web/css/font-family/index.html b/files/ru/web/css/font-family/index.html index 79b25a5265..44df7fc34e 100644 --- a/files/ru/web/css/font-family/index.html +++ b/files/ru/web/css/font-family/index.html @@ -49,7 +49,7 @@ font-family: unset;

    Свойство font-family получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как <family-name> или <generic-name>.

    -

    В приведенном ниже примере перечислены два семейства шрифтов, первое <family-name>, а второе как <generic-name>:

    +

    В приведённом ниже примере перечислены два семейства шрифтов, первое <family-name>, а второе как <generic-name>:

    font-family: Gill Sans Extrabold, sans-serif;
    diff --git a/files/ru/web/css/font-variant-ligatures/index.html b/files/ru/web/css/font-variant-ligatures/index.html index f8545cc836..0415ac37bb 100644 --- a/files/ru/web/css/font-variant-ligatures/index.html +++ b/files/ru/web/css/font-variant-ligatures/index.html @@ -35,18 +35,18 @@ font-variant-ligatures: unset;
    normal
    -
    Это ключевое слово ведет к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.
    +
    Это ключевое слово ведёт к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.
    none
    Это ключевое слово устанавливает, что все лигатуры и контекстные формы отключены, даже распространенные.
    <common-lig-values>
    -
    Эти значения контролируют наиболее распространенные лигатуры, такие как лигатуры для сочетаний fi, ffi, th или подобных. Они относятся к значениям liga и clig в OpenType. Допустимы два значения: +
    Эти значения контролируют наиболее распространённые лигатуры, такие как лигатуры для сочетаний fi, ffi, th или подобных. Они относятся к значениям liga и clig в OpenType. Допустимы два значения:
    • common-ligatures активирует эти лигатуры. Обратите внимание, что ключевое слово normal активирует лигатуры.
    • no-common-ligatures отключает эти лигатуры.
    <discretionary-lig-values>
    -
    Эти значения управляют определенными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта. Они соответствуют значениям OpenType hlig. Доступны два значения: +
    Эти значения управляют определёнными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта. Они соответствуют значениям OpenType hlig. Доступны два значения:
    • discretionary-ligatures активирует данные лигатуры.
    • no-discretionary-ligatures деактивирует лигатуры. Обратите внимание, обычно, ключевое слово normal также деактивирует лигатуры.
    • diff --git a/files/ru/web/css/font-weight/index.html b/files/ru/web/css/font-weight/index.html index 386ede4092..1c15a5c863 100644 --- a/files/ru/web/css/font-weight/index.html +++ b/files/ru/web/css/font-weight/index.html @@ -132,7 +132,7 @@ font-weight: unset;

      Определение веса имени

      -

      Значения от 100 до 900, примерно, соответствуют следующим распространенным именам насыщенности:

      +

      Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

    {{SpecName('CSS4 Colors', '#colorunits', '<color>')}} {{Spec2('CSS4 Colors')}}Добавляет rebeccapurple, четырехзначные (#RGBA) и восьмизначные (#RRGGBBAA) шестнадцатеричные обозначения, rgba() и hsla() в качестве псевдонимов rgb () и hsl () (оба с одинаковым синтаксисом параметров), разделенные пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах hsl ().Добавляет rebeccapurple, четырёхзначные (#RGBA) и восьмизначные (#RRGGBBAA) шестнадцатеричные обозначения, rgba() и hsla() в качестве псевдонимов rgb () и hsl () (оба с одинаковым синтаксисом параметров), разделённые пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах hsl ().
    {{SpecName('CSS3 Colors', '#colorunits', '<color>')}}
    @@ -176,14 +176,14 @@ font-weight: unset; - +
    900Черный (Густой) Black (Heavy)Чёрный (Густой) Black (Heavy)

    Интерполяция

    -

    Значения font-weight интерполируются  с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путем округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округленными в сторону положительной бесконечности.

    +

    Значения font-weight интерполируются  с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.

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

    @@ -214,7 +214,7 @@ p { } /* Назначение тексту элемента <div> жирности, которая больше на два уровня, -чем normal, но все еще меньше, чем стандартный bold. */ +чем normal, но все ещё меньше, чем стандартный bold. */ div { font-weight: 600; } diff --git a/files/ru/web/css/font/index.html b/files/ru/web/css/font/index.html index dc3278e054..329684753a 100644 --- a/files/ru/web/css/font/index.html +++ b/files/ru/web/css/font/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/font -

    Как и с любым сокращенным свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращенных свойств). Свойства {{cssxref ("font-size-Adjust")}} и {{cssxref ("font-kerning")}} хоть и не могут быть напрямую установлены с помощью font, но они также сбрасываются к своим начальным значениям.

    +

    Как и с любым сокращённым свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращённых свойств). Свойства {{cssxref ("font-size-Adjust")}} и {{cssxref ("font-kerning")}} хоть и не могут быть напрямую установлены с помощью font, но они также сбрасываются к своим начальным значениям.

    Синтаксис

    diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html index dcbbae226f..2712892e54 100644 --- a/files/ru/web/css/grid-area/index.html +++ b/files/ru/web/css/grid-area/index.html @@ -3,7 +3,7 @@ title: grid-area slug: Web/CSS/grid-area translation_of: Web/CSS/grid-area --- -

    CSS свойство grid-area - это сокращенная форма записи для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задает края {{glossary("grid areas", "грид-области")}} грид-элемента.

    +

    CSS свойство grid-area - это сокращённая форма записи для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задаёт края {{glossary("grid areas", "грид-области")}} грид-элемента.

    /* Ключевые слова в качестве значений */
     grid-area: auto;
    @@ -30,7 +30,7 @@ grid-area: initial;
     grid-area: unset;
     
    -

    Если заданы четыре значения <grid-line> , то первое значение определяет grid-row-start , второе значение -  grid-column-start , третье значение -  grid-row-end и четвертое значение -  grid-column-end.

    +

    Если заданы четыре значения <grid-line> , то первое значение определяет grid-row-start , второе значение -  grid-column-start , третье значение -  grid-row-end и четвёртое значение -  grid-column-end.

    Если  grid-column-end опущено, а grid-column-start в значении {{cssxref("<custom-ident>")}}, grid-column-end устанавливается в это значение <custom-ident>; иначе оно устанавливается в значение auto.

    diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html index 35d6789975..226db2bb76 100644 --- a/files/ru/web/css/grid-auto-flow/index.html +++ b/files/ru/web/css/grid-auto-flow/index.html @@ -35,9 +35,9 @@ grid-auto-flow: unset;
    row
    -
    Ключевое слово, указывающее размещать элементы, заполняя поочередно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.
    +
    Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.
    column
    -
    Ключевое слово, указывающее размещать элементы, заполняя поочередно каждый столбец и добавляя новые столбцы по мере необходимости.
    +
    Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждый столбец и добавляя новые столбцы по мере необходимости.
    dense
    Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответствии с размером.

    diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html index 15559e4134..5817eef381 100644 --- a/files/ru/web/css/grid-row-start/index.html +++ b/files/ru/web/css/grid-row-start/index.html @@ -55,7 +55,7 @@ grid-row-start: unset;

    В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с <custom-ident>.

    <integer> && <custom-ident>?
    -
    Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчет, начиная с конечного края явной сетки. Если имя задано как <custom-ident>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.
    +
    Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчёт, начиная с конечного края явной сетки. Если имя задано как <custom-ident>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.

    An {{cssxref("integer")}} value of 0 is invalid.

    diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html index 6827415b30..3e9a83e744 100644 --- a/files/ru/web/css/grid-template-areas/index.html +++ b/files/ru/web/css/grid-template-areas/index.html @@ -33,7 +33,7 @@ grid-template-areas: unset;
    none
    Контейнер не определяет никаких названий grid-области.
    {{cssxref("<string>")}}+
    -
    Строка создается каждым переносом строки, тогда как каждая колонка создается в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создает одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.
    +
    Строка создаётся каждым переносом строки, тогда как каждая колонка создаётся в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создаёт одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.

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

    diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html index fda2e71bb3..546a42ed31 100644 --- a/files/ru/web/css/grid-template-columns/index.html +++ b/files/ru/web/css/grid-template-columns/index.html @@ -59,9 +59,9 @@ grid-template-columns: unset;
    min-content
    Ключевое слово обозначающее самый большой из минимальных контентов элементов расположенных в данном треке.
    {{cssxref("minmax", "minmax(min, max)")}}
    -
    Функциональное обозначение, которое задает диапазон больший или равный min и меньший или равный max. Если max меньше чем min, тогда max игнорируется и эта функция рассматривается как min. Максимумом значение <flex> устанавливает flex фактор линии (track’s flex factor). Оно не действительно как минимальное.
    +
    Функциональное обозначение, которое задаёт диапазон больший или равный min и меньший или равный max. Если max меньше чем min, тогда max игнорируется и эта функция рассматривается как min. Максимумом значение <flex> устанавливает flex фактор линии (track’s flex factor). Оно не действительно как минимальное.
    auto
    -
    Это ключевое слово идентично max-content, если оно максимальное. Как минимальное, оно представляет наиболее минимальный размер (который определен в свойствах {{cssxref("min-width")}}/{{cssxref("min-height")}}) элементов сетки, занимающих данный трек.
    +
    Это ключевое слово идентично max-content, если оно максимальное. Как минимальное, оно представляет наиболее минимальный размер (который определён в свойствах {{cssxref("min-width")}}/{{cssxref("min-height")}}) элементов сетки, занимающих данный трек.

    Обратите внимание: Только auto размеры трека могут быть растянуты свойствами {{cssxref("align-content")}} и {{cssxref("justify-content")}}.

    diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html index a6d1c4b36b..e4343f33b6 100644 --- a/files/ru/web/css/grid-template-rows/index.html +++ b/files/ru/web/css/grid-template-rows/index.html @@ -52,7 +52,7 @@ grid-template-rows: unset;
    <length>
    Неотрицательное значение размера.
    <percentage>
    -
    Неотрицательное значение {{cssxref("percentage", "<percentage>")}} , относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться как auto. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учету процента.
    +
    Неотрицательное значение {{cssxref("percentage", "<percentage>")}} , относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться как auto. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учёту процента.

    {{cssxref("<flex_value>","<flex>")}}
    Is a non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)).
    diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html index 5ae9d4a987..35d648aa50 100644 --- a/files/ru/web/css/grid/index.html +++ b/files/ru/web/css/grid/index.html @@ -10,9 +10,9 @@ translation_of: Web/CSS/grid ---

    Общие сведения

    -

    Свойство CSS grid является сокращенной формой записи, которая  устанавливает значения для всех явных свойств сетки  (grid)  ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}},  и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.

    +

    Свойство CSS grid является сокращённой формой записи, которая  устанавливает значения для всех явных свойств сетки  (grid)  ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}},  и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.

    -

    Note: В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращенных формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращенной формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращенной форме записи.

    +

    Note: В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращённых формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращённой формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращённой форме записи.

    {{cssinfo}}

    @@ -176,7 +176,7 @@ grid: unset;

    [2] Реализован за преимуществом layout.css.grid.enabled начиная с Gecko 40.0 {{geckoRelease("40.0")}}, имея значение по умолчанию false. Начиная с  Gecko 52.0 включено по умолчанию.

    -

    [3] Internet Explorer и Edge реализуют старую версию спецификации, которая не поддерживает сокращенную форму записи grid. Смотри request for updating the implementation.

    +

    [3] Internet Explorer и Edge реализуют старую версию спецификации, которая не поддерживает сокращённую форму записи grid. Смотри request for updating the implementation.

    [4] Реализован до  функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Opera 28.0.

    diff --git a/files/ru/web/css/hanging-punctuation/index.html b/files/ru/web/css/hanging-punctuation/index.html index 15aee9db7b..b150404bab 100644 --- a/files/ru/web/css/hanging-punctuation/index.html +++ b/files/ru/web/css/hanging-punctuation/index.html @@ -37,7 +37,7 @@ hanging-punctuation: unset;

    Синтаксис

    -

    Свойство hanging-punctuation  может быть определено с помощью одного, двух или трех ключевых слов.

    +

    Свойство hanging-punctuation  может быть определено с помощью одного, двух или трёх ключевых слов.

    • Для одного значения может быть использовано любое из описанных ниже значений.
    • @@ -47,7 +47,7 @@ hanging-punctuation: unset;
    • last вместе с одним из first, allow-end или force-end
    -
  • Для трех значений используются один из следующих вариантов: +
  • Для трёх значений используются один из следующих вариантов:
    • first, allow-end и last
    • first, force-end и last
    • diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html index 5a256e224d..6bf95b2456 100644 --- a/files/ru/web/css/hyphens/index.html +++ b/files/ru/web/css/hyphens/index.html @@ -53,7 +53,7 @@ hyphens: unset;
      U+2010 (HYPHEN)
      -
      «Жесткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис все равно отображается.
      +
      «Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис все равно отображается.
      U+00AD (SHY)
      Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте &shy; для вставки мягкого дефиса.
      diff --git a/files/ru/web/css/image-set()/index.html b/files/ru/web/css/image-set()/index.html index f837d98a4b..9f00bc8ca7 100644 --- a/files/ru/web/css/image-set()/index.html +++ b/files/ru/web/css/image-set()/index.html @@ -34,7 +34,7 @@ translation_of: Web/CSS/image-set()

      Вопросы доступности

      -

      Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своем присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать ее семантически в документе.

      +

      Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своём присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать её семантически в документе.

      • MDN Understanding WCAG, Guideline 1.1 explanations
      • diff --git a/files/ru/web/css/index.html b/files/ru/web/css/index.html index 128ae1fda3..eb959f3866 100644 --- a/files/ru/web/css/index.html +++ b/files/ru/web/css/index.html @@ -8,7 +8,7 @@ tags: - Learning - Reference - Référence(2) - - Верстка + - Вёрстка - Главная - Дизайн - Справка diff --git a/files/ru/web/css/inherit/index.html b/files/ru/web/css/inherit/index.html index 5304dc4d9d..b24d30e524 100644 --- a/files/ru/web/css/inherit/index.html +++ b/files/ru/web/css/inherit/index.html @@ -24,10 +24,10 @@ translation_of: Web/CSS/inherit

        Пример

        -
        /* Делает заголовки второго уровня зелеными */
        +
        /* Делает заголовки второго уровня зелёными */
         h2 { color: green; }
         
        -/* ...но не делает зелеными элементы боковой панели, которые используют цвет своего родителя */
        +/* ...но не делает зелёными элементы боковой панели, которые используют цвет своего родителя */
         #sidebar h2 { color: inherit; }
         
        @@ -83,5 +83,5 @@ div#current { color: blue; }
      • Используйте {{cssxref("initial")}}, чтобы установить свойство в его начальное значение.
      • Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.
      • Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).
      • -
      • Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.
      • +
      • Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращённого (reverted) или неустановленного (unset) состояния.
      diff --git a/files/ru/web/css/initial/index.html b/files/ru/web/css/initial/index.html index 65187f0ab5..5bc7850151 100644 --- a/files/ru/web/css/initial/index.html +++ b/files/ru/web/css/initial/index.html @@ -79,5 +79,5 @@ em {
    • Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.
    • Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).
    • Используйте свойство {{cssxref("inherit")}}, чтобы установить свойство элемента таким же значением, как у его родителя.
    • -
    • Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.
    • +
    • Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращённого (reverted) или неустановленного (unset) состояния.
    diff --git a/files/ru/web/css/inset/index.html b/files/ru/web/css/inset/index.html index 8cbf51bf1d..88071325e5 100644 --- a/files/ru/web/css/inset/index.html +++ b/files/ru/web/css/inset/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/inset ---
    {{CSSRef}}{{SeeCompatTable}}
    -

    Свойство CSS inset определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам  {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определенных для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.

    +

    Свойство CSS inset определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам  {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определённых для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.

    /* <length> значения */
     inset: 3px 10px 3px 10px;
    diff --git a/files/ru/web/css/integer/index.html b/files/ru/web/css/integer/index.html
    index c608250e6c..a7240a3e81 100644
    --- a/files/ru/web/css/integer/index.html
    +++ b/files/ru/web/css/integer/index.html
    @@ -33,7 +33,7 @@ translation_of: Web/CSS/integer
     
     
    12.0        Это <number>, а не <integer>, хоть и представляется как целое число.
     12.         "Дробные" точки запрещены.
    -+---12      Разрешен только один предшествующий символ +/-.
    ++---12      Разрешён только один предшествующий символ +/-.
     десять      Буквы запрещены.
     _5          Специальные знаки запрещены.
     \35         Экранированные символы Юникода запрещены, даже если они являются целым числом (здесь: 5).
    diff --git a/files/ru/web/css/isolation/index.html b/files/ru/web/css/isolation/index.html
    index 52deb89e55..7153c6f925 100644
    --- a/files/ru/web/css/isolation/index.html
    +++ b/files/ru/web/css/isolation/index.html
    @@ -3,7 +3,7 @@ title: isolation
     slug: Web/CSS/isolation
     tags:
       - Контекст наложения
    -  - Очередность
    +  - Очерёдность
       - Порядок отрисовки
     translation_of: Web/CSS/isolation
     ---
    @@ -35,7 +35,7 @@ isolation: unset;
     
     
    auto
    -
    Новый контекст наложения создается только в том случае, если это требуется для одного из свойств, применяемых к элементу.
    +
    Новый контекст наложения создаётся только в том случае, если это требуется для одного из свойств, применяемых к элементу.
    isolate
    Новый контекст наложения должен быть создан.
    diff --git a/files/ru/web/css/justify-content/index.html b/files/ru/web/css/justify-content/index.html index ab44ce45bb..33263a5442 100644 --- a/files/ru/web/css/justify-content/index.html +++ b/files/ru/web/css/justify-content/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/justify-content

    {{EmbedInteractiveExample("pages/css/justify-content.html")}}

    -

    Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во Flexbox разметке есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от 0, эффект не будет применен, потому что не останется свободного места.

    +

    Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во Flexbox разметке есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от 0, эффект не будет применён, потому что не останется свободного места.

    Синтаксис

    @@ -32,7 +32,7 @@ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; -/* Распределенное выравнивание */ +/* Распределённое выравнивание */ justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока.   Первый элемент вначале, последний в конце */ justify-content: space-around; /* Равномерно распределяет все элементы по ширине flex-блока. @@ -74,7 +74,7 @@ justify-content: unset;
    right
    Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как  start.
    normal
    -
    Элементы располагаются на своих обычных позициях, так как будто свойство justify-content не задано. Этот параметр ведет себя как stretch в grid и flex контейнерах.
    +
    Элементы располагаются на своих обычных позициях, так как будто свойство justify-content не задано. Этот параметр ведёт себя как stretch в grid и flex контейнерах.
    baseline
    first baseline

    last baseline
    diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html index 4e28a766e9..e33b891277 100644 --- a/files/ru/web/css/justify-items/index.html +++ b/files/ru/web/css/justify-items/index.html @@ -65,7 +65,7 @@ justify-items: initial; justify-items: unset;
    -

    Этот атрибут может принимать одну из четырех различных форм:

    +

    Этот атрибут может принимать одну из четырёх различных форм:

    • Основные ключевые слова: одно из значений ключевого слова: normal, auto, или stretch.
    • @@ -83,10 +83,10 @@ justify-items: unset;
      Эффект этого атрибута зависит от выбранного способа разметки:
      • Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова start
      • -
      • Для разметки с абсолютно позиционированный элементами, это ключевое слово ведет себя как start на замененных блоках с абсолютным позиционированием и как stretch на всех остальных блоках с абсолютным позиционированием
      • +
      • Для разметки с абсолютно позиционированный элементами, это ключевое слово ведёт себя как start на заменённых блоках с абсолютным позиционированием и как stretch на всех остальных блоках с абсолютным позиционированием
      • Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
      • Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
      • -
      • Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению stretch, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведет себя как start
      • +
      • Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению stretch, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведёт себя как start
      start
      @@ -104,22 +104,22 @@ justify-items: unset;
      center
      Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.
      left
      -
      Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведет себя как start.
      +
      Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как start.
      right
      -
      Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведет себя как start.
      +
      Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как start.
      baseline
      first baseline

      last baseline
      Определяет участие значений first baseline или last baseline в исходном выравнивании. Значение baseline выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.
      Возвратным выравниванием для first baseline является значение start, для last baseline является значение end.
      stretch
      -
      Если объединенный размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением auto увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединенный размер точно заполняет контейнер выравнивания.
      +
      Если объединённый размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением auto увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединённый размер точно заполняет контейнер выравнивания.
      safe
      Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение start.
      unsafe
      Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.
      legacy
      -
      Создает значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение justify-self: auto, ключевое слово legacy не учитывается по нисходящему наследованию. Действует только со значением left, right, или center, связанным с ним.
      +
      Создаёт значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение justify-self: auto, ключевое слово legacy не учитывается по нисходящему наследованию. Действует только со значением left, right, или center, связанным с ним.
  • Формальный синтаксис

    @@ -164,7 +164,7 @@ justify-items: unset; diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html index 6dab482257..ee254f16d9 100644 --- a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation ---
    {{CSSRef}}
    -

    Навигация по хлебным крошкам помогает пользователю понять свое местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.

    +

    Навигация по хлебным крошкам помогает пользователю понять своё местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.

    Links displayed inline with separators

    @@ -22,7 +22,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
    -

    Примечание: В приведенном выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:

    +

    Примечание: В приведённом выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:

    .breadcrumb li:not(:first-child)::before {
       content: "→";
    diff --git a/files/ru/web/css/layout_cookbook/index.html b/files/ru/web/css/layout_cookbook/index.html
    index ca19142c28..898ba58672 100644
    --- a/files/ru/web/css/layout_cookbook/index.html
    +++ b/files/ru/web/css/layout_cookbook/index.html
    @@ -11,12 +11,12 @@ tags:
     translation_of: Web/CSS/Layout_cookbook
     ---
     
    {{CSSRef}}
    -Книга рецептов CSS объединяет примеры большинства наиболее распространенных лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.
    +Книга рецептов CSS объединяет примеры большинства наиболее распространённых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.

    В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика.

    -Примечание. Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведенных здесь рецептов.
    +Примечание. Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведённых здесь рецептов.

    The Recipes

    diff --git a/files/ru/web/css/layout_cookbook/split_navigation/index.html b/files/ru/web/css/layout_cookbook/split_navigation/index.html index 5f08999af1..c6b66d5e2f 100644 --- a/files/ru/web/css/layout_cookbook/split_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/split_navigation/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/Layout_cookbook/Split_Navigation

    Требования

    -

    Распространенный навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах. 

    +

    Распространённый навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах. 

    Рецепт

    diff --git a/files/ru/web/css/layout_cookbook/sticky_footers/index.html b/files/ru/web/css/layout_cookbook/sticky_footers/index.html index 945d727438..d5cc1a5c97 100644 --- a/files/ru/web/css/layout_cookbook/sticky_footers/index.html +++ b/files/ru/web/css/layout_cookbook/sticky_footers/index.html @@ -33,7 +33,7 @@ translation_of: Web/CSS/Layout_cookbook/Sticky_footers

    Выбор сделан

    -

    В приведенном выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс .wrapper имеет минимальную высоту 100%, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаем сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.

    +

    В приведённом выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс .wrapper имеет минимальную высоту 100%, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаём сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.

    При автоматическом размещении сетки наши элементы будут располагаться в исходном порядке, поэтому заголовок переходит на первую дорожку с автоматическими размерами, основное содержимое - на дорожку 1fr, а нижний колонтитул - в конечную дорожку с автоматическими размерами. Трек 1fr будет занимать все доступное пространство и поэтому будет увеличиваться, чтобы заполнить этот пробел.

    diff --git a/files/ru/web/css/line-break/index.html b/files/ru/web/css/line-break/index.html index 77a60084f0..3fd8255f5a 100644 --- a/files/ru/web/css/line-break/index.html +++ b/files/ru/web/css/line-break/index.html @@ -33,7 +33,7 @@ line-break: unset;
    loose
    Разрыв текста, используя правило разрыва строки с наименьшими ограничениями. Обычно используется для коротких строк, например, в газетах.
    normal
    -
    Разрыв текста, используя наиболее распространенное правило разрыва строки.
    +
    Разрыв текста, используя наиболее распространённое правило разрыва строки.
    strict
    Разрыв текста, используя самое строгое правило разрыва строки.
    diff --git a/files/ru/web/css/list-style-image/index.html b/files/ru/web/css/list-style-image/index.html index fd53b2bf17..75ab704334 100644 --- a/files/ru/web/css/list-style-image/index.html +++ b/files/ru/web/css/list-style-image/index.html @@ -40,7 +40,7 @@ list-style-image: unset;
    {{cssxref("<url>")}}
    Расположение элемента для использования в качестве маркера.
    none
    -
    Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определенный в {{ Cssxref("list-style-type") }}.
    +
    Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определённый в {{ Cssxref("list-style-type") }}.

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

    diff --git a/files/ru/web/css/margin-inline-start/index.html b/files/ru/web/css/margin-inline-start/index.html index 5021330969..cc9db43bce 100644 --- a/files/ru/web/css/margin-inline-start/index.html +++ b/files/ru/web/css/margin-inline-start/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/margin-inline-start ---

    {{CSSRef}}{{SeeCompatTable}}

    -

    Свойство margin-inline-start CSS задает логическое строковое (inline)  значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств {{cssxref("margin-top")}},  {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} в зависимости от значений {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

    +

    Свойство margin-inline-start CSS задаёт логическое строковое (inline)  значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств {{cssxref("margin-top")}},  {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} в зависимости от значений {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

    /* <length> values */
     margin-inline-start: 10px;  /* абсолютная величина */
    diff --git a/files/ru/web/css/margin-left/index.html b/files/ru/web/css/margin-left/index.html
    index ae301e9b36..870fe59a5d 100644
    --- a/files/ru/web/css/margin-left/index.html
    +++ b/files/ru/web/css/margin-left/index.html
    @@ -41,7 +41,7 @@ margin-left: unset;
      
    {{cssxref("<percentage>")}}
    Размер отступа в процентах - размер относительно длины родительского блока.
    auto
    -
    Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные: +
    Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные: diff --git a/files/ru/web/css/margin-right/index.html b/files/ru/web/css/margin-right/index.html index d21ce8cdfd..e8fbfc332f 100644 --- a/files/ru/web/css/margin-right/index.html +++ b/files/ru/web/css/margin-right/index.html @@ -41,7 +41,7 @@ margin-right: unset;
    {{cssxref("<percentage>")}}
    Размер отступа в процентах - размер относительно длины родительского блока.
    auto
    -
    Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные: +
    Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные:
    diff --git a/files/ru/web/css/margin/index.html b/files/ru/web/css/margin/index.html index 62c2f9ec7a..8841f9ed8c 100644 --- a/files/ru/web/css/margin/index.html +++ b/files/ru/web/css/margin/index.html @@ -11,7 +11,7 @@ translation_of_original: Web/CSS/margin-new ---
    {{CSSRef}}
    -

    Свойство margin CSS определяет внешний отступ на всех четырех сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.

    +

    Свойство margin CSS определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.

    /* Применяется ко всем четырём сторонам */
     margin: 1em;
    @@ -49,7 +49,7 @@ margin: unset;
         <div class="cell">
           <div class="m m4">margin: 5px 1em 0 auto</div>
         </div>
    -    <div class="note">Все вышеприведенные блоки имеют одинаковую ширину 50%</div>
    +    <div class="note">Все вышеприведённые блоки имеют одинаковую ширину 50%</div>
       </div>
     </div>
    @@ -112,10 +112,10 @@ margin: unset;

    Синтаксис

    -

    Свойство margin может быть задано с использованием одного, двух, трех или четырех значений. Каждое значение имеет тип <length>, <percentage> или является ключевым словом auto. Каждое значение может быть положительным, отрицательным или равным нулю.

    +

    Свойство margin может быть задано с использованием одного, двух, трёх или четырёх значений. Каждое значение имеет тип <length>, <percentage> или является ключевым словом auto. Каждое значение может быть положительным, отрицательным или равным нулю.

      -
    • Когда определено одно значение, такое значение определено для всех четырех сторон.
    • +
    • Когда определено одно значение, такое значение определено для всех четырёх сторон.
    • Когда определены два значения, то первое значение определяет внешний отступ для верхней и нижней стороны, а второе значение определяет отступ для левой и правой стороны.
    • Когда определены три значение, то первое значение определяет внешний отступ для верхней стороны, второе значение определяет внешний отступ для левой и правой стороны, а третье значение определяет отступ для нижней стороны.
    • Когда определены четыре значения, они определяют внешние отступы для верхней стороны, справа, снизу и слева в рассмотренном порядке (по часовой стрелке).
    • diff --git a/files/ru/web/css/max-block-size/index.html b/files/ru/web/css/max-block-size/index.html index 416987e8b3..bce04c2a67 100644 --- a/files/ru/web/css/max-block-size/index.html +++ b/files/ru/web/css/max-block-size/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/max-block-size ---

      {{CSSRef}}{{SeeCompatTable}}

      -

      CSS свойство max-block-size определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, в зависимости от значения определенного в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства max-block-size относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.

      +

      CSS свойство max-block-size определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, в зависимости от значения определённого в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства max-block-size относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.

      /* <length> values */
       max-block-size: 300px;
      diff --git a/files/ru/web/css/media_queries/index.html b/files/ru/web/css/media_queries/index.html
      index 148efccbea..63d4f820cb 100644
      --- a/files/ru/web/css/media_queries/index.html
      +++ b/files/ru/web/css/media_queries/index.html
      @@ -14,9 +14,9 @@ translation_of: Web/CSS/Media_Queries
       ---
       
      {{CSSRef("CSS3 Media Queries")}}
      -

      Media Queries - ключевой компонент отзывчивого дизайна, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определенного размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.

      +

      Media Queries - ключевой компонент отзывчивого дизайна, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определённого размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.

      -

      Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определенное изображение для использования в элементе {{HTMLElement("picture")}}.

      +

      Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определённое изображение для использования в элементе {{HTMLElement("picture")}}.

      In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.

      diff --git a/files/ru/web/css/media_queries/testing_media_queries/index.html b/files/ru/web/css/media_queries/testing_media_queries/index.html index facf42b21c..34880c4015 100644 --- a/files/ru/web/css/media_queries/testing_media_queries/index.html +++ b/files/ru/web/css/media_queries/testing_media_queries/index.html @@ -42,7 +42,7 @@ mediaQueryList.addListener(handleOrientationChange); // Добавление к handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
      -

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

      +

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

      Функция handleOrientationChange() будет следить за результатом выражения и обрабатывать все, что нам нужно сделать при изменении ориентации:

      @@ -57,11 +57,11 @@ handleOrientationChange(mediaQueryList); // Запуск обработчика

      Выше, мы определяем параметры как evt — event объект. Это имеет значение, поскольку новые реализации MediaQueryList обрабатывают события стандартным способом. Они больше не используют нестандартный механизм  {{domxref("MediaQueryListListener")}} , а используют стандартную настройку обработчика событий, передавая объект event  {{domxref("MediaQueryListEvent")}} как аргумент колбэк-функции.

      -

      Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства MediaQueryList путем прямого доступа к нему или доступа к event объекту.

      +

      Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства MediaQueryList путём прямого доступа к нему или доступа к event объекту.

      Уведомление о завершении выражения

      -

      Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод removeListener() для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:

      +

      Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод removeListener() для {{domxref("MediaQueryList") }}, передав ему имя, ранее определённой функции:

      mediaQueryList.removeListener(handleOrientationChange);
       
      diff --git a/files/ru/web/css/media_queries/using_media_queries/index.html b/files/ru/web/css/media_queries/using_media_queries/index.html index 9923ab8f1e..07014138a2 100644 --- a/files/ru/web/css/media_queries/using_media_queries/index.html +++ b/files/ru/web/css/media_queries/using_media_queries/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/Media_Queries/Using_media_queries tags: - Веб - Медиа - - Медиа верстка + - Медиа вёрстка - Медиавыражения - Отзывчивый дизайн - Продвинутый @@ -30,7 +30,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries

      Узконаправленные @media

      -

      Media features описывают некие характеристики определенного {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили  только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь)  будет расположено над элементами:

      +

      Media features описывают некие характеристики определённого {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили  только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь)  будет расположено над элементами:

      @media (hover: hover) { ... }
      @@ -38,7 +38,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries
      @media (max-width: 12450px) { ... }
      -

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

      +

      Если вы создаёте медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:

      @media (color) { ... }
      diff --git a/files/ru/web/css/object-fit/index.html b/files/ru/web/css/object-fit/index.html index 66c10ac4ed..69cacd65c0 100644 --- a/files/ru/web/css/object-fit/index.html +++ b/files/ru/web/css/object-fit/index.html @@ -23,11 +23,11 @@ translation_of: Web/CSS/object-fit
      fill
      Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.
      contain
      -
      Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определен как "помещенный внутрь" блока, ограничиваясь его шириной и высотой.
      +
      Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определён как "помещённый внутрь" блока, ограничиваясь его шириной и высотой.
      cover
      -
      Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определен как "покрытие" блока, ограничиваясь его шириной и высотой.
      +
      Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определён как "покрытие" блока, ограничиваясь его шириной и высотой.
      none
      -
      Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определен с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.
      +
      Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определён с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.
      diff --git a/files/ru/web/css/opacity/index.html b/files/ru/web/css/opacity/index.html index 5242bb0220..92b9189692 100644 --- a/files/ru/web/css/opacity/index.html +++ b/files/ru/web/css/opacity/index.html @@ -68,10 +68,10 @@ translation_of: Web/CSS/opacity opacity: 0.2; /* Едва видимый текст на фоне */ } .medium { - opacity: 0.5; /* Видимость текста более четкая на фоне */ + opacity: 0.5; /* Видимость текста более чёткая на фоне */ } .heavy { - opacity: 0.9; /* Видимость текста очень четкая на фоне */ + opacity: 0.9; /* Видимость текста очень чёткая на фоне */ } @@ -105,9 +105,9 @@ img.opacity:hover {

      Проблемы доступности

      -

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

      +

      Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещён текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.

      -

      Коэффициент цветовой контрастности определяется путем сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.

      +

      Коэффициент цветовой контрастности определяется путём сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.

      • WebAIM: Color Contrast Checker
      • diff --git a/files/ru/web/css/order/index.html b/files/ru/web/css/order/index.html index a9265b81c8..783af7d5b6 100644 --- a/files/ru/web/css/order/index.html +++ b/files/ru/web/css/order/index.html @@ -55,7 +55,7 @@ order: unset; </main> <footer>...</footer> -

        Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.

        +

        Следующий CSS код должен создать классический блок контента окружённый боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.

        main { display: flex;  text-align:center; }
         main > article { flex:1;        order: 2; }
        diff --git a/files/ru/web/css/orphans/index.html b/files/ru/web/css/orphans/index.html
        index d6c5385e17..b279776262 100644
        --- a/files/ru/web/css/orphans/index.html
        +++ b/files/ru/web/css/orphans/index.html
        @@ -2,7 +2,7 @@
         title: orphans
         slug: Web/CSS/orphans
         tags:
        -  - Верстка
        +  - Вёрстка
           - печать
           - разрыв страницы
           - фрагментация
        diff --git a/files/ru/web/css/overflow-block/index.html b/files/ru/web/css/overflow-block/index.html
        index ead0067598..2756cb66f9 100644
        --- a/files/ru/web/css/overflow-block/index.html
        +++ b/files/ru/web/css/overflow-block/index.html
        @@ -31,7 +31,7 @@ overflow-block: unset;
         
         
        visible
        -
        Содержимое не обрезается и может отображаться за пределами начального и конечного краев блока отступа.
        +
        Содержимое не обрезается и может отображаться за пределами начального и конечного краёв блока отступа.
        hidden
        При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.
        scroll
        diff --git a/files/ru/web/css/overflow-wrap/index.html b/files/ru/web/css/overflow-wrap/index.html index fda01d4824..8c5409417a 100644 --- a/files/ru/web/css/overflow-wrap/index.html +++ b/files/ru/web/css/overflow-wrap/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/overflow-wrap
        -

        Note: В отличие от {{cssxref("word-break")}}, overflow-wrap создает перенос только, если целое слово не может быть размещено на своей линии без переполнения

        +

        Note: В отличие от {{cssxref("word-break")}}, overflow-wrap создаёт перенос только, если целое слово не может быть размещено на своей линии без переполнения

        Изначально свойство word-wrap не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в overflow-wrap c алиасом word-wrap.

        @@ -30,7 +30,7 @@ overflow-wrap: initial; overflow-wrap: unset;
        -

        Свойство overflow-wrap задается с помощью ключевого слова и выбирается из списка значений приведенных ниже:

        +

        Свойство overflow-wrap задаётся с помощью ключевого слова и выбирается из списка значений приведённых ниже:

        Values

        diff --git a/files/ru/web/css/overflow/index.html b/files/ru/web/css/overflow/index.html index 58a572c013..00bac1115d 100644 --- a/files/ru/web/css/overflow/index.html +++ b/files/ru/web/css/overflow/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/overflow

        Свойство CSS overflow определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.

        -

        Использование свойства overflow со значениями, отличными от visible, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden, элемент, возможно, придется прокрутить.

        +

        Использование свойства overflow со значениями, отличными от visible, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden, элемент, возможно, придётся прокрутить.

        {{cssinfo}}

        diff --git a/files/ru/web/css/overscroll-behavior/index.html b/files/ru/web/css/overscroll-behavior/index.html index acdb9c8c05..58377262db 100644 --- a/files/ru/web/css/overscroll-behavior/index.html +++ b/files/ru/web/css/overscroll-behavior/index.html @@ -23,7 +23,7 @@ overflow: initial; overflow: unset; -

        По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение ее верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.

        +

        По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение её верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.

        In some cases these behaviors are not desirable. you can use overscroll-behavior to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.

        diff --git a/files/ru/web/css/padding-left/index.html b/files/ru/web/css/padding-left/index.html index 0e4c4a28ed..f669f782d3 100644 --- a/files/ru/web/css/padding-left/index.html +++ b/files/ru/web/css/padding-left/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/padding-left

        Внутренний отступ элемента (англ. "padding") - это пространство между его содержимым и его границей.

        -

        Примечание: Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырех сторонах элемента одним значением.

        +

        Примечание: Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырёх сторонах элемента одним значением.

        Синтаксис

        diff --git a/files/ru/web/css/padding/index.html b/files/ru/web/css/padding/index.html index 8ab7697255..d299d9dbf2 100644 --- a/files/ru/web/css/padding/index.html +++ b/files/ru/web/css/padding/index.html @@ -49,7 +49,7 @@ padding: unset;
        -
      • Одно значение применяется ко всем четырем сторонам
      • +
      • Одно значение применяется ко всем четырём сторонам
      • Два значения применяются: 1. верхняя и нижняя и 2. левая и правая стороны
      • Три значения применяются: 1. верхняя, 2. левая и правая и 3. нижняя стороны
      • Четыре значения применяются: 1. верхняя, 2. правая, 3. нижняя и 4. левая стороны
      • diff --git a/files/ru/web/css/paint-order/index.html b/files/ru/web/css/paint-order/index.html index c2bcbbf9bf..36f95f78c2 100644 --- a/files/ru/web/css/paint-order/index.html +++ b/files/ru/web/css/paint-order/index.html @@ -27,7 +27,7 @@ paint-order: markers stroke fill; /* отрисовывает маркеры, з

        Если значение не указано, значением по умолчанию является следующий порядок  fill, stroke, markers.

        -

        Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном порядке друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределенное значение.

        +

        Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном порядке друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределённое значение.

        Примечание: В этом случае, маркеры отрисовываются только при рисовании форм SVG. включающих использование свойств marker-*  (например marker-start) и элемента <marker>. Они не применяются к тексту HTML, в этом случае, вы можете определить только порядок stroke и fill.

        diff --git a/files/ru/web/css/perspective/index.html b/files/ru/web/css/perspective/index.html index b0d1d14fc1..015f838b1e 100644 --- a/files/ru/web/css/perspective/index.html +++ b/files/ru/web/css/perspective/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/perspective

        Точка схождения по умолчанию расположена в центре элемента, но её можно переместить используя свойство {{ cssxref("perspective-origin") }}.

        -

        При использовании данного свойства со значениями отличными от 0 или none создается новый stacking context.

        +

        При использовании данного свойства со значениями отличными от 0 или none создаётся новый stacking context.

        {{cssinfo}}

        diff --git a/files/ru/web/css/pointer-events/index.html b/files/ru/web/css/pointer-events/index.html index 2c12b8b291..b6a95a4f4a 100644 --- a/files/ru/web/css/pointer-events/index.html +++ b/files/ru/web/css/pointer-events/index.html @@ -91,7 +91,7 @@ img {

        Примечание

        -

        Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши,  с помощью pointer-events не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из  дочерних элементов есть явные pointer-events, позволяющие этому ребенку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребенком, ни родителем (он пройдет через «родительский» на «цели» под ним).

        +

        Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши,  с помощью pointer-events не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из  дочерних элементов есть явные pointer-events, позволяющие этому ребёнку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребёнком, ни родителем (он пройдёт через «родительский» на «цели» под ним).

        Мы хотели бы предоставить более тонкий контроль (а не только auto и none) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить pointer-events для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на этой странице вики (не беспокойтесь, мы всё сохраним аккуратно). 

        diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html index 3baa0548f0..fb6002c2fb 100644 --- a/files/ru/web/css/position/index.html +++ b/files/ru/web/css/position/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/position
      • Элемент с липкой позицией — это элемент, у которого {{cssxref('computed_value', 'значение вычисленного')}} position является sticky. Он рассматривается как относительно позиционированный до тех пор, пока {{cssxref('Containing_Block', 'содержащий его блок')}} не пересечёт указанный порог (например, установка {{cssxref('top')}} в значение, отличное от auto) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край {{cssxref('Containing_Block', 'содержащего его блока')}}.
      -

      В большинстве случаев абсолютно позиционированный элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в auto, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределенным (то есть , auto). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как auto.

      +

      В большинстве случаев абсолютно позиционированный элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в auto, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределённым (то есть , auto). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как auto.

      За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):

      @@ -39,19 +39,19 @@ translation_of: Web/CSS/position
      static
      -
      Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу. Это значение по умолчанию.
      +
      Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу. Это значение по умолчанию.
      relative
      Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была static.
      -
      Это значение создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение z-index не auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.
      +
      Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение z-index не auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.
      absolute
      -
      Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями top, right, bottom, и left.
      +
      Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создаётся пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями top, right, bottom, и left.
      Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}, когда значение z-index не auto. Поля абсолютно позиционированных коробок не {{cssxref('CSS_Box_Model/Mastering_margin_collapsing', 'сворачиваются')}} с другими полями.
      fixed
      -
      Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left.
      -
      Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на каждой странице.
      +
      Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left.
      +
      Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на каждой странице.
      sticky
      Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и {{cssxref('Containing_Block', 'содержащего блока')}} (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left. Смещение не влияет на положение любых других элементов.
      -
      Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).
      +
      Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

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

      @@ -62,7 +62,7 @@ translation_of: Web/CSS/position

      Относительное позиционирование

      -

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

      +

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

      HTML

      @@ -134,7 +134,7 @@ span {

      Фиксированное позиционирование

      -

      Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform, perspective, или свойства filter, отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В приведенном ниже примере окно c id="one" фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

      +

      Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform, perspective, или свойства filter, отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c id="one" фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

      HTML

      @@ -196,7 +196,7 @@ span {

      Липкое позиционирование

      -

      Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечет заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например...

      +

      Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечёт заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например...

      #one { position: sticky; top: 10px; }
      @@ -322,6 +322,6 @@ dd + dd {

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

      +Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам запрос на перенос.

      {{Compat("css.properties.position")}}

      diff --git a/files/ru/web/css/radial-gradient()/index.html b/files/ru/web/css/radial-gradient()/index.html index efd1cd0d57..297ef580c4 100644 --- a/files/ru/web/css/radial-gradient()/index.html +++ b/files/ru/web/css/radial-gradient()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/radial-gradient() ---
      {{CSSRef}}
      -

      CSS функция radial-gradient() создает картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.

      +

      CSS функция radial-gradient() создаёт картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.

      {{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}
      @@ -19,16 +19,16 @@ translation_of: Web/CSS/radial-gradient()

      Композиция свойства

      -

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

      +

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

      Чтобы создать плавный градиент, функция radial-gradient() рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.

      -

      Точки изменения цвета расположены на виртуальном луче градиента, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является 100%. Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы.

      +

      Точки изменения цвета расположены на виртуальном луче градиента, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является 100%. Цвет каждой такой формы задаётся цветом на пересечении луча градиента и этой формы.

      Синтаксис

      /* Градиент в центре контейнера,
      -   переход от красного к синему и после к зеленому */
      +   переход от красного к синему и после к зелёному */
       radial-gradient(circle at center, red 0, blue, green 100%)

      Параметры

      @@ -108,7 +108,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)

      {{EmbedLiveSample('Простой_градиент', 120, 120)}}

      -

      Градиент со смещенным центром

      +

      Градиент со смещённым центром

    - + diff --git a/files/ru/web/css/reference/index.html b/files/ru/web/css/reference/index.html index 507cc1fa72..36869289dc 100644 --- a/files/ru/web/css/reference/index.html +++ b/files/ru/web/css/reference/index.html @@ -160,7 +160,7 @@ div.menu-bar li:hover > ul { display: block; }
  • Box-модель
  • Замещаемый элемент
  • Синтаксис определения значений
  • -
  • Сокращенные свойства
  • +
  • Сокращённые свойства
  • Объединение отступов
  • Модель визуального форматирования
  • Слои
  • diff --git a/files/ru/web/css/repeating-linear-gradient()/index.html b/files/ru/web/css/repeating-linear-gradient()/index.html index e7dc20f24e..c3160fb98a 100644 --- a/files/ru/web/css/repeating-linear-gradient()/index.html +++ b/files/ru/web/css/repeating-linear-gradient()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/repeating-linear-gradient() ---
    {{CSSRef}}
    -

    CSS функция repeating-linear-gradient() создает изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.

    +

    CSS функция repeating-linear-gradient() создаёт изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.

    /* Повторяющийся градиент с углом наклона 45 градусов,
        начинающийся с синего и заканчивающийся красным цветом */
    @@ -16,14 +16,14 @@ repeating-linear-gradient(45deg, blue, red);
     repeating-linear-gradient(to left top, blue, red);
     
     /* Повторяющийся градиент идущий от низа к верху,
    -   начинающийся с синего, переходящего в зеленый на 40%,
    +   начинающийся с синего, переходящего в зелёный на 40%,
        и заканчивающийся красным цветом */
     repeating-linear-gradient(0deg, blue, green 40%, red);
     
    -

    С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведет к резкому визуальному переходу.

    +

    С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведёт к резкому визуальному переходу.

    -

    Повторяющийся линейный градиент (как и любой прочий градиент) не имеет размерностей по умолчанию; т.е. у него нет предопределенного размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.

    +

    Повторяющийся линейный градиент (как и любой прочий градиент) не имеет размерностей по умолчанию; т.е. у него нет предопределённого размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.

    Примечание: Поскольку <gradient> относится к типу данных <image> , он может быть использован только там где применим тип <image>. По этой причине repeating-linear-gradient() не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("<color>")}}.

    diff --git a/files/ru/web/css/selector_list/index.html b/files/ru/web/css/selector_list/index.html index dfa5948008..7bb32d2d94 100644 --- a/files/ru/web/css/selector_list/index.html +++ b/files/ru/web/css/selector_list/index.html @@ -2,7 +2,7 @@ title: Список селекторов slug: Web/CSS/Selector_list tags: - - Верстка + - Вёрстка - список селекторов translation_of: Web/CSS/Selector_list --- @@ -26,14 +26,14 @@ div {

    Группирование на одной линии

    -

    Группирование селекторов списком, разделенным запятой, на одной строк.

    +

    Группирование селекторов списком, разделённым запятой, на одной строк.

    h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
     

    Мультистрочное группирование

    -

    Группирование селекторов списком, разделенным запятой, на нескольких строках.

    +

    Группирование селекторов списком, разделённым запятой, на нескольких строках.

    #main,
     .content,
    @@ -54,7 +54,7 @@ h3 { font-family: sans-serif }

    Это происходит потому, что один неподдерживаемый селектор в списке селекторов делает недействительным все правило.

    -

    Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счет этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.

    +

    Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счёт этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.

    h1 { font-family: sans-serif }
     h2:maybe-unsupported { font-family: sans-serif }
    diff --git a/files/ru/web/css/shorthand_properties/index.html b/files/ru/web/css/shorthand_properties/index.html
    index 5ac6911db1..90738acb1b 100644
    --- a/files/ru/web/css/shorthand_properties/index.html
    +++ b/files/ru/web/css/shorthand_properties/index.html
    @@ -9,7 +9,7 @@ translation_of: Web/CSS/Shorthand_properties
     ---
     
    {{cssref}}
    -

    Сокращенные свойства - это такие CSS свойства, которые позволяют одновременно устанавливать значения нескольких других свойств. Используя сокращенное свойство, вы можете писать более сжатые (и часто более читаемые) таблицы стилей, экономя время и энергию.

    +

    Сокращённые свойства - это такие CSS свойства, которые позволяют одновременно устанавливать значения нескольких других свойств. Используя сокращённое свойство, вы можете писать более сжатые (и часто более читаемые) таблицы стилей, экономя время и энергию.

    The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.

    diff --git a/files/ru/web/css/specificity/index.html b/files/ru/web/css/specificity/index.html index 42adadbf3a..535a64f460 100644 --- a/files/ru/web/css/specificity/index.html +++ b/files/ru/web/css/specificity/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/Specificity

    Важное исключение из правил - !important

    -

    Когда при объявлении стиля используется модификатор !important, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор !important не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку !important усложняет отладку, нарушая естественное каскадирование ваших стилей, он не приветствуется и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором !important, то применен будет стиль с большей специфичностью.

    +

    Когда при объявлении стиля используется модификатор !important, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор !important не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку !important усложняет отладку, нарушая естественное каскадирование ваших стилей, он не приветствуется и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором !important, то применён будет стиль с большей специфичностью.

    Несколько практических советов:

    @@ -69,7 +69,7 @@ span { { #someElement p { color: blue; @@ -96,7 +96,7 @@ p.awesome .awesome Не исключение - :not() -

    Отрицающий псевдокласс :not не учитывается как псевдокласс при расчете специфичности. Однако селекторы, расположенные внутри :not, при подсчете количества по типам селекторов рассматриваются как обычные селекторы и учитываются.

    +

    Отрицающий псевдокласс :not не учитывается как псевдокласс при расчёте специфичности. Однако селекторы, расположенные внутри :not, при подсчёте количества по типам селекторов рассматриваются как обычные селекторы и учитываются.

    Следующий фрагмент CSS ...

    @@ -138,7 +138,7 @@ div:not(.outer) p { }
    -

    ... примененный к такому HTML ...

    +

    ... применённый к такому HTML ...

    <div class="outer">
       <p>Это div.outer</p>
    @@ -168,7 +168,7 @@ div:not(.outer) p {
     }
     
    -

    ... примененные к нижеследующей разметке ...

    +

    ... применённые к нижеследующей разметке ...

    <p id="foo">Это пример.</p>
     
    @@ -229,7 +229,7 @@ h1 {

    Вот заголовок!

    -

    Потому что селектор h1 непосредственно соответствует элементу, а стиль, задающий зеленый цвет, всего лишь унаследован от родителя.

    +

    Потому что селектор h1 непосредственно соответствует элементу, а стиль, задающий зелёный цвет, всего лишь унаследован от родителя.

    Дополнительная информация

    diff --git a/files/ru/web/css/syntax/index.html b/files/ru/web/css/syntax/index.html index ead0688e79..18803ab95c 100644 --- a/files/ru/web/css/syntax/index.html +++ b/files/ru/web/css/syntax/index.html @@ -12,12 +12,12 @@ original_slug: Web/CSS/Синтаксис
    • Свойство (property) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).
    • -
    • Значение (value) — описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, определенных формальными правилами, а также семантический смысл, реализованный движком браузера.
    • +
    • Значение (value) — описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, определённых формальными правилами, а также семантический смысл, реализованный движком браузера.

    Объявления CSS

    -

    Задание CSS свойствам определенных значений — это основная функция CSS. Пара свойство-значение называется объявлением. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.

    +

    Задание CSS свойствам определённых значений — это основная функция CSS. Пара свойство-значение называется объявлением. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.

    И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, ':' (U+003A COLON), а пробелы до, между и после свойства или значения игнорируются.

    @@ -31,11 +31,11 @@ original_slug: Web/CSS/Синтаксис

    css syntax - block.png

    -

    Такие блоки называются блоками объявлений, и объявления в них разделяются точкой с запятой, ';' (U+003B SEMICOLON). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить ее для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.

    +

    Такие блоки называются блоками объявлений, и объявления в них разделяются точкой с запятой, ';' (U+003B SEMICOLON). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить её для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.

    css syntax - declarations block.png

    -
    Содержимое блока объявлений CSS, т. е. объявления, разделенные точкой с запятой. Блок объявлений может быть помещен внутри атрибута style HTML-документа без фигурных скобок.
    +
    Содержимое блока объявлений CSS, т. е. объявления, разделённые точкой с запятой. Блок объявлений может быть помещён внутри атрибута style HTML-документа без фигурных скобок.

    CSS rulesets

    diff --git a/files/ru/web/css/time/index.html b/files/ru/web/css/time/index.html index 6d15f3733d..f892300dc1 100644 --- a/files/ru/web/css/time/index.html +++ b/files/ru/web/css/time/index.html @@ -2,7 +2,7 @@ title:
    - + diff --git a/files/ru/web/css/used_value/index.html b/files/ru/web/css/used_value/index.html index 2467369481..4ae8b7251b 100644 --- a/files/ru/web/css/used_value/index.html +++ b/files/ru/web/css/used_value/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/used_value
    Используемое значение CSS свойство, которое используется, когда все вычисления уже выполнены, смотрите вычисленное значение.
    -

    После того как {{glossary("user agent")}} закончил свои расчеты каждое свойство CSS имеет своё значение. Используемые значения  (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов  (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.

    +

    После того как {{glossary("user agent")}} закончил свои расчёты каждое свойство CSS имеет своё значение. Используемые значения  (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов  (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.

    Замечание:  {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API возвращает решённое значение, которое может быть численным значением или используемым значением, в зависимости от свойства.

    diff --git a/files/ru/web/css/user-select/index.html b/files/ru/web/css/user-select/index.html index 2b9b17f8ae..ed33dd0608 100644 --- a/files/ru/web/css/user-select/index.html +++ b/files/ru/web/css/user-select/index.html @@ -2,7 +2,7 @@ title: user-select slug: Web/CSS/user-select tags: - - Верстка + - Вёрстка - Свойство translation_of: Web/CSS/user-select --- @@ -62,7 +62,7 @@ user-select: unset;
    text
    Текст может быть выбран пользователем.
    all
    -
    В HTML-редакторе, если двойной клик или контекстный клик произошел во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.
    +
    В HTML-редакторе, если двойной клик или контекстный клик произошёл во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.
    contain
    Позволяет начать выбор внутри элемента; однако, выбор будет содержаться внутри границ данного элемента.
    element{{non-standard_inline}} (IE-specific alias)
    diff --git a/files/ru/web/css/using_css_custom_properties/index.html b/files/ru/web/css/using_css_custom_properties/index.html index 65fd104311..064d0fda66 100644 --- a/files/ru/web/css/using_css_custom_properties/index.html +++ b/files/ru/web/css/using_css_custom_properties/index.html @@ -35,12 +35,12 @@ translation_of: Web/CSS/Using_CSS_custom_properties
    -

    Note: В более ранней спецификации префикс для переменных был var- , но позже был изменен на --. Firefox 31 и выше следуют новой спецификации.({{bug(985838)}})

    +

    Note: В более ранней спецификации префикс для переменных был var- , но позже был изменён на --. Firefox 31 и выше следуют новой спецификации.({{bug(985838)}})

    Первый шаг с CSS Переменными

    -

    Начнем с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

    +

    Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

    .one {
    diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html
    index 2ff298b02e..2a4ae09c70 100644
    --- a/files/ru/web/css/vertical-align/index.html
    +++ b/files/ru/web/css/vertical-align/index.html
    @@ -89,7 +89,7 @@ p {
         <td style="vertical-align: middle">middle</td>
         <td style="vertical-align: bottom">bottom</td>
         <td>
    -      <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо нее появится нечто еще более причудливое и необъяснимое.</p>
    +      <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.</p>
     <p>Существует и другая теория, согласно которой это уже случилось.</p>
    Ratio1_1.85.png 185/100 = 91/50
    (нецелые делимые и делители не допускаются)
    Наиболее распространенный видео-формат в 1960-х.Наиболее распространённый видео-формат в 1960-х.
    Ratio1_2.39.png
    {{ SpecName('CSS3 Selectors', '#universal-selector', 'universal selector') }} {{ Spec2('CSS3 Selectors') }}Определено поведение в отношении пространств имен и добавлена подсказка, что разрешено пренебрегать селектором для псевдо-элементовОпределено поведение в отношении пространств имён и добавлена подсказка, что разрешено пренебрегать селектором для псевдо-элементов
    {{ SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector') }}
    diff --git a/files/ru/web/css/will-change/index.html b/files/ru/web/css/will-change/index.html index 916c5d4263..cb52d6e9b0 100644 --- a/files/ru/web/css/will-change/index.html +++ b/files/ru/web/css/will-change/index.html @@ -26,16 +26,16 @@ will-change: unset;
    • -

      Не применяйте will-change к большому числу элементов. Браузер и так пытается изо всех сил всё оптимизировать. Некоторые тяжелые оптимизации ссылающиеся на will-change используют много аппаратных мощностей, и если злоупотреблять этим, это может привести к замедлению работы страницы и потреблению большого количества ресурсов.

      +

      Не применяйте will-change к большому числу элементов. Браузер и так пытается изо всех сил всё оптимизировать. Некоторые тяжёлые оптимизации ссылающиеся на will-change используют много аппаратных мощностей, и если злоупотреблять этим, это может привести к замедлению работы страницы и потреблению большого количества ресурсов.

    • Используйте умеренно. Обычное поведение для оптимизаций которые выполняет браузер, удалить оптимизацию как можно скорее и вернуть нормальное состояние. Но добавление will-change прямо в файле стилей предполагает, что указанный элемент всегда находится в нескольких шагах от изменений и браузер будет сохранять для него оптимизацию гораздо больше времени. Так что, было бы хорошо включать и отключать will-change используя скрипт до и после того как произошли изменения.

    • -

      Не применяйте will-change к элементам для выполнения преждевременной оптимизации. Если ваша страница хорошо отрабатывается, не применяйте will-change свойство к элементу только чтобы выжать немного больше скорости. will-change предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Чрезмерное использование will-change приведет к излишнему потреблению памяти и вызовет более тяжелый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведет к ухудшению производительности.

      +

      Не применяйте will-change к элементам для выполнения преждевременной оптимизации. Если ваша страница хорошо отрабатывается, не применяйте will-change свойство к элементу только чтобы выжать немного больше скорости. will-change предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Чрезмерное использование will-change приведёт к излишнему потреблению памяти и вызовет более тяжёлый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведёт к ухудшению производительности.

    • -

      Дайте ему достаточно времени, чтобы работать. Это свойство дает автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.

      +

      Дайте ему достаточно времени, чтобы работать. Это свойство даёт автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.

    @@ -58,7 +58,7 @@ will-change: unset;
    contents
    Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.
    {{cssxref("custom-ident", "<custom-ident>")}}
    -
    Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращенная запись,  тогда оно указывает на все полные записи свойств, на которые указывает сокращенная запись. Это не может быть одним из следующих значений: unset, initial, inherit, will-change, auto, scroll-position, или contents
    +
    Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращённая запись,  тогда оно указывает на все полные записи свойств, на которые указывает сокращённая запись. Это не может быть одним из следующих значений: unset, initial, inherit, will-change, auto, scroll-position, или contents

    Примеры

    diff --git a/files/ru/web/css/word-spacing/index.html b/files/ru/web/css/word-spacing/index.html index 0bd210c64b..495aa1889c 100644 --- a/files/ru/web/css/word-spacing/index.html +++ b/files/ru/web/css/word-spacing/index.html @@ -37,7 +37,7 @@ word-spacing: unset;
    normal
    -
    Нормальный интервал между словами, определенный текущим шрифтом и/или браузером.
    +
    Нормальный интервал между словами, определённый текущим шрифтом и/или браузером.
    {{cssxref("length")}}
    Определяет дополнительный интервал в дополнение к внутреннему интервалу между словами, определяемому шрифтом.
    {{cssxref("percentage")}}
    @@ -71,7 +71,7 @@ word-spacing: unset;

    Большое положительное или отрицательное значение word-spacing может сделать предложения, к которым применяется стиль, нечитаемыми.  Для текста, стилизованного с очень большими положительными значениями, слова будут так далеки друг от друга, что он больше не будет казаться предложением. Для текста, стилизованного с очень большими отрицательными значениями, слова будут перекрывать друг от друга до точки, где начало и конец каждого слова будут неразличимы.

    -

    Разборчивый word-spacing должен быть определен в каждом конкретном случае, так как различные семейства шрифтов имеют различную ширину символов. Нет ни одного значения, которое может обеспечить для всех семейств шрифтов автоматическое сохранение разборчивости.

    +

    Разборчивый word-spacing должен быть определён в каждом конкретном случае, так как различные семейства шрифтов имеют различную ширину символов. Нет ни одного значения, которое может обеспечить для всех семейств шрифтов автоматическое сохранение разборчивости.

    - + -- cgit v1.2.3-54-g00ecf
    {{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}} {{Spec2('CSS3 Text')}}Заменяет предыдущее значение значением <spacing-limit>, которое определяет те же вещи, плюс значение <percentage>. Позволяет использовать до трех значений, описывающих оптимальное, минимальное и максимальное значение.Заменяет предыдущее значение значением <spacing-limit>, которое определяет те же вещи, плюс значение <percentage>. Позволяет использовать до трёх значений, описывающих оптимальное, минимальное и максимальное значение.
    {{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}