From 5d7a39a3a3b08991872ff2fe44ec419bd2358b87 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Tue, 1 Aug 2023 03:39:43 -0700 Subject: [PATCH 1/2] ru: Format /web/css using Prettier (part 1) --- files/ru/web/css/--_star_/index.md | 10 +- .../@counter-style/additive-symbols/index.md | 18 +- files/ru/web/css/@counter-style/index.md | 8 +- files/ru/web/css/@document/index.md | 6 +- .../web/css/@font-face/font-display/index.md | 6 +- .../web/css/@font-face/font-family/index.md | 5 +- files/ru/web/css/@font-face/index.md | 48 +++--- .../ru/web/css/@font-feature-values/index.md | 3 +- files/ru/web/css/@media/index.md | 84 ++++----- .../web/css/@media/inverted-colors/index.md | 13 +- files/ru/web/css/@media/orientation/index.md | 4 +- .../css/@media/prefers-color-scheme/index.md | 38 ++++- .../@media/prefers-reduced-motion/index.md | 31 ++-- files/ru/web/css/@media/scripting/index.md | 6 +- files/ru/web/css/@namespace/index.md | 11 +- files/ru/web/css/@page/index.md | 3 +- files/ru/web/css/@supports/index.md | 6 +- .../css/_colon_-moz-only-whitespace/index.md | 7 +- files/ru/web/css/_colon_active/index.md | 48 ++++-- files/ru/web/css/_colon_any-link/index.md | 8 +- files/ru/web/css/_colon_checked/index.md | 159 +++++++++++------- files/ru/web/css/_colon_default/index.md | 10 +- files/ru/web/css/_colon_defined/index.md | 17 +- files/ru/web/css/_colon_dir/index.md | 5 +- files/ru/web/css/_colon_disabled/index.md | 20 ++- files/ru/web/css/_colon_empty/index.md | 5 +- files/ru/web/css/_colon_enabled/index.md | 21 +-- files/ru/web/css/_colon_first-child/index.md | 6 +- .../ru/web/css/_colon_first-of-type/index.md | 6 +- files/ru/web/css/_colon_first/index.md | 6 +- .../ru/web/css/_colon_focus-visible/index.md | 20 ++- files/ru/web/css/_colon_focus-within/index.md | 9 +- files/ru/web/css/_colon_focus/index.md | 6 +- files/ru/web/css/_colon_fullscreen/index.md | 8 +- files/ru/web/css/_colon_has/index.md | 8 +- .../ru/web/css/_colon_host_function/index.md | 25 +-- files/ru/web/css/_colon_hover/index.md | 11 +- files/ru/web/css/_colon_in-range/index.md | 18 +- .../ru/web/css/_colon_indeterminate/index.md | 8 +- files/ru/web/css/_colon_invalid/index.md | 7 +- files/ru/web/css/_colon_is/index.md | 135 +++++++++++---- files/ru/web/css/_colon_lang/index.md | 28 ++- files/ru/web/css/_colon_last-child/index.md | 2 +- files/ru/web/css/_colon_last-of-type/index.md | 8 +- files/ru/web/css/_colon_left/index.md | 2 +- files/ru/web/css/_colon_link/index.md | 24 +-- files/ru/web/css/_colon_not/index.md | 12 +- files/ru/web/css/_colon_nth-child/index.md | 53 +++--- .../ru/web/css/_colon_nth-last-child/index.md | 13 +- .../web/css/_colon_nth-last-of-type/index.md | 2 +- files/ru/web/css/_colon_nth-of-type/index.md | 4 +- files/ru/web/css/_colon_only-child/index.md | 26 +-- files/ru/web/css/_colon_only-of-type/index.md | 5 +- files/ru/web/css/_colon_optional/index.md | 2 +- files/ru/web/css/_colon_out-of-range/index.md | 26 +-- .../web/css/_colon_placeholder-shown/index.md | 25 ++- files/ru/web/css/_colon_read-only/index.md | 23 ++- files/ru/web/css/_colon_read-write/index.md | 22 ++- files/ru/web/css/_colon_required/index.md | 2 +- files/ru/web/css/_colon_right/index.md | 2 +- files/ru/web/css/_colon_root/index.md | 2 +- files/ru/web/css/_colon_target/index.md | 42 +++-- files/ru/web/css/_colon_valid/index.md | 5 +- files/ru/web/css/_colon_visited/index.md | 11 +- files/ru/web/css/_colon_where/index.md | 35 +++- .../_doublecolon_-moz-progress-bar/index.md | 2 +- .../index.md | 2 +- files/ru/web/css/_doublecolon_after/index.md | 32 ++-- .../ru/web/css/_doublecolon_backdrop/index.md | 4 +- files/ru/web/css/_doublecolon_before/index.md | 48 +++--- files/ru/web/css/_doublecolon_cue/index.md | 3 +- .../css/_doublecolon_first-letter/index.md | 24 ++- .../web/css/_doublecolon_first-line/index.md | 17 +- .../css/_doublecolon_grammar-error/index.md | 4 +- files/ru/web/css/_doublecolon_marker/index.md | 9 +- .../web/css/_doublecolon_placeholder/index.md | 15 +- .../web/css/_doublecolon_selection/index.md | 9 +- .../ru/web/css/_doublecolon_slotted/index.md | 27 +-- files/ru/web/css/actual_value/index.md | 4 +- .../css/adjacent_sibling_combinator/index.md | 4 +- files/ru/web/css/align-content/index.md | 26 +-- files/ru/web/css/align-self/index.md | 1 + files/ru/web/css/all/index.md | 84 +++++++-- files/ru/web/css/angle/index.md | 8 +- files/ru/web/css/animation-duration/index.md | 1 + files/ru/web/css/animation-fill-mode/index.md | 57 ++++--- .../css/animation-iteration-count/index.md | 1 + files/ru/web/css/animation-name/index.md | 1 + .../css/animation-timing-function/index.md | 4 +- files/ru/web/css/animation/index.md | 80 +++++++-- files/ru/web/css/at-rule/index.md | 11 +- files/ru/web/css/attr/index.md | 32 ++-- files/ru/web/css/attribute_selectors/index.md | 45 +++-- files/ru/web/css/backdrop-filter/index.md | 5 +- files/ru/web/css/backface-visibility/index.md | 20 +-- .../ru/web/css/background-attachment/index.md | 32 ++-- .../ru/web/css/background-blend-mode/index.md | 58 ++++--- files/ru/web/css/background-clip/index.md | 28 ++- files/ru/web/css/background-color/index.md | 19 +-- files/ru/web/css/background-image/index.md | 24 ++- 100 files changed, 1219 insertions(+), 771 deletions(-) diff --git a/files/ru/web/css/--_star_/index.md b/files/ru/web/css/--_star_/index.md index 8a5200607ba58c..6f7336f9f72d44 100644 --- a/files/ru/web/css/--_star_/index.md +++ b/files/ru/web/css/--_star_/index.md @@ -1,5 +1,5 @@ --- -title: 'Кастомные свойства (--*): CSS переменные' +title: "Кастомные свойства (--*): CSS переменные" slug: Web/CSS/--* page-type: guide tags: @@ -41,12 +41,8 @@ browser-compat: css.properties.custom-property ### HTML ```html -

- Этот параграф должен иметь синий фон и жёлтый текст. -

-

- Этот параграф должен иметь жёлтый фон и синий текст. -

+

Этот параграф должен иметь синий фон и жёлтый текст.

+

Этот параграф должен иметь жёлтый фон и синий текст.

Этот параграф должен иметь зелёный фон и жёлтый текст. diff --git a/files/ru/web/css/@counter-style/additive-symbols/index.md b/files/ru/web/css/@counter-style/additive-symbols/index.md index f30e394ae14589..3966cdd307f996 100644 --- a/files/ru/web/css/@counter-style/additive-symbols/index.md +++ b/files/ru/web/css/@counter-style/additive-symbols/index.md @@ -16,8 +16,12 @@ translation_of: Web/CSS/@counter-style/additive-symbols ```css additive-symbols: 3 "0"; -additive-symbols: 3 "0", 2 "\2E\20"; -additive-symbols: 3 "0", 2 url(symbol.png); +additive-symbols: + 3 "0", + 2 "\2E\20"; +additive-symbols: + 3 "0", + 2 url(symbol.png); ``` ### Формальный синтаксис @@ -30,11 +34,11 @@ additive-symbols: 3 "0", 2 url(symbol.png); ```html

