diff --git a/files/ru/web/css/--_star_/index.md b/files/ru/web/css/--_star_/index.md index 94f3376615d24f..ba30dba67662ac 100644 --- a/files/ru/web/css/--_star_/index.md +++ b/files/ru/web/css/--_star_/index.md @@ -33,12 +33,8 @@ slug: Web/CSS/--* ### 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 ce1f2334367339..c614a6a64505b1 100644 --- a/files/ru/web/css/@counter-style/additive-symbols/index.md +++ b/files/ru/web/css/@counter-style/additive-symbols/index.md @@ -15,8 +15,12 @@ slug: 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); ``` ### Формальный синтаксис @@ -29,11 +33,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 5734b1b2817b95..cc35bacafe52ed 100644 --- a/files/ru/web/css/@counter-style/index.md +++ b/files/ru/web/css/@counter-style/index.md @@ -94,7 +94,7 @@ The above counter style rule can be applied to lists like this: ```css .items { - list-style: circled-alpha; + list-style: circled-alpha; } ``` @@ -119,8 +119,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 2f82eabff51481..17612751454958 100644 --- a/files/ru/web/css/@document/index.md +++ b/files/ru/web/css/@document/index.md @@ -2,12 +2,14 @@ title: "@document" slug: 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 518036c8371a7d..f60b4e383d5719 100644 --- a/files/ru/web/css/@font-face/font-display/index.md +++ b/files/ru/web/css/@font-face/font-display/index.md @@ -2,6 +2,7 @@ title: font-display slug: Web/CSS/@font-face/font-display --- + {{CSSRef}} ## Описание @@ -54,8 +55,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 d7c1dcf3b1b6ae..dae56517e01974 100644 --- a/files/ru/web/css/@font-face/font-family/index.md +++ b/files/ru/web/css/@font-face/font-family/index.md @@ -2,6 +2,7 @@ title: font-family slug: Web/CSS/@font-face/font-family --- + {{CSSRef}} CSS дескриптор **`font-family`** позволяет авторам указывать font family для шрифта, указанного в правиле {{cssxref("@font-face")}}. @@ -13,7 +14,7 @@ CSS дескриптор **`font-family`** позволяет авторам у ```css /* значения */ font-family: "font family"; -font-family: 'another font family'; +font-family: "another font family"; /* значение */ font-family: examplefont; @@ -33,7 +34,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 a1f30e365fa2fc..b7033f541d6d01 100644 --- a/files/ru/web/css/@font-face/index.md +++ b/files/ru/web/css/@font-face/index.md @@ -7,9 +7,10 @@ slug: 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"); } ``` @@ -61,20 +62,22 @@ slug: Web/CSS/@font-face ```html - - Web Font Sample - - - - This is Bitstream Vera Serif Bold. - + + Web Font Sample + + + + This is Bitstream Vera Serif Bold. + ``` @@ -83,9 +86,8 @@ slug: 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; } ``` @@ -109,7 +111,7 @@ slug: 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 d040bbc9006c66..5e5b19e1ec6b61 100644 --- a/files/ru/web/css/@font-feature-values/index.md +++ b/files/ru/web/css/@font-feature-values/index.md @@ -2,6 +2,7 @@ title: "@font-feature-values" slug: 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 64d14ca9b159a2..a1e9a6a9132c7b 100644 --- a/files/ru/web/css/@media/index.md +++ b/files/ru/web/css/@media/index.md @@ -2,6 +2,7 @@ title: "@media" slug: Web/CSS/@media --- + {{CSSRef}} ## Описание @@ -57,55 +58,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 de4173b8f34c5d..1f296c870fa35f 100644 --- a/files/ru/web/css/@media/inverted-colors/index.md +++ b/files/ru/web/css/@media/inverted-colors/index.md @@ -21,8 +21,15 @@ slug: 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 e876e094fff27c..06c637a765caf7 100644 --- a/files/ru/web/css/@media/orientation/index.md +++ b/files/ru/web/css/@media/orientation/index.md @@ -60,8 +60,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 fef5617569b62a..30c76ae866b32f 100644 --- a/files/ru/web/css/@media/prefers-color-scheme/index.md +++ b/files/ru/web/css/@media/prefers-color-scheme/index.md @@ -23,7 +23,8 @@ slug: 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)
@@ -33,20 +34,39 @@ slug: 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 79b4041fcb8e2a..fd0a3f6e552d22 100644 --- a/files/ru/web/css/@media/prefers-reduced-motion/index.md +++ b/files/ru/web/css/@media/prefers-reduced-motion/index.md @@ -42,7 +42,10 @@ slug: 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; @@ -62,53 +65,53 @@ slug: 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 6625dd94626017..03ba2bd0729ca2 100644 --- a/files/ru/web/css/@media/scripting/index.md +++ b/files/ru/web/css/@media/scripting/index.md @@ -24,7 +24,9 @@ slug: 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! :-)