``` diff --git a/files/ru/web/css/@counter-style/index.md b/files/ru/web/css/@counter-style/index.md index d02b22cbb681d9..f08f7a6da920d5 100644 --- a/files/ru/web/css/@counter-style/index.md +++ b/files/ru/web/css/@counter-style/index.md @@ -1,5 +1,5 @@ --- -title: '@counter-style' +title: "@counter-style" slug: Web/CSS/@counter-style tags: - CSS CSS At-rule CSS Counter Styles Reference @@ -99,7 +99,7 @@ The above counter style rule can be applied to lists like this: ```css .items { - list-style: circled-alpha; + list-style: circled-alpha; } ``` @@ -124,8 +124,8 @@ Checkout more examples on the [demo page](https://mdn.github.io/css-counter-styl ## Спецификации -| Спецификация | Статус | Комментарий | -| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------- | +| Спецификация | Статус | Комментарий | +| ------------------------------------------------------------------------------- | -------------------------------- | -------------------------- | | {{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}} | {{Spec2('CSS3 Counter Styles')}} | Первоначальное определение | ## Совместимость с браузерами diff --git a/files/ru/web/css/@document/index.md b/files/ru/web/css/@document/index.md index 6e619884cdf7c4..71a824e64ad1a4 100644 --- a/files/ru/web/css/@document/index.md +++ b/files/ru/web/css/@document/index.md @@ -1,14 +1,16 @@ --- -title: '@document' +title: "@document" slug: Web/CSS/@document translation_of: Web/CSS/@document --- + {{SeeCompatTable}} **`@document`** [CSS](/ru/docs/Web/CSS) [at-rule](/ru/docs/Web/CSS/At-rule) ограничивает правила стиля, содержащиеся в нем, на основе URL-адреса документа. Он разработан в основном для пользовательских таблиц стилей, хотя он также может использоваться в авторских таблицах стилей. ```css -@document url("https://www.example.com/") { +@document url("https://www.example.com/") +{ h1 { color: green; } diff --git a/files/ru/web/css/@font-face/font-display/index.md b/files/ru/web/css/@font-face/font-display/index.md index d4d5d847937e1e..cdd4a2493c4637 100644 --- a/files/ru/web/css/@font-face/font-display/index.md +++ b/files/ru/web/css/@font-face/font-display/index.md @@ -3,6 +3,7 @@ title: font-display slug: Web/CSS/@font-face/font-display translation_of: Web/CSS/@font-face/font-display --- + {{CSSRef}} ## Описание @@ -55,8 +56,9 @@ font-display: optional; ```css @font-face { font-family: ExampleFont; - src: url(/path/to/fonts/examplefont.woff) format('woff'), - url(/path/to/fonts/examplefont.eot) format('eot'); + src: + url(/path/to/fonts/examplefont.woff) format("woff"), + url(/path/to/fonts/examplefont.eot) format("eot"); font-weight: 400; font-style: normal; font-display: fallback; diff --git a/files/ru/web/css/@font-face/font-family/index.md b/files/ru/web/css/@font-face/font-family/index.md index 4a48f5718be2e7..e4cfb9731ae266 100644 --- a/files/ru/web/css/@font-face/font-family/index.md +++ b/files/ru/web/css/@font-face/font-family/index.md @@ -6,6 +6,7 @@ tags: - дескрипторы translation_of: Web/CSS/@font-face/font-family --- + {{CSSRef}} CSS дескриптор **`font-family`** позволяет авторам указывать font family для шрифта, указанного в правиле {{cssxref("@font-face")}}. @@ -17,7 +18,7 @@ CSS дескриптор **`font-family`** позволяет авторам у ```css /* значения */ font-family: "font family"; -font-family: 'another font family'; +font-family: "another font family"; /* значение */ font-family: examplefont; @@ -37,7 +38,7 @@ font-family: examplefont; ```css @font-face { font-family: examplefont; - src: url('examplefont.ttf'); + src: url("examplefont.ttf"); } ``` diff --git a/files/ru/web/css/@font-face/index.md b/files/ru/web/css/@font-face/index.md index f202728c9d1343..1515da4a66b230 100644 --- a/files/ru/web/css/@font-face/index.md +++ b/files/ru/web/css/@font-face/index.md @@ -1,8 +1,8 @@ --- -title: '@font-face' +title: "@font-face" slug: Web/CSS/@font-face tags: - - '@font-face' + - "@font-face" - At-rule - CSS - CSS Fonts @@ -16,9 +16,10 @@ translation_of: Web/CSS/@font-face ```css @font-face { - font-family: "Open Sans"; - src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); + font-family: "Open Sans"; + src: + url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); } ``` @@ -70,20 +71,22 @@ translation_of: Web/CSS/@font-face ```html - - Web Font Sample - - - - This is Bitstream Vera Serif Bold. - + + Web Font Sample + + + + This is Bitstream Vera Serif Bold. + ``` @@ -92,9 +95,8 @@ translation_of: Web/CSS/@font-face ```css @font-face { font-family: MyHelvetica; - src: local("Helvetica Neue Bold"), - local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); + src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); font-weight: bold; } ``` @@ -118,7 +120,7 @@ translation_of: Web/CSS/@font-face @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); + url(MgOpenModernaBold.ttf); font-weight: bold; } } diff --git a/files/ru/web/css/@font-feature-values/index.md b/files/ru/web/css/@font-feature-values/index.md index f6525efca6890f..ab64f256a6be1f 100644 --- a/files/ru/web/css/@font-feature-values/index.md +++ b/files/ru/web/css/@font-feature-values/index.md @@ -1,8 +1,9 @@ --- -title: '@font-feature-values' +title: "@font-feature-values" slug: Web/CSS/@font-feature-values translation_of: Web/CSS/@font-feature-values --- + {{CSSRef}} [CSS](/ru/docs/Web/CSS) [правило](/ru/docs/Web/CSS/At-rule) **`@font-feature-values`** позволяет использовать общее имя в свойстве {{cssxref("font-variant-alternates")}} для функций, которые по разному активируются в OpenType. Это может помочь упростить ваш CSS при использовании нескольких шрифтов. diff --git a/files/ru/web/css/@media/index.md b/files/ru/web/css/@media/index.md index acf2ab52016571..71a2dd181a79a6 100644 --- a/files/ru/web/css/@media/index.md +++ b/files/ru/web/css/@media/index.md @@ -1,8 +1,9 @@ --- -title: '@media' +title: "@media" slug: Web/CSS/@media translation_of: Web/CSS/@media --- + {{CSSRef}} ## Описание @@ -58,55 +59,60 @@ A `` is composed of a optional media type and/or a number of media Each _media feature_ tests for one specific feature of the browser or device. -| Имя | Summary | Notes | -| ------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| [`width`](/ru/docs/Web/CSS/@media/width) | Viewport width | | -| [`height`](/ru/docs/Web/CSS/@media/height) | Viewport height | | -| [`aspect-ratio`](/ru/docs/Web/CSS/@media/aspect-ratio) | Width-to-height aspect ratio of the viewport | | -| [`orientation`](/ru/docs/Web/CSS/@media/orientation) | Orientation of the viewport | | -| [`resolution`](/ru/docs/Web/CSS/@media/resolution) | Pixel density of the output device | | -| [`scan`](/ru/docs/Web/CSS/@media/scan) | Scanning process of the output device | | -| [`grid`](/ru/docs/Web/CSS/@media/grid) | Is the device a grid or bitmap? | | -| [`update-frequency`](/ru/docs/Web/CSS/@media/update-frequency) | How quickly (if at all) can the output device modify the appearance of the content | Added in Media Queries Level 4 | -| [`overflow-block`](/ru/docs/Web/CSS/@media/overflow-block) | How does the output device handle content that overflows the viewport along the block axis? | Added in Media Queries Level 4 | -| [`overflow-inline`](/ru/docs/Web/CSS/@media/overflow-inline) | Can content that overflows the viewport along the inline axis be scrolled? | Added in Media Queries Level 4 | -| [`color`](/ru/docs/Web/CSS/@media/color) | Number of bits per color component of the output device, or zero if the device isn't color. | | -| [`color-index`](/ru/docs/Web/CSS/@media/color-index) | Number of entries in the output device's color lookup table, or zero if the device does not use such a table. | | -| [`display-mode`](/ru/docs/Web/CSS/@media/display-mode) | The display mode of the application, as specified in the web app manifest's [display member](/ru/docs/Web/Manifest#display). | Defined in the [Web App Manifest spec](http://w3c.github.io/manifest/#the-display-mode-media-feature). | -| [`monochrome`](/ru/docs/Web/CSS/@media/monochrome) | Bits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome. | | -| [`inverted-colors`](/ru/docs/Web/CSS/@media/inverted-colors) | Is the user agent or underlying OS inverting colors? | Added in Media Queries Level 4 | -| [`pointer`](/ru/docs/Web/CSS/@media/pointer) | Is the primary input mechanism a pointing device, and if so, how accurate is it? | Added in Media Queries Level 4 | -| [`hover`](/ru/docs/Web/CSS/@media/hover) | Does the primary input mechanism allow the user to hover over elements? | Added in Media Queries Level 4 | -| [`any-pointer`](/ru/docs/Web/CSS/@media/any-pointer) | Is any available input mechanism a pointing device, and if so, how accurate is it? | Added in Media Queries Level 4 | -| [`any-hover`](/ru/docs/Web/CSS/@media/any-hover) | Does any available input mechanism allow the user to hover over elements? | Added in Media Queries Level 4 | -| [`light-level`](/ru/docs/Web/CSS/@media/light-level) | Current ambient light level | Added in Media Queries Level 4 | -| [`scripting`](/ru/docs/Web/CSS/@media/scripting) | Is scripting (e.g. JavaScript) available? | Added in Media Queries Level 4 | -| [`device-width`](/ru/docs/Web/CSS/@media/device-width) | Width of the rendering surface of the output device | Deprecated in Media Queries Level 4 | -| [`device-height`](/ru/docs/Web/CSS/@media/device-height) | Height of the rendering surface of the output device | Deprecated in Media Queries Level 4 | -| [`device-aspect-ratio`](/ru/docs/Web/CSS/@media/device-aspect-ratio) | Width-to-height aspect ratio of the output device | Deprecated in Media Queries Level 4 | +| Имя | Summary | Notes | +| ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | +| [`width`](/ru/docs/Web/CSS/@media/width) | Viewport width | | +| [`height`](/ru/docs/Web/CSS/@media/height) | Viewport height | | +| [`aspect-ratio`](/ru/docs/Web/CSS/@media/aspect-ratio) | Width-to-height aspect ratio of the viewport | | +| [`orientation`](/ru/docs/Web/CSS/@media/orientation) | Orientation of the viewport | | +| [`resolution`](/ru/docs/Web/CSS/@media/resolution) | Pixel density of the output device | | +| [`scan`](/ru/docs/Web/CSS/@media/scan) | Scanning process of the output device | | +| [`grid`](/ru/docs/Web/CSS/@media/grid) | Is the device a grid or bitmap? | | +| [`update-frequency`](/ru/docs/Web/CSS/@media/update-frequency) | How quickly (if at all) can the output device modify the appearance of the content | Added in Media Queries Level 4 | +| [`overflow-block`](/ru/docs/Web/CSS/@media/overflow-block) | How does the output device handle content that overflows the viewport along the block axis? | Added in Media Queries Level 4 | +| [`overflow-inline`](/ru/docs/Web/CSS/@media/overflow-inline) | Can content that overflows the viewport along the inline axis be scrolled? | Added in Media Queries Level 4 | +| [`color`](/ru/docs/Web/CSS/@media/color) | Number of bits per color component of the output device, or zero if the device isn't color. | | +| [`color-index`](/ru/docs/Web/CSS/@media/color-index) | Number of entries in the output device's color lookup table, or zero if the device does not use such a table. | | +| [`display-mode`](/ru/docs/Web/CSS/@media/display-mode) | The display mode of the application, as specified in the web app manifest's [display member](/ru/docs/Web/Manifest#display). | Defined in the [Web App Manifest spec](http://w3c.github.io/manifest/#the-display-mode-media-feature). | +| [`monochrome`](/ru/docs/Web/CSS/@media/monochrome) | Bits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome. | | +| [`inverted-colors`](/ru/docs/Web/CSS/@media/inverted-colors) | Is the user agent or underlying OS inverting colors? | Added in Media Queries Level 4 | +| [`pointer`](/ru/docs/Web/CSS/@media/pointer) | Is the primary input mechanism a pointing device, and if so, how accurate is it? | Added in Media Queries Level 4 | +| [`hover`](/ru/docs/Web/CSS/@media/hover) | Does the primary input mechanism allow the user to hover over elements? | Added in Media Queries Level 4 | +| [`any-pointer`](/ru/docs/Web/CSS/@media/any-pointer) | Is any available input mechanism a pointing device, and if so, how accurate is it? | Added in Media Queries Level 4 | +| [`any-hover`](/ru/docs/Web/CSS/@media/any-hover) | Does any available input mechanism allow the user to hover over elements? | Added in Media Queries Level 4 | +| [`light-level`](/ru/docs/Web/CSS/@media/light-level) | Current ambient light level | Added in Media Queries Level 4 | +| [`scripting`](/ru/docs/Web/CSS/@media/scripting) | Is scripting (e.g. JavaScript) available? | Added in Media Queries Level 4 | +| [`device-width`](/ru/docs/Web/CSS/@media/device-width) | Width of the rendering surface of the output device | Deprecated in Media Queries Level 4 | +| [`device-height`](/ru/docs/Web/CSS/@media/device-height) | Height of the rendering surface of the output device | Deprecated in Media Queries Level 4 | +| [`device-aspect-ratio`](/ru/docs/Web/CSS/@media/device-aspect-ratio) | Width-to-height aspect ratio of the output device | Deprecated in Media Queries Level 4 | | [`-webkit-device-pixel-ratio`](/ru/docs/Web/CSS/@media/-webkit-device-pixel-ratio) {{non-standard_inline}} | Number of physical device pixels per CSS pixel | Nonstandard; WebKit/Blink-specific. If possible, use the [`resolution`](/ru/docs/Web/CSS/@media/resolution) media feature instead. | -| [`-webkit-transform-3d`](/ru/docs/Web/CSS/@media/-webkit-transform-3d) {{non-standard_inline}} | Are CSS 3D {{cssxref("transform")}}s supported? | Nonstandard; WebKit/Blink-specific | -| [`-webkit-transform-2d`](/ru/docs/Web/CSS/@media/-webkit-transform-2d) {{non-standard_inline}} | Are CSS 2D {{cssxref("transform")}}s supported? | Nonstandard; WebKit-specific | -| [`-webkit-transition`](/ru/docs/Web/CSS/@media/-webkit-transition) {{non-standard_inline}} | Are CSS {{cssxref("transition")}}s supported? | Nonstandard; WebKit-specific | -| [`-webkit-animation`](/ru/docs/Web/CSS/@media/-webkit-animation) {{non-standard_inline}} | Are CSS {{cssxref("animation")}}s supported? | Nonstandard; WebKit-specific | +| [`-webkit-transform-3d`](/ru/docs/Web/CSS/@media/-webkit-transform-3d) {{non-standard_inline}} | Are CSS 3D {{cssxref("transform")}}s supported? | Nonstandard; WebKit/Blink-specific | +| [`-webkit-transform-2d`](/ru/docs/Web/CSS/@media/-webkit-transform-2d) {{non-standard_inline}} | Are CSS 2D {{cssxref("transform")}}s supported? | Nonstandard; WebKit-specific | +| [`-webkit-transition`](/ru/docs/Web/CSS/@media/-webkit-transition) {{non-standard_inline}} | Are CSS {{cssxref("transition")}}s supported? | Nonstandard; WebKit-specific | +| [`-webkit-animation`](/ru/docs/Web/CSS/@media/-webkit-animation) {{non-standard_inline}} | Are CSS {{cssxref("animation")}}s supported? | Nonstandard; WebKit-specific | ## Примеры ```css @media print { - body { font-size: 10pt } + body { + font-size: 10pt; + } } @media screen { - body { font-size: 13px } + body { + font-size: 13px; + } } @media screen, print { - body { line-height: 1.2 } + body { + line-height: 1.2; + } } -@media only screen - and (min-device-width: 320px) - and (max-device-width: 480px) - and (-webkit-min-device-pixel-ratio: 2) { - body { line-height: 1.4 } +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + body { + line-height: 1.4; + } } ``` diff --git a/files/ru/web/css/@media/inverted-colors/index.md b/files/ru/web/css/@media/inverted-colors/index.md index b150d19b697b96..f66b1168ef788e 100644 --- a/files/ru/web/css/@media/inverted-colors/index.md +++ b/files/ru/web/css/@media/inverted-colors/index.md @@ -2,7 +2,7 @@ title: inverted-colors slug: Web/CSS/@media/inverted-colors tags: - - '@media' + - "@media" - CSS - Media Queries - Reference @@ -28,8 +28,15 @@ translation_of: Web/CSS/@media/inverted-colors ### HTML ```html -

Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия жёлтого по чёрному). Если нет, он должен быть красным на светло-сером.

-

Если текст серого цвета, ваш браузер не поддерживает медиа-функцию `inverted-colors`.

+

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

+

+ Если текст серого цвета, ваш браузер не поддерживает медиа-функцию + `inverted-colors`. +

``` ### CSS diff --git a/files/ru/web/css/@media/orientation/index.md b/files/ru/web/css/@media/orientation/index.md index 2c97764c476880..232055c002764c 100644 --- a/files/ru/web/css/@media/orientation/index.md +++ b/files/ru/web/css/@media/orientation/index.md @@ -61,8 +61,8 @@ div { ## Характеристики -| Спецификация | Статус | Комментарий | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------- | +| Спецификация | Статус | Комментарий | +| ----------------------------------------------------------------- | ------------------------------- | ---------------------- | | {{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}} | {{Spec2('CSS4 Media Queries')}} | Бе изменений. | | {{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}} | {{Spec2('CSS3 Media Queries')}} | Начальное определение. | diff --git a/files/ru/web/css/@media/prefers-color-scheme/index.md b/files/ru/web/css/@media/prefers-color-scheme/index.md index cd8b20f93b1e7a..6769c4c8d9c113 100644 --- a/files/ru/web/css/@media/prefers-color-scheme/index.md +++ b/files/ru/web/css/@media/prefers-color-scheme/index.md @@ -2,7 +2,7 @@ title: prefers-color-scheme slug: Web/CSS/@media/prefers-color-scheme tags: - - '@media' + - "@media" - CSS - Reference - prefers-color-scheme @@ -29,7 +29,8 @@ translation_of: Web/CSS/@media/prefers-color-scheme ```html
Day (initial)
Day (changes in light scheme)
-
Day (changes in dark scheme)

+
Day (changes in dark scheme)
+
Night (initial)
Night (changes in light scheme)
@@ -39,20 +40,39 @@ translation_of: Web/CSS/@media/prefers-color-scheme ### CSS ```css -.day { background: #eee; color: black; } -.night { background: #333; color: white; } +.day { + background: #eee; + color: black; +} +.night { + background: #333; + color: white; +} @media (prefers-color-scheme: dark) { - .day.dark-scheme { background: #333; color: white; } - .night.dark-scheme { background: black; color: #ddd; } + .day.dark-scheme { + background: #333; + color: white; + } + .night.dark-scheme { + background: black; + color: #ddd; + } } @media (prefers-color-scheme: light) { - .day.light-scheme { background: white; color: #555; } - .night.light-scheme { background: #eee; color: black; } + .day.light-scheme { + background: white; + color: #555; + } + .night.light-scheme { + background: #eee; + color: black; + } } -.day, .night { +.day, +.night { display: inline-block; padding: 1em; width: 7em; diff --git a/files/ru/web/css/@media/prefers-reduced-motion/index.md b/files/ru/web/css/@media/prefers-reduced-motion/index.md index c057d614a94e3d..0159cefa9b92b2 100644 --- a/files/ru/web/css/@media/prefers-reduced-motion/index.md +++ b/files/ru/web/css/@media/prefers-reduced-motion/index.md @@ -2,7 +2,7 @@ title: prefers-reduced-motion slug: Web/CSS/@media/prefers-reduced-motion tags: - - '@media' + - "@media" - CSS - Media Queries - Reference @@ -49,7 +49,10 @@ translation_of: Web/CSS/@media/prefers-reduced-motion .animation { background-color: rebeccapurple; color: #fff; - font: 1.2em Helvetica, arial, sans-serif; + font: + 1.2em Helvetica, + arial, + sans-serif; width: 200px; padding: 1em; border-radius: 1em; @@ -69,53 +72,53 @@ translation_of: Web/CSS/@media/prefers-reduced-motion @-webkit-keyframes vibrate { 0% { -webkit-transform: translate(0); - transform: translate(0); + transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); - transform: translate(-2px, 2px); + transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); - transform: translate(-2px, -2px); + transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); - transform: translate(2px, 2px); + transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); - transform: translate(2px, -2px); + transform: translate(2px, -2px); } 100% { -webkit-transform: translate(0); - transform: translate(0); + transform: translate(0); } } @keyframes vibrate { 0% { -webkit-transform: translate(0); - transform: translate(0); + transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); - transform: translate(-2px, 2px); + transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); - transform: translate(-2px, -2px); + transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); - transform: translate(2px, 2px); + transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); - transform: translate(2px, -2px); + transform: translate(2px, -2px); } 100% { -webkit-transform: translate(0); - transform: translate(0); + transform: translate(0); } } ``` diff --git a/files/ru/web/css/@media/scripting/index.md b/files/ru/web/css/@media/scripting/index.md index 514fa22ac5230f..0e3b05d5ca0e2a 100644 --- a/files/ru/web/css/@media/scripting/index.md +++ b/files/ru/web/css/@media/scripting/index.md @@ -25,7 +25,9 @@ translation_of: Web/CSS/@media/scripting ```html

You do not have scripting available. :-(

-

Your scripting is only enabled during the initial page load. Weird.

+

+ Your scripting is only enabled during the initial page load. Weird. +

You have scripting enabled! :-)

``` @@ -38,7 +40,7 @@ p { @media (scripting: none) { .script-none { - color: red; + color: red; } } diff --git a/files/ru/web/css/@namespace/index.md b/files/ru/web/css/@namespace/index.md index 21271ce7ae0111..181ef38eb5a559 100644 --- a/files/ru/web/css/@namespace/index.md +++ b/files/ru/web/css/@namespace/index.md @@ -1,5 +1,5 @@ --- -title: '@namespace' +title: "@namespace" slug: Web/CSS/@namespace tags: - Пространства имён @@ -17,13 +17,16 @@ translation_of: Web/CSS/@namespace @namespace svg url(http://www.w3.org/2000/svg); /* This matches all XHTML elements, as XHTML is the default unprefixed namespace */ -a {} +a { +} /* This matches all SVG elements */ -svg|a {} +svg|a { +} /* This matches both XHTML and SVG elements */ -*|a {} +*|a { +} ``` Любое `@namespace` правило обязано следовать всем [@charset](/ru/docs/Web/CSS/%40charset) и [@import](/ru/docs/Web/CSS/%40import) правилам, а так же всем [описаниям стилей](/ru/docs/Web/API/CSSStyleDeclaration) в таблице стилей. diff --git a/files/ru/web/css/@page/index.md b/files/ru/web/css/@page/index.md index 9163cad4be8c85..eb24226fe2d3d3 100644 --- a/files/ru/web/css/@page/index.md +++ b/files/ru/web/css/@page/index.md @@ -1,5 +1,5 @@ --- -title: '@page' +title: "@page" slug: Web/CSS/@page tags: - Вёрстка @@ -7,6 +7,7 @@ tags: - страница translation_of: Web/CSS/@page --- + {{CSSRef}} Правило CSS **`@page`** используется для модификации некоторых свойств CSS при печати документа. Вы не можете изменить все CSS-свойства с `@page`. Вы можете изменить только margin, orphans, widows, и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться. diff --git a/files/ru/web/css/@supports/index.md b/files/ru/web/css/@supports/index.md index 0ab5083c20c5c0..1a1d8b751c67bd 100644 --- a/files/ru/web/css/@supports/index.md +++ b/files/ru/web/css/@supports/index.md @@ -1,5 +1,5 @@ --- -title: '@supports' +title: "@supports" slug: Web/CSS/@supports translation_of: Web/CSS/@supports --- @@ -129,8 +129,8 @@ not ( not ( transform-origin: 2px ) ) ## Спецификации -| Спецификация | Статус | Комментарий | -| ------------------------------------------------------------------------------------ | ---------------------------------------- | --------------------------- | +| Спецификация | Статус | Комментарий | +| --------------------------------------------------------------- | ------------------------------- | --------------------------- | | {{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }} | {{ Spec2('CSS3 Conditional') }} | Первоначальное определение. | ## Совместимость с браузерами diff --git a/files/ru/web/css/_colon_-moz-only-whitespace/index.md b/files/ru/web/css/_colon_-moz-only-whitespace/index.md index 2be6faeae1cb55..85e6460db2f387 100644 --- a/files/ru/web/css/_colon_-moz-only-whitespace/index.md +++ b/files/ru/web/css/_colon_-moz-only-whitespace/index.md @@ -1,14 +1,15 @@ --- -title: ':blank' +title: ":blank" slug: Web/CSS/:-moz-only-whitespace tags: - - ':blank' + - ":blank" - CSS - Псевдо-класс - Экспериментальное - селектор translation_of: Web/CSS/:-moz-only-whitespace --- + {{CSSRef}}{{SeeCompatTable}} [CSS псевдо класс](/ru/docs/Web/CSS) **`:blank`** находит элементы, у которых либо вообще нет дочерних узлов, либо только пустые текстовые узлы, либо только текстовые узлы, содержащие только пробельные символы. @@ -22,7 +23,7 @@ translation_of: Web/CSS/:-moz-only-whitespace ### HTML ```html -
+
``` ### CSS diff --git a/files/ru/web/css/_colon_active/index.md b/files/ru/web/css/_colon_active/index.md index 167663923c3a62..620019c8f9b545 100644 --- a/files/ru/web/css/_colon_active/index.md +++ b/files/ru/web/css/_colon_active/index.md @@ -1,5 +1,5 @@ --- -title: ':active' +title: ":active" slug: Web/CSS/:active tags: - Псевдоклассы @@ -34,20 +34,32 @@ a:active { #### HTML ```html -

Этот абзац содержит ссылку: -Эта ссылка будет окрашена в красный, когда вы нажмёте на неё. -У абзаца фон станет серым при нажатии на него или на ссылку.

+

+ Этот абзац содержит ссылку: + Эта ссылка будет окрашена в красный, когда вы нажмёте на неё. + У абзаца фон станет серым при нажатии на него или на ссылку. +

``` #### CSS ```css -a:link { color: blue; } /* Непосещённые ссылки */ -a:visited { color: purple; } /* Посещённые ссылки */ -a:hover { background: yellow; } /* Ссылки при наведении */ -a:active { color: red; } /* Активные ссылки */ +a:link { + color: blue; +} /* Непосещённые ссылки */ +a:visited { + color: purple; +} /* Посещённые ссылки */ +a:hover { + background: yellow; +} /* Ссылки при наведении */ +a:active { + color: red; +} /* Активные ссылки */ -p:active { background: #eee; } /* Активные абзацы */ +p:active { + background: #eee; +} /* Активные абзацы */ ``` #### Результат @@ -61,7 +73,9 @@ p:active { background: #eee; } /* Активные абзацы */ ```html
- +
``` @@ -83,13 +97,13 @@ form button { ## Спецификации -| Спецификация | Статус | Комментарий | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}} | {{Spec2('CSS4 Selectors')}} | Без изменений | -| {{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}} | {{Spec2('CSS3 Selectors')}} | Без изменений | -| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} | {{Spec2('CSS2.1')}} | Без изменений | -| {{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}} | {{Spec2('CSS1')}} | Первоначальное определение | +| Спецификация | Статус | Комментарий | +| ------------------------------------------------------------------------- | --------------------------- | -------------------------- | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}} | {{Spec2('CSS4 Selectors')}} | Без изменений | +| {{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}} | {{Spec2('CSS3 Selectors')}} | Без изменений | +| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} | {{Spec2('CSS2.1')}} | Без изменений | +| {{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}} | {{Spec2('CSS1')}} | Первоначальное определение | ## Совместимость с браузерами diff --git a/files/ru/web/css/_colon_any-link/index.md b/files/ru/web/css/_colon_any-link/index.md index f1588fb2efd184..76352927b71ed4 100644 --- a/files/ru/web/css/_colon_any-link/index.md +++ b/files/ru/web/css/_colon_any-link/index.md @@ -1,8 +1,8 @@ --- -title: ':any-link' +title: ":any-link" slug: Web/CSS/:any-link tags: - - ':any-link' + - ":any-link" - CSS - Web - Вёрстка @@ -35,8 +35,8 @@ translation_of: Web/CSS/:any-link ### HTML ```html -External link
-Internal target link
+External link
+Internal target link
Placeholder link (won't get styled) ``` diff --git a/files/ru/web/css/_colon_checked/index.md b/files/ru/web/css/_colon_checked/index.md index 6538de91ce05af..4bbd0d0f645d49 100644 --- a/files/ru/web/css/_colon_checked/index.md +++ b/files/ru/web/css/_colon_checked/index.md @@ -1,5 +1,5 @@ --- -title: ':checked' +title: ":checked" slug: Web/CSS/:checked tags: - CSS @@ -8,6 +8,7 @@ tags: - Руководство translation_of: Web/CSS/:checked --- + {{CSSRef}} CSS [псевдоклассы](/ru/docs/Web/CSS/Псевдо-классы) **`:checked`** CSS находит любые элементы **radio** (``), **checkbox** (``) или **option** ({{ HTMLElement("option") }} внутри {{ HTMLElement("select") }}), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае `:checked` повторно не применится к элементу, а сохранится. @@ -71,67 +72,101 @@ option:checked { ```html - - -Расширяемые элементы - - - - - - -

Расширяемые элементы

- - - - - - - - - - - -
Колонка #1Колонка #2Колонка #3
[текст ячейки][текст ячейки][текст ячейки]
[текст ячейки][текст ячейки][текст ячейки]
- -

[какой-то текст примера]

-

- -

[какой-то текст примера]

- + + + Расширяемые элементы + + + + + +

Расширяемые элементы

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Колонка #1Колонка #2Колонка #3
[текст ячейки][текст ячейки][текст ячейки]
[текст ячейки][текст ячейки][текст ячейки]
+ +

[какой-то текст примера]

+

+ +

+ +

[какой-то текст примера]

+ ``` diff --git a/files/ru/web/css/_colon_default/index.md b/files/ru/web/css/_colon_default/index.md index 848821bbe6f3f8..54ada8208add4d 100644 --- a/files/ru/web/css/_colon_default/index.md +++ b/files/ru/web/css/_colon_default/index.md @@ -1,5 +1,5 @@ --- -title: ':default' +title: ":default" slug: Web/CSS/:default translation_of: Web/CSS/:default --- @@ -30,16 +30,16 @@ input:default { ### HTML ```html - + - + - + - + ``` diff --git a/files/ru/web/css/_colon_defined/index.md b/files/ru/web/css/_colon_defined/index.md index 5d970783fed08b..e8eaf40284f1ed 100644 --- a/files/ru/web/css/_colon_defined/index.md +++ b/files/ru/web/css/_colon_defined/index.md @@ -1,5 +1,5 @@ --- -title: ':defined' +title: ":defined" slug: Web/CSS/:defined translation_of: Web/CSS/:defined --- @@ -29,18 +29,19 @@ simple-custom:defined { Этот пример включает скрипт, определяющий [пользовательский элемент](/ru/docs/Web/Web_Components/Использование_пользовательских_элементов) ``: ```js -customElements.define('simple-custom', +customElements.define( + "simple-custom", class extends HTMLElement { constructor() { super(); - let divElem = document.createElement('div'); - divElem.textContent = this.getAttribute('text'); + let divElem = document.createElement("div"); + divElem.textContent = this.getAttribute("text"); - let shadowRoot = this.attachShadow({mode: 'open'}) - .appendChild(divElem); - } -}) + let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem); + } + }, +); ``` Затем мы используем короткий HTML код с элементом `` и стандартным элементом {{htmlelement("p")}}: diff --git a/files/ru/web/css/_colon_dir/index.md b/files/ru/web/css/_colon_dir/index.md index 28910c467058ea..3db082931a784b 100644 --- a/files/ru/web/css/_colon_dir/index.md +++ b/files/ru/web/css/_colon_dir/index.md @@ -1,5 +1,5 @@ --- -title: ':dir()' +title: ":dir()" slug: Web/CSS/:dir translation_of: Web/CSS/:dir --- @@ -43,7 +43,8 @@ translation_of: Web/CSS/:dir ```html
test1 -
test2 +
+ test2
עִבְרִית
diff --git a/files/ru/web/css/_colon_disabled/index.md b/files/ru/web/css/_colon_disabled/index.md index 74d8b36f6f7134..6e797edf8feb98 100644 --- a/files/ru/web/css/_colon_disabled/index.md +++ b/files/ru/web/css/_colon_disabled/index.md @@ -1,5 +1,5 @@ --- -title: ':disabled' +title: ":disabled" slug: Web/CSS/:disabled tags: - Псевдо-класс @@ -26,7 +26,9 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:disab Следующий CSS: ```css -input[type="text"]:disabled { background: #ccc; } +input[type="text"]:disabled { + background: #ccc; +} ``` Применим к этому HTML5 фрагменту: @@ -35,18 +37,18 @@ input[type="text"]:disabled { background: #ccc; }
Адрес доставки - - - + + +
Адрес оплаты - +
- - - + + +
``` diff --git a/files/ru/web/css/_colon_empty/index.md b/files/ru/web/css/_colon_empty/index.md index 17aa71121b3385..c7a07aa5b995ef 100644 --- a/files/ru/web/css/_colon_empty/index.md +++ b/files/ru/web/css/_colon_empty/index.md @@ -1,5 +1,5 @@ --- -title: ':empty' +title: ":empty" slug: Web/CSS/:empty tags: - CSS @@ -10,6 +10,7 @@ tags: - Псевдоклассы translation_of: Web/CSS/:empty --- + {{ CSSRef() }} ## Описание @@ -40,7 +41,7 @@ translation_of: Web/CSS/:empty
Я буду красным
- +
``` diff --git a/files/ru/web/css/_colon_enabled/index.md b/files/ru/web/css/_colon_enabled/index.md index 0c74210d6809df..98701ea5e162fc 100644 --- a/files/ru/web/css/_colon_enabled/index.md +++ b/files/ru/web/css/_colon_enabled/index.md @@ -1,8 +1,9 @@ --- -title: ':enabled' +title: ":enabled" slug: Web/CSS/:enabled translation_of: Web/CSS/:enabled --- + {{CSSRef}} ## Описание @@ -16,24 +17,24 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:enabl Следующий HTML... ```html -
-
-
- -
- +
+ +
+ +
+ +
``` ...используем со следующим CSS... ```css input:enabled { - color: #22AA22; + color: #22aa22; } input:disabled { - color: #D9D9D9; + color: #d9d9d9; } - ``` ...результат: diff --git a/files/ru/web/css/_colon_first-child/index.md b/files/ru/web/css/_colon_first-child/index.md index 8d0ce55369edcf..ec98177e04c487 100644 --- a/files/ru/web/css/_colon_first-child/index.md +++ b/files/ru/web/css/_colon_first-child/index.md @@ -1,10 +1,11 @@ --- -title: ':first-child' +title: ":first-child" slug: Web/CSS/:first-child tags: - Псевдо-классы translation_of: Web/CSS/:first-child --- + {{CSSRef}} {{cssxRef('', 'CSS')}} {{cssxRef('Pseudo-classes', 'псевдокласс')}} **`:first-child`** находит любой элемент, являющийся первым в своём родителе. @@ -64,7 +65,8 @@ p:first-child {
  • Item 1
  • Item 2
    • -
  • Item 3 +
  • + Item 3
    • Item 3.1
    • Item 3.2
      • diff --git a/files/ru/web/css/_colon_first-of-type/index.md b/files/ru/web/css/_colon_first-of-type/index.md index 2fd0e2d10a8b55..baecfe3f98b1db 100644 --- a/files/ru/web/css/_colon_first-of-type/index.md +++ b/files/ru/web/css/_colon_first-of-type/index.md @@ -1,5 +1,5 @@ --- -title: ':first-of-type' +title: ":first-of-type" slug: Web/CSS/:first-of-type tags: - Псевдоклассы @@ -15,7 +15,9 @@ translation_of: Web/CSS/:first-of-type ## Синтаксис ```css -element:first-of-type { /* стили */ } +element:first-of-type { + /* стили */ +} ``` ## Пример diff --git a/files/ru/web/css/_colon_first/index.md b/files/ru/web/css/_colon_first/index.md index 0b0afe9cef5ec9..bc6ba360c4447b 100644 --- a/files/ru/web/css/_colon_first/index.md +++ b/files/ru/web/css/_colon_first/index.md @@ -1,8 +1,8 @@ --- -title: ':first' +title: ":first" slug: Web/CSS/:first tags: - - '@page' + - "@page" - CSS - Псевдо-класс - Разметка @@ -53,7 +53,7 @@ p { ```js document.querySelector("button").onclick = function () { window.print(); -} +}; ``` ### Результат diff --git a/files/ru/web/css/_colon_focus-visible/index.md b/files/ru/web/css/_colon_focus-visible/index.md index df99f88315f049..31c33a9d219812 100644 --- a/files/ru/web/css/_colon_focus-visible/index.md +++ b/files/ru/web/css/_colon_focus-visible/index.md @@ -1,8 +1,9 @@ --- -title: ':focus-visible' +title: ":focus-visible" slug: Web/CSS/:focus-visible translation_of: Web/CSS/:focus-visible --- + Псевдокласс **`:focus-visible`** применяется, в то время как элемент соответствует псевдоклассу :focus, и UA ({{glossary("User Agent")}}) определяет с помощью эвристики, что фокус должен быть сделан очевидным для элемента. Этот селектор полезен для предоставления другого индикатора фокуса, основанного на модальности ввода пользователя (мышь против клавиатуры). @@ -20,16 +21,17 @@ translation_of: Web/CSS/:focus-visible В этом примере селектор `:focus-visible` использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью `:focus`. ```html -
      -
      -
      -
      -
      +
      +
      +
      +
      +
      ``` ```css -input, button { +input, +button { margin: 10px; } @@ -100,8 +102,8 @@ It may not be obvious as to why the focus indicator is appearing and disappearin ## Specifications -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| Specification | Status | Comment | +| ----------------------------------------------------------------------------- | --------------------------- | ------------------- | | {{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}} | {{Spec2("CSS4 Selectors")}} | Initial definition. | ## Browser compatibility diff --git a/files/ru/web/css/_colon_focus-within/index.md b/files/ru/web/css/_colon_focus-within/index.md index 1f65dc2fbf60d9..af76d245986753 100644 --- a/files/ru/web/css/_colon_focus-within/index.md +++ b/files/ru/web/css/_colon_focus-within/index.md @@ -1,8 +1,9 @@ --- -title: ':focus-within' +title: ":focus-within" slug: Web/CSS/:focus-within translation_of: Web/CSS/:focus-within --- + {{CSSRef}} [CSS](/ru/docs/Web/CSS) [Псевдо-класс](/ru/docs/Web/CSS/Pseudo-classes) **`:focus-within`** соответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу {{CSSxRef(":focus")}} либо имеет потомка, который соответствует `:focus`. (Включая потомков в [shadow trees](/ru/docs/Web/Web_Components/Shadow_DOM).) @@ -31,10 +32,10 @@ div:focus-within {
      - -
      + +
      - +
      ``` diff --git a/files/ru/web/css/_colon_focus/index.md b/files/ru/web/css/_colon_focus/index.md index d786f023daa47c..89bc97f0197c8b 100644 --- a/files/ru/web/css/_colon_focus/index.md +++ b/files/ru/web/css/_colon_focus/index.md @@ -1,5 +1,5 @@ --- -title: ':focus' +title: ":focus" slug: Web/CSS/:focus tags: - CSS @@ -34,8 +34,8 @@ input:focus { ### HTML ```html - - + + ``` ### CSS diff --git a/files/ru/web/css/_colon_fullscreen/index.md b/files/ru/web/css/_colon_fullscreen/index.md index 8d271cadf44437..640e98797f60be 100644 --- a/files/ru/web/css/_colon_fullscreen/index.md +++ b/files/ru/web/css/_colon_fullscreen/index.md @@ -1,5 +1,5 @@ --- -title: ':fullscreen' +title: ":fullscreen" slug: Web/CSS/:fullscreen tags: - Вёрстка @@ -32,9 +32,11 @@ HTML выглядит так: ```html

      MDN Web Docs Demo: :fullscreen pseudo-class

      -

      This demo uses the :fullscreen pseudo-class to automatically +

      + This demo uses the :fullscreen pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, - entirely using CSS.

      + entirely using CSS. +

      ``` diff --git a/files/ru/web/css/_colon_has/index.md b/files/ru/web/css/_colon_has/index.md index 71d6a1efc011b1..a1b8427653d77d 100644 --- a/files/ru/web/css/_colon_has/index.md +++ b/files/ru/web/css/_colon_has/index.md @@ -1,5 +1,5 @@ --- -title: ':has()' +title: ":has()" slug: Web/CSS/:has tags: - CSS @@ -22,6 +22,8 @@ translation_of: Web/CSS/:has h1:has(+ p) { margin-bottom: 0; } +``` + Псевдокласс `:has()` берет соответствующий список селекторов в качестве аргумента. В ранней версии спецификации CSS Selectors Level 4, `:has` имел ограничение, которое не позволяло использовать его в таблицах стилей; только с использованием функций, как например: {{domxref("document.querySelector()")}} (из-за проблем с производительностью). На текущий момент, это ограничение снято, так как ни один из браузеров не реализовал это соответствующим образом. ```css @@ -39,13 +41,13 @@ var test = document.querySelector('a:has(> img)'); Следующий селектор находит только те теги {{HTMLElement("a")}}, которые непосредственно содержат дочерний элемент {{HTMLElement("img")}}: ```css -a:has(> img) +a:has(> img) {} ``` Следующий селектор находит только те теги {{HTMLElement("h1")}}, при условии, что следом за ними находится элемент {{htmlelement("p")}}: ```css -h1:has(+ p) +h1:has(+ p) {} ``` ## Спецификации diff --git a/files/ru/web/css/_colon_host_function/index.md b/files/ru/web/css/_colon_host_function/index.md index 338e9fa7e7ba73..c4731ebfe814bb 100644 --- a/files/ru/web/css/_colon_host_function/index.md +++ b/files/ru/web/css/_colon_host_function/index.md @@ -1,5 +1,5 @@ --- -title: ':host()' +title: ":host()" slug: Web/CSS/:host_function translation_of: Web/CSS/:host() original_slug: Web/CSS/:host() @@ -34,26 +34,29 @@ original_slug: Web/CSS/:host() В этом примере у нас есть простой пользовательский элемент — `` — который мы оборачиваем вокруг текста: ```html -

      Host selectors example

      +

      + Host selectors example +

      ``` Внутри конструктора элемента мы создаём элементы `style` и `span`, заполняем `span` контентом пользовательского элемента и заполняем элемент `style` CSS-правилами: ```js -let style = document.createElement('style'); -let span = document.createElement('span'); +let style = document.createElement("style"); +let span = document.createElement("span"); span.textContent = this.textContent; -const shadowRoot = this.attachShadow({mode: 'open'}); +const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.appendChild(style); shadowRoot.appendChild(span); -style.textContent = 'span:hover { text-decoration: underline; }' + - ':host-context(h1) { font-style: italic; }' + - ':host-context(h1):after { content: " - no links in headers!" }' + - ':host-context(article, aside) { color: gray; }' + - ':host(.footer) { color : red; }' + - ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; +style.textContent = + "span:hover { text-decoration: underline; }" + + ":host-context(h1) { font-style: italic; }" + + ':host-context(h1):after { content: " - no links in headers!" }' + + ":host-context(article, aside) { color: gray; }" + + ":host(.footer) { color : red; }" + + ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }"; ``` Правило `:host(.footer) { color : red; }` стилизует все экземпляры элемента `` (shadow хост в данном случае) в документе, которые имеют класс `footer` — мы использовали его, чтобы дать экземплярам элемента внутри {{htmlelement("footer")}} особый цвет. diff --git a/files/ru/web/css/_colon_hover/index.md b/files/ru/web/css/_colon_hover/index.md index 266af4f667a92b..8414488a41f5c7 100644 --- a/files/ru/web/css/_colon_hover/index.md +++ b/files/ru/web/css/_colon_hover/index.md @@ -1,5 +1,5 @@ --- -title: ':hover' +title: ":hover" slug: Web/CSS/:hover tags: - CSS @@ -7,6 +7,7 @@ tags: - Руководство translation_of: Web/CSS/:hover --- + {{ CSSRef() }} ## Описание @@ -22,9 +23,13 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:hover ## Примеры ```css -:link:hover { outline: dotted red; } +:link:hover { + outline: dotted red; +} -.foo:hover { background: gold; } +.foo:hover { + background: gold; +} ``` ### Выпадающее меню diff --git a/files/ru/web/css/_colon_in-range/index.md b/files/ru/web/css/_colon_in-range/index.md index ffc5d06969c1b6..ca304335f74ecd 100644 --- a/files/ru/web/css/_colon_in-range/index.md +++ b/files/ru/web/css/_colon_in-range/index.md @@ -1,5 +1,5 @@ --- -title: ':in-range' +title: ":in-range" slug: Web/CSS/:in-range tags: - CSS @@ -34,24 +34,24 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:in-ra ```css li { - list-style: none; - margin-bottom: 1em; + list-style: none; + margin-bottom: 1em; } input { - border: 1px solid black; + border: 1px solid black; } input:in-range { - background-color: rgba(0, 255, 0, 0.25); + background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { - background-color: rgba(255, 0, 0, 0.25); - border: 2px solid red; + background-color: rgba(255, 0, 0, 0.25); + border: 2px solid red; } input:in-range + label::after { - content:' НОРМАЛЬНОЕ'; + content: " НОРМАЛЬНОЕ"; } input:out-of-range + label::after { - content:'вне диапазона!'; + content: "вне диапазона!"; } ``` diff --git a/files/ru/web/css/_colon_indeterminate/index.md b/files/ru/web/css/_colon_indeterminate/index.md index b88af351a9b124..d3d29c1aa8fe2d 100644 --- a/files/ru/web/css/_colon_indeterminate/index.md +++ b/files/ru/web/css/_colon_indeterminate/index.md @@ -1,5 +1,5 @@ --- -title: ':indeterminate' +title: ":indeterminate" slug: Web/CSS/:indeterminate tags: - CSS @@ -39,11 +39,11 @@ input:indeterminate { ```html
      - +
      - +
      ``` @@ -73,7 +73,7 @@ for (var i = 0; i < inputs.length; i++) { #### HTML ```html - + ``` #### CSS diff --git a/files/ru/web/css/_colon_invalid/index.md b/files/ru/web/css/_colon_invalid/index.md index f84b4d01c9cf12..eb591f64c2fd00 100644 --- a/files/ru/web/css/_colon_invalid/index.md +++ b/files/ru/web/css/_colon_invalid/index.md @@ -1,10 +1,11 @@ --- -title: ':invalid' +title: ":invalid" slug: Web/CSS/:invalid tags: - Псевдо-классы translation_of: Web/CSS/:invalid --- + {{ CSSRef() }} ## Описание @@ -25,7 +26,7 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:inval } :-moz-ui-invalid { - box-shadow:none; + box-shadow: none; } ``` @@ -48,7 +49,7 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:inval

      - + ``` diff --git a/files/ru/web/css/_colon_is/index.md b/files/ru/web/css/_colon_is/index.md index f735b21604dfe5..9975bf8564f08c 100644 --- a/files/ru/web/css/_colon_is/index.md +++ b/files/ru/web/css/_colon_is/index.md @@ -1,5 +1,5 @@ --- -title: ':is() (:matches(), :any())' +title: ":is() (:matches(), :any())" slug: Web/CSS/:is translation_of: Web/CSS/:is --- @@ -59,8 +59,14 @@ footer p:hover {
        -

      • Это первый

        пункт списка

        • -

      • Это второй

        пункт списка

        • +
      • +

        Это первый

        +

        пункт списка

        +
        • +
      • +

        Это второй

        +

        пункт списка

        +
      @@ -95,18 +101,26 @@ footer p:hover { let matchedItems; try { - matchedItems = document.querySelectorAll(':is(header, main, footer) p'); -} catch(e) { + matchedItems = document.querySelectorAll(":is(header, main, footer) p"); +} catch (e) { try { - matchedItems = document.querySelectorAll(':matches(header, main, footer) p'); - } catch(e) { + matchedItems = document.querySelectorAll( + ":matches(header, main, footer) p", + ); + } catch (e) { try { - matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p'); - } catch(e) { + matchedItems = document.querySelectorAll( + ":-webkit-any(header, main, footer) p", + ); + } catch (e) { try { - matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p'); - } catch(e) { - console.log('Your browser doesn\'t support :is(), :matches(), or :any()'); + matchedItems = document.querySelectorAll( + ":-moz-any(header, main, footer) p", + ); + } catch (e) { + console.log( + "Your browser doesn't support :is(), :matches(), or :any()", + ); } } } @@ -115,8 +129,8 @@ try { matchedItems.forEach(applyHandler); function applyHandler(elem) { - elem.addEventListener('click', function(e) { - alert('This paragraph is inside a ' + e.target.parentNode.nodeName); + elem.addEventListener("click", function (e) { + alert("This paragraph is inside a " + e.target.parentNode.nodeName); }); } ``` @@ -129,18 +143,54 @@ function applyHandler(elem) { ```css /* 3-уровневые (или более) неупорядоченные списки используют свойство square */ -ol ol ul, ol ul ul, ol menu ul, ol dir ul, -ol ol menu, ol ul menu, ol menu menu, ol dir menu, -ol ol dir, ol ul dir, ol menu dir, ol dir dir, -ul ol ul, ul ul ul, ul menu ul, ul dir ul, -ul ol menu, ul ul menu, ul menu menu, ul dir menu, -ul ol dir, ul ul dir, ul menu dir, ul dir dir, -menu ol ul, menu ul ul, menu menu ul, menu dir ul, -menu ol menu, menu ul menu, menu menu menu, menu dir menu, -menu ol dir, menu ul dir, menu menu dir, menu dir dir, -dir ol ul, dir ul ul, dir menu ul, dir dir ul, -dir ol menu, dir ul menu, dir menu menu, dir dir menu, -dir ol dir, dir ul dir, dir menu dir, dir dir dir { +ol ol ul, +ol ul ul, +ol menu ul, +ol dir ul, +ol ol menu, +ol ul menu, +ol menu menu, +ol dir menu, +ol ol dir, +ol ul dir, +ol menu dir, +ol dir dir, +ul ol ul, +ul ul ul, +ul menu ul, +ul dir ul, +ul ol menu, +ul ul menu, +ul menu menu, +ul dir menu, +ul ol dir, +ul ul dir, +ul menu dir, +ul dir dir, +menu ol ul, +menu ul ul, +menu menu ul, +menu dir ul, +menu ol menu, +menu ul menu, +menu menu menu, +menu dir menu, +menu ol dir, +menu ul dir, +menu menu dir, +menu dir dir, +dir ol ul, +dir ul ul, +dir menu ul, +dir dir ul, +dir ol menu, +dir ul menu, +dir menu menu, +dir dir menu, +dir ol dir, +dir ul dir, +dir menu dir, +dir dir dir { list-style-type: square; } ``` @@ -168,14 +218,29 @@ h1 { font-size: 30px; } /* Уровень 1 */ -section h1, article h1, aside h1, nav h1 { +section h1, +article h1, +aside h1, +nav h1 { font-size: 25px; } /* Уровень 2 */ -section section h1, section article h1, section aside h1, section nav h1, -article section h1, article article h1, article aside h1, article nav h1, -aside section h1, aside article h1, aside aside h1, aside nav h1, -nav section h1, nav article h1, nav aside h1, nav nav h1 { +section section h1, +section article h1, +section aside h1, +section nav h1, +article section h1, +article article h1, +article aside h1, +article nav h1, +aside section h1, +aside article h1, +aside aside h1, +aside nav h1, +nav section h1, +nav article h1, +nav aside h1, +nav nav h1 { font-size: 20px; } /* Уровень 3 */ @@ -194,14 +259,14 @@ h1 { font-size: 25px; } /* Уровень 2 */ -:is(section, article, aside, nav) -:is(section, article, aside, nav) h1 { +:is(section, article, aside, nav) :is(section, article, aside, nav) h1 { font-size: 20px; } /* Уровень 3 */ :is(section, article, aside, nav) -:is(section, article, aside, nav) -:is(section, article, aside, nav) h1 { + :is(section, article, aside, nav) + :is(section, article, aside, nav) + h1 { font-size: 15px; } ``` diff --git a/files/ru/web/css/_colon_lang/index.md b/files/ru/web/css/_colon_lang/index.md index 95f7d4e7060a18..4ddad695143493 100644 --- a/files/ru/web/css/_colon_lang/index.md +++ b/files/ru/web/css/_colon_lang/index.md @@ -1,5 +1,5 @@ --- -title: ':lang()' +title: ":lang()" slug: Web/CSS/:lang tags: - CSS @@ -14,7 +14,7 @@ translation_of: Web/CSS/:lang ```css /* Выбирает все

      , что на английском (en) */ p:lang(en) { - quotes: '\201C' '\201D' '\2018' '\2019'; + quotes: "\201C" "\201D" "\2018" "\2019"; } ``` @@ -38,17 +38,29 @@ In this example, the `:lang()` pseudo-class is used to match the parents of quot ### HTML ```html -

      This English quote has a nested quote inside.
      -
      This French quote has a nested quote inside.
      -
      This German quote has a nested quote inside.
      +
      + This English quote has a nested quote inside. +
      +
      + This French quote has a nested quote inside. +
      +
      + This German quote has a nested quote inside. +
      ``` ### CSS ```css -:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; } -:lang(fr) > q { quotes: '« ' ' »'; } -:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; } +:lang(en) > q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} +:lang(fr) > q { + quotes: "« " " »"; +} +:lang(de) > q { + quotes: "»" "«" "\2039" "\203A"; +} ``` ### Результат diff --git a/files/ru/web/css/_colon_last-child/index.md b/files/ru/web/css/_colon_last-child/index.md index 2c396392dcad8f..07546051877ec9 100644 --- a/files/ru/web/css/_colon_last-child/index.md +++ b/files/ru/web/css/_colon_last-child/index.md @@ -1,5 +1,5 @@ --- -title: ':last-child' +title: ":last-child" slug: Web/CSS/:last-child translation_of: Web/CSS/:last-child --- diff --git a/files/ru/web/css/_colon_last-of-type/index.md b/files/ru/web/css/_colon_last-of-type/index.md index a44decfe6529d2..295efd7f9d6538 100644 --- a/files/ru/web/css/_colon_last-of-type/index.md +++ b/files/ru/web/css/_colon_last-of-type/index.md @@ -1,5 +1,5 @@ --- -title: ':last-of-type' +title: ":last-of-type" slug: Web/CSS/:last-of-type tags: - CSS @@ -9,6 +9,7 @@ tags: - Псевдоклассы translation_of: Web/CSS/:last-of-type --- + {{CSSRef}} [CSS](/ru/docs/CSS) [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) **`:last-of-type`** находит последнего потомка с заданным тегом в списке детей родительского элемента. @@ -62,7 +63,10 @@ p:last-of-type {
      Этот `div` первый.
      Этот вложенный `span` является последним!
      -
      Этот вложенный `em` первый, а этот вложенный `em` последний!
      +
      + Этот вложенный `em` первый, а этот + вложенный `em` последний! +
      Этот `b` будет выбран!
      Это последний `div`!
      diff --git a/files/ru/web/css/_colon_left/index.md b/files/ru/web/css/_colon_left/index.md index 3b5ea6df366468..ac88e72a80d6ab 100644 --- a/files/ru/web/css/_colon_left/index.md +++ b/files/ru/web/css/_colon_left/index.md @@ -1,5 +1,5 @@ --- -title: ':left' +title: ":left" slug: Web/CSS/:left tags: - Вёрстка diff --git a/files/ru/web/css/_colon_link/index.md b/files/ru/web/css/_colon_link/index.md index e097ef894a6572..084f49ceba08c6 100644 --- a/files/ru/web/css/_colon_link/index.md +++ b/files/ru/web/css/_colon_link/index.md @@ -1,5 +1,5 @@ --- -title: ':link' +title: ":link" slug: Web/CSS/:link tags: - Псевдо-классы @@ -19,19 +19,23 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:link` ## Примеры ```css -a:link {color: slategray;} -.external:link {background-color: lightblue;} +a:link { + color: slategray; +} +.external:link { + background-color: lightblue; +} ``` ## Спецификации -| Спецификация | Статус | Комментарий | -| -------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------- | -| {{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }} | {{ Spec2('HTML WHATWG') }} | | -| {{ SpecName('CSS4 Selectors', '#link', ':link') }} | {{ Spec2('CSS4 Selectors') }} | Без изменений. | -| {{ SpecName('CSS3 Selectors', '#link', ':link') }} | {{ Spec2('CSS3 Selectors') }} | Без изменений | -| {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }} | {{ Spec2('CSS2.1') }} | Появилось ограничение применять только для элемента {{ HTMLElement("a") }}. | -| {{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }} | {{ Spec2('CSS1') }} | Изначальное определение. | +| Спецификация | Статус | Комментарий | +| ---------------------------------------------------------------------- | ----------------------------- | --------------------------------------------------------------------------- | +| {{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }} | {{ Spec2('HTML WHATWG') }} | | +| {{ SpecName('CSS4 Selectors', '#link', ':link') }} | {{ Spec2('CSS4 Selectors') }} | Без изменений. | +| {{ SpecName('CSS3 Selectors', '#link', ':link') }} | {{ Spec2('CSS3 Selectors') }} | Без изменений | +| {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }} | {{ Spec2('CSS2.1') }} | Появилось ограничение применять только для элемента {{ HTMLElement("a") }}. | +| {{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }} | {{ Spec2('CSS1') }} | Изначальное определение. | ## Поддержка браузерами diff --git a/files/ru/web/css/_colon_not/index.md b/files/ru/web/css/_colon_not/index.md index 29eeb70fa9fa58..14f93dc2074f14 100644 --- a/files/ru/web/css/_colon_not/index.md +++ b/files/ru/web/css/_colon_not/index.md @@ -1,5 +1,5 @@ --- -title: ':not()' +title: ":not()" slug: Web/CSS/:not translation_of: Web/CSS/:not --- @@ -26,8 +26,12 @@ translation_of: Web/CSS/:not ## Пример ```css -p:not(.classy) { color: red; } -body :not(p) { color: green; } +p:not(.classy) { + color: red; +} +body :not(p) { + color: green; +} ``` CSS выше и HTML ниже... @@ -35,7 +39,7 @@ CSS выше и HTML ниже... ```html

      Некоторый текст.

      Какой-то другой текст.

      -Ещё текст +Ещё текст ``` Выведет это: diff --git a/files/ru/web/css/_colon_nth-child/index.md b/files/ru/web/css/_colon_nth-child/index.md index 578e547469760b..22403da2886367 100644 --- a/files/ru/web/css/_colon_nth-child/index.md +++ b/files/ru/web/css/_colon_nth-child/index.md @@ -1,5 +1,5 @@ --- -title: ':nth-child' +title: ":nth-child" slug: Web/CSS/:nth-child tags: - CSS @@ -68,8 +68,10 @@ translation_of: Web/CSS/:nth-child #### HTML ```html -

      span:nth-child(2n+1), БЕЗ элемента - <em> в группе элементов-потомков.

      +

      + span:nth-child(2n+1), БЕЗ элемента <em> в + группе элементов-потомков. +

      Элементы 1, 3, 5 и 7 будут выбраны.

      Span 1! @@ -81,13 +83,17 @@ translation_of: Web/CSS/:nth-child Span 7!
      -
      - -

      span:nth-child(2n+1), С элементом - <em> в группе элементов-потомков.

      -

      Элементы 1, 5 и 7 будут выбраны.
      - 3 используется в подсчёте потому что это элемент-потомок, - но он не выбран потому что он не <span>.

      +
      + +

      + span:nth-child(2n+1), С элементом <em> в + группе элементов-потомков. +

      +

      + Элементы 1, 5 и 7 будут выбраны.
      + 3 используется в подсчёте потому что это элемент-потомок, но он не выбран + потому что он не <span>. +

      Span! Span @@ -99,14 +105,19 @@ translation_of: Web/CSS/:nth-child Span
      -
      - -

      span:nth-of-type(2n+1), С элементом - <em> в группе элементов-потомков.

      -

      Элементы 1, 4, 6 и 8 будут выбраны.
      - 3 не используется в подсчёте и не выбран, потому что это <em>, - но не <span>, а nth-of-type выбирает только - потомков этого типа. Элемент <em> полностью пропускается и игнорируется.

      +
      + +

      + span:nth-of-type(2n+1), С элементом <em> в + группе элементов-потомков. +

      +

      + Элементы 1, 4, 6 и 8 будут выбраны.
      + 3 не используется в подсчёте и не выбран, потому что это + <em>, но не <span>, а + nth-of-type выбирает только потомков этого типа. Элемент + <em> полностью пропускается и игнорируется. +

      Span! Span @@ -134,9 +145,9 @@ div em { margin-bottom: 3px; } -.first span:nth-child(2n+1), -.second span:nth-child(2n+1), -.third span:nth-of-type(2n+1) { +.first span:nth-child(2n + 1), +.second span:nth-child(2n + 1), +.third span:nth-of-type(2n + 1) { background-color: lime; } ``` diff --git a/files/ru/web/css/_colon_nth-last-child/index.md b/files/ru/web/css/_colon_nth-last-child/index.md index 847100182ae815..f7223e3157a53c 100644 --- a/files/ru/web/css/_colon_nth-last-child/index.md +++ b/files/ru/web/css/_colon_nth-last-child/index.md @@ -1,5 +1,5 @@ --- -title: ':nth-last-child' +title: ":nth-last-child" slug: Web/CSS/:nth-last-child tags: - Псевдоклассы @@ -39,7 +39,8 @@ element:nth-last-child(an + b) { стили } table { border: 1px solid blue; } -tr:nth-last-child(-n+3) { /* последние 3 потомка */ +tr:nth-last-child(-n + 3) { + /* последние 3 потомка */ background-color: lime; } ``` @@ -53,16 +54,16 @@ tr:nth-last-child(-n+3) { /* последние 3 потомка */ Первая - Вторая строка + Вторая строка - Третья + Третья - Четвёртая + Четвёртая - Пятая строчка + Пятая строчка diff --git a/files/ru/web/css/_colon_nth-last-of-type/index.md b/files/ru/web/css/_colon_nth-last-of-type/index.md index 6c11c847d66333..a15ed21ec8398d 100644 --- a/files/ru/web/css/_colon_nth-last-of-type/index.md +++ b/files/ru/web/css/_colon_nth-last-of-type/index.md @@ -1,5 +1,5 @@ --- -title: ':nth-last-of-type()' +title: ":nth-last-of-type()" slug: Web/CSS/:nth-last-of-type tags: - CSS diff --git a/files/ru/web/css/_colon_nth-of-type/index.md b/files/ru/web/css/_colon_nth-of-type/index.md index 73cd58d3c60273..387e3de90bd417 100644 --- a/files/ru/web/css/_colon_nth-of-type/index.md +++ b/files/ru/web/css/_colon_nth-of-type/index.md @@ -1,5 +1,5 @@ --- -title: ':nth-of-type' +title: ":nth-of-type" slug: Web/CSS/:nth-of-type tags: - CSS @@ -53,7 +53,7 @@ p:nth-of-type(4n) { ```css /* Нечётные параграфы */ -p:nth-of-type(2n+1) { +p:nth-of-type(2n + 1) { color: red; } diff --git a/files/ru/web/css/_colon_only-child/index.md b/files/ru/web/css/_colon_only-child/index.md index ada73f2ec4bbad..e323bd457bd746 100644 --- a/files/ru/web/css/_colon_only-child/index.md +++ b/files/ru/web/css/_colon_only-child/index.md @@ -1,5 +1,5 @@ --- -title: ':only-child' +title: ":only-child" slug: Web/CSS/:only-child tags: - Псевдоклассы @@ -60,25 +60,29 @@ li:only-child { ```html
        -
      1. Первый +
      2. + Первый
          -
        • Это единственный ребёнок +
        • Это единственный ребёнок
        3. -
      3. Второй +
      4. + Второй
          -
        • Этот список с двумя элементами -
        • Этот список с двумя элементами +
        • Этот список с двумя элементами
          • +
        • Этот список с двумя элементами
        5. -
      5. Третий +
      6. + Третий
          -
        • Этот список с тремя элементами -
        • Этот список с тремя элементами -
        • Этот список с тремя элементами +
        • Этот список с тремя элементами
          • +
        • Этот список с тремя элементами
          • +
        • Этот список с тремя элементами
        7. -
          +
            +
          ``` #### Результат diff --git a/files/ru/web/css/_colon_only-of-type/index.md b/files/ru/web/css/_colon_only-of-type/index.md index d555ccba216813..21a427032a7113 100644 --- a/files/ru/web/css/_colon_only-of-type/index.md +++ b/files/ru/web/css/_colon_only-of-type/index.md @@ -1,5 +1,5 @@ --- -title: ':only-of-type' +title: ":only-of-type" slug: Web/CSS/:only-of-type tags: - CSS @@ -34,7 +34,8 @@ p:only-of-type {
          Я div №1.

          Я тут единственный p элемент.

          Я div №2.
          -
          Я div №3. +
          + Я div №3. Я единственный потомок типа i. Я em №1. Я em №2. diff --git a/files/ru/web/css/_colon_optional/index.md b/files/ru/web/css/_colon_optional/index.md index 7d5b7752746a1e..d9b2350c7ef801 100644 --- a/files/ru/web/css/_colon_optional/index.md +++ b/files/ru/web/css/_colon_optional/index.md @@ -1,5 +1,5 @@ --- -title: ':optional' +title: ":optional" slug: Web/CSS/:optional tags: - Псевдо-классы diff --git a/files/ru/web/css/_colon_out-of-range/index.md b/files/ru/web/css/_colon_out-of-range/index.md index d30283d78bcccf..2214c9eb93d17d 100644 --- a/files/ru/web/css/_colon_out-of-range/index.md +++ b/files/ru/web/css/_colon_out-of-range/index.md @@ -1,5 +1,5 @@ --- -title: ':out-of-range' +title: ":out-of-range" slug: Web/CSS/:out-of-range tags: - CSS @@ -34,24 +34,24 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:out-o ```css li { - list-style: none; - margin-bottom: 1em; + list-style: none; + margin-bottom: 1em; } input { - border: 1px solid black; + border: 1px solid black; } input:in-range { - background-color: rgba(0, 255, 0, 0.25); + background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { - background-color: rgba(255, 0, 0, 0.25); - border: 2px solid red; + background-color: rgba(255, 0, 0, 0.25); + border: 2px solid red; } input:in-range + label::after { - content:' НОРМАЛЬНОЕ'; + content: " НОРМАЛЬНОЕ"; } input:out-of-range + label::after { - content:'вне диапазона!'; + content: "вне диапазона!"; } ``` @@ -59,10 +59,10 @@ input:out-of-range + label::after { ## Спецификации -| Спецификация | Статус | Комментарий | -| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}} | {{Spec2('HTML WHATWG')}} | Определяет, когда `:out-of-range` находит элементы в HTML. | -| {{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}} | {{Spec2('CSS4 Selectors')}} | Изначальное определение. | +| Спецификация | Статус | Комментарий | +| ------------------------------------------------------------------------------------ | --------------------------- | ---------------------------------------------------------- | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}} | {{Spec2('HTML WHATWG')}} | Определяет, когда `:out-of-range` находит элементы в HTML. | +| {{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}} | {{Spec2('CSS4 Selectors')}} | Изначальное определение. | ## Поддержка браузерами diff --git a/files/ru/web/css/_colon_placeholder-shown/index.md b/files/ru/web/css/_colon_placeholder-shown/index.md index 4e4b1efb069c6f..c633f2160b4906 100644 --- a/files/ru/web/css/_colon_placeholder-shown/index.md +++ b/files/ru/web/css/_colon_placeholder-shown/index.md @@ -1,8 +1,9 @@ --- -title: ':placeholder-shown' +title: ":placeholder-shown" slug: Web/CSS/:placeholder-shown translation_of: Web/CSS/:placeholder-shown --- + {{CSSRef}}{{SeeCompatTable}}[CSS псевдокласс](/ru/docs/Web/CSS) **`:placeholder-shown`** представляет любой {{htmlElement("input")}} или {{htmlElement("textarea")}} элемент, который отображает в данный момент [текст заполнитель (плейсхолдер)](/ru/docs/Web/HTML/Element/input#attr-placeholder). ```css @@ -23,7 +24,7 @@ translation_of: Web/CSS/:placeholder-shown #### HTML ```html - + ``` #### CSS @@ -60,7 +61,7 @@ input:placeholder-shown { #### HTML ```html - + ``` #### CSS @@ -90,7 +91,7 @@ input:placeholder-shown { #### HTML ```html - + ``` #### CSS @@ -128,17 +129,23 @@ input:placeholder-shown {

          - +

          - +

          - +

          - +
          ``` @@ -160,7 +167,7 @@ input.studentid:-moz-placeholder { ```css input { - background-color: #E8E8E8; + background-color: #e8e8e8; color: black; } diff --git a/files/ru/web/css/_colon_read-only/index.md b/files/ru/web/css/_colon_read-only/index.md index ee8557f36adc4c..8e4dd514b84edd 100644 --- a/files/ru/web/css/_colon_read-only/index.md +++ b/files/ru/web/css/_colon_read-only/index.md @@ -1,10 +1,11 @@ --- -title: ':read-only' +title: ":read-only" slug: Web/CSS/:read-only tags: - Псевдо-элементы translation_of: Web/CSS/:read-only --- + {{ CSSRef() }} ## Описание @@ -14,18 +15,22 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:read- ## Пример ```css -input:-moz-read-only { background: #eee; } -input:read-only { background: #eee; } +input:-moz-read-only { + background: #eee; +} +input:read-only { + background: #eee; +} ``` ## Спецификации -| Спецификация | Статус | Комментарий | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------- | -| {{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }} | {{ Spec2('HTML WHATWG') }} | Без изменений. | -| {{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }} | {{ Spec2('HTML5 W3C') }} | Определяет семантику в HTML и ограничения проверки. | -| {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }} | {{ Spec2('CSS4 Selectors') }} | Без изменений. | -| {{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-only') }} | {{ Spec2('CSS3 Basic UI') }} | Определяет псевдокласс, но не семантику. | +| Спецификация | Статус | Комментарий | +| ------------------------------------------------------------------ | ----------------------------- | --------------------------------------------------- | +| {{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }} | {{ Spec2('HTML WHATWG') }} | Без изменений. | +| {{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }} | {{ Spec2('HTML5 W3C') }} | Определяет семантику в HTML и ограничения проверки. | +| {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }} | {{ Spec2('CSS4 Selectors') }} | Без изменений. | +| {{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-only') }} | {{ Spec2('CSS3 Basic UI') }} | Определяет псевдокласс, но не семантику. | ## Поддержка браузерами diff --git a/files/ru/web/css/_colon_read-write/index.md b/files/ru/web/css/_colon_read-write/index.md index a0d7cf662a9ed4..8974f27831ab22 100644 --- a/files/ru/web/css/_colon_read-write/index.md +++ b/files/ru/web/css/_colon_read-write/index.md @@ -1,5 +1,5 @@ --- -title: ':read-write' +title: ":read-write" slug: Web/CSS/:read-write tags: - Псевдо-классы @@ -15,18 +15,22 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:read- ## Пример ```css -input:-moz-read-write { background: #eee; } -input:read-write { background: #eee; } +input:-moz-read-write { + background: #eee; +} +input:read-write { + background: #eee; +} ``` ## Спецификации -| Спецификации | Статус | Комментарий | -| -------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------- | -| {{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }} | {{ Spec2('HTML WHATWG') }} | Без изменений. | -| {{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }} | {{ Spec2('HTML5 W3C') }} | Определяет семантику в HTML и ограничения проверки. | -| {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }} | {{ Spec2('CSS4 Selectors') }} | Без изменений. | -| {{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-write') }} | {{ Spec2('CSS3 Basic UI') }} | Определяет псевдокласс, но не семантику. | +| Спецификации | Статус | Комментарий | +| -------------------------------------------------------------------- | ----------------------------- | --------------------------------------------------- | +| {{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }} | {{ Spec2('HTML WHATWG') }} | Без изменений. | +| {{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }} | {{ Spec2('HTML5 W3C') }} | Определяет семантику в HTML и ограничения проверки. | +| {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }} | {{ Spec2('CSS4 Selectors') }} | Без изменений. | +| {{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-write') }} | {{ Spec2('CSS3 Basic UI') }} | Определяет псевдокласс, но не семантику. | ## Поддержка браузерами diff --git a/files/ru/web/css/_colon_required/index.md b/files/ru/web/css/_colon_required/index.md index c32c115e2aebb6..ee271b3598564b 100644 --- a/files/ru/web/css/_colon_required/index.md +++ b/files/ru/web/css/_colon_required/index.md @@ -1,5 +1,5 @@ --- -title: ':required' +title: ":required" slug: Web/CSS/:required tags: - Псевдо-классы diff --git a/files/ru/web/css/_colon_right/index.md b/files/ru/web/css/_colon_right/index.md index 729ef3608811c3..19e70aa9fbf9e7 100644 --- a/files/ru/web/css/_colon_right/index.md +++ b/files/ru/web/css/_colon_right/index.md @@ -1,5 +1,5 @@ --- -title: ':right' +title: ":right" slug: Web/CSS/:right translation_of: Web/CSS/:right --- diff --git a/files/ru/web/css/_colon_root/index.md b/files/ru/web/css/_colon_root/index.md index 65ada018d45657..ec8c0078c9e187 100644 --- a/files/ru/web/css/_colon_root/index.md +++ b/files/ru/web/css/_colon_root/index.md @@ -1,5 +1,5 @@ --- -title: ':root' +title: ":root" slug: Web/CSS/:root tags: - CSS diff --git a/files/ru/web/css/_colon_target/index.md b/files/ru/web/css/_colon_target/index.md index 6f3a25e36da38a..aea9b73b065e6a 100644 --- a/files/ru/web/css/_colon_target/index.md +++ b/files/ru/web/css/_colon_target/index.md @@ -1,5 +1,5 @@ --- -title: ':target' +title: ":target" slug: Web/CSS/:target tags: - Вёрстка @@ -45,17 +45,24 @@ http://www.example.com/index.html#section2 ```html

          Table of Contents

            -
          1. Jump to the first paragraph!
            2. -
          2. Jump to the second paragraph!
            3. -
          3. This link goes nowhere, - because the target doesn't exist.
            4. +
          4. Jump to the first paragraph!
            5. +
          5. Jump to the second paragraph!
            6. +
          6. + This link goes nowhere, because the target doesn't exist. +

          My Fun Article

          -

          You can target this paragraph using a - URL fragment. Click on the link above to try out!

          -

          This is another paragraph, also accessible - from the links above. Isn't that delightful?

          +

          + You can target this paragraph using a URL fragment. Click on the link + above to try out! +

          +

          + This is another paragraph, also accessible from the links above. Isn't + that delightful? +

          ``` #### CSS @@ -70,7 +77,7 @@ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; - margin-right: .25em; + margin-right: 0.25em; } /* Стиль italic-элементов без target-элемента */ @@ -100,17 +107,20 @@ p:target i { ``` @@ -173,7 +183,7 @@ p:target i { width: 100%; height: 100%; position: fixed; - background-color: rgba(0,0,0,.7); + background-color: rgba(0, 0, 0, 0.7); content: ""; cursor: default; } diff --git a/files/ru/web/css/_colon_valid/index.md b/files/ru/web/css/_colon_valid/index.md index 6cdd88e98ce003..ff2e23b5e5e09d 100644 --- a/files/ru/web/css/_colon_valid/index.md +++ b/files/ru/web/css/_colon_valid/index.md @@ -1,10 +1,11 @@ --- -title: ':valid' +title: ":valid" slug: Web/CSS/:valid tags: - Псевдо-классы translation_of: Web/CSS/:valid --- + {{ CSSRef() }} ## Описание @@ -24,7 +25,7 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:valid

          - + ``` diff --git a/files/ru/web/css/_colon_visited/index.md b/files/ru/web/css/_colon_visited/index.md index 8acf9dca375268..a549b835bc1fd1 100644 --- a/files/ru/web/css/_colon_visited/index.md +++ b/files/ru/web/css/_colon_visited/index.md @@ -1,10 +1,11 @@ --- -title: ':visited' +title: ":visited" slug: Web/CSS/:visited tags: - Псевдо-классы translation_of: Web/CSS/:visited --- + {{ CSSRef() }} ## Описание @@ -16,8 +17,12 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:visit ## Примеры ```css -a:visited { color: #4b2f89; } -a:visited { background-color: white } +a:visited { + color: #4b2f89; +} +a:visited { + background-color: white; +} ``` ## Спецификации diff --git a/files/ru/web/css/_colon_where/index.md b/files/ru/web/css/_colon_where/index.md index 7488ebf97cd514..82c4719c224187 100644 --- a/files/ru/web/css/_colon_where/index.md +++ b/files/ru/web/css/_colon_where/index.md @@ -1,12 +1,13 @@ --- -title: ':where()' +title: ":where()" slug: Web/CSS/:where tags: - - ':where' + - ":where" - CSS - псевдокласс translation_of: Web/CSS/:where --- + {{CSSRef}}[CSS](/ru/docs/Web/CSS) [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) **`:where()`** в качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка. ```css @@ -62,30 +63,48 @@ footer p:hover { ``` diff --git a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.md b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.md index 440e41bb6d544b..4ce4151f14cf7e 100644 --- a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.md +++ b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.md @@ -1,5 +1,5 @@ --- -title: '::-moz-progress-bar' +title: "::-moz-progress-bar" slug: Web/CSS/::-moz-progress-bar translation_of: Web/CSS/::-moz-progress-bar --- diff --git a/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.md b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.md index 8ab3d74fc822d2..140be836a8c34c 100644 --- a/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.md +++ b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.md @@ -1,5 +1,5 @@ --- -title: '::-webkit-slider-thumb' +title: "::-webkit-slider-thumb" slug: Web/CSS/::-webkit-slider-thumb translation_of: Web/CSS/::-webkit-slider-thumb --- diff --git a/files/ru/web/css/_doublecolon_after/index.md b/files/ru/web/css/_doublecolon_after/index.md index b85dfb59e0852f..46127ecd2ade1d 100644 --- a/files/ru/web/css/_doublecolon_after/index.md +++ b/files/ru/web/css/_doublecolon_after/index.md @@ -1,5 +1,5 @@ --- -title: '::after (:after)' +title: "::after (:after)" slug: Web/CSS/::after tags: - CSS @@ -40,8 +40,10 @@ a::after { ```html

          Вот простой скучный текст.

          Вот нормальный текст, который не является ни скучным, ни потрясающим.

          -

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

          +

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

          ``` #### CSS @@ -53,8 +55,8 @@ a::after { } .boring-text::after { - content: "<- СКУЧНО!"; - color: red; + content: "<- СКУЧНО!"; + color: red; } ``` @@ -76,12 +78,12 @@ a::after { ```css .ribbon { - background-color: #5BC8F7; + background-color: #5bc8f7; } .ribbon::after { content: "Посмотрите на этот оранжевый прямоугольник."; - background-color: #FFBA10; + background-color: #ffba10; border-color: black; border-style: dotted; } @@ -98,10 +100,16 @@ a::after { #### HTML ```html -

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

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

          ``` @@ -111,7 +119,7 @@ a::after { span[data-descr] { position: relative; text-decoration: underline; - color: #00F; + color: #00f; cursor: help; } diff --git a/files/ru/web/css/_doublecolon_backdrop/index.md b/files/ru/web/css/_doublecolon_backdrop/index.md index 71bbb5e3a7b544..aefaf0feac58ea 100644 --- a/files/ru/web/css/_doublecolon_backdrop/index.md +++ b/files/ru/web/css/_doublecolon_backdrop/index.md @@ -1,5 +1,5 @@ --- -title: '::backdrop' +title: "::backdrop" slug: Web/CSS/::backdrop tags: - API @@ -24,7 +24,7 @@ translation_of: Web/CSS/::backdrop ```css /* Подложка показывается только тогда, когда диалоговое окно открыто с помощью метода dialog.showModal() */ dialog::backdrop { - background: rgba(255,0,0,.25); + background: rgba(255, 0, 0, 0.25); } ``` diff --git a/files/ru/web/css/_doublecolon_before/index.md b/files/ru/web/css/_doublecolon_before/index.md index 2e25f70fa58048..1aa8ba4707fe06 100644 --- a/files/ru/web/css/_doublecolon_before/index.md +++ b/files/ru/web/css/_doublecolon_before/index.md @@ -1,5 +1,5 @@ --- -title: '::before (:before)' +title: "::before (:before)" slug: Web/CSS/::before tags: - CSS @@ -73,12 +73,12 @@ q::after { ```css .ribbon { - background-color: #5BC8F7; + background-color: #5bc8f7; } .ribbon::before { content: "Посмотрите на этот оранжевый прямоугольник."; - background-color: #FFBA10; + background-color: #ffba10; border-color: black; border-style: dotted; } @@ -118,11 +118,11 @@ li { } li.done { - background: #CCFF99; + background: #ccff99; } li.done::before { - content: ''; + content: ""; position: absolute; border-color: #009933; border-style: solid; @@ -139,12 +139,16 @@ li.done::before { #### JavaScript ```js -var list = document.querySelector('ul'); -list.addEventListener('click', function(ev) { - if( ev.target.tagName === 'LI') { - ev.target.classList.toggle('done'); - } -}, false); +var list = document.querySelector("ul"); +list.addEventListener( + "click", + function (ev) { + if (ev.target.tagName === "LI") { + ev.target.classList.toggle("done"); + } + }, + false, +); ``` Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом `::before`, стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка. @@ -161,32 +165,38 @@ list.addEventListener('click', function(ev) { ```html
          -"Плавающий перед" будет добавлен слева от текста -и не позволит переполнению этой строки обтекать его снизу. -Аналогично, "Плавающий после" будет добавлен справа от текста -и не позволит переполнению этой строки обтекать его снизу. + "Плавающий перед" будет добавлен слева от текста и не позволит переполнению + этой строки обтекать его снизу. Аналогично, "Плавающий после" будет добавлен + справа от текста и не позволит переполнению этой строки обтекать его + снизу.
          ``` #### CSS ```css -#floatme { float: left; width: 50%; } +#floatme { + float: left; + width: 50%; +} /* Чтобы получить пустой столбец достаточно указать шестнадцатеричный код неразрывного пробела \a0 в качестве содержимого (используйте \0000a0, если за этим пробелом следуют другие символы) */ .example::before { content: "Плавающий перед"; float: left; - width: 25% + width: 25%; } .example::after { content: "Плавающий после"; float: right; - width:25% + width: 25%; } /* Для стилизации */ -.example::before, .example::after { +.example::before, +.example::after { background: yellow; color: red; } diff --git a/files/ru/web/css/_doublecolon_cue/index.md b/files/ru/web/css/_doublecolon_cue/index.md index 32efd822b940d6..7a2220791b8daa 100644 --- a/files/ru/web/css/_doublecolon_cue/index.md +++ b/files/ru/web/css/_doublecolon_cue/index.md @@ -1,8 +1,9 @@ --- -title: '::cue' +title: "::cue" slug: Web/CSS/::cue translation_of: Web/CSS/::cue --- + {{CSSRef}} [Псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements) [CSS](/ru/docs/Web/CSS) **`::cue`** соответствует репликам [WebVTT](/ru/docs/Web/API/WebVTT_API) в выбранном элементе. Он может быть использован для задания [стилей титров и других реплик](/docs/Web/API/WebVTT_API#Styling_WebTT_cues) в медиа с VTT треками. diff --git a/files/ru/web/css/_doublecolon_first-letter/index.md b/files/ru/web/css/_doublecolon_first-letter/index.md index fbca056fc43598..9fcf601d347c54 100644 --- a/files/ru/web/css/_doublecolon_first-letter/index.md +++ b/files/ru/web/css/_doublecolon_first-letter/index.md @@ -1,5 +1,5 @@ --- -title: '::first-letter (:first-letter)' +title: "::first-letter (:first-letter)" slug: Web/CSS/::first-letter tags: - CSS @@ -51,13 +51,21 @@ p::first-letter { ### HTML ```html -

          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt - ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo - dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

          -

          Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

          -

          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut - aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit - esse molestie consequat.

          +

          + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita + kasd gubergren, no sea takimata sanctus est. +

          +

          + Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie + consequat. +

          +

          + Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure + dolor in hendrerit in vulputate velit esse molestie consequat. +

          -Начало специального знака препинания.

          _Начало специального знака препинания.

          "Начало специального знака препинания.

          diff --git a/files/ru/web/css/_doublecolon_first-line/index.md b/files/ru/web/css/_doublecolon_first-line/index.md index d868ff4531e53d..0454e4728a98db 100644 --- a/files/ru/web/css/_doublecolon_first-line/index.md +++ b/files/ru/web/css/_doublecolon_first-line/index.md @@ -1,5 +1,5 @@ --- -title: '::first-line (:first-line)' +title: "::first-line (:first-line)" slug: Web/CSS/::first-line tags: - CSS @@ -41,11 +41,15 @@ p::first-line { ### HTML ```html -

          Стили будут применены только к первой строке этого параграфа. -После этого, весь текст будет отображаться как обычно. Увидели, что я имею в виду?

          - -Первая строка этого элемента не будет стилизована специальным образом -потому что это не блочный элемент. +

          + Стили будут применены только к первой строке этого параграфа. После этого, + весь текст будет отображаться как обычно. Увидели, что я имею в виду? +

          + +Первая строка этого элемента не будет стилизована специальным образом потому + что это не блочный элемент. ``` ### CSS @@ -55,7 +59,6 @@ p::first-line { color: blue; text-transform: uppercase; - /* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО */ /* Многие свойства запрещены в псевдоэлементах ::first-line */ margin-left: 20px; diff --git a/files/ru/web/css/_doublecolon_grammar-error/index.md b/files/ru/web/css/_doublecolon_grammar-error/index.md index dc3bebe65d0eed..b7264908996e2f 100644 --- a/files/ru/web/css/_doublecolon_grammar-error/index.md +++ b/files/ru/web/css/_doublecolon_grammar-error/index.md @@ -1,5 +1,5 @@ --- -title: '::grammar-error' +title: "::grammar-error" slug: Web/CSS/::grammar-error tags: - CSS @@ -47,7 +47,7 @@ translation_of: Web/CSS/::grammar-error #### CSS ```css -::grammar-error { +::grammar-error { text-decoration: underline red; color: red; } diff --git a/files/ru/web/css/_doublecolon_marker/index.md b/files/ru/web/css/_doublecolon_marker/index.md index f97a719d3d97dd..e85da911b694f3 100644 --- a/files/ru/web/css/_doublecolon_marker/index.md +++ b/files/ru/web/css/_doublecolon_marker/index.md @@ -1,8 +1,9 @@ --- -title: '::marker' +title: "::marker" slug: Web/CSS/::marker translation_of: Web/CSS/::marker --- + {{CSSRef}} Псевдоэлемент **`::marker`** применяет стили к маркеру элемента списка, которые обычно содержит значок или номер. Работает с любым элементом или псевдоэлементом, к которого установлен [`display: list-item`](/ru/docs/Web/CSS/display), например, у такого как {{HTMLElement("li")}} или {{HTMLElement("summary")}}. @@ -58,10 +59,10 @@ ul li::marker { ## Specifications -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------- | +| Specification | Status | Comment | +| ------------------------------------------------------------------ | --------------------------------- | ---------------------- | | {{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}} | {{Spec2('CSS4 Pseudo-Elements')}} | No significant change. | -| {{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}} | {{Spec2('CSS3 Lists')}} | Initial definition. | +| {{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}} | {{Spec2('CSS3 Lists')}} | Initial definition. | ## Browser compatibility diff --git a/files/ru/web/css/_doublecolon_placeholder/index.md b/files/ru/web/css/_doublecolon_placeholder/index.md index db05ced527d607..af638de35a73d7 100644 --- a/files/ru/web/css/_doublecolon_placeholder/index.md +++ b/files/ru/web/css/_doublecolon_placeholder/index.md @@ -1,12 +1,13 @@ --- -title: '::placeholder' +title: "::placeholder" slug: Web/CSS/::placeholder tags: - - '::placeholder' + - "::placeholder" - CSS - Псевдоэлемент translation_of: Web/CSS/::placeholder --- + {{CSSRef}} [CSS](/ru/docs/Web/CSS) [псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements) **`::placeholder`** представляет собой [текст placeholder](/ru/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute) в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах. @@ -33,7 +34,7 @@ translation_of: Web/CSS/::placeholder #### HTML ```html - + ``` #### CSS @@ -55,7 +56,7 @@ input::placeholder { #### HTML ```html - + ``` #### CSS @@ -97,7 +98,11 @@ input::placeholder { ```html Пример: jane@sample.com - + ``` - [Placeholders in Form Fields Are Harmful — Nielsen Norman Group](https://www.nngroup.com/articles/form-design-placeholders/) diff --git a/files/ru/web/css/_doublecolon_selection/index.md b/files/ru/web/css/_doublecolon_selection/index.md index 09954bee02ac10..a2b8cda2b83506 100644 --- a/files/ru/web/css/_doublecolon_selection/index.md +++ b/files/ru/web/css/_doublecolon_selection/index.md @@ -1,5 +1,5 @@ --- -title: '::selection' +title: "::selection" slug: Web/CSS/::selection tags: - CSS @@ -9,6 +9,7 @@ tags: - Псевдоэлементы translation_of: Web/CSS/::selection --- + {{CSSRef}}{{SeeCompatTable}} [Псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements) **`::selection`** позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши). @@ -38,7 +39,7 @@ translation_of: Web/CSS/::selection ```css /* синтаксис Firefox */ -::-moz-selection +::-moz-selection {} ``` {{csssyntax}} @@ -84,8 +85,8 @@ p::selection { ## Спецификации -| Спецификация | Статус | Комментарий | -| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------ | +| Спецификация | Статус | Комментарий | +| ----------------------------------------------------------------------------- | --------------------------------- | ------------------------ | | {{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Изначальное определение. | > **Примечание:** Хотя псевдоэлемент `::selection` присутствовал в черновиках стандарта CSS Selectors Level 3, он был убран в течение фазы Candidate Recommendation, так как его поведение было недостаточно проработано (особенно с вложенным элементами) и согласованность не была достигнута [(основываясь на обсуждении в списке рассылки W3C Style)](http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html). Этот псевдоэлемент был возвращён в [Pseudo-Elements Level 4](http://dev.w3.org/csswg/css-pseudo-4/). diff --git a/files/ru/web/css/_doublecolon_slotted/index.md b/files/ru/web/css/_doublecolon_slotted/index.md index 433d59ed146283..51680135788c16 100644 --- a/files/ru/web/css/_doublecolon_slotted/index.md +++ b/files/ru/web/css/_doublecolon_slotted/index.md @@ -1,5 +1,5 @@ --- -title: '::slotted()' +title: "::slotted()" slug: Web/CSS/::slotted translation_of: Web/CSS/::slotted --- @@ -48,26 +48,29 @@ translation_of: Web/CSS/::slotted Пользовательский элемент — `` — определяется следующим образом: ```js -customElements.define('person-details', +customElements.define( + "person-details", class extends HTMLElement { constructor() { super(); - let template = document.getElementById('person-template'); + let template = document.getElementById("person-template"); let templateContent = template.content; - const shadowRoot = this.attachShadow({mode: 'open'}); + const shadowRoot = this.attachShadow({ mode: "open" }); - let style = document.createElement('style'); - style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + - 'h2 { margin: 0 0 10px; }' + - 'ul { margin: 0; }' + - 'p { margin: 10px 0; }' + - '::slotted(*) { color: gray; font-family: sans-serif; } '; + let style = document.createElement("style"); + style.textContent = + "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" + + "h2 { margin: 0 0 10px; }" + + "ul { margin: 0; }" + + "p { margin: 10px 0; }" + + "::slotted(*) { color: gray; font-family: sans-serif; } "; shadowRoot.appendChild(style); shadowRoot.appendChild(templateContent.cloneNode(true)); - } -}) + } + }, +); ``` Вы увидите, что при заполнении элемента `style` содержимым мы выбираем все slotted-элементы (`::slotted(*)`) и задаём им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые ещё не были успешно заполнены. diff --git a/files/ru/web/css/actual_value/index.md b/files/ru/web/css/actual_value/index.md index c450b0d2534842..808f8e7a6ae8f0 100644 --- a/files/ru/web/css/actual_value/index.md +++ b/files/ru/web/css/actual_value/index.md @@ -17,8 +17,8 @@ original_slug: Web/CSS/Действительное_значение ## Спецификации -| Спецификация | Статус | Комментарий | -| ---------------------------------------------------------------------------------------- | ------------------------ | ----------------------- | +| Спецификация | Статус | Комментарий | +| ------------------------------------------------------------------- | ------------------- | ----------------------- | | {{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}} | {{Spec2('CSS2.1')}} | Изначальное определение | ## Смотрите также diff --git a/files/ru/web/css/adjacent_sibling_combinator/index.md b/files/ru/web/css/adjacent_sibling_combinator/index.md index 785f7c46f4282a..5588abb6f3af7e 100644 --- a/files/ru/web/css/adjacent_sibling_combinator/index.md +++ b/files/ru/web/css/adjacent_sibling_combinator/index.md @@ -43,8 +43,8 @@ img + span.caption { сработает только на тех тегах span, для которых задан класс caption: ```html -Первая фотка -Вторая +Первая фотка +Вторая ``` ## Спецификации diff --git a/files/ru/web/css/align-content/index.md b/files/ru/web/css/align-content/index.md index e250c4ef17b68b..ffea8fb625f67d 100644 --- a/files/ru/web/css/align-content/index.md +++ b/files/ru/web/css/align-content/index.md @@ -19,11 +19,11 @@ The interactive example below use Grid Layout to demonstrate some of the values ```css /* Основное позиционное выравнивание */ /* align-content не принимает значения left и right */ -align-content: center; /* Расположить элементы вокруг центра */ -align-content: start; /* Расположить элементы в начале */ -align-content: end; /* Расположить элементы в конце */ +align-content: center; /* Расположить элементы вокруг центра */ +align-content: start; /* Расположить элементы в начале */ +align-content: end; /* Расположить элементы в конце */ align-content: flex-start; /* Расположить элементы flex в начале */ -align-content: flex-end; /* Расположить элементы flex в конце */ +align-content: flex-end; /* Расположить элементы flex в конце */ /* Нормальное выравнивание */ align-content: normal; @@ -37,12 +37,12 @@ align-content: last baseline; align-content: space-between; /* Распределить элементы равномерно Первый элемент находится на одном уровне с началом, последней - совпадает с концом */ -align-content: space-around; /* Распределить элементы равномерно +align-content: space-around; /* Распределить элементы равномерно Элементы имеют половинное пространство на каждом конце */ -align-content: space-evenly; /* Распределить элементы равномерно +align-content: space-evenly; /* Распределить элементы равномерно Элементы имеют одинаковое пространство вокруг них */ -align-content: stretch; /* Распределить элементы равномерно +align-content: stretch; /* Распределить элементы равномерно Растянуть 'auto'-размерные элементы, чтобы заполнить контейнер */ @@ -99,7 +99,7 @@ align-content: unset; ```css #container { - height:200px; + height: 200px; width: 240px; align-content: center; /* Can be changed in the live sample */ background-color: #8c8c8c; @@ -218,15 +218,15 @@ select { ``` ```js hidden -var values = document.getElementById('values'); -var display = document.getElementById('display'); -var container = document.getElementById('container'); +var values = document.getElementById("values"); +var display = document.getElementById("display"); +var container = document.getElementById("container"); -values.addEventListener('change', function (evt) { +values.addEventListener("change", function (evt) { container.style.alignContent = evt.target.value; }); -display.addEventListener('change', function (evt) { +display.addEventListener("change", function (evt) { container.className = evt.target.value; }); ``` diff --git a/files/ru/web/css/align-self/index.md b/files/ru/web/css/align-self/index.md index bf3a694151270c..de8df4fe7d7de1 100644 --- a/files/ru/web/css/align-self/index.md +++ b/files/ru/web/css/align-self/index.md @@ -7,6 +7,7 @@ tags: - Свойства translation_of: Web/CSS/align-self --- + {{CSSRef}} ## Описание diff --git a/files/ru/web/css/all/index.md b/files/ru/web/css/all/index.md index cc68444af6983f..b48a28dda83eba 100644 --- a/files/ru/web/css/all/index.md +++ b/files/ru/web/css/all/index.md @@ -3,6 +3,7 @@ title: all slug: Web/CSS/all translation_of: Web/CSS/all --- + {{CSSRef}} ## Описание @@ -48,7 +49,10 @@ all: revert; **HTML** ```html -
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus eget velit sagittis. +
          + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
          +Phasellus eget velit sagittis. ``` **CSS** @@ -56,7 +60,7 @@ all: revert; ```css html { font-size: small; - background-color: #F0F0F0; + background-color: #f0f0f0; color: blue; } @@ -71,12 +75,22 @@ blockquote { #### No `all` property ```html hidden -
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus eget velit sagittis. +
          + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
          +Phasellus eget velit sagittis. ``` ```css hidden -html { font-size: small; background-color: #F0F0F0; color:blue; } -blockquote { background-color: skyblue; color: red; } +html { + font-size: small; + background-color: #f0f0f0; + color: blue; +} +blockquote { + background-color: skyblue; + color: red; +} ``` {{EmbedLiveSample("ex0", "200", "125")}} @@ -86,13 +100,25 @@ blockquote { background-color: skyblue; color: red; } #### `all:unset` ```html hidden -
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus eget velit sagittis. +
          + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
          +Phasellus eget velit sagittis. ``` ```css hidden -html { font-size: small; background-color: #F0F0F0; color:blue; } -blockquote { background-color: skyblue; color: red; } -blockquote { all: unset; } +html { + font-size: small; + background-color: #f0f0f0; + color: blue; +} +blockquote { + background-color: skyblue; + color: red; +} +blockquote { + all: unset; +} ``` {{EmbedLiveSample("ex1", "200", "125")}} @@ -102,13 +128,25 @@ blockquote { all: unset; } #### `all:initial` ```html hidden -
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus eget velit sagittis. +
          + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
          +Phasellus eget velit sagittis. ``` ```css hidden -html { font-size: small; background-color: #F0F0F0; color:blue; } -blockquote { background-color: skyblue; color: red; } -blockquote { all: initial; } +html { + font-size: small; + background-color: #f0f0f0; + color: blue; +} +blockquote { + background-color: skyblue; + color: red; +} +blockquote { + all: initial; +} ``` {{EmbedLiveSample("ex2", "200", "125")}} @@ -118,13 +156,25 @@ blockquote { all: initial; } #### `all:inherit` ```html hidden -
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus eget velit sagittis. +
          + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
          +Phasellus eget velit sagittis. ``` ```css hidden -html { font-size: small; background-color: #F0F0F0; color:blue; } -blockquote { background-color: skyblue; color: red; } -blockquote { all: inherit; } +html { + font-size: small; + background-color: #f0f0f0; + color: blue; +} +blockquote { + background-color: skyblue; + color: red; +} +blockquote { + all: inherit; +} ``` {{EmbedLiveSample("ex3", "200", "125")}} diff --git a/files/ru/web/css/angle/index.md b/files/ru/web/css/angle/index.md index b7b06b979697aa..51872d8c055288 100644 --- a/files/ru/web/css/angle/index.md +++ b/files/ru/web/css/angle/index.md @@ -33,11 +33,11 @@ translation_of: Web/CSS/angle ## Примеры -| ![Angle90.png](/@api/deki/files/5704/=Angle90.png) | Прямой угол: `90deg = 100grad = 0.25turn ≈ 1.5708rad` | -| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | -| ![Angle180.png](/@api/deki/files/5706/=Angle180.png) | Развёрнутый угол: `180deg = 200grad = 0.5turn ≈ 3.1416rad` | +| ![Angle90.png](/@api/deki/files/5704/=Angle90.png) | Прямой угол: `90deg = 100grad = 0.25turn ≈ 1.5708rad` | +| ------------------------------------------------------------ | ---------------------------------------------------------------------------------- | +| ![Angle180.png](/@api/deki/files/5706/=Angle180.png) | Развёрнутый угол: `180deg = 200grad = 0.5turn ≈ 3.1416rad` | | ![AngleMinus90.png](/@api/deki/files/5707/=AngleMinus90.png) | Прямой угол (против часовой стрелки): `-90deg = -100grad = -0.25turn ≈ -1.5708rad` | -| ![Angle0.png](/@api/deki/files/5708/=Angle0.png) | Нулевой угол: `0deg = 0grad = 0turn = 0rad` | +| ![Angle0.png](/@api/deki/files/5708/=Angle0.png) | Нулевой угол: `0deg = 0grad = 0turn = 0rad` | ## Спецификации diff --git a/files/ru/web/css/animation-duration/index.md b/files/ru/web/css/animation-duration/index.md index ecc16a8aeb8a05..af1543ed2d33b3 100644 --- a/files/ru/web/css/animation-duration/index.md +++ b/files/ru/web/css/animation-duration/index.md @@ -3,6 +3,7 @@ title: animation-duration slug: Web/CSS/animation-duration translation_of: Web/CSS/animation-duration --- + {{CSSRef}} {{ SeeCompatTable() }} ## Описание diff --git a/files/ru/web/css/animation-fill-mode/index.md b/files/ru/web/css/animation-fill-mode/index.md index 7b2ac5c77d87fe..405fbee02c6626 100644 --- a/files/ru/web/css/animation-fill-mode/index.md +++ b/files/ru/web/css/animation-fill-mode/index.md @@ -7,6 +7,7 @@ tags: - CSS-свойства translation_of: Web/CSS/animation-fill-mode --- + {{CSSRef}}{{SeeCompatTable}} ## Описание @@ -35,18 +36,18 @@ animation-fill-mode: both, forwards, none; - : Стили анимации не будут применены к элементу до и после её выполнения. - `forwards` - | : По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}: | `animation-direction` | `animation-iteration-count` | последний ключевой кадр | - | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------------------- | ----------------------- | - | `normal` | любое | `100%` или `to` | - | `reverse` | любое | `0%` или `from` | - | `alternate` | чётное | `0%` или `from` | - | `alternate` | нечётное | `100%` или `to` | - | `alternate-reverse` | чётное | `100%` или `to` | - | `alternate-reverse` | нечётное | `0%` или `from` | + | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------------------- | ----------------------- | + | `normal` | любое | `100%` или `to` | + | `reverse` | любое | `0%` или `from` | + | `alternate` | чётное | `0%` или `from` | + | `alternate` | нечётное | `100%` или `to` | + | `alternate-reverse` | чётное | `100%` или `to` | + | `alternate-reverse` | нечётное | `0%` или `from` | - `backwards` - | : Элемент сохранит стиль первого [ключевого кадра](/ru/docs/CSS/@keyframes) на протяжении периода {{cssxref("animation-delay")}}. Первый ключевой кадр определяется значением {{cssxref("animation-direction")}}: | `animation-direction` | первый ключевой кадр | - | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------------- | - | `normal` или `alternate` | `0%` или `from` | - | `reverse` или `alternate-reverse` | `100%` или `to` | + | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------------- | + | `normal` или `alternate` | `0%` или `from` | + | `reverse` или `alternate-reverse` | `100%` или `to` | - `both` - : Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно. @@ -77,26 +78,34 @@ animation-fill-mode: both, forwards, none; font-family: sans-serif; } @keyframes grow { - 0% { font-size: 0 } - 100% { font-size: 40px } + 0% { + font-size: 0; + } + 100% { + font-size: 40px; + } } @-webkit-keyframes grow { - 0% { font-size: 0 } - 100% { font-size: 40px } + 0% { + font-size: 0; + } + 100% { + font-size: 40px; + } } .demo:hover .grows { - animation-name: grow; - animation-duration: 3s; - -webkit-animation-name: grow; - -webkit-animation-duration: 3s; + animation-name: grow; + animation-duration: 3s; + -webkit-animation-name: grow; + -webkit-animation-duration: 3s; } .demo:hover .growsandstays { - animation-name: grow; - animation-duration: 3s; - animation-fill-mode: forwards; - -webkit-animation-name: grow; - -webkit-animation-duration: 3s; - -webkit-animation-fill-mode: forwards; + animation-name: grow; + animation-duration: 3s; + animation-fill-mode: forwards; + -webkit-animation-name: grow; + -webkit-animation-duration: 3s; + -webkit-animation-fill-mode: forwards; } ``` diff --git a/files/ru/web/css/animation-iteration-count/index.md b/files/ru/web/css/animation-iteration-count/index.md index a72aa3116c9089..f91eef0db46037 100644 --- a/files/ru/web/css/animation-iteration-count/index.md +++ b/files/ru/web/css/animation-iteration-count/index.md @@ -9,6 +9,7 @@ tags: - Reference translation_of: Web/CSS/animation-iteration-count --- + {{ CSSRef() }}{{ SeeCompatTable() }} ## Обзор diff --git a/files/ru/web/css/animation-name/index.md b/files/ru/web/css/animation-name/index.md index 1a1c0cef6e440b..d5b9eb49318a76 100644 --- a/files/ru/web/css/animation-name/index.md +++ b/files/ru/web/css/animation-name/index.md @@ -3,6 +3,7 @@ title: animation-name slug: Web/CSS/animation-name translation_of: Web/CSS/animation-name --- + {{CSSRef}} {{SeeCompatTable}} ## Описание diff --git a/files/ru/web/css/animation-timing-function/index.md b/files/ru/web/css/animation-timing-function/index.md index 9c17cb7c314654..3695237df630d1 100644 --- a/files/ru/web/css/animation-timing-function/index.md +++ b/files/ru/web/css/animation-timing-function/index.md @@ -25,7 +25,7 @@ animation-timing-function: step-start; animation-timing-function: step-end; /* Function values */ -animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); +animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1); animation-timing-function: steps(4, end); /* Steps Function keywords */ @@ -37,7 +37,7 @@ animation-timing-function: steps(6, start); animation-timing-function: steps(8, end); /* Multiple animations */ -animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); +animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1); /* Global values */ animation-timing-function: inherit; diff --git a/files/ru/web/css/animation/index.md b/files/ru/web/css/animation/index.md index 47fc28705a74a7..0dc9c8b95057ad 100644 --- a/files/ru/web/css/animation/index.md +++ b/files/ru/web/css/animation/index.md @@ -19,13 +19,13 @@ translation_of: Web/CSS/animation ```css /* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ - animation: 3s ease-in 1s 2 reverse both paused slidein; +animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes duration | timing-function | delay | name */ - animation: 3s linear 1s slidein; +animation: 3s linear 1s slidein; /* @keyframes duration | name */ - animation: 3s slidein; +animation: 3s slidein; ``` Порядок важен в каждом определении анимации: первое значение, которое может быть проанализировано как {{cssxref("<time>")}} присваивается {{cssxref("animation-duration")}}, и второй назначен {{cssxref("animation-delay")}}. @@ -46,9 +46,7 @@ Note that order is also important within each animation definition for distingui ```html
          -
          - Listening for dispatches -
          +
          Listening for dispatches
          ``` @@ -69,24 +67,72 @@ Note that order is also important within each animation definition for distingui .cylon_eye { background-color: red; - background-image: -webkit-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); - background-image: -moz-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); - background-image: -o-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); - background-image: linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); + background-image: -webkit-linear-gradient( + left, + rgba(0, 0, 0, 0.9) 25%, + rgba(0, 0, 0, 0.1) 50%, + rgba(0, 0, 0, 0.9) 75% + ); + background-image: -moz-linear-gradient( + left, + rgba(0, 0, 0, 0.9) 25%, + rgba(0, 0, 0, 0.1) 50%, + rgba(0, 0, 0, 0.9) 75% + ); + background-image: -o-linear-gradient( + left, + rgba(0, 0, 0, 0.9) 25%, + rgba(0, 0, 0, 0.1) 50%, + rgba(0, 0, 0, 0.9) 75% + ); + background-image: linear-gradient( + to right, + rgba(0, 0, 0, 0.9) 25%, + rgba(0, 0, 0, 0.1) 50%, + rgba(0, 0, 0, 0.9) 75% + ); color: white; height: 100%; width: 20%; -webkit-animation: 4s linear 0s infinite alternate move_eye; - -moz-animation: 4s linear 0s infinite alternate move_eye; - -o-animation: 4s linear 0s infinite alternate move_eye; - animation: 4s linear 0s infinite alternate move_eye; + -moz-animation: 4s linear 0s infinite alternate move_eye; + -o-animation: 4s linear 0s infinite alternate move_eye; + animation: 4s linear 0s infinite alternate move_eye; } -@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } - @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } - @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } - @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } +@-webkit-keyframes move_eye { + from { + margin-left: -20%; + } + to { + margin-left: 100%; + } +} +@-moz-keyframes move_eye { + from { + margin-left: -20%; + } + to { + margin-left: 100%; + } +} +@-o-keyframes move_eye { + from { + margin-left: -20%; + } + to { + margin-left: 100%; + } +} +@keyframes move_eye { + from { + margin-left: -20%; + } + to { + margin-left: 100%; + } +} ``` {{EmbedLiveSample('Cylon_Eye')}} diff --git a/files/ru/web/css/at-rule/index.md b/files/ru/web/css/at-rule/index.md index a4c96845dea7c5..7d04bc7c1da947 100644 --- a/files/ru/web/css/at-rule/index.md +++ b/files/ru/web/css/at-rule/index.md @@ -3,13 +3,14 @@ title: At-rules slug: Web/CSS/At-rule translation_of: Web/CSS/At-rule --- + {{cssref}} **At-rules** это [CSS операторы](/ru/docs/Web/CSS/Синтаксис#CSS_statements), которые показывают CSS как себя вести. Они начинаются со знака at, '`@`' (`U+0040 КОММЕРЧЕСКОЕ AT`), сопровождается идентификатором, и включает в себя всё до следующей точки с запятой, '`;`' (`U+003B ТОЧКА С ЗАПЯТОЙ`), или до следующего [CSS блока](/ru/docs/Web/CSS/Синтаксис#Блоки_объявлений_CSS), в зависимости от того, что наступит раньше. ```css /* Общая структура */ -@ИДЕНТИФИКАТОР (ПРАВИЛО); +@идентификатор (ПРАВИЛО); /* Пример: говорит браузеру использовать UTF-8 кодировку символов */ @charset "utf-8"; @@ -44,10 +45,10 @@ translation_of: Web/CSS/At-rule ## Характеристики -| Specification | Status | Comment | -| ------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------- | -| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | Начальное определение | -| {{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}} | {{Spec2('Compat')}} | Стандартизирует `@-webkit-keyframes`. | +| Specification | Status | Comment | +| ------------------------------------------------------- | ----------------------------- | ------------------------------------- | +| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | Начальное определение | +| {{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}} | {{Spec2('Compat')}} | Стандартизирует `@-webkit-keyframes`. | ## Читайте также diff --git a/files/ru/web/css/attr/index.md b/files/ru/web/css/attr/index.md index dd35a4d0353300..b3948eecc7c0fc 100644 --- a/files/ru/web/css/attr/index.md +++ b/files/ru/web/css/attr/index.md @@ -37,22 +37,22 @@ attr(data-something, 'default'); - `attribute-name` - : Название атрибута элемента HTML, на который ссылаемся в CSS. - `` {{Experimental_Inline}} - - | : Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование `` в качестве значения для данного атрибута недопустимо, выражение `attr()` также будет недопустимым. Если этот параметр опущен, по умолчанию используется `string` . Список допустимых значений: | Ключевое слово | Тип | Комментарий | Значение по умолчанию | - | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- | --------------------- | - | `string` | {{cssxref("<string>")}} | The attribute value is treated as a CSS {{cssxref("<string>")}}. It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters. | An empty string | - | `color` {{experimental_inline}} | {{cssxref("<color>")}} | The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value. Leading and trailing spaces are stripped. | `currentColor` | - | `url` {{experimental_inline}} | {{cssxref("<url>")}} | The attribute value is parsed as a string that is used inside a CSS `url()` function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped. | The url `about:invalid` that points to a non-existent document with a generic error condition. | - | `integer` {{experimental_inline}} | {{cssxref("<integer>")}} | The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. | - | `number` {{experimental_inline}} | {{cssxref("<number>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. | - | `length` {{experimental_inline}} | {{cssxref("<length>")}} | The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. `12.5em`). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. | - | `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc` {{experimental_inline}} | {{cssxref("<length>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. | - | `angle` {{experimental_inline}} | {{cssxref("<angle>")}} | The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. `30.5deg`). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. | - | `deg`, `grad`, `rad` {{experimental_inline}} | {{cssxref("<angle>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. | - | `time` {{experimental_inline}} | {{cssxref("<time>")}} | The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. `30.5ms`). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. | - | `s`, `ms` {{experimental_inline}} | {{cssxref("<time>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. | - | `frequency` {{experimental_inline}} | {{cssxref("<frequency>")}} | The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. `30.5kHz`). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used. | `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. | - | `Hz`, `kHz` {{experimental_inline}} | {{cssxref("<frequency>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. | - | `%` {{experimental_inline}} | {{cssxref("<percentage>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given value is used as a length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped. | `0%`, or, if `0%` is not a valid value for the property, the property's minimum value. | + - | : Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование `` в качестве значения для данного атрибута недопустимо, выражение `attr()` также будет недопустимым. Если этот параметр опущен, по умолчанию используется `string` . Список допустимых значений: | Ключевое слово | Тип | Комментарий | Значение по умолчанию | + | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | --------------------- | + | `string` | {{cssxref("<string>")}} | The attribute value is treated as a CSS {{cssxref("<string>")}}. It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters. | An empty string | + | `color` {{experimental_inline}} | {{cssxref("<color>")}} | The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value. Leading and trailing spaces are stripped. | `currentColor` | + | `url` {{experimental_inline}} | {{cssxref("<url>")}} | The attribute value is parsed as a string that is used inside a CSS `url()` function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped. | The url `about:invalid` that points to a non-existent document with a generic error condition. | + | `integer` {{experimental_inline}} | {{cssxref("<integer>")}} | The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. | + | `number` {{experimental_inline}} | {{cssxref("<number>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. | + | `length` {{experimental_inline}} | {{cssxref("<length>")}} | The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. `12.5em`). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. | + | `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc` {{experimental_inline}} | {{cssxref("<length>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. | + | `angle` {{experimental_inline}} | {{cssxref("<angle>")}} | The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. `30.5deg`). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. | + | `deg`, `grad`, `rad` {{experimental_inline}} | {{cssxref("<angle>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. | + | `time` {{experimental_inline}} | {{cssxref("<time>")}} | The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. `30.5ms`). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. | + | `s`, `ms` {{experimental_inline}} | {{cssxref("<time>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. | + | `frequency` {{experimental_inline}} | {{cssxref("<frequency>")}} | The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. `30.5kHz`). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used. | `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. | + | `Hz`, `kHz` {{experimental_inline}} | {{cssxref("<frequency>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. | + | `%` {{experimental_inline}} | {{cssxref("<percentage>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given value is used as a length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped. | `0%`, or, if `0%` is not a valid value for the property, the property's minimum value. | - `` {{experimental_inline}} - : The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where `attr()` is used, even if it is not used, and must not contain another `attr()` expression. If `attr()` is not the sole component value of a property, its `` value must be of the type defined by ``. If not set, CSS will use the default value defined for each ``. diff --git a/files/ru/web/css/attribute_selectors/index.md b/files/ru/web/css/attribute_selectors/index.md index 38740a410fd57c..12d7d4e3f26ea3 100644 --- a/files/ru/web/css/attribute_selectors/index.md +++ b/files/ru/web/css/attribute_selectors/index.md @@ -3,6 +3,7 @@ title: Селекторы атрибутов slug: Web/CSS/Attribute_selectors translation_of: Web/CSS/Attribute_selectors --- + {{CSSRef("Selectors")}} ## Обзор @@ -28,43 +29,57 @@ translation_of: Web/CSS/Attribute_selectors ```css /* Все span с атрибутом "lang" будут жирными */ -span[lang] {font-weight:bold;} +span[lang] { + font-weight: bold; +} /* Все span в Португалии будут зелёными */ -span[lang="pt"] {color:green;} +span[lang="pt"] { + color: green; +} /* Все span с американским английским будут синими */ -span[lang~="en-us"] {color: blue;} +span[lang~="en-us"] { + color: blue; +} /* Любые span на китайском языке будут красными, как на упрощённом китайском (zh-CN) так и на традиционном (zh-TW) */ -span[lang|="zh"] {color: red;} +span[lang|="zh"] { + color: red; +} /* Все внутренние ссылки будут иметь золотой фон */ -a[href^="#"] {background-color:gold} +a[href^="#"] { + background-color: gold; +} /* Все ссылки с url заканчивающимся на .cn будут красными */ -a[href$=".cn"] {color: red;} +a[href$=".cn"] { + color: red; +} /* Все ссылки содержащие "example" в url будут иметь серый фон */ -a[href*="example"] {background-color: #CCCCCC;} +a[href*="example"] { + background-color: #cccccc; +} ``` ```html
          - English: - Hello World! + English: + Hello World!
          - Portuguese: - Olá Mundo! + Portuguese: + Olá Mundo!
          - Chinese (Simplified): - 世界您好！ + Chinese (Simplified): + 世界您好！
          - Chinese (Traditional): - 世界您好！ + Chinese (Traditional): + 世界您好！
          ``` diff --git a/files/ru/web/css/backdrop-filter/index.md b/files/ru/web/css/backdrop-filter/index.md index 4ca564e6a680a9..86cae75614699f 100644 --- a/files/ru/web/css/backdrop-filter/index.md +++ b/files/ru/web/css/backdrop-filter/index.md @@ -3,6 +3,7 @@ title: backdrop-filter slug: Web/CSS/backdrop-filter translation_of: Web/CSS/backdrop-filter --- + {{CSSRef}}{{SeeCompatTable}} [CSS](/ru/docs/Web/CSS) свойство **`backdrop-filter`** позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему _за_ элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными. @@ -61,7 +62,7 @@ backdrop-filter: unset; font-family: sans-serif; text-align: center; line-height: 1; - -webkit-backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; @@ -75,7 +76,7 @@ body { } body { - background-image: url('./anemones.jpg'); + background-image: url("./anemones.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; diff --git a/files/ru/web/css/backface-visibility/index.md b/files/ru/web/css/backface-visibility/index.md index 682434fb4abee0..269ca335b1f2cd 100644 --- a/files/ru/web/css/backface-visibility/index.md +++ b/files/ru/web/css/backface-visibility/index.md @@ -63,9 +63,8 @@ backface-visibility: unset;

          - Since all faces are partially transparent, - the back faces (2, 4, 5) are visible - through the front faces (1, 3, 6). + Since all faces are partially transparent, the back faces (2, 4, 5) are + visible through the front faces (1, 3, 6).

          @@ -79,10 +78,7 @@ backface-visibility: unset;
          6
    -

    - The three back faces (2, 4, 5) are - hidden. -

    +

    The three back faces (2, 4, 5) are hidden.

    @@ -163,8 +159,10 @@ backface-visibility: unset; } /* Сделает стол немного лучше */ -th, p, td { - background-color: #EEEEEE; +th, +p, +td { + background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-serif; @@ -178,8 +176,8 @@ th, p, td { ## Спецификации -| Спецификация | Статус | Комментарий | -| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------- | +| Спецификация | Статус | Комментарий | +| --------------------------------------------------------------------------------------- | ----------------------------- | --------------------------- | | {{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}} | {{Spec2('CSS Transforms 2')}} | Первоначальное определение. | {{cssinfo}} diff --git a/files/ru/web/css/background-attachment/index.md b/files/ru/web/css/background-attachment/index.md index 35f1ba5678d9aa..05a4efbd242996 100644 --- a/files/ru/web/css/background-attachment/index.md +++ b/files/ru/web/css/background-attachment/index.md @@ -8,6 +8,7 @@ tags: - Reference translation_of: Web/CSS/background-attachment --- + {{CSSRef}} ## Краткое описание @@ -53,10 +54,9 @@ background-attachment: unset; ```html

    - There were doors all round the hall, but they were all locked; and when - Alice had been all the way down one side and up the other, trying every - door, she walked sadly down the middle, wondering how she was ever to - get out again. + There were doors all round the hall, but they were all locked; and when Alice + had been all the way down one side and up the other, trying every door, she + walked sadly down the middle, wondering how she was ever to get out again.

    ``` @@ -81,19 +81,17 @@ p { ```html

    - There were doors all round the hall, but they were all locked; and when - Alice had been all the way down one side and up the other, trying every - door, she walked sadly down the middle, wondering how she was ever to - get out again. - - Suddenly she came upon a little three-legged table, all made of solid - glass; there was nothing on it except a tiny golden key, and Alice's - first thought was that it might belong to one of the doors of the hall; - but, alas! either the locks were too large, or the key was too small, - but at any rate it would not open any of them. However, on the second - time round, she came upon a low curtain she had not noticed before, and - behind it was a little door about fifteen inches high: she tried the - little golden key in the lock, and to her great delight it fitted! + There were doors all round the hall, but they were all locked; and when Alice + had been all the way down one side and up the other, trying every door, she + walked sadly down the middle, wondering how she was ever to get out again. + Suddenly she came upon a little three-legged table, all made of solid glass; + there was nothing on it except a tiny golden key, and Alice's first thought + was that it might belong to one of the doors of the hall; but, alas! either + the locks were too large, or the key was too small, but at any rate it would + not open any of them. However, on the second time round, she came upon a low + curtain she had not noticed before, and behind it was a little door about + fifteen inches high: she tried the little golden key in the lock, and to her + great delight it fitted!

    ``` diff --git a/files/ru/web/css/background-blend-mode/index.md b/files/ru/web/css/background-blend-mode/index.md index 4a37c19e475598..81722da47c67e1 100644 --- a/files/ru/web/css/background-blend-mode/index.md +++ b/files/ru/web/css/background-blend-mode/index.md @@ -9,6 +9,7 @@ tags: translation_of: Web/CSS/background-blend-mode browser-compat: css.properties.background-blend-mode --- + {{CSSRef()}} [CSS-свойство](/ru/docs/Web/CSS) **`background-blend-mode`** описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов. @@ -52,10 +53,10 @@ background-blend-mode: unset; ```css .item { - width: 300px; - height: 300px; - background: url('image1.png'),url('image2.png'); - background-blend-mode: screen; + width: 300px; + height: 300px; + background: url("image1.png"), url("image2.png"); + background-blend-mode: screen; } ``` @@ -64,39 +65,40 @@ background-blend-mode: unset; ```html hidden
    ``` ```css hidden #div { - width: 300px; - height: 300px; - background: url('br.png'),url('tr.png'); - background-blend-mode: screen; + width: 300px; + height: 300px; + background: url("br.png"), url("tr.png"); + background-blend-mode: screen; } ``` ```js hidden -document.getElementById("select").onchange = function(event) { - document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; -} -console.log(document.getElementById('div')); +document.getElementById("select").onchange = function (event) { + document.getElementById("div").style.backgroundBlendMode = + document.getElementById("select").selectedOptions[0].innerHTML; +}; +console.log(document.getElementById("div")); ``` {{ EmbedLiveSample('Примеры', "330", "350") }} diff --git a/files/ru/web/css/background-clip/index.md b/files/ru/web/css/background-clip/index.md index 4a0128c817e0b0..47cfd71317f487 100644 --- a/files/ru/web/css/background-clip/index.md +++ b/files/ru/web/css/background-clip/index.md @@ -48,8 +48,12 @@ background-clip: unset; ```html

    The background extends behind the border.

    -

    The background extends to the inside edge of the border.

    -

    The background extends only to the edge of the content box.

    +

    + The background extends to the inside edge of the border. +

    +

    + The background extends only to the edge of the content box. +

    The background is clipped to the foreground text.

    ``` @@ -57,7 +61,7 @@ background-clip: unset; ```css p { - border: .8em darkviolet; + border: 0.8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; @@ -66,13 +70,19 @@ p { text-decoration: underline; } -.border-box { background-clip: border-box; } -.padding-box { background-clip: padding-box; } -.content-box { background-clip: content-box; } +.border-box { + background-clip: border-box; +} +.padding-box { + background-clip: padding-box; +} +.content-box { + background-clip: content-box; +} .text { background-clip: text; - color: rgba(0,0,0,.2); + color: rgba(0, 0, 0, 0.2); } ``` @@ -82,8 +92,8 @@ p { ## Спецификации -| Спецификация | Статус | Комментарий | -| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------- | +| Спецификация | Статус | Комментарий | +| --------------------------------------------------------------------------- | ----------------------------- | --------------------------- | | {{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}} | {{Spec2('CSS3 Backgrounds')}} | Первоначальное определение. | | {{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}} | {{Spec2('CSS4 Backgrounds')}} | Добавляет значение `text`. | diff --git a/files/ru/web/css/background-color/index.md b/files/ru/web/css/background-color/index.md index 7841b57a8d5306..7e1134fde4c1f0 100644 --- a/files/ru/web/css/background-color/index.md +++ b/files/ru/web/css/background-color/index.md @@ -10,6 +10,7 @@ tags: - Раскладка translation_of: Web/CSS/background-color --- + {{CSSRef}} [CSS](/ru/docs/Web/CSS)-свойство **`background-color`** [CSS](/ru/docs/Web/CSS) устанавливает цвет фона элемента. @@ -33,9 +34,9 @@ background-color: #11ffeeff; /* ff - непрозрачный */ background-color: rgb(255, 255, 128); /* RGBA-значение или RGB с alpha-каналом */ -background-color: rgba(117, 190, 218, 0.0); /* 0.0 - полностью прозрачный */ +background-color: rgba(117, 190, 218, 0); /* 0.0 - полностью прозрачный */ background-color: rgba(117, 190, 218, 0.5); /* 0.5 - полупрозрачный */ -background-color: rgba(117, 190, 218, 1.0); /* 1.0 - непрозрачный */ +background-color: rgba(117, 190, 218, 1); /* 1.0 - непрозрачный */ /* HSLA-значение */ background-color: hsla(50, 33%, 25%, 0.75); @@ -66,17 +67,11 @@ background-color: unset; ### HTML ```html -
    - Lorem ipsum dolor sit amet, consectetuer -
    +
    Lorem ipsum dolor sit amet, consectetuer
    -
    - Lorem ipsum dolor sit amet, consectetuer -
    +
    Lorem ipsum dolor sit amet, consectetuer
    -
    - Lorem ipsum dolor sit amet, consectetuer -
    +
    Lorem ipsum dolor sit amet, consectetuer
    ``` ### CSS @@ -94,7 +89,7 @@ background-color: unset; .examplethree { background-color: #777799; - color: #FFFFFF; + color: #ffffff; } ``` diff --git a/files/ru/web/css/background-image/index.md b/files/ru/web/css/background-image/index.md index 30928e96040ee0..270bec0d5a5e98 100644 --- a/files/ru/web/css/background-image/index.md +++ b/files/ru/web/css/background-image/index.md @@ -53,24 +53,21 @@ background-image: inherit; ```html
    -

    - This paragraph is full of cats
    and stars. -

    -

    This paragraph is not.

    -

    - Here are more cats for you.
    Look at them! -

    -

    And no more.

    +

    This paragraph is full of cats
    and stars.

    +

    This paragraph is not.

    +

    Here are more cats for you.
    Look at them!

    +

    And no more.

    ``` #### CSS содержимое ```css -pre, p { - font-size: 1.5em; - color: #FE7F88; - background-color: transparent; +pre, +p { + font-size: 1.5em; + color: #fe7f88; + background-color: transparent; } div { @@ -82,8 +79,7 @@ p { } .catsandstars { - background-image: url("startransparent.gif"), - url("catfront.png"); + background-image: url("startransparent.gif"), url("catfront.png"); background-color: transparent; } ``` From 1ce8b13cf83dcbcfac6edb7a7d6d55921eee65aa Mon Sep 17 00:00:00 2001 From: Sasha Sushko Date: Mon, 7 Aug 2023 18:19:35 +0500 Subject: [PATCH 2/2] Apply suggestions from code review --- files/ru/web/css/_colon_active/index.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/files/ru/web/css/_colon_active/index.md b/files/ru/web/css/_colon_active/index.md index ddb6ad6af4022a..412df5d74ef372 100644 --- a/files/ru/web/css/_colon_active/index.md +++ b/files/ru/web/css/_colon_active/index.md @@ -41,22 +41,27 @@ a:active { #### CSS ```css +/* Непосещённые ссылки */ a:link { color: blue; -} /* Непосещённые ссылки */ +} +/* Посещённые ссылки */ a:visited { color: purple; -} /* Посещённые ссылки */ +} +/* Ссылки при наведении */ a:hover { background: yellow; -} /* Ссылки при наведении */ +} +/* Активные ссылки */ a:active { color: red; -} /* Активные ссылки */ +} +/* Активные абзацы */ p:active { background: #eee; -} /* Активные абзацы */ +} ``` #### Результат