``` @@ -37,7 +39,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 367ce05933e953..96c9ee884c285a 100644 --- a/files/ru/web/css/@namespace/index.md +++ b/files/ru/web/css/@namespace/index.md @@ -14,13 +14,16 @@ slug: 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 079788323be230..2261026150ba43 100644 --- a/files/ru/web/css/@page/index.md +++ b/files/ru/web/css/@page/index.md @@ -2,6 +2,7 @@ title: "@page" slug: 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 de8b1145508fd1..1d0d3b530009ce 100644 --- a/files/ru/web/css/@supports/index.md +++ b/files/ru/web/css/@supports/index.md @@ -128,8 +128,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 f10bd3a55d8229..1002be2675496d 100644 --- a/files/ru/web/css/_colon_-moz-only-whitespace/index.md +++ b/files/ru/web/css/_colon_-moz-only-whitespace/index.md @@ -2,6 +2,7 @@ title: ":blank" slug: Web/CSS/:-moz-only-whitespace --- + {{CSSRef}}{{SeeCompatTable}} [CSS псевдо класс](/ru/docs/Web/CSS) **`:blank`** находит элементы, у которых либо вообще нет дочерних узлов, либо только пустые текстовые узлы, либо только текстовые узлы, содержащие только пробельные символы. @@ -15,7 +16,7 @@ slug: 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 2159d1c039c328..412df5d74ef372 100644 --- a/files/ru/web/css/_colon_active/index.md +++ b/files/ru/web/css/_colon_active/index.md @@ -31,20 +31,37 @@ 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; +} ``` #### Результат @@ -58,7 +75,9 @@ p:active { background: #eee; } /* Активные абзацы */ ```html
- +
``` @@ -80,13 +99,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 fe00079e5b3ccc..ae5b63e0e08b05 100644 --- a/files/ru/web/css/_colon_any-link/index.md +++ b/files/ru/web/css/_colon_any-link/index.md @@ -23,8 +23,8 @@ slug: 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 a3b51e35a7eef2..18219777c926b0 100644 --- a/files/ru/web/css/_colon_checked/index.md +++ b/files/ru/web/css/_colon_checked/index.md @@ -2,6 +2,7 @@ title: ":checked" slug: Web/CSS/:checked --- + {{CSSRef}} CSS [псевдоклассы](/ru/docs/Web/CSS/Псевдо-классы) **`:checked`** CSS находит любые элементы **radio** (``), **checkbox** (``) или **option** ({{ HTMLElement("option") }} внутри {{ HTMLElement("select") }}), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае `:checked` повторно не применится к элементу, а сохранится. @@ -65,67 +66,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 ad74f1195db1c1..1fd08effcdece0 100644 --- a/files/ru/web/css/_colon_default/index.md +++ b/files/ru/web/css/_colon_default/index.md @@ -29,16 +29,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 72117859735a01..328108a53ff0ca 100644 --- a/files/ru/web/css/_colon_defined/index.md +++ b/files/ru/web/css/_colon_defined/index.md @@ -28,18 +28,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 76ee7239990cbe..f0754dc93466a2 100644 --- a/files/ru/web/css/_colon_dir/index.md +++ b/files/ru/web/css/_colon_dir/index.md @@ -42,7 +42,8 @@ slug: 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 63deb3c2b4f41a..f47963f262bc48 100644 --- a/files/ru/web/css/_colon_disabled/index.md +++ b/files/ru/web/css/_colon_disabled/index.md @@ -23,7 +23,9 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:disab Следующий CSS: ```css -input[type="text"]:disabled { background: #ccc; } +input[type="text"]:disabled { + background: #ccc; +} ``` Применим к этому HTML5 фрагменту: @@ -32,18 +34,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 d0fb5da5aef73e..d2273fcaff919f 100644 --- a/files/ru/web/css/_colon_empty/index.md +++ b/files/ru/web/css/_colon_empty/index.md @@ -2,6 +2,7 @@ title: ":empty" slug: Web/CSS/:empty --- + {{ CSSRef() }} ## Описание @@ -32,7 +33,7 @@ slug: Web/CSS/:empty
Я буду красным
- +
``` diff --git a/files/ru/web/css/_colon_enabled/index.md b/files/ru/web/css/_colon_enabled/index.md index 2659639eee61a1..ae1f48fc47485b 100644 --- a/files/ru/web/css/_colon_enabled/index.md +++ b/files/ru/web/css/_colon_enabled/index.md @@ -2,6 +2,7 @@ title: ":enabled" slug: Web/CSS/:enabled --- + {{CSSRef}} ## Описание @@ -15,24 +16,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 a57fe3375dc1a5..f87729362ba449 100644 --- a/files/ru/web/css/_colon_first-child/index.md +++ b/files/ru/web/css/_colon_first-child/index.md @@ -2,6 +2,7 @@ title: ":first-child" slug: Web/CSS/:first-child --- + {{CSSRef}} {{cssxRef('', 'CSS')}} {{cssxRef('Pseudo-classes', 'псевдокласс')}} **`:first-child`** находит любой элемент, являющийся первым в своём родителе. @@ -61,7 +62,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 2971a186d8a276..9381cc3f55fa15 100644 --- a/files/ru/web/css/_colon_first-of-type/index.md +++ b/files/ru/web/css/_colon_first-of-type/index.md @@ -12,7 +12,9 @@ slug: 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 4d1418a6fc6e3e..0c0104553bb6f6 100644 --- a/files/ru/web/css/_colon_first/index.md +++ b/files/ru/web/css/_colon_first/index.md @@ -47,7 +47,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 e4ab8e7a97905c..907a56483c85ed 100644 --- a/files/ru/web/css/_colon_focus-visible/index.md +++ b/files/ru/web/css/_colon_focus-visible/index.md @@ -2,6 +2,7 @@ title: ":focus-visible" slug: Web/CSS/:focus-visible --- + Псевдокласс **`:focus-visible`** применяется, в то время как элемент соответствует псевдоклассу :focus, и UA ({{glossary("User Agent")}}) определяет с помощью эвристики, что фокус должен быть сделан очевидным для элемента. Этот селектор полезен для предоставления другого индикатора фокуса, основанного на модальности ввода пользователя (мышь против клавиатуры). @@ -19,16 +20,17 @@ slug: Web/CSS/:focus-visible В этом примере селектор `:focus-visible` использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью `:focus`. ```html -
      -
      -
      -
      -
      +
      +
      +
      +
      +
      ``` ```css -input, button { +input, +button { margin: 10px; } @@ -99,8 +101,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 e2a0f116c393ce..b818d964d6e197 100644 --- a/files/ru/web/css/_colon_focus-within/index.md +++ b/files/ru/web/css/_colon_focus-within/index.md @@ -2,6 +2,7 @@ title: ":focus-within" slug: 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).) @@ -30,10 +31,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 287d68d78e68ca..5e83cc4069aba6 100644 --- a/files/ru/web/css/_colon_focus/index.md +++ b/files/ru/web/css/_colon_focus/index.md @@ -25,8 +25,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 96f7f63faf4d5b..712b11018bf13c 100644 --- a/files/ru/web/css/_colon_fullscreen/index.md +++ b/files/ru/web/css/_colon_fullscreen/index.md @@ -26,9 +26,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 9fe54cd65d3a4d..55de47f7142edc 100644 --- a/files/ru/web/css/_colon_has/index.md +++ b/files/ru/web/css/_colon_has/index.md @@ -15,6 +15,8 @@ slug: Web/CSS/:has h1:has(+ p) { margin-bottom: 0; } +``` + Псевдокласс `:has()` берет соответствующий список селекторов в качестве аргумента. В ранней версии спецификации CSS Selectors Level 4, `:has` имел ограничение, которое не позволяло использовать его в таблицах стилей; только с использованием функций, как например: {{domxref("document.querySelector()")}} (из-за проблем с производительностью). На текущий момент, это ограничение снято, так как ни один из браузеров не реализовал это соответствующим образом. ```css @@ -32,13 +34,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 b4ee127c9f9cc6..a1cdaede85f04b 100644 --- a/files/ru/web/css/_colon_host_function/index.md +++ b/files/ru/web/css/_colon_host_function/index.md @@ -32,26 +32,29 @@ slug: Web/CSS/:host_function В этом примере у нас есть простой пользовательский элемент — `` — который мы оборачиваем вокруг текста: ```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 e8af6521be575b..f0d8b101992313 100644 --- a/files/ru/web/css/_colon_hover/index.md +++ b/files/ru/web/css/_colon_hover/index.md @@ -2,6 +2,7 @@ title: ":hover" slug: Web/CSS/:hover --- + {{ CSSRef() }} ## Описание @@ -17,9 +18,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 57a6e6480e6731..9d64a29258b691 100644 --- a/files/ru/web/css/_colon_in-range/index.md +++ b/files/ru/web/css/_colon_in-range/index.md @@ -29,24 +29,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 e1f896c469891e..c000333501c06d 100644 --- a/files/ru/web/css/_colon_indeterminate/index.md +++ b/files/ru/web/css/_colon_indeterminate/index.md @@ -34,11 +34,11 @@ input:indeterminate { ```html
      - +
      - +
      ``` @@ -68,7 +68,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 a031058675ed03..3fac8d8c45f211 100644 --- a/files/ru/web/css/_colon_invalid/index.md +++ b/files/ru/web/css/_colon_invalid/index.md @@ -2,6 +2,7 @@ title: ":invalid" slug: Web/CSS/:invalid --- + {{ CSSRef() }} ## Описание @@ -22,7 +23,7 @@ CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:inval } :-moz-ui-invalid { - box-shadow:none; + box-shadow: none; } ``` @@ -45,7 +46,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 2b9e979a5d31a4..36f90850c74157 100644 --- a/files/ru/web/css/_colon_is/index.md +++ b/files/ru/web/css/_colon_is/index.md @@ -58,8 +58,14 @@ footer p:hover {
        -

      • Это первый

        пункт списка

        • -

      • Это второй

        пункт списка

        • +
      • +

        Это первый

        +

        пункт списка

        +
        • +
      • +

        Это второй

        +

        пункт списка

        +
      @@ -94,18 +100,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()", + ); } } } @@ -114,8 +128,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); }); } ``` @@ -128,18 +142,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; } ``` @@ -167,14 +217,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 */ @@ -193,14 +258,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 3c9d4fbe9774eb..b00cff5698e3ef 100644 --- a/files/ru/web/css/_colon_lang/index.md +++ b/files/ru/web/css/_colon_lang/index.md @@ -10,7 +10,7 @@ slug: Web/CSS/:lang ```css /* Выбирает все

      , что на английском (en) */ p:lang(en) { - quotes: '\201C' '\201D' '\2018' '\2019'; + quotes: "\201C" "\201D" "\2018" "\2019"; } ``` @@ -34,17 +34,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-of-type/index.md b/files/ru/web/css/_colon_last-of-type/index.md index 5ffb996ac113d4..605c110d2e237f 100644 --- a/files/ru/web/css/_colon_last-of-type/index.md +++ b/files/ru/web/css/_colon_last-of-type/index.md @@ -2,6 +2,7 @@ title: ":last-of-type" slug: Web/CSS/:last-of-type --- + {{CSSRef}} [CSS](/ru/docs/CSS) [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) **`:last-of-type`** находит последнего потомка с заданным тегом в списке детей родительского элемента. @@ -55,7 +56,10 @@ p:last-of-type {
      Этот `div` первый.
      Этот вложенный `span` является последним!
      -
      Этот вложенный `em` первый, а этот вложенный `em` последний!
      +
      + Этот вложенный `em` первый, а этот + вложенный `em` последний! +
      Этот `b` будет выбран!
      Это последний `div`!
      diff --git a/files/ru/web/css/_colon_link/index.md b/files/ru/web/css/_colon_link/index.md index 87b5f2b2a9c514..e7ecfebdc661a6 100644 --- a/files/ru/web/css/_colon_link/index.md +++ b/files/ru/web/css/_colon_link/index.md @@ -16,19 +16,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 fef6004190c78f..fb2ba2875735bf 100644 --- a/files/ru/web/css/_colon_not/index.md +++ b/files/ru/web/css/_colon_not/index.md @@ -25,8 +25,12 @@ slug: 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 ниже... @@ -34,7 +38,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 05f128ea4430bc..924047a20c9528 100644 --- a/files/ru/web/css/_colon_nth-child/index.md +++ b/files/ru/web/css/_colon_nth-child/index.md @@ -61,8 +61,10 @@ slug: Web/CSS/:nth-child #### HTML ```html -

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

      +

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

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

      Span 1! @@ -74,13 +76,17 @@ slug: 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 @@ -92,14 +98,19 @@ slug: 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 @@ -127,9 +138,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 971358ef131370..ae80fdc0283616 100644 --- a/files/ru/web/css/_colon_nth-last-child/index.md +++ b/files/ru/web/css/_colon_nth-last-child/index.md @@ -36,7 +36,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; } ``` @@ -50,16 +51,16 @@ tr:nth-last-child(-n+3) { /* последние 3 потомка */ Первая - Вторая строка + Вторая строка - Третья + Третья - Четвёртая + Четвёртая - Пятая строчка + Пятая строчка 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 05ebfc0d9f47d4..533741b6748729 100644 --- a/files/ru/web/css/_colon_nth-of-type/index.md +++ b/files/ru/web/css/_colon_nth-of-type/index.md @@ -46,7 +46,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 d6fef68ffbe554..4cdf9cf2ab6ce5 100644 --- a/files/ru/web/css/_colon_only-child/index.md +++ b/files/ru/web/css/_colon_only-child/index.md @@ -57,25 +57,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 11325eaf3b72dc..8df4c5af771cec 100644 --- a/files/ru/web/css/_colon_only-of-type/index.md +++ b/files/ru/web/css/_colon_only-of-type/index.md @@ -30,7 +30,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_out-of-range/index.md b/files/ru/web/css/_colon_out-of-range/index.md index 0242ac80d7344d..b564c5cf633498 100644 --- a/files/ru/web/css/_colon_out-of-range/index.md +++ b/files/ru/web/css/_colon_out-of-range/index.md @@ -29,24 +29,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: "вне диапазона!"; } ``` @@ -54,10 +54,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 e99ce4ef6c73f0..fee11d8a146970 100644 --- a/files/ru/web/css/_colon_placeholder-shown/index.md +++ b/files/ru/web/css/_colon_placeholder-shown/index.md @@ -2,6 +2,7 @@ title: ":placeholder-shown" slug: 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 @@ -22,7 +23,7 @@ slug: Web/CSS/:placeholder-shown #### HTML ```html - + ``` #### CSS @@ -59,7 +60,7 @@ input:placeholder-shown { #### HTML ```html - + ``` #### CSS @@ -89,7 +90,7 @@ input:placeholder-shown { #### HTML ```html - + ``` #### CSS @@ -127,17 +128,23 @@ input:placeholder-shown {

          - +

          - +

          - +

          - +
          ``` @@ -159,7 +166,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 f8a7d6b2555e4c..ee3c121244974a 100644 --- a/files/ru/web/css/_colon_read-only/index.md +++ b/files/ru/web/css/_colon_read-only/index.md @@ -2,6 +2,7 @@ title: ":read-only" slug: Web/CSS/:read-only --- + {{ CSSRef() }} ## Описание @@ -11,18 +12,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 0bcb9b2e314531..a99d08fc478182 100644 --- a/files/ru/web/css/_colon_read-write/index.md +++ b/files/ru/web/css/_colon_read-write/index.md @@ -12,18 +12,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_target/index.md b/files/ru/web/css/_colon_target/index.md index 003dd00a49990d..ac92a5c430c6a1 100644 --- a/files/ru/web/css/_colon_target/index.md +++ b/files/ru/web/css/_colon_target/index.md @@ -41,17 +41,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 @@ -66,7 +73,7 @@ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; - margin-right: .25em; + margin-right: 0.25em; } /* Стиль italic-элементов без target-элемента */ @@ -96,17 +103,20 @@ p:target i { ``` @@ -169,7 +179,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 67c9caca291ea1..be2fc4ed18fcc8 100644 --- a/files/ru/web/css/_colon_valid/index.md +++ b/files/ru/web/css/_colon_valid/index.md @@ -2,6 +2,7 @@ title: ":valid" slug: Web/CSS/:valid --- + {{ CSSRef() }} ## Описание @@ -21,7 +22,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 3f90f724b9827a..22655cced34bbb 100644 --- a/files/ru/web/css/_colon_visited/index.md +++ b/files/ru/web/css/_colon_visited/index.md @@ -2,6 +2,7 @@ title: ":visited" slug: Web/CSS/:visited --- + {{ CSSRef() }} ## Описание @@ -13,8 +14,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 8edd62daffa524..34032d8d46e04d 100644 --- a/files/ru/web/css/_colon_where/index.md +++ b/files/ru/web/css/_colon_where/index.md @@ -2,6 +2,7 @@ title: ":where()" slug: Web/CSS/:where --- + {{CSSRef}}[CSS](/ru/docs/Web/CSS) [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) **`:where()`** в качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка. ```css @@ -57,30 +58,48 @@ footer p:hover { ``` diff --git a/files/ru/web/css/_doublecolon_after/index.md b/files/ru/web/css/_doublecolon_after/index.md index 592ad6c55ebe17..e6bcda0b1e1942 100644 --- a/files/ru/web/css/_doublecolon_after/index.md +++ b/files/ru/web/css/_doublecolon_after/index.md @@ -33,8 +33,10 @@ a::after { ```html

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

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

          -

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

          +

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

          ``` #### CSS @@ -46,8 +48,8 @@ a::after { } .boring-text::after { - content: "<- СКУЧНО!"; - color: red; + content: "<- СКУЧНО!"; + color: red; } ``` @@ -69,12 +71,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; } @@ -91,10 +93,16 @@ a::after { #### HTML ```html -

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

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

          ``` @@ -104,7 +112,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 7ed6563f8c5046..2f6a701787f952 100644 --- a/files/ru/web/css/_doublecolon_backdrop/index.md +++ b/files/ru/web/css/_doublecolon_backdrop/index.md @@ -12,7 +12,7 @@ slug: 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 31ace8c28aecbc..6d53c0c7b4402e 100644 --- a/files/ru/web/css/_doublecolon_before/index.md +++ b/files/ru/web/css/_doublecolon_before/index.md @@ -66,12 +66,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; } @@ -111,11 +111,11 @@ li { } li.done { - background: #CCFF99; + background: #ccff99; } li.done::before { - content: ''; + content: ""; position: absolute; border-color: #009933; border-style: solid; @@ -132,12 +132,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. Попробуйте выполнить некоторые вещи списка. @@ -154,32 +158,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 f9fbcb78759265..4ec594331e3792 100644 --- a/files/ru/web/css/_doublecolon_cue/index.md +++ b/files/ru/web/css/_doublecolon_cue/index.md @@ -2,6 +2,7 @@ title: "::cue" slug: 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 5db3310c7da147..68f9852aa0323a 100644 --- a/files/ru/web/css/_doublecolon_first-letter/index.md +++ b/files/ru/web/css/_doublecolon_first-letter/index.md @@ -45,13 +45,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 243cf0d9a53877..971df4a1452c89 100644 --- a/files/ru/web/css/_doublecolon_first-line/index.md +++ b/files/ru/web/css/_doublecolon_first-line/index.md @@ -35,11 +35,15 @@ p::first-line { ### HTML ```html -

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

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

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

          + +Первая строка этого элемента не будет стилизована специальным образом потому + что это не блочный элемент. ``` ### CSS @@ -49,7 +53,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 2f0442f78278a8..547dfee13a360c 100644 --- a/files/ru/web/css/_doublecolon_grammar-error/index.md +++ b/files/ru/web/css/_doublecolon_grammar-error/index.md @@ -41,7 +41,7 @@ slug: 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 0e408357db6428..0a82bc0cbb7f49 100644 --- a/files/ru/web/css/_doublecolon_marker/index.md +++ b/files/ru/web/css/_doublecolon_marker/index.md @@ -2,6 +2,7 @@ title: "::marker" slug: Web/CSS/::marker --- + {{CSSRef}} Псевдоэлемент **`::marker`** применяет стили к маркеру элемента списка, которые обычно содержит значок или номер. Работает с любым элементом или псевдоэлементом, к которого установлен [`display: list-item`](/ru/docs/Web/CSS/display), например, у такого как {{HTMLElement("li")}} или {{HTMLElement("summary")}}. @@ -57,10 +58,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 2abceac3808d9c..cc68ba346a57af 100644 --- a/files/ru/web/css/_doublecolon_placeholder/index.md +++ b/files/ru/web/css/_doublecolon_placeholder/index.md @@ -2,6 +2,7 @@ title: "::placeholder" slug: 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")}} элементах. @@ -28,7 +29,7 @@ slug: Web/CSS/::placeholder #### HTML ```html - + ``` #### CSS @@ -50,7 +51,7 @@ input::placeholder { #### HTML ```html - + ``` #### CSS @@ -92,7 +93,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 af735744f4d3ae..4ea2899249a773 100644 --- a/files/ru/web/css/_doublecolon_selection/index.md +++ b/files/ru/web/css/_doublecolon_selection/index.md @@ -2,6 +2,7 @@ title: "::selection" slug: Web/CSS/::selection --- + {{CSSRef}}{{SeeCompatTable}} [Псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements) **`::selection`** позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши). @@ -31,7 +32,7 @@ slug: Web/CSS/::selection ```css /* синтаксис Firefox */ -::-moz-selection +::-moz-selection {} ``` {{csssyntax}} @@ -77,8 +78,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 6becee159a1f03..811354b25bb302 100644 --- a/files/ru/web/css/_doublecolon_slotted/index.md +++ b/files/ru/web/css/_doublecolon_slotted/index.md @@ -47,26 +47,29 @@ slug: 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 a277e53dc7a7dd..961fbc903e33f0 100644 --- a/files/ru/web/css/actual_value/index.md +++ b/files/ru/web/css/actual_value/index.md @@ -11,8 +11,8 @@ slug: Web/CSS/actual_value ## Спецификации -| Спецификация | Статус | Комментарий | -| ---------------------------------------------------------------------------------------- | ------------------------ | ----------------------- | +| Спецификация | Статус | Комментарий | +| ------------------------------------------------------------------- | ------------------- | ----------------------- | | {{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 bd2676ceee8bbb..2387a2948f6dfa 100644 --- a/files/ru/web/css/adjacent_sibling_combinator/index.md +++ b/files/ru/web/css/adjacent_sibling_combinator/index.md @@ -42,8 +42,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 cb4077c9d8f644..634f30080237db 100644 --- a/files/ru/web/css/align-content/index.md +++ b/files/ru/web/css/align-content/index.md @@ -18,11 +18,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; @@ -36,12 +36,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'-размерные элементы, чтобы заполнить контейнер */ @@ -98,7 +98,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; @@ -217,15 +217,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 44ee92a9beda0d..431864f607adb3 100644 --- a/files/ru/web/css/align-self/index.md +++ b/files/ru/web/css/align-self/index.md @@ -2,6 +2,7 @@ title: align-self slug: Web/CSS/align-self --- + {{CSSRef}} ## Описание diff --git a/files/ru/web/css/all/index.md b/files/ru/web/css/all/index.md index 8a72d11e07766e..7ff8c8455c95af 100644 --- a/files/ru/web/css/all/index.md +++ b/files/ru/web/css/all/index.md @@ -2,6 +2,7 @@ title: all slug: Web/CSS/all --- + {{CSSRef}} ## Описание @@ -47,7 +48,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** @@ -55,7 +59,7 @@ all: revert; ```css html { font-size: small; - background-color: #F0F0F0; + background-color: #f0f0f0; color: blue; } @@ -70,12 +74,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")}} @@ -85,13 +99,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")}} @@ -101,13 +127,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")}} @@ -117,13 +155,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 764c6a8642542a..6a1d59044174e8 100644 --- a/files/ru/web/css/angle/index.md +++ b/files/ru/web/css/angle/index.md @@ -28,11 +28,11 @@ slug: 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 e0e1a272027bc4..390c867d2d2523 100644 --- a/files/ru/web/css/animation-duration/index.md +++ b/files/ru/web/css/animation-duration/index.md @@ -2,6 +2,7 @@ title: animation-duration slug: 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 aa1c283473a758..ec092304b6edc7 100644 --- a/files/ru/web/css/animation-fill-mode/index.md +++ b/files/ru/web/css/animation-fill-mode/index.md @@ -2,6 +2,7 @@ title: animation-fill-mode slug: Web/CSS/animation-fill-mode --- + {{CSSRef}}{{SeeCompatTable}} ## Описание @@ -30,18 +31,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 заданы одновременно. @@ -72,26 +73,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 dd73257f219caa..5fab1b500342f9 100644 --- a/files/ru/web/css/animation-iteration-count/index.md +++ b/files/ru/web/css/animation-iteration-count/index.md @@ -2,6 +2,7 @@ title: animation-iteration-count slug: 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 0d69032ac81ecd..bdc07087b32fce 100644 --- a/files/ru/web/css/animation-name/index.md +++ b/files/ru/web/css/animation-name/index.md @@ -2,6 +2,7 @@ title: animation-name slug: 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 4a046e3df1a946..d80135d9e1a0d2 100644 --- a/files/ru/web/css/animation-timing-function/index.md +++ b/files/ru/web/css/animation-timing-function/index.md @@ -24,7 +24,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 */ @@ -36,7 +36,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 25077047f4e98c..1228e203d9ff57 100644 --- a/files/ru/web/css/animation/index.md +++ b/files/ru/web/css/animation/index.md @@ -18,13 +18,13 @@ slug: 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")}}. @@ -45,9 +45,7 @@ Note that order is also important within each animation definition for distingui ```html
          -
          - Listening for dispatches -
          +
          Listening for dispatches
          ``` @@ -68,24 +66,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 8b364782727d04..c13bb5cd1ab13e 100644 --- a/files/ru/web/css/at-rule/index.md +++ b/files/ru/web/css/at-rule/index.md @@ -2,13 +2,14 @@ title: At-rules slug: 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"; @@ -43,10 +44,10 @@ slug: 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 79a0dbe8f542cf..563d3a14c6fe67 100644 --- a/files/ru/web/css/attr/index.md +++ b/files/ru/web/css/attr/index.md @@ -35,22 +35,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 2c9334bd160f88..381cb163252d4a 100644 --- a/files/ru/web/css/attribute_selectors/index.md +++ b/files/ru/web/css/attribute_selectors/index.md @@ -2,6 +2,7 @@ title: Селекторы атрибутов slug: Web/CSS/Attribute_selectors --- + {{CSSRef("Selectors")}} ## Обзор @@ -27,43 +28,57 @@ slug: 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 98e1a354fe8c09..89fbd1e42fbb7a 100644 --- a/files/ru/web/css/backdrop-filter/index.md +++ b/files/ru/web/css/backdrop-filter/index.md @@ -2,6 +2,7 @@ title: backdrop-filter slug: Web/CSS/backdrop-filter --- + {{CSSRef}}{{SeeCompatTable}} [CSS](/ru/docs/Web/CSS) свойство **`backdrop-filter`** позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему _за_ элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными. @@ -60,7 +61,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%; @@ -74,7 +75,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 2a2ef9f57ff162..994668b4054828 100644 --- a/files/ru/web/css/backface-visibility/index.md +++ b/files/ru/web/css/backface-visibility/index.md @@ -62,9 +62,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).

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

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

    +

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

    @@ -162,8 +158,10 @@ backface-visibility: unset; } /* Сделает стол немного лучше */ -th, p, td { - background-color: #EEEEEE; +th, +p, +td { + background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-serif; @@ -177,8 +175,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 c530163987ce15..8bce612cf74d1c 100644 --- a/files/ru/web/css/background-attachment/index.md +++ b/files/ru/web/css/background-attachment/index.md @@ -2,6 +2,7 @@ title: background-attachment slug: Web/CSS/background-attachment --- + {{CSSRef}} ## Краткое описание @@ -47,10 +48,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.

    ``` @@ -75,19 +75,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 c092b7099cb838..d76dd611e1fc75 100644 --- a/files/ru/web/css/background-blend-mode/index.md +++ b/files/ru/web/css/background-blend-mode/index.md @@ -2,6 +2,7 @@ title: background-blend-mode slug: Web/CSS/background-blend-mode --- + {{CSSRef()}} [CSS-свойство](/ru/docs/Web/CSS) **`background-blend-mode`** описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов. @@ -45,10 +46,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; } ``` @@ -57,39 +58,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 2e5fa0722b434f..3cc2093fb57f03 100644 --- a/files/ru/web/css/background-clip/index.md +++ b/files/ru/web/css/background-clip/index.md @@ -47,8 +47,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.

    ``` @@ -56,7 +60,7 @@ background-clip: unset; ```css p { - border: .8em darkviolet; + border: 0.8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; @@ -65,13 +69,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); } ``` @@ -81,8 +91,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 3a25ca8d79042c..e648284aad03a3 100644 --- a/files/ru/web/css/background-color/index.md +++ b/files/ru/web/css/background-color/index.md @@ -2,6 +2,7 @@ title: background-color slug: Web/CSS/background-color --- + {{CSSRef}} [CSS](/ru/docs/Web/CSS)-свойство **`background-color`** [CSS](/ru/docs/Web/CSS) устанавливает цвет фона элемента. @@ -25,9 +26,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); @@ -58,17 +59,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 @@ -86,7 +81,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 1f11df8dc4a8d5..e1ba9854afb23b 100644 --- a/files/ru/web/css/background-image/index.md +++ b/files/ru/web/css/background-image/index.md @@ -47,24 +47,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 { @@ -76,8 +73,7 @@ p { } .catsandstars { - background-image: url("startransparent.gif"), - url("catfront.png"); + background-image: url("startransparent.gif"), url("catfront.png"); background-color: transparent; } ```