From 8217503040c325555aa895702a568392affe1e3e Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Mon, 16 Dec 2024 13:23:33 +0800 Subject: [PATCH 01/44] zh-CN: create `pkcs11.getModuleSlots()` (#24885) Co-authored-by: A1lo --- .../api/pkcs11/getmoduleslots/index.md | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/pkcs11/getmoduleslots/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/pkcs11/getmoduleslots/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/pkcs11/getmoduleslots/index.md new file mode 100644 index 00000000000000..6db74bfd81e00f --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/pkcs11/getmoduleslots/index.md @@ -0,0 +1,80 @@ +--- +title: pkcs11.getModuleSlots() +slug: Mozilla/Add-ons/WebExtensions/API/pkcs11/getModuleSlots +l10n: + sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c +--- + +{{AddonSidebar}} + +枚举模块中的插槽。此函数返回包含所有插槽条目的数组。其中的各个条目包含插槽的名称，以及令牌的相关信息（如果插槽包含令牌）。 + +你只能对已在 Firefox 中安装的模块调用此函数。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let getting = browser.pkcs11.getModuleSlots( + name // 字符串 +) +``` + +### 参数 + +- `name` + - : `string`。模块名称。此名称必须与模块的 [PKCS #11 清单](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Native_manifests#pkcs_11_清单)中的 `name` 属性相匹配。 + +### 返回值 + +将被兑现为一个对象数组，且每个对象代表模块提供访问的插槽之一的 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。每个对象有两个属性： + +- `name`：插槽的名称 +- `token`：如果此插槽中存在令牌，则为 `Token` 对象，否则该属性将为 `null`。 + +`Token` 对象具有以下属性： + +- `name` + - : `string`。令牌的名称。 +- `manufacturer` + - : `string`。令牌的制造商名称。 +- `HWVersion` + - : `string`。作为 PKCS #11 版本号的硬件版本（两个用点分隔的 32 位整数，如“1.0”）。 +- `FWVersion` + - : `string`。作为 PKCS #11 版本号的固件版本（两个用点分隔的 32 位整数，如“1.0”）。 +- `serial` + - : `string`。序列号，其格式由令牌规范定义。 +- `isLoggedIn` + - : `boolean`：如果令牌已登录，则为 `true`，否则为 `false`。 + +如果无法找到模块或发生其他错误，promise 将以错误消息拒绝。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +安装一个模块并列出其插槽及其中包含的令牌： + +```js +function onInstalled() { + return browser.pkcs11.getModuleSlots("my_module"); +} + +function onGotSlots(slots) { + for (const slot of slots) { + console.log(`插槽：${slot.name}`); + if (slot.token) { + console.log(`包含令牌：${slot.token.name}`); + } else { + console.log("为空"); + } + } +} + +browser.pkcs11.installModule("my_module").then(onInstalled).then(onGotSlots); +``` + +{{WebExtExamples}} From c350692e88638a03809e5a347f67c6a49e6701e5 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Mon, 16 Dec 2024 14:24:57 +0800 Subject: [PATCH 02/44] zh-CN: create `sidebarAction.getTitle()` (#24897) Co-authored-by: A1lo --- .../api/sidebaraction/gettitle/index.md | 100 ++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/gettitle/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/gettitle/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/gettitle/index.md new file mode 100644 index 00000000000000..4a76ff0cf49ebb --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/sidebaraction/gettitle/index.md @@ -0,0 +1,100 @@ +--- +title: sidebarAction.getTitle() +slug: Mozilla/Add-ons/WebExtensions/API/sidebarAction/getTitle +l10n: + sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262 +--- + +{{AddonSidebar}} + +获取侧边栏的标题。 + +就像你可以使用 {{WebExtAPIRef("sidebarAction.setTitle()")}} 在每个标签上设置标题一样，你也可以通过将标签页的 ID 传递给此函数来检索特定于标签页的标题。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let gettingTitle = browser.sidebarAction.getTitle( + details // 对象 +) +``` + +### 参数 + +- `details` + + - : `object`。包含以下属性的对象： + + - `tabId` {{optional_inline}} + - : `integer`。获取特定于给定标签页的侧边栏的标题。 + - `windowId` {{optional_inline}} + - : `integer`。获取特定于给定窗口的侧边栏的标题。 + + + +- 如果同时提供了 `windowId` 和 `tabId`，函数将失败且返回的 promise 将被拒绝。 +- 如果同时省略 `windowId` 和 `tabId`，则返回全局标题。 + +### 返回值 + +[`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，将兑现为包含侧边栏标题的字符串。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +在用户点击浏览器操作时在“这”和“那”之间切换标题： + +```js +function toggleTitle(title) { + if (title === "this") { + browser.sidebarAction.setTitle({ title: "那" }); + } else { + browser.sidebarAction.setTitle({ title: "这" }); + } +} + +browser.browserAction.onClicked.addListener(() => { + let gettingTitle = browser.sidebarAction.getTitle({}); + gettingTitle.then(toggleTitle); +}); +``` + +{{WebExtExamples}} + +> [!NOTE] +> 此 API 基于 Opera 的 [`chrome.sidebarAction`](https://help.opera.com/en/extensions/sidebar-action-api/) API。 + + From 9d6f5758fa33f103343298122fd8991787909825 Mon Sep 17 00:00:00 2001 From: A1lo Date: Mon, 16 Dec 2024 14:56:05 +0800 Subject: [PATCH 03/44] zh-cn: update the translation of `HTMLMediaElement.src` (#25094) --- .../web/api/htmlmediaelement/src/index.md | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/files/zh-cn/web/api/htmlmediaelement/src/index.md b/files/zh-cn/web/api/htmlmediaelement/src/index.md index 0ffc751eee6594..b884fdc27548ac 100644 --- a/files/zh-cn/web/api/htmlmediaelement/src/index.md +++ b/files/zh-cn/web/api/htmlmediaelement/src/index.md @@ -1,38 +1,36 @@ --- -title: HTMLMediaElement.src +title: HTMLMediaElement：src 属性 slug: Web/API/HTMLMediaElement/src +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 --- -{{APIRef("HTML DOM")}}**`HTMLMediaElement.src`**属性反映 HTML 媒体元素的`src` 属性的值，该属性指示要在元素中使用的媒体资源的 URL。 +{{APIRef("HTML DOM")}} -> [!NOTE] -> 了解此元素中当前正在使用的媒体资源的 URL 的最佳方法是查看 {{domxref("HTMLMediaElement.currentSrc", "currentSrc")}}属性的值，该属性还考虑从 {{domxref("HTMLSourceElement")}} (代表 {{HTMLElement("source")}} 元素) 中提供的列表中选择最佳或首选媒体资源 - -## Syntax +**`HTMLMediaElement.src`** 属性反映 HTML 媒体元素的 `src` 属性的值，其指示要在元素中使用的媒体资源的 URL。 -```plain -var mediaUrl = HTMLMediaElement.src; -``` +> [!NOTE] +> 了解此元素当前正在使用的媒体资源的 URL 的最佳方法是查看 {{domxref("HTMLMediaElement.currentSrc", "currentSrc")}} 属性的值，该属性还考虑从 {{domxref("HTMLSourceElement")}}（代表 {{HTMLElement("source")}} 元素）中提供的列表中选择的最佳或首选媒体资源。 -### Value +## 值 -一个{{domxref("USVString")}}对象，包含要在元素中使用的媒体资源的 URL;此属性反映 HTML 元素的`src` 属性的值。 +一个包含要在元素中使用的媒体资源的 URL 的字符串；此属性反映 HTML 元素的 `src` 属性的值。 -## Example +## 示例 ```js -var obj = document.createElement("video"); +const obj = document.createElement("video"); console.log(obj.src); // "" ``` -## Specifications +## 规范 {{Specifications}} -## Browser compatibility +## 浏览器兼容性 {{Compat}} -## See also +## 参见 -- The interface defining it, {{domxref("HTMLMediaElement")}}. +- {{domxref("HTMLMediaElement")}}：用于定义 `HTMLMediaElement.src` 属性的接口。 From 6d1c16b872fe4691cbe5acbd7161e4a43b8162c4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 12 Dec 2024 10:05:36 +0900 Subject: [PATCH 04/44] =?UTF-8?q?2024/08/02=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/svg/attribute/text-anchor/index.md | 102 ++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 files/ja/web/svg/attribute/text-anchor/index.md diff --git a/files/ja/web/svg/attribute/text-anchor/index.md b/files/ja/web/svg/attribute/text-anchor/index.md new file mode 100644 index 00000000000000..43a5577cf50b9e --- /dev/null +++ b/files/ja/web/svg/attribute/text-anchor/index.md @@ -0,0 +1,102 @@ +--- +title: text-anchor +slug: Web/SVG/Attribute/text-anchor +l10n: + sourceCommit: 58313eeb2415546be9763dc691b6d519433c6dbb +--- + +{{SVGRef}} + +**`text-anchor`** 属性は、整形済みテキストや、折り返し領域が指定された基準点から {{cssxref("inline-size")}} で指定された領域となる自動折り返しテキストの文字列の位置揃え（行の先頭、中央、末尾揃え）に使用されます。 + +この属性は、他の種類の自動折り返しテキストには適用されません。そのような場合は、 {{cssxref("text-align")}} を使用してください。複数行のテキストの場合、配置は各行に対して行われます。 + +`text-anchor` 属性は、指定された {{SVGElement("text")}} 要素内の個々のテキストの塊に適用されます。それぞれのテキストの塊には、現在のテキストの初期位置があり、これはユーザー座標系における点を表します。 `` 要素の {{SVGAttr("x")}} および {{SVGAttr("y")}} 属性、 {{SVGElement("tspan")}} または {{SVGElement("tref")}} 要素でテキストの塊の最初に描画される文字に明示的に割り当てられた `x` 属性または `y` 属性、または {{SVGElement("textPath")}} 要素の現在のテキストの初期位置の決定（コンテキストに応じて）の結果として生じるものです。 + +> [!NOTE] +> プレゼンテーション属性であるため、 `text-anchor` は CSS プロパティとして使用できます。詳しくは {{cssxref('text-anchor')}} を参照してください。 + +この属性は次の SVG 要素で使用することができます。 + +- {{SVGElement("text")}} +- {{SVGElement("textPath")}} +- {{SVGElement("tref")}} +- {{SVGElement("tspan")}} + +## 例 + +```css hidden +html, +body, +svg { + height: 100%; +} +``` + +```html + + + + + + A + A + A + + + + + + + + +``` + +{{EmbedLiveSample("Example", "120", "120")}} + +## 使用方法のメモ + + + + + + + + + + + + + + + + +
既定値start
値start | middle | end
アニメーション離散
+ +- `start` + - : レンダリングされる文字は、テキスト文字列の先頭が現在のテキスト位置の初期位置にくるように配置されます。 {{cssxref("direction")}} プロパティ値が `ltr` （ほとんどのヨーロッパ言語で一般的）である要素の場合、テキストの左端がテキストの初期位置に描画されます。 `direction` プロパティ値が `rtl` （アラビア語やヘブライ語で一般的）である要素の場合、テキストの右端がテキストの初期位置に描画されます。主テキスト方向が縦書き（アジアのテキストで多い）である要素の場合、テキストの上端がテキストの初期位置に描画されます。 +- `middle` + - : レンダリングされる文字は、テキスト文字列の中央が現在のテキスト位置にくるように配置されます。（パス上のテキストの場合、概念的には、まずテキスト文字列が直線上にレイアウトされます。テキスト文字列の開始位置と末尾位置の中心点が決定されます。次に、テキスト文字列は、この中心点が現在のテキスト位置に置かれた状態でパス上に割り当てられます。） +- `end` + - : レンダリングされる文字は、レンダリングされたテキストの末尾（`text-anchor` プロパティを適用する前のテキストの最終的な現在位置）が、最初の現在位置に来るように移動されます。 `direction` プロパティ値が `ltr` （ほとんどのヨーロッパ言語で一般的）である要素の場合、テキストの右端がテキストの初期位置に描画されます。 `direction` プロパティの値が `rtl` （アラビア語やヘブライ語に多い）である要素の場合、テキストの左端がテキストの初期位置に表示されます。主テキスト方向が縦書き（アジアのテキストに多い）である要素の場合、テキストの下端が初期テキスト位置に表示されます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- SVG の {{SVGElement("text")}} 要素 +- CSS の {{cssxref('text-anchor')}} プロパティ From 3624aabfa5bb9805d44b2a815c7945a70b7b2dad Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 12 Dec 2024 15:25:44 +0900 Subject: [PATCH 05/44] =?UTF-8?q?2024/08/02=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/text-anchor/index.md | 106 ++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 files/ja/web/css/text-anchor/index.md diff --git a/files/ja/web/css/text-anchor/index.md b/files/ja/web/css/text-anchor/index.md new file mode 100644 index 00000000000000..d0358c68b8d797 --- /dev/null +++ b/files/ja/web/css/text-anchor/index.md @@ -0,0 +1,106 @@ +--- +title: text-anchor +slug: Web/CSS/text-anchor +l10n: + sourceCommit: 58313eeb2415546be9763dc691b6d519433c6dbb +--- + +{{CSSRef}} + +**`text-anchor`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{cssxref("inline-size")}} プロパティから決定される折り返し領域にテキストの文字列を含むボックスを配置し、テキストを要素のアンカーポイントに対して相対的に配置します。アンカーポイントは、 {{SVGAttr('x')}} および {{SVGAttr('y')}} （または {{SVGAttr('dx')}} および {{SVGAttr('dy')}}）属性を使用して定義されます。 CSS プロパティの値が存在する場合、その値は要素の {{SVGAttr("text-anchor")}} 属性の値を上書きします。 + +要素内の個々のテキスト断片はそれぞれ独立して配置されます。したがって、複数行の {{SVGElement("text")}} 要素では、 `text-anchor` の値に従ってテキストの各行が配置されます。 `text-anchor` の値は、 SVG の {{SVGElement("text")}}、{{SVGElement("textPath")}}、{{SVGElement("tref")}}、{{SVGElement("tspan")}} の各要素にのみ効果を持ちます。 `text-anchor` は自動的に折り返されたテキストには適用されません。その場合は、 {{cssxref('text-align')}} を参照してください。 + +## 構文 + +```css +text-anchor: start; +text-anchor: middle; +text-anchor: end; + +/* グローバル値 */ +text-anchor: inherit; +text-anchor: initial; +text-anchor: revert; +text-anchor: revert-layer; +text-anchor: unset; +``` + +### 値 + +- `start` + + - : テキスト文字列のインライン方向の先頭位置がアンカーポイントと一致するようにテキストを配置します。この配置はテキストの書き出し方向に関連するものです。例えば、右から左へ、上から下へ書く言語では、テキストはアンカーポイントの左側に配置されます。多くのアジア言語のように、テキストのインライン方向が縦書きの場合、テキストの上端がアンカーポイントと一致します。 + +- `middle` + + - : テキスト文字列のインラインボックスの中央（中間）がアンカーポイントと揃うようにテキストを配置します。 + +- `end` + + - : テキスト文字列のインライン方向の末尾位置がアンカーポイントと一致するようにテキストを配置します。この配置はテキストの書き出し方向と相対的なものです。例えば、右から左へ、上から下へ書く言語では、テキストはアンカーポイントの右側に配置されます。多くのアジア言語のように、テキストのインライン方向が縦書きの場合、テキストの下端がアンカーポイントと一致します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +3 つの `` 要素には同じ `x` 位置が指定されていますが、`text-anchor` の値はそれぞれ異なります。 3 つのアンカーポイントのすべてについて、 x 軸の位置を示す破線の赤い行が含まれます。 + +```html + + + アンカーに配置 + アンカーに配置 + アンカーに配置 + +``` + +```css hidden +text { + font-size: 24px; +} +``` + +```css +text:nth-of-type(1) { + text-anchor: start; +} +text:nth-of-type(2) { + text-anchor: middle; +} +text:nth-of-type(3) { + text-anchor: end; +} +``` + +{{EmbedLiveSample("Example", 200, 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref('dominant-baseline')}} +- SVG の {{SVGElement("text")}} 要素 +- SVG の {{SVGAttr("text-anchor")}} 属性 From 1fdc649ec4c1625a25f6b3b58065ef0636107ee3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 13 Dec 2024 00:12:09 +0900 Subject: [PATCH 06/44] =?UTF-8?q?2024/10/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../svg/attribute/xlink_colon_href/index.md | 477 ++++++++++++++++++ 1 file changed, 477 insertions(+) create mode 100644 files/ja/web/svg/attribute/xlink_colon_href/index.md diff --git a/files/ja/web/svg/attribute/xlink_colon_href/index.md b/files/ja/web/svg/attribute/xlink_colon_href/index.md new file mode 100644 index 00000000000000..aabdfeb7a437f8 --- /dev/null +++ b/files/ja/web/svg/attribute/xlink_colon_href/index.md @@ -0,0 +1,477 @@ +--- +title: xlink:href +slug: Web/SVG/Attribute/xlink:href +l10n: + sourceCommit: bea339d321513fc6d66d95c8f0305b9387fa57bb +--- + +{{SVGRef}}{{Deprecated_Header}} + +**`xlink:href`** 属性は、リソースを参照する [IRI](/ja/docs/Web/SVG/Content_type#iri) として参照先を定義します。そのリンクが正確に意味している内容は、そのリンクを使用している各要素のコンテキストによって異なります。 + +> [!NOTE] +> SVG 2 では、 `xlink` 名前空間は除去されたため、 `xlink:href` の代わりに {{SVGAttr("href")}} を使用してください。以前のバージョンのブラウザーに対応する必要がある場合は、非推奨の `xlink:href` 属性を `href` 属性に加えて予備として使用することができます。例えば、 `` のようにしますです。 + +この属性は、次の SVG 要素に従うことで使用することができます。 + +- {{SVGElement("a")}} +- {{SVGElement("animate")}} +- {{SVGElement("animateMotion")}} +- {{SVGElement("animateTransform")}} +- {{SVGElement("cursor")}} +- {{SVGElement("feImage")}} +- {{SVGElement("filter")}} +- {{SVGElement("font-face-uri")}} +- {{SVGElement("glyphRef")}} +- {{SVGElement("image")}} +- {{SVGElement("linearGradient")}} +- {{SVGElement("mpath")}} +- {{SVGElement("pattern")}} +- {{SVGElement("radialGradient")}} +- {{SVGElement("script")}} +- {{SVGElement("set")}} +- {{SVGElement("textPath")}} +- {{SVGElement("tref")}} +- {{SVGElement("use")}} + +## 例 + +```css hidden +html, +body, +svg { + height: 100%; +} +``` + +```html + + + MDN Web Docs + + +``` + +{{EmbedLiveSample("Example", "320", "100")}} + +## a + +{{SVGElement("a")}} では、 `xlink:href` は参照先のオブジェクトの場所を定義します。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション可
+ +## animate, animateMotion, animateTransform, set + +{{SVGElement("animate")}}、{{SVGElement("animateMotion")}}、{{SVGElement("animateTransform")}}、{{SVGElement("set")}} の場合、 `xlink:href` は、このアニメーションの対象となり、時間を経て変化する要素への参照を定義します。 + +対象要素は、現在の SVG 文書フラグメントの一部でなければなりません。 + +この値は、指定されたアニメーションの対象となりうる要素を正確に 1 つだけ指す必要があります。 + +`xlink:href` 属性が指定されていない場合、対象要素は現在のアニメーションする要素の直接の親要素となります。 + +具体的なアニメーションの対象要素の種類に関する制限については、個々のアニメーション要素の説明を参照してください。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション不可
+ +## cursor + +{{SVGElement("cursor")}} では、 `xlink:href` はカーソルの画像を提供するファイルまたは要素の参照を定義します。 + + + + + + + + + + + + + + + + +
値 + <FuncIRI> +
既定値なし
アニメーション可
+ +## feImage + +{{SVGElement("feImage")}} では、 `xlink:href` は画像ソースの参照を定義します。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション可
+ +## filter + +{{SVGElement("filter")}} では、 `xlink:href` は現在の SVG 文書フラグメント内の別の `` 要素への参照を定義します。参照先の `` 要素で定義されていて、この要素では定義されていない属性はすべて、この要素に継承されます。この要素がフィルターノードを保有しておらず、参照先の要素がフィルターノードを定義している場合（おそらく、自分自身で `xlink:href` 属性を定義しているため）、この要素は参照先の `` 要素で定義されているフィルターノードを継承します。継承は任意のレベルまで間接的に行うことができます。したがって、参照する `` 要素が自分自身で `xlink:href` 属性を指定して、その属性やフィルターノード仕様を継承している場合、現在の要素はそれらの属性やフィルターノード仕様を継承することができます。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション可
+ +## font-face-uri + +{{SVGElement("font-face-uri")}} では、 `xlink:href` は参照するフォントの場所を定義します。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション不可
+ +## glyphRef + +{{SVGElement("glyphRef")}} では、 `xlink:href` は SVG 文書フラグメントの {{SVGElement("glyph")}} 要素を定義します。参照される `` は別な字形として描画されます。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション不可
+ +## image + +{{SVGElement("image")}} では、 `xlink:href` は参照される画像の場所を定義します。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション可
+ +## linearGradient + +{{SVGElement("linearGradient")}} では、`xlink:href` は現在の SVG 文書フラグメント内の別の `` または {{SVGElement("radialGradient")}} 要素への参照を定義します。参照先の要素で定義されているが、参照元の要素では定義されていない `` 属性は、参照元の要素に継承されます。この要素がグラデーションの色経由点を定義しておらず、参照先の要素が定義している場合（おそらく、自分自身で `xlink:href` 属性を指定しているため）、この要素は参照先の要素からグラデーションの色経由点を継承します。継承は任意のレベルまで間接的に行うことができます。したがって、参照先の要素が自分自身で `xlink:href` 属性を指定しているために属性またはグラデーションの色経由点を継承している場合、現在の要素はそれらの属性またはグラデーションの色経由点を継承することができます。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション可
+ +## mpath + +{{SVGElement("mpath")}} では、 `xlink:href` はモーションパスを定義する {{SVGElement("path")}} 要素への参照を定義します。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション不可
+ +## pattern + +{{SVGElement("pattern")}} では、 `xlink:href` は現在のSVG文書フラグメント内の別の `` 要素への参照を定義します。参照先の要素で定義されているが、この要素では定義されていない属性は、すべてこの要素に継承されます。この要素が子要素を持たず、参照先の要素が子要素を持つ場合（おそらく参照先の要素自身の `xlink:href` 属性によるもの）、この要素は参照先の要素の子要素を継承します。継承は任意のレベルまで間接的に行われることがあります。したがって、参照先の要素が自分自身で `xlink:href` 属性を設定しているために属性や子要素を継承している場合、現在の要素はそれらの属性や子要素を継承することができます。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション可
+ +## radialGradient + +{{SVGElement("radialGradient")}} では、 `xlink:href` は現在の SVG 文書フラグメントにある別の {{SVGElement("linearGradient")}} または `` への参照を定義します。参照先の要素で定義されていて、この要素では定義されていない `` 属性はすべて、この要素に継承されます。この要素がグラデーションの色経由点を定義しておらず、参照先の要素が定義している場合（おそらくは自分自身で `xlink:href` 属性を定義しているため）、この要素は参照先の要素からグラデーションの色経由点を継承します。継承は任意のレベルまで間接的に行うことができます。したがって、参照先の要素が自分自身で `xlink:href` 属性を定義しているために属性やグラデーションの色経由点を継承している場合、現在の要素はそれらの属性やグラデーションの色経由点を継承することができます。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション可
+ +## script + +{{SVGElement("script")}} では、 `xlink:href` は、スクリプトコードの入った外部リソースへの参照を定義します。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション不可
+ +## textPath + +{{SVGElement("textPath")}} では、 `xlink:href` は文字が描画される {{SVGElement("path")}} 要素への参照を定義します。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション可
+ +## use + +{{SVGElement("use")}} では、 `xlink:href` は参照先のオブジェクトの場所を定義します。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション可
+ +## tref + +{{SVGElement("tref")}} では、 `xlink:href` は、文字データコンテンツをこの `` 要素の文字データとして使用する要素への参照を定義します。 + + + + + + + + + + + + + + + + +
値 + <iri> +
既定値なし
アニメーション可
+ +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{SVGAttr("href")}} From 8ffd970620720ff86ea5b59da32a1aab899580fc Mon Sep 17 00:00:00 2001 From: Artyom Pikulin Date: Tue, 17 Dec 2024 00:19:27 +0300 Subject: [PATCH 07/44] [ru] fix link in `Web/JavaScript/Reference/Global_Objects/Set` (#25103) * fix link to `Array.prototype.includes` * improve wording --------- Co-authored-by: Leonid Vinogradov --- files/ru/web/javascript/reference/global_objects/set/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ru/web/javascript/reference/global_objects/set/index.md b/files/ru/web/javascript/reference/global_objects/set/index.md index 5cc559e482a754..5bbe896baba341 100644 --- a/files/ru/web/javascript/reference/global_objects/set/index.md +++ b/files/ru/web/javascript/reference/global_objects/set/index.md @@ -19,7 +19,7 @@ slug: Web/JavaScript/Reference/Global_Objects/Set ### Производительность -Метод [`has`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Set/has) проверяет наличие значения в `Set` используя алгоритм, который в среднем работает быстрее поэлементного перебора добавленных ранее элементов. В частности этот алгоритм работает быстрее чем метод [`Array.prototype.includes`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/includes на массиве, который хранит столько же элементов сколько сравниваемый объект `Set`. +Метод [`has`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Set/has) проверяет наличие значения в коллекции, используя алгоритм, который в среднем работает быстрее перебора добавленных ранее элементов. В частности он в среднем быстрее, чем метод [`Array.prototype.includes`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) для массива, у которого столько же элементов, сколько в коллекции. ## Конструктор From 46bf895467d6dfed10b1fc35a8090a1e758489a2 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Tue, 17 Dec 2024 01:53:23 +0000 Subject: [PATCH 08/44] [ko] sync translated content (#25113) --- files/ko/_redirects.txt | 1 + .../glossary/denial_of_service}/index.md | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) rename files/ko/{glossary/dos_attack => conflicting/glossary/denial_of_service}/index.md (95%) diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 18cde29c5936d9..8732a222bdda7f 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -181,6 +181,7 @@ /ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기 /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball /ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기 /ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it /ko/docs/Glossary/Client_hints /ko/docs/Web/HTTP/Client_hints +/ko/docs/Glossary/DOS_attack /ko/docs/conflicting/Glossary/Denial_of_Service /ko/docs/Glossary/Descriptor_(CSS) /ko/docs/Glossary/CSS_Descriptor /ko/docs/Glossary/Empty_element /ko/docs/Glossary/Void_element /ko/docs/Glossary/First_interactive /ko/docs/conflicting/Glossary/First_CPU_idle diff --git a/files/ko/glossary/dos_attack/index.md b/files/ko/conflicting/glossary/denial_of_service/index.md similarity index 95% rename from files/ko/glossary/dos_attack/index.md rename to files/ko/conflicting/glossary/denial_of_service/index.md index bba7bd1bce1f33..2d038ca14d922a 100644 --- a/files/ko/glossary/dos_attack/index.md +++ b/files/ko/conflicting/glossary/denial_of_service/index.md @@ -1,6 +1,7 @@ --- title: DOS 공격 (DoS attack) -slug: Glossary/DOS_attack +slug: conflicting/Glossary/Denial_of_Service +original_slug: Glossary/DOS_attack l10n: sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- From 9beed39f156d2ad4dd971cd85a40b0a19580e00e Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Tue, 17 Dec 2024 10:32:56 +0800 Subject: [PATCH 09/44] [zh-cn] update 'handling different text directions' (#25095) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../index.md | 342 ++++++++++++++---- 1 file changed, 280 insertions(+), 62 deletions(-) diff --git a/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.md b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.md index 9ac5db9830436c..cf77d51b9684d5 100644 --- a/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.md +++ b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.md @@ -1,136 +1,354 @@ --- title: 处理不同方向的文本 slug: Learn/CSS/Building_blocks/Handling_different_text_directions +l10n: + sourceCommit: 68772e87a84d6d6fc6a8e377dea4998afbeb511c --- {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}} -目前为止我们在 CSS 学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。 +目前为止我们在 CSS 学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在盒子的上侧、右侧、下侧、左侧设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。 -然而，CSS 在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。 +但近年来，CSS 不断发展，以更好地支持不同方向的内容，包括从右到左和从上到下的文本（如日文）——这些不同的方向属性被称为**书写模式**。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。 - +
前提： - 计算机基础知识，基本软件（参见basic software installed），文件管理的基本知识（参见working with files），HTML 基础（HTML 学习安装了基本的软件，了解基本的文件管理知识，具有 HTML 基础（参见 Introduction to HTML）以及 CSS 基础（学习CSS first stepsHTML 介绍），并了解 CSS 如何工作（参见 CSS 第一步）。
目标：了解书写模式对现代 CSS 的重要了解书写模式对现代 CSS 的重要性
-## 什么是书写模式 +## 什么是书写模式？ CSS 中的书写模式是指文本的排列方向是横向还是纵向的。{{cssxref("writing-mode")}} 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。 -下面的例子中，我们使用`writing-mode: vertical-rl`对一个标题的显示进行设置。现在，标题文本是竖向的了。竖向文本在平面设计中很常见，也可以为你的网页设计增添更加有趣的外观。 +在下面的示例中，我们使用 `writing-mode: vertical-rl` 显示了一个标题。现在文本垂直显示。垂直文本在图形设计中很常见，可以为网页设计添加更有趣的界面外观。 -{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}} +```html live-sample___simple-vertical +

玩转书写模式

+``` -[`writing-mode`](/zh-CN/docs/Web/CSS/writing-mode)的三个值分别是： +```css live-sample___simple-vertical +body { + font-family: sans-serif; + height: 300px; +} +h1 { + writing-mode: vertical-rl; + color: white; + background-color: black; + padding: 10px; +} +``` -- `horizontal-tb`: 块流向从上至下。对应的文本方向是横向的。 -- `vertical-rl`: 块流向从右向左。对应的文本方向是纵向的。 -- `vertical-lr`: 块流向从左向右。对应的文本方向是纵向的。 +{{EmbedLiveSample("simple-vertical", "", "350px")}} -因此，`writing-mode`属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。 +[`writing-mode`](/zh-CN/docs/Web/CSS/writing-mode) 属性的三种可能的值分别是： -## 书写模式、块级布局和内联布局 +- `horizontal-tb`: 区块流向从上至下。对应的文本方向是横向的。 +- `vertical-rl`: 区块流向从右向左。对应的文本方向是纵向的。 +- `vertical-lr`: 区块流向从左向右。对应的文本方向是纵向的。 -我们已经讨论了块级布局和内联布局（[block and inline layout](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes)），也知道外部显示类型元素分为块级元素和内联元素。如上所述，块级显示和内联显示与文本的书写模式（而非屏幕的物理显示）密切相关。如果你使用书写模式的显示是横向的，如英文，那么块在页面上的显示就是从上到下的。 +因此，`writing-mode` 属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。 -用一个例子可以更清楚地说明这一点。下一个例子中有两个盒子，分别包含一个标题和一个段落。第一个盒子应用的是`writing-mode: horizontal-tb`，这是一个从上到下的横向的书写模式。第二个盒子应用的是`writing-mode: vertical-rl`，这是一个从右到左的纵向的书写模式。 +## 书写模式、块级布局和行级布局 -{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}} +我们已经讨论了[块级布局和行级布局](/zh-CN/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow)，以及有些东西显示为块级元素，有些显示为行级元素。如上文所述，区块元素和行内元素与文档的书写模式有关，而与物理屏幕无关。只有在使用横向显示文本的书写模式（如英语）时，才会从页面顶部到底部显示块元素。 -当我们切换书写模式时，我们也在改变块和内联文本的方向。`horizontal-tb`书写模式下块的方向是从上到下的横向的，而 `vertical-rl`书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。 +用一个例子可以更清楚地说明这一点。下一个例子中有两个盒子，分别包含一个标题和一个段落。第一个盒子应用的是 `writing-mode: horizontal-tb`，这是一个从上到下的横向的书写模式。第二个盒子应用的是 `writing-mode: vertical-rl`，这是一个从右到左的纵向的书写模式。 -这张图展示了在水平书写模式下的两种维度。![](horizontal-tb.png) +```html live-sample___block-inline +
+
+

标题

+

用 CSS 演示书写模式的段落。

+
+
+

标题

+

用 CSS 演示书写模式的段落。

+
+
+``` + +```css live-sample___block-inline +body { + font-family: sans-serif; + height: 300px; +} +.wrapper { + display: flex; +} + +.box { + border: 1px solid #ccc; + padding: 0.5em; + margin: 10px; +} + +.horizontal { + writing-mode: horizontal-tb; +} + +.vertical { + writing-mode: vertical-rl; +} +``` + +{{EmbedLiveSample("block-inline", "", "350px")}} + +当我们切换书写模式时，我们也在改变哪里显示为块级，哪里显示为行级。`horizontal-tb` 书写模式下块向是从上到下的；而 `vertical-rl` 书写模式下块向是从右到左的。因此，**块向维度**指的总是区块在页面书写模式下的显示方向。而**行向维度**指的总是文本方向。 + +这张图展示了在水平书写模式下的两种维度。![水平书写模式下的区块和行向轴。](horizontal-tb.png) 这张图片展示了纵向书写模式下的两种维度。 -![](vertical.png) +![纵向书写模式下的区块和行向轴。](vertical.png) -一旦你开始接触 CSS 布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。 +一旦你开始接触 CSS 布局，尤其是更新的布局方法，这些关于块级元素和行级元素的概念会变得非常重要。稍后还会讨论这个问题。 ### 方向 -除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想将某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是 CSS 本身功能的一部分。网页可不仅限于从左向右排列的语言！ +除了书写模式，我们还有文字方向。如上所述，有些语言（如阿拉伯语）是水平书写的，但却是从右向左。这并不是你可能会在创意意义上使用的东西——如果你想把某些东西排在右边，有其他方法可以做到——不过，重要的是要理解这是 CSS 特性的一部分。Web 中的语言并非只能从左到右显示！ -由于书写模式和文本方向都是可变的，新的 CSS 布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的*开头*和*结尾*一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握 CSS 非常有用。 +由于书写模式和文本方向都是可变的，新的 CSS 布局方法不再定义从左到右和从上到下，而是将这些连同行级元素和块级元素的*开头*和*结尾*一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握 CSS 非常有用。 ## 逻辑属性和逻辑值 我们之所以要在这里探讨书写模式和方向，是因为目前为止我们已经了解了很多与屏幕的物理显示密切相关的很多属性，而书写模式和方向在水平书写模式下会很有意义。 -让我们再来看看那两个盒子——一个用`horizontal-tb`设定了书写模式，一个用`vertical-rl`设定了书写模式。我为这两个盒子分别设定了宽度（ {{cssxref("width")}}）。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。 - -{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}} +让我们再来看看那两个盒子——一个用 `horizontal-tb` 设定了书写模式，一个用 `vertical-rl` 设定了书写模式。我为这两个盒子分别设定了宽度（{{cssxref("width")}}）。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。 + +```html live-sample___width +
+
+

标题

+

用 CSS 演示书写模式的段落。

+

这些盒子具有宽度。

+
+
+

标题

+

用 CSS 演示书写模式的段落。

+

这些盒子具有宽度。

+
+
+``` + +```css live-sample___width +body { + font-family: sans-serif; + height: 300px; +} +.wrapper { + display: flex; +} + +.box { + border: 1px solid #ccc; + padding: 0.5em; + margin: 10px; + width: 100px; +} + +.horizontal { + writing-mode: horizontal-tb; +} + +.vertical { + writing-mode: vertical-rl; +} +``` + +{{EmbedLiveSample("width", "", "350px")}} 通过这一些列调整，我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。 -为了更容易实现这样的转变，CSS 最近开发了一系列映射属性。这些属性用逻辑（**logical**）和相对变化（**flow relative**）代替了像宽`width`和高`height`一样的物理属性。 - -横向书写模式下，映射到`width`的属性被称作内联尺寸（{{cssxref("inline-size")}}）——内联维度的尺寸。而映射`height`的属性被称为块级尺寸（{{cssxref("block-size")}}），这是块级维度的尺寸。下面的例子展示了替换掉`width`的`inline-size`是如何生效的。 - -{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}} +为了更容易实现这样的转变，CSS 最近开发了一系列映射属性。这些属性用**逻辑**和**流相对变化**代替了像 `width` 和 `height` 一样的物理属性。 + +横向书写模式下，映射到 `width` 的属性被称作 {{cssxref("inline-size")}}——行向维度的尺寸。而映射 `height` 的属性被称作 {{cssxref("block-size")}}——块向维度的尺寸。下面的例子展示了替换掉 `width` 的 `inline-size` 是如何生效的。 + +```html live-sample___inline-size +
+
+

标题

+

用 CSS 演示书写模式的段落。

+

这些盒子具有 inline-size。

+
+
+

标题

+

用 CSS 演示书写模式的段落。

+

这些盒子具有 inline-size。

+
+
+``` + +```css live-sample___inline-size +.wrapper { + display: flex; +} + +.box { + border: 1px solid #ccc; + padding: 0.5em; + margin: 10px; + inline-size: 100px; +} + +.horizontal { + writing-mode: horizontal-tb; +} + +.vertical { + writing-mode: vertical-rl; +} +``` + +{{EmbedLiveSample("inline-size", "", "300px")}} ### 逻辑外边距、边框和内边距属性 -我们在前面两节中学习了 CSS 的盒模型和 CSS 边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、 {{cssxref("padding-left")}}和 {{cssxref("border-bottom")}}。就像 width 和 height 有映射，这些属性也有相应的映射。 +我们在前面两节中学习了 CSS 的盒模型和 CSS 边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、{{cssxref("padding-left")}} 和 {{cssxref("border-bottom")}}。就像 width 和 height 有映射，这些属性也有相应的映射。 -`margin-top`属性的映射是{{cssxref("margin-block-start")}}——总是指向块级维度开始处的边距。 +`margin-top` 属性的映射是 {{cssxref("margin-block-start")}}——总是指向块级维度开始处的边距。 -{{cssxref("padding-left")}}属性映射到 {{cssxref("padding-inline-start")}}，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。{{cssxref("border-bottom")}}属性映射到的是{{cssxref("border-block-end")}}，也就是块级维度结尾处的边框。 +{{cssxref("padding-left")}} 属性映射到 {{cssxref("padding-inline-start")}}，这是应用到行首方向（这是该书写模式文本开始的地方）上的内边距。{{cssxref("border-bottom")}} 属性映射到的是 {{cssxref("border-block-end")}}，也就是块级维度结尾处的边框。 下面是物理和逻辑属性之间的对比。 -**如果你用`writing-mode`把盒子`.box`的书写模式改为`vertical-rl`，你将会看到尽管盒子的物理方向变了，盒子的物理属性仍然没变，然而逻辑属性会随着书写模式一起改变。** - -**你还可以看到，二级标题{{htmlelement("h2")}}有一个黑色的底部边框`border-bottom`。你知道如何使得底部边框无论在那种书写模式下都位于文本的下方吗？** - -{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}} - -对于每一个普通边距，都有许多属性可以参考，你可以在 MDN 页面（[Logical Properties and Values](/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values)）查看所有映射属性。 +如果你用 `writing-mode` 把盒子 `.box` 的书写模式改为 `vertical-rl`，你将会看到尽管盒子的物理方向变了，盒子的物理属性仍然没变，然而逻辑属性会随着书写模式一起改变。 + +你还可以看到，二级标题 {{htmlelement("h2")}} 有一个黑色的底部边框 `border-bottom`。你知道如何使得底部边框无论在哪种书写模式下都位于文本的下方吗？ + +```html live-sample___logical-mbp +
+
+

物理属性

+

用 CSS 演示逻辑属性的段落。

+
+
+

逻辑属性

+

用 CSS 演示逻辑属性的段落。

+
+
+``` + +```css live-sample___logical-mbp +.wrapper { + display: flex; + border: 5px solid #ccc; +} + +.box { + margin-right: 30px; + inline-size: 200px; + writing-mode: horizontal-tb; +} + +.logical { + margin-block-start: 20px; + padding-inline-end: 2em; + padding-block-start: 2px; + border-block-start: 5px solid pink; + border-inline-end: 10px dotted rebeccapurple; + border-block-end: 1em double orange; + border-inline-start: 1px solid black; +} + +.physical { + margin-top: 20px; + padding-right: 2em; + padding-top: 2px; + border-top: 5px solid pink; + border-right: 10px dotted rebeccapurple; + border-bottom: 1em double orange; + border-left: 1px solid black; +} + +h2 { + border-bottom: 5px solid black; +} +``` + +{{EmbedLiveSample("logical-mbp", "", "200px")}} + +如果考虑到所有单独的边框完整表述，属性的数量是非常庞大的，你可以在[逻辑属性和逻辑值](/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values) MDN 页面上看到所有映射的属性。 ### 逻辑值 -目前为止我们看到的都是逻辑属性的名称。还有一些属性的取值是一些物理值（如`top`、`right`、`bottom`和`left`）。这些值同样拥有逻辑值映射（`block-start`、`inline-end`、`block-end`和`inline-start`）。 - -例如，你可以将一张图片移到左边，并使文本环绕图片。你可以将`left`替换为`inline-start` ，就像下面的例子中一样。 +目前为止我们看到的都是逻辑属性的名称。还有一些属性的取值是一些物理值（如 `top`、`right`、`bottom` 和 `left`）。这些值同样拥有逻辑值映射（`block-start`、`inline-end`、`block-end` 和 `inline-start`）。 + +例如，你可以将一张图片移到左边，并使文本环绕图片。你可以将 `left` 替换为 `inline-start`，就像下面的例子中一样。 + +将这个例子的书写模式改为 `vertical-rl`，看看图片会发生什么。将 `inline-start` 改为 `inline-end` 来改变浮动方向： + +```html live-sample___float +
+
+ 星星 +

+ 该盒子使用了逻辑属性。星星图像以 inline-start 形式浮动，在 inline-end 和 + block-end 方向也有内边距。 +

+
+
+``` + +```css live-sample___float +.wrapper { + display: flex; +} + +.box { + margin: 10px; + padding: 0.5em; + border: 1px solid #ccc; + inline-size: 200px; + writing-mode: horizontal-tb; +} + +img { + float: inline-start; + margin-inline-end: 10px; + margin-block-end: 10px; +} +``` + +{{EmbedLiveSample("float", "", "200px")}} + +我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。 -**将这个例子的书写模式改为`vertical-rl`，看看图片会发生什么。将`inline-start`改为`inline-end`来改变图片的移动。** - -{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}} - -之类，我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。 +### 应该使用物理属性还是逻辑属性呢？ -> **备注：** [`float`](/zh-CN/docs/Web/CSS/float)的逻辑值暂时只有 Firefox 和 Firefox for Android 支持，上面的例子可能无法生效。 +逻辑属性和值比物理属性和值更新颖，因此最近才在浏览器中实现。你可以查看 MDN 上的任何属性页面，了解浏览器支持的历史。如果不使用多种书写模式，那么目前可能更愿意使用物理版本。不过，我们预计人们最终会在大多数情况下过渡到逻辑版本，因为一旦开始使用弹性盒和网格等布局方法，逻辑版本就会变得非常有意义。 -### 应该使用物理属性还是逻辑属性呢？ +## 技能测试！ -逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看 MDN 的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。 +本文已经结束，但你还记得最重要的信息吗？在继续学习之前，可以找到一些进一步的测试，以验证是否保留了这些信息——请参阅[技能测试：书写模式和逻辑属性](/zh-CN/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks)。 ## 总结 -本章介绍的概念在 CSS 的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。 +本课讲解的概念在 CSS 中变得越来越重要。了解块级方向和行级方向，以及文字流如何随着书写模式的改变而改变，对今后的工作非常有用。即使你从未使用过水平书写模式以外的其他书写模式，也能帮助你理解 CSS。 -在下一部分，我们将会看一下 CSS 中的溢出。 +在下一篇文章中，我们将仔细研究 CSS 中的[溢出](/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content)。 {{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}} From 4a25f9a800836377c07fa35a116b34e10129aa25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fa=E9=B8=BD?= <43724908+Akarinnnnn@users.noreply.github.com> Date: Tue, 17 Dec 2024 14:17:58 +0800 Subject: [PATCH 10/44] zh-cn: update the translation for Keep-Alive HTTP header (#25097) Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Co-authored-by: A1lo --- .../web/http/headers/keep-alive/index.md | 49 +++++++++++++------ 1 file changed, 33 insertions(+), 16 deletions(-) diff --git a/files/zh-cn/web/http/headers/keep-alive/index.md b/files/zh-cn/web/http/headers/keep-alive/index.md index d6d36bb96da7f7..7aaeff7660f3fb 100644 --- a/files/zh-cn/web/http/headers/keep-alive/index.md +++ b/files/zh-cn/web/http/headers/keep-alive/index.md @@ -1,45 +1,62 @@ --- title: Keep-Alive slug: Web/HTTP/Headers/Keep-Alive +l10n: + sourceCommit: edefa50f18613599b92e2eb3e9556fbde220b360 --- {{HTTPSidebar}} -**`Keep-Alive`** 是一个通用消息头，允许消息发送者暗示连接的状态，还可以用来设置超时时长和最大请求数。 +HTTP **`Keep-Alive`** {{Glossary("request header", "响应标头")}}和{{Glossary("response header", "请求标头")}}允许消息发送者提示连接的状态，还可以用来设置超时时长和最大请求数。 > [!NOTE] -> 需要将 The {{HTTPHeader("Connection")}} 首部的值设置为 "keep-alive" 这个首部才有意义。同时需要注意的是，在 HTTP/2 协议中， {{HTTPHeader("Connection")}} 和 {{HTTPHeader("Keep-Alive")}} 是被忽略的；在其中采用其他机制来进行连接管理。 - -| Header type | {{Glossary("General header")}} | -| ------------------------------------- | ------------------------------ | -| {{Glossary("Forbidden header name")}} | no | +> 要使得 `Keep-Alive` 有效，消息必须包含 {{HTTPHeader("Connection", "Connection: keep-alive")}} 标头。 + +HTTP/1.0 默认在每次请求/响应交互后关闭连接，因此 HTTP/1.0 中的持久连接必须经过明确协商。一些客户端和服务器可能希望与以前的持久连接方式兼容，可以使用 `Connection: keep-alive` 请求标头来实现这一点。连接的其他参数可通过 `Keep-Alive` 标头请求。 + +> **警告：** [HTTP/2](https://httpwg.org/specs/rfc9113.html#ConnectionSpecific) 和 [HTTP/3](https://httpwg.org/specs/rfc9114.html#header-formatting) 禁止使用特定于连接的标头字段，如 {{HTTPHeader("Connection")}} 和 `Keep-Alive`。Chrome 浏览器和 Firefox 浏览器在 HTTP/2 响应中忽略了它们，但 Safari 浏览器符合 HTTP/2 规范要求，不会加载任何包含它们的响应。 + + + + + + + + + + + + +
标头类型 + {{Glossary("Request header", "请求标头")}}、{{Glossary("Response header", "响应标头")}} +
{{Glossary("Forbidden header name", "禁止修改的标头")}}是
## 语法 -```plain -Keep-Alive: parameters +```http +Keep-Alive: ``` ## 指令 -- _parameters_ +- `` - - : 一系列用逗号隔开的参数，每一个参数由一个标识符和一个值构成，并使用等号 (`'='`) 隔开。下述标识符是可用的： + - : 一系列用逗号隔开的参数，每一个参数由一个标识符和一个值构成，并使用等号（`'='`）隔开。下述标识符是可用的： - - `timeout`：指定了一个空闲连接需要保持打开状态的最小时长（以秒为单位）。需要注意的是，如果没有在传输层设置 keep-alive TCP message 的话，大于 TCP 层面的超时设置会被忽略。 - - `max`：在连接关闭之前，在此连接可以发送的请求的最大值。在非管道连接中，除了 0 以外，这个值是被忽略的，因为需要在紧跟着的响应中发送新一次的请求。HTTP 管道连接则可以用它来限制管道的使用。 + - `timeout`：指定了主机允许空闲连接保持打开状态的时长（以秒为单位的整数）。当主机没有接收或发送数据时，就认为连接是空闲的。主机可以保持连接超过 `timeout` 秒，但应该确保至少保持连接 `timeout` 秒。 + - `max`：在此连接关闭之前，可以发送的请求的最大值。在非管道连接中，除了 `0` 以外，这个值是被忽略的，因为需要在紧跟着的响应中发送新一次的请求。HTTP 管道连接则可以用它来限制管道的使用。 ## 示例 -`含有 Keep-Alive` 首部的响应示例： +包含 `Keep-Alive` 标头的响应示例： -```plain +```http HTTP/1.1 200 OK Connection: Keep-Alive Content-Encoding: gzip Content-Type: text/html; charset=utf-8 Date: Thu, 11 Aug 2016 15:23:13 GMT -Keep-Alive: timeout=5, max=1000 +Keep-Alive: timeout=5, max=200 Last-Modified: Mon, 25 Jul 2016 04:32:39 GMT Server: Apache @@ -57,4 +74,4 @@ Server: Apache ## 参见 - {{HTTPHeader("Connection")}} -- [Connection management in HTTP/1.x](/zh-CN/docs/Web/HTTP/Connection_management_in_HTTP_1.x) +- [HTTP/1.x 的连接管理](/zh-CN/docs/Web/HTTP/Connection_management_in_HTTP_1.x) From 66633fa08e51a57fe53b4276962dacd247d563a1 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Tue, 17 Dec 2024 06:44:13 +0000 Subject: [PATCH 11/44] [zh-tw] sync translated content (#25112) Co-authored-by: Allo --- files/zh-tw/_redirects.txt | 1 + files/zh-tw/_wikihistory.json | 8 ++++---- .../glossary/{dos_attack => denial_of_service}/index.md | 6 +++--- 3 files changed, 8 insertions(+), 7 deletions(-) rename files/zh-tw/glossary/{dos_attack => denial_of_service}/index.md (81%) diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt index 2fbc58761f777e..5cfc597fa5529b 100644 --- a/files/zh-tw/_redirects.txt +++ b/files/zh-tw/_redirects.txt @@ -94,6 +94,7 @@ /zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball /zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball /zh-TW/docs/Glossary/404 /zh-TW/docs/Web/HTTP/Status/404 /zh-TW/docs/Glossary/502 /zh-TW/docs/Web/HTTP/Status/502 +/zh-TW/docs/Glossary/DOS_attack /zh-TW/docs/Glossary/Denial_of_Service /zh-TW/docs/Glossary/Empty_element /zh-TW/docs/Glossary/Void_element /zh-TW/docs/Glossary/Routers /zh-TW/docs/Glossary/Router /zh-TW/docs/Glossary/偽元素 /zh-TW/docs/Glossary/Pseudo-element diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json index 45d610933a9f34..51074e0889ac44 100644 --- a/files/zh-tw/_wikihistory.json +++ b/files/zh-tw/_wikihistory.json @@ -282,14 +282,14 @@ "modified": "2019-03-18T21:44:43.965Z", "contributors": ["abler0122"] }, - "Glossary/DOS_attack": { - "modified": "2019-03-18T21:43:00.216Z", - "contributors": ["Rocker"] - }, "Glossary/Data_structure": { "modified": "2019-03-23T22:12:01.136Z", "contributors": ["jackblackevo", "vintif"] }, + "Glossary/Denial_of_Service": { + "modified": "2019-03-18T21:43:00.216Z", + "contributors": ["Rocker"] + }, "Glossary/Developer_Tools": { "modified": "2019-03-18T21:42:38.696Z", "contributors": ["Rocker"] diff --git a/files/zh-tw/glossary/dos_attack/index.md b/files/zh-tw/glossary/denial_of_service/index.md similarity index 81% rename from files/zh-tw/glossary/dos_attack/index.md rename to files/zh-tw/glossary/denial_of_service/index.md index aa65c22f7d01f9..51a1ba260343c3 100644 --- a/files/zh-tw/glossary/dos_attack/index.md +++ b/files/zh-tw/glossary/denial_of_service/index.md @@ -1,11 +1,11 @@ --- -title: DoS 攻擊 -slug: Glossary/DOS_attack +title: 阻斷服務（DoS） +slug: Glossary/Denial_of_Service --- {{GlossarySidebar}} -DoS（阻斷服務）是一種網路攻擊手段，它通過大量的伺服器請求來阻止合法使用{{glossary("server","伺服器")}}資源。 +**阻斷服務**（DoS）是一種網路攻擊手段，它通過大量的伺服器請求來阻止合法使用{{glossary("server","伺服器")}}資源。 電腦的資源有限，例如計算能力或記憶體。當這些資源耗盡，程式可能會凍結或崩潰，導致程式不可用。DoS 攻擊藉由多種手段來耗盡這些資源、使伺服器或網路對合法使用者不可用，或至少使伺服器執行緩慢。 From e15ba63e3a352a0afa5890404c91de0c71c354ad Mon Sep 17 00:00:00 2001 From: mdn-bot <108879845+mdn-bot@users.noreply.github.com> Date: Tue, 17 Dec 2024 01:31:21 +0000 Subject: [PATCH 12/44] zh-cn: sync translated content --- files/zh-cn/_redirects.txt | 1 + files/zh-cn/_wikihistory.json | 8 ++++---- .../glossary/denial_of_service}/index.md | 3 ++- 3 files changed, 7 insertions(+), 5 deletions(-) rename files/zh-cn/{glossary/dos_attack => conflicting/glossary/denial_of_service}/index.md (93%) diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index bc33308fb4cfac..f721626b20e67f 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -517,6 +517,7 @@ /zh-CN/docs/Glossary/404 /zh-CN/docs/Web/HTTP/Status/404 /zh-CN/docs/Glossary/502 /zh-CN/docs/Web/HTTP/Status/502 /zh-CN/docs/Glossary/Bézier_curve /zh-CN/docs/Glossary/Bezier_curve +/zh-CN/docs/Glossary/DOS_attack /zh-CN/docs/conflicting/Glossary/Denial_of_Service /zh-CN/docs/Glossary/Descriptor_(CSS) /zh-CN/docs/Glossary/CSS_Descriptor /zh-CN/docs/Glossary/Empty_element /zh-CN/docs/Glossary/Void_element /zh-CN/docs/Glossary/Grid_Rows /zh-CN/docs/Glossary/Grid_Row diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 719d3c7e18a576..788e8d46d860cf 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -651,10 +651,6 @@ "zsh110123" ] }, - "Glossary/DOS_attack": { - "modified": "2019-09-24T06:37:41.240Z", - "contributors": ["Umryuan", "HardcorePhysician"] - }, "Glossary/Data_structure": { "modified": "2019-03-18T21:30:43.505Z", "contributors": ["fs523577192"] @@ -32526,5 +32522,9 @@ "skyfore", "xgqfrms-GitHub" ] + }, + "conflicting/Glossary/Denial_of_Service": { + "modified": "2019-09-24T06:37:41.240Z", + "contributors": ["Umryuan", "HardcorePhysician"] } } diff --git a/files/zh-cn/glossary/dos_attack/index.md b/files/zh-cn/conflicting/glossary/denial_of_service/index.md similarity index 93% rename from files/zh-cn/glossary/dos_attack/index.md rename to files/zh-cn/conflicting/glossary/denial_of_service/index.md index b93104ccb766f5..1c7a820c37f3e6 100644 --- a/files/zh-cn/glossary/dos_attack/index.md +++ b/files/zh-cn/conflicting/glossary/denial_of_service/index.md @@ -1,6 +1,7 @@ --- title: DoS 攻击 -slug: Glossary/DOS_attack +slug: conflicting/Glossary/Denial_of_Service +original_slug: Glossary/DOS_attack --- {{GlossarySidebar}} From d7030bdd80dfc2c308d78d167b269a64ae2294de Mon Sep 17 00:00:00 2001 From: Allo Date: Tue, 17 Dec 2024 15:02:30 +0800 Subject: [PATCH 13/44] chore(glossary): remove duplacation of "Denial of Service" ref: mdn/content#37215 --- files/zh-cn/_redirects.txt | 2 +- files/zh-cn/_wikihistory.json | 4 --- .../glossary/denial_of_service/index.md | 31 ------------------- .../zh-cn/glossary/denial_of_service/index.md | 27 +++++++++++++--- .../distributed_denial_of_service/index.md | 12 +++---- .../index.md | 2 +- 6 files changed, 31 insertions(+), 47 deletions(-) delete mode 100644 files/zh-cn/conflicting/glossary/denial_of_service/index.md diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index f721626b20e67f..b559f964da7b13 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -517,7 +517,7 @@ /zh-CN/docs/Glossary/404 /zh-CN/docs/Web/HTTP/Status/404 /zh-CN/docs/Glossary/502 /zh-CN/docs/Web/HTTP/Status/502 /zh-CN/docs/Glossary/Bézier_curve /zh-CN/docs/Glossary/Bezier_curve -/zh-CN/docs/Glossary/DOS_attack /zh-CN/docs/conflicting/Glossary/Denial_of_Service +/zh-CN/docs/Glossary/DOS_attack /zh-CN/docs/Glossary/Denial_of_Service /zh-CN/docs/Glossary/Descriptor_(CSS) /zh-CN/docs/Glossary/CSS_Descriptor /zh-CN/docs/Glossary/Empty_element /zh-CN/docs/Glossary/Void_element /zh-CN/docs/Glossary/Grid_Rows /zh-CN/docs/Glossary/Grid_Row diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 788e8d46d860cf..2682ac381dc1a0 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -32522,9 +32522,5 @@ "skyfore", "xgqfrms-GitHub" ] - }, - "conflicting/Glossary/Denial_of_Service": { - "modified": "2019-09-24T06:37:41.240Z", - "contributors": ["Umryuan", "HardcorePhysician"] } } diff --git a/files/zh-cn/conflicting/glossary/denial_of_service/index.md b/files/zh-cn/conflicting/glossary/denial_of_service/index.md deleted file mode 100644 index 1c7a820c37f3e6..00000000000000 --- a/files/zh-cn/conflicting/glossary/denial_of_service/index.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: DoS 攻击 -slug: conflicting/Glossary/Denial_of_Service -original_slug: Glossary/DOS_attack ---- - -{{GlossarySidebar}} - -DoS（拒绝服务攻击，Denial of Service）是一种网络攻击手段，它通过给{{glossary("server","服务器")}}发送大量请求来阻止对资源的合法使用。 - -计算机资源有限，比如算力和内存。当这些资源过载时，程序可能会发生冻结或崩溃，使程序不可用。DoS 攻击结合多种技术来消耗资源，使合法用户无法使用服务器或网络，或者至少让服务器反应迟缓。 - -分布式拒绝服务（Distributed Denial of Service，DDoS）攻击是一种使用大量服务器来耗尽一台被攻击电脑的资源的攻击方式。 - -### DoS 攻击类型 - -DoS 攻击更多的是一种类型而非特定的某种攻击。下面是 DoS 攻击的不完全列表： - -- 带宽攻击 -- 服务请求洪泛 -- SYN 洪泛攻击 -- ICMP 洪泛攻击 -- 点对点攻击 -- 永久 DoS 攻击 -- 应用层洪泛攻击 - -## 参见 - -- 维基百科[拒绝服务攻击](https://zh.wikipedia.org/wiki/阻斷服務攻擊)词条 -- [OWASP 介绍的拒绝服务攻击](https://www.owasp.org/index.php/Denial_of_Service) -- {{Glossary("Distributed Denial of Service","DDoS")}} diff --git a/files/zh-cn/glossary/denial_of_service/index.md b/files/zh-cn/glossary/denial_of_service/index.md index 3db09b1bf820bf..37588a1f416dcb 100644 --- a/files/zh-cn/glossary/denial_of_service/index.md +++ b/files/zh-cn/glossary/denial_of_service/index.md @@ -1,12 +1,31 @@ --- -title: 拒绝服务 +title: 拒绝服务（DoS） slug: Glossary/Denial_of_Service l10n: - sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f + sourceCommit: c13b7a059a543d02e4dbafce42813dad1244dcaa --- {{GlossarySidebar}} -**拒绝服务**（DoS）是一类消耗服务器的可用资源（通常是通过向服务器发送大量请求）的网络攻击。这样一来，服务器会变得非常慢或者无法为合法用户提供服务。 +**拒绝服务**（DoS）是一类消耗{{Glossary("server", "服务器")}}的可用资源（通常是通过向服务器发送大量请求）的网络攻击。这样一来，服务器会变得非常慢或者无法为合法用户提供服务。 -欲了解更多信息，请参见{{glossary("DOS attack", "拒绝服务攻击")}}。 +计算机资源有限，比如算力和内存。当这些资源过载时，程序可能会发生冻结或崩溃，使程序不可用。DoS 攻击结合多种技术来消耗资源，使合法用户无法使用服务器或网络，或者至少让服务器反应迟缓。 + +还有一种{{Glossary("Distributed Denial of Service", "分布式拒绝服务（DDoS）")}}攻击，其使用大量服务器来耗尽一台被攻击电脑的资源。 + +### DoS 攻击类型 + +DoS 攻击更多的是一种类型而非特定的某种攻击。下面是 DoS 攻击的不完全列表： + +- 带宽攻击 +- 服务请求洪泛 +- SYN 洪泛攻击 +- ICMP 洪泛攻击 +- 点对点攻击 +- 永久 DoS 攻击 +- 应用层洪泛攻击 + +## 参见 + +- 维基百科上的[拒绝服务攻击](https://zh.wikipedia.org/wiki/阻斷服務攻擊) +- OWASP 上的[拒绝服务攻击](https://owasp.org/www-community/attacks/Denial_of_Service) diff --git a/files/zh-cn/glossary/distributed_denial_of_service/index.md b/files/zh-cn/glossary/distributed_denial_of_service/index.md index 922b535b303d59..874b3eb9f9664e 100644 --- a/files/zh-cn/glossary/distributed_denial_of_service/index.md +++ b/files/zh-cn/glossary/distributed_denial_of_service/index.md @@ -1,15 +1,15 @@ --- -title: 分布式拒绝服务攻击 +title: 分布式拒绝服务（DDoS） slug: Glossary/Distributed_Denial_of_Service l10n: - sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f + sourceCommit: c13b7a059a543d02e4dbafce42813dad1244dcaa --- {{GlossarySidebar}} -**分布式拒绝服务**（DDoS）是一种攻击，在这种攻击中，许多被破坏的系统被用来攻击一个目标，以淹没服务器资源并阻止合法用户。 +**分布式拒绝服务**（DDoS）是一种 {{Glossary("Denial of Service", "DoS")}} 攻击，其使用许多被感染的系统来攻击单个目标，以耗尽服务器资源并阻止合法用户。 -通常情况下，许多人使用机器人攻击高知名度的 Web {{glossary("server", "服务器")}}，如银行或信用卡支付网关。DDoS 涉及计算机网络和 CPU 资源管理。 +通常情况下，许多人使用机器人攻击高知名度的 Web {{Glossary("server", "服务器")}}，如银行或信用卡支付网关。DDoS 涉及计算机网络和 CPU 资源管理。 在典型的 DDoS 攻击中，攻击者首先利用一个计算机系统的漏洞，使其成为 DDoS 主控。攻击主控者，也被称为僵尸主控者，用恶意软件识别和感染其他脆弱的系统。最终，攻击者指示被控制的机器对指定目标发起攻击。 @@ -24,8 +24,8 @@ l10n: - 无法访问任何网站 - 收到的垃圾邮件数量急剧增加（这种类型的 DoS 攻击被认为是电子邮件炸弹） - 无线或有线互联网连接中断 -- 长期拒绝访问网络或任何互联网服务 +- 长期拒绝 Web 或任何互联网服务的访问 ## 参见 -- 维基百科上的[拒绝服务攻击](https://zh.wikipedia.org/wiki/阻斷服務攻擊) +- 维基百科上的[分布式拒绝服务攻击](https://zh.wikipedia.org/wiki/阻斷服務攻擊) diff --git a/files/zh-cn/web/http/connection_management_in_http_1.x/index.md b/files/zh-cn/web/http/connection_management_in_http_1.x/index.md index 1678303effe9c2..c9648596a8679a 100644 --- a/files/zh-cn/web/http/connection_management_in_http_1.x/index.md +++ b/files/zh-cn/web/http/connection_management_in_http_1.x/index.md @@ -39,7 +39,7 @@ TCP 协议握手本身就是耗费时间的，所以 TCP 可以保持更多的 一个长连接会保持一段时间，重复用于发送一系列请求，节省了新建 TCP 连接握手的时间，还可以利用 TCP 的性能增强能力。当然这个连接也不会一直保留着：连接在空闲一段时间后会被关闭（服务器可以使用 {{HTTPHeader("Keep-Alive")}} 协议头来指定一个最小的连接保持时间）。 -长连接也还是有缺点的；就算是在空闲状态，它还是会消耗服务器资源，而且在重负载时，还有可能遭受 {{glossary("DoS attack", "DoS 攻击")}}。这种场景下，可以使用非长连接，即尽快关闭那些空闲的连接，也能对性能有所提升。 +长连接也还是有缺点的；就算是在空闲状态，它还是会消耗服务器资源，而且在重负载时，还有可能遭受 {{Glossary("Denial of Service", "DoS 攻击")}}。这种场景下，可以使用非长连接，即尽快关闭那些空闲的连接，也能对性能有所提升。 HTTP/1.0 里默认并不使用长连接。把 {{HTTPHeader("Connection")}} 设置成 `close` 以外的其他参数都可以让其保持长连接，通常会设置为 `retry-after`。 From 6e106193fe4bdf6f730621afe77332732b7a119a Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Tue, 17 Dec 2024 15:44:24 +0800 Subject: [PATCH 14/44] zh-CN: create `management.getPermissionWarningsById()` (#24943) Co-authored-by: A1lo --- .../getpermissionwarningsbyid/index.md | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/management/getpermissionwarningsbyid/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/management/getpermissionwarningsbyid/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/management/getpermissionwarningsbyid/index.md new file mode 100644 index 00000000000000..fdf7f88d80afe8 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/management/getpermissionwarningsbyid/index.md @@ -0,0 +1,88 @@ +--- +title: management.getPermissionWarningsById() +slug: Mozilla/Add-ons/WebExtensions/API/management/getPermissionWarningsById +l10n: + sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262 +--- + +{{AddonSidebar}} + +当用户安装或升级附加组件时，浏览器可能会警告用户有关附加组件请求的任何特别强大的[权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。并非所有权限都会导致警告，而且此行为在浏览器之间并不标准化。 + +给定附加组件的 ID，此函数将以字符串数组形式返回其权限警告。 + +此 API 需要“management”[API 权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let gettingWarnings = browser.management.getPermissionWarningsById( + id // 字符串 +) +``` + +### 参数 + +- `id` + - : `string`，要获取其权限警告的附加组件的 ID。 + +### 返回值 + +[`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，将兑现为一个字符串数组，其中的字符串包含权限警告的文本。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +记录名为“my-add-on”的附加组件的权限警告信息： + +```js +let id = "my-add-on"; + +function gotWarnings(warnings) { + for (const warning of warnings) { + console.log(warning); + } +} + +browser.management.getPermissionWarningsById(id).then(gotWarnings); +``` + +{{WebExtExamples}} + +> [!NOTE] +> 该 API 基于 Chromium 的 [`chrome.management`](https://developer.chrome.google.cn/docs/extensions/reference/api/management#method-getPermissionWarningsById) API。本文衍生自 Chromium 代码中的 [`management.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/management.json)。 + + From 7775c7610f01bebf19f08c7a7f43e5d343e36f45 Mon Sep 17 00:00:00 2001 From: Andi Pieper Date: Tue, 17 Dec 2024 10:14:18 +0100 Subject: [PATCH 15/44] [ru]: auto-fix links (#25035) * auto-fix links for ru --- .../index.md | 6 +- .../3d_on_the_web/glsl_shaders/index.md | 4 +- .../games/techniques/async_scripts/index.md | 2 +- .../techniques/controls_gamepad_api/index.md | 2 +- files/ru/games/tools/index.md | 4 +- .../collision_detection/index.md | 2 +- .../extra_lives/index.md | 2 +- .../game_over/index.md | 2 +- .../2d_breakout_game_phaser/index.md | 26 +- .../player_paddle_and_controls/index.md | 2 +- .../bounce_off_the_walls/index.md | 6 +- .../build_the_brick_field/index.md | 4 +- .../collision_detection/index.md | 4 +- .../create_the_canvas_and_draw_on_it/index.md | 4 +- .../finishing_up/index.md | 6 +- .../game_over/index.md | 4 +- .../2d_breakout_game_pure_javascript/index.md | 26 +- .../mouse_controls/index.md | 6 +- .../move_the_ball/index.md | 4 +- .../paddle_and_keyboard_controls/index.md | 4 +- .../track_the_score_and_win/index.md | 4 +- files/ru/games/tutorials/index.md | 8 +- files/ru/glossary/accessibility/index.md | 6 +- files/ru/glossary/accessibility_tree/index.md | 2 +- .../ru/glossary/alignment_container/index.md | 2 +- files/ru/glossary/apple_safari/index.md | 6 +- files/ru/glossary/arpa/index.md | 2 +- files/ru/glossary/atag/index.md | 4 +- files/ru/glossary/base64/index.md | 20 +- files/ru/glossary/baseline/index.md | 2 +- files/ru/glossary/bigint/index.md | 2 +- .../ru/glossary/block-level_content/index.md | 2 +- files/ru/glossary/block/css/index.md | 2 +- files/ru/glossary/browser/index.md | 8 +- files/ru/glossary/callback_function/index.md | 2 +- files/ru/glossary/canvas/index.md | 6 +- files/ru/glossary/class/index.md | 2 +- files/ru/glossary/codec/index.md | 2 +- files/ru/glossary/compile/index.md | 2 +- files/ru/glossary/constructor/index.md | 2 +- files/ru/glossary/cors/index.md | 2 +- files/ru/glossary/csrf/index.md | 2 +- files/ru/glossary/css/index.md | 4 +- files/ru/glossary/css_preprocessor/index.md | 4 +- files/ru/glossary/css_selector/index.md | 8 +- files/ru/glossary/developer_tools/index.md | 2 +- files/ru/glossary/dns/index.md | 2 +- files/ru/glossary/doctype/index.md | 4 +- files/ru/glossary/dom/index.md | 4 +- files/ru/glossary/domain_name/index.md | 2 +- files/ru/glossary/ecma/index.md | 4 +- files/ru/glossary/ecmascript/index.md | 2 +- files/ru/glossary/element/index.md | 2 +- files/ru/glossary/entity_header/index.md | 2 +- files/ru/glossary/falsy/index.md | 2 +- .../glossary/first_contentful_paint/index.md | 2 +- files/ru/glossary/first_input_delay/index.md | 4 +- files/ru/glossary/first_paint/index.md | 4 +- files/ru/glossary/flex_item/index.md | 2 +- files/ru/glossary/grid_column/index.md | 6 +- files/ru/glossary/html/index.md | 2 +- files/ru/glossary/iife/index.md | 2 +- files/ru/glossary/isp/index.md | 2 +- files/ru/glossary/javascript/index.md | 12 +- files/ru/glossary/main_axis/index.md | 6 +- files/ru/glossary/method/index.md | 4 +- files/ru/glossary/mime_type/index.md | 4 +- files/ru/glossary/number/index.md | 2 +- files/ru/glossary/object/index.md | 2 +- files/ru/glossary/oop/index.md | 2 +- files/ru/glossary/plugin/index.md | 2 +- files/ru/glossary/regular_expression/index.md | 2 +- files/ru/glossary/request_header/index.md | 2 +- .../glossary/responsive_web_design/index.md | 4 +- files/ru/glossary/round_trip_time/index.md | 2 +- files/ru/glossary/sdp/index.md | 2 +- files/ru/glossary/semantics/index.md | 4 +- files/ru/glossary/string/index.md | 2 +- files/ru/glossary/svg/index.md | 4 +- files/ru/glossary/tag/index.md | 2 +- files/ru/glossary/time_to_first_byte/index.md | 2 +- .../ru/glossary/time_to_interactive/index.md | 2 +- files/ru/glossary/user_agent/index.md | 2 +- files/ru/glossary/w3c/index.md | 2 +- files/ru/glossary/wai/index.md | 2 +- files/ru/glossary/websockets/index.md | 2 +- files/ru/glossary/whitespace/index.md | 2 +- files/ru/glossary/world_wide_web/index.md | 4 +- files/ru/glossary/xhtml/index.md | 14 +- .../accessibility/css_and_javascript/index.md | 16 +- .../what_is_accessibility/index.md | 4 +- .../design_for_all_types_of_users/index.md | 10 +- .../thinking_before_coding/index.md | 2 +- files/ru/learn/common_questions/index.md | 42 +- .../how_much_does_it_cost/index.md | 14 +- .../set_up_a_local_testing_server/index.md | 8 +- .../upload_files_to_a_web_server/index.md | 10 +- .../what_are_browser_developer_tools/index.md | 6 +- .../how_does_the_internet_work/index.md | 12 +- .../index.md | 12 +- .../what_are_hyperlinks/index.md | 12 +- .../what_is_a_domain_name/index.md | 12 +- .../web_mechanics/what_is_a_url/index.md | 12 +- .../what_is_a_web_server/index.md | 18 +- .../advanced_styling_effects/index.md | 10 +- .../backgrounds_and_borders/index.md | 6 +- .../cascade_and_inheritance/index.md | 8 +- .../building_blocks/debugging_css/index.md | 24 +- .../index.md | 10 +- .../images_media_form_elements/index.md | 6 +- .../overflowing_content/index.md | 6 +- .../selectors/combinators/index.md | 6 +- .../css/building_blocks/selectors/index.md | 26 +- .../index.md | 8 +- .../sizing_items_in_css/index.md | 8 +- .../building_blocks/styling_tables/index.md | 2 +- .../building_blocks/the_box_model/index.md | 4 +- .../building_blocks/values_and_units/index.md | 8 +- files/ru/learn/css/css_layout/floats/index.md | 10 +- files/ru/learn/css/css_layout/grids/index.md | 16 +- .../css/css_layout/introduction/index.md | 12 +- .../multiple-column_layout/index.md | 8 +- .../learn/css/css_layout/normal_flow/index.md | 6 +- .../learn/css/css_layout/positioning/index.md | 26 +- .../practical_positioning_examples/index.md | 12 +- .../css/css_layout/responsive_design/index.md | 20 +- .../css/first_steps/how_css_works/index.md | 10 +- files/ru/learn/css/first_steps/index.md | 2 +- .../css/first_steps/what_is_css/index.md | 6 +- files/ru/learn/css/howto/css_faq/index.md | 10 +- files/ru/learn/css/howto/index.md | 60 +- files/ru/learn/css/index.md | 2 +- .../css/styling_text/fundamentals/index.md | 26 +- .../css/styling_text/styling_links/index.md | 2 +- .../css/styling_text/styling_lists/index.md | 2 +- .../learn/css/styling_text/web_fonts/index.md | 14 +- .../ru/learn/forms/styling_web_forms/index.md | 2 +- .../learn/forms/user_input_methods/index.md | 2 +- .../css_basics/index.md | 2 +- .../dealing_with_files/index.md | 2 +- .../how_the_web_works/index.md | 2 +- .../html_basics/index.md | 8 +- .../getting_started_with_the_web/index.md | 4 +- .../installing_basic_software/index.md | 12 +- .../javascript_basics/index.md | 8 +- .../the_web_and_web_standards/index.md | 4 +- .../what_will_your_website_look_like/index.md | 4 +- .../author_fast-loading_html_pages/index.md | 6 +- files/ru/learn/html/howto/index.md | 38 +- .../html/howto/use_data_attributes/index.md | 2 +- files/ru/learn/html/index.md | 8 +- .../debugging_html/index.md | 2 +- .../document_and_website_structure/index.md | 10 +- .../getting_started/index.md | 8 +- .../the_head_metadata_in_html/index.md | 4 +- .../index.md | 10 +- .../index.md | 2 +- .../mozilla_splash_page/index.md | 2 +- .../other_embedding_technologies/index.md | 12 +- .../responsive_images/index.md | 14 +- .../video_and_audio_content/index.md | 24 +- .../asynchronous/introducing/index.md | 4 +- .../javascript/asynchronous/promises/index.md | 6 +- .../build_your_own_function/index.md | 4 +- .../building_blocks/conditionals/index.md | 26 +- .../building_blocks/events/index.md | 40 +- .../building_blocks/functions/index.md | 6 +- .../building_blocks/looping_code/index.md | 20 +- .../building_blocks/return_values/index.md | 6 +- .../client-side_storage/index.md | 12 +- .../fetching_data/index.md | 6 +- .../introduction/index.md | 6 +- .../manipulating_documents/index.md | 8 +- .../third_party_apis/index.md | 12 +- .../first_steps/a_first_splash/index.md | 12 +- .../javascript/first_steps/arrays/index.md | 12 +- .../javascript/first_steps/math/index.md | 10 +- .../javascript/first_steps/strings/index.md | 2 +- .../useful_string_methods/index.md | 2 +- .../javascript/first_steps/variables/index.md | 4 +- .../first_steps/what_is_javascript/index.md | 10 +- .../first_steps/what_went_wrong/index.md | 6 +- files/ru/learn/javascript/howto/index.md | 140 +-- files/ru/learn/javascript/index.md | 6 +- .../learn/javascript/objects/basics/index.md | 6 +- .../objects/classes_in_javascript/index.md | 8 +- .../ru/learn/javascript/objects/json/index.md | 16 +- .../objects/object_building_practice/index.md | 10 +- .../objects/object_prototypes/index.md | 4 +- .../apache_configuration_htaccess/index.md | 2 +- .../server-side/django/deployment/index.md | 4 +- .../django/development_environment/index.md | 2 +- .../django/django_assessment_blog/index.md | 4 +- .../learn/server-side/django/forms/index.md | 14 +- .../server-side/django/generic_views/index.md | 4 +- .../server-side/django/home_page/index.md | 2 +- files/ru/learn/server-side/django/index.md | 2 +- .../django/web_application_security/index.md | 2 +- .../displaying_data/book_list_page/index.md | 2 +- .../genre_detail_page/index.md | 2 +- .../express_nodejs/displaying_data/index.md | 2 +- .../locallibrary_base_template/index.md | 2 +- .../server-side/express_nodejs/forms/index.md | 4 +- .../learn/server-side/express_nodejs/index.md | 4 +- .../express_nodejs/mongoose/index.md | 16 +- .../express_nodejs/routes/index.md | 6 +- .../express_nodejs/skeleton_website/index.md | 2 +- .../client-server_overview/index.md | 6 +- .../ru/learn/server-side/first_steps/index.md | 6 +- .../first_steps/introduction/index.md | 4 +- .../first_steps/website_security/index.md | 2 +- files/ru/learn/server-side/index.md | 6 +- .../feature_detection/index.md | 6 +- .../introduction/index.md | 6 +- files/ru/mdn/at_ten/index.md | 8 +- .../contributing/getting_started/index.md | 8 +- files/ru/mdn/community/index.md | 2 +- files/ru/mdn/community/issues/index.md | 2 +- .../community/open_source_etiquette/index.md | 4 +- files/ru/mdn/index.md | 4 +- .../howto/creating_moving_deleting/index.md | 18 +- .../index.md | 8 +- files/ru/mdn/writing_guidelines/index.md | 26 +- .../page_structures/live_samples/index.md | 6 +- files/ru/mozilla/add-ons/index.md | 250 ++--- .../anatomy_of_a_webextension/index.md | 14 +- .../webextensions/api/cookies/index.md | 4 +- .../webextensions/api/downloads/index.md | 2 +- .../add-ons/webextensions/api/index.md | 2 +- .../webextensions/api/webrequest/index.md | 6 +- .../chrome_incompatibilities/index.md | 26 +- .../webextensions/content_scripts/index.md | 18 +- .../content_security_policy/index.md | 2 +- .../add-ons/webextensions/examples/index.md | 6 +- .../ru/mozilla/add-ons/webextensions/index.md | 44 +- .../intercept_http_requests/index.md | 8 +- .../internationalization/index.md | 20 +- .../manifest.json/background/index.md | 2 +- .../content_security_policy/index.md | 4 +- .../manifest.json/description/index.md | 2 +- .../webextensions/manifest.json/name/index.md | 2 +- .../manifest.json/permissions/index.md | 12 +- .../webextensions/modify_a_web_page/index.md | 14 +- .../context_menu_items/index.md | 2 +- .../webextensions/user_interface/index.md | 6 +- .../user_interface/sidebars/index.md | 2 +- .../user_interface/toolbar_button/index.md | 6 +- .../what_are_webextensions/index.md | 6 +- files/ru/mozilla/firefox/index.md | 8 +- .../1.5/using_firefox_1.5_caching/index.md | 4 +- files/ru/mozilla/firefox/releases/28/index.md | 2 +- files/ru/mozilla/firefox/releases/29/index.md | 18 +- .../ru/mozilla/firefox/releases/3.5/index.md | 112 +-- files/ru/mozilla/firefox/releases/3/index.md | 86 +- files/ru/mozilla/firefox/releases/31/index.md | 28 +- files/ru/mozilla/firefox/releases/32/index.md | 14 +- files/ru/mozilla/firefox/releases/43/index.md | 20 +- files/ru/mozilla/firefox/releases/53/index.md | 14 +- files/ru/mozilla/firefox/releases/62/index.md | 22 +- files/ru/mozilla/firefox/releases/63/index.md | 28 +- files/ru/mozilla/firefox/releases/64/index.md | 26 +- files/ru/mozilla/firefox/releases/65/index.md | 14 +- files/ru/mozilla/firefox/releases/68/index.md | 28 +- .../aria/aria_techniques/index.md | 56 +- files/ru/web/accessibility/aria/index.md | 28 +- files/ru/web/accessibility/index.md | 6 +- .../index.md | 2 +- .../mobile_accessibility_checklist/index.md | 12 +- .../understanding_wcag/keyboard/index.md | 14 +- .../perceivable/color_contrast/index.md | 6 +- .../ru/web/api/abortcontroller/abort/index.md | 4 +- .../abortcontroller/abortcontroller/index.md | 2 +- files/ru/web/api/abortcontroller/index.md | 4 +- .../web/api/abortcontroller/signal/index.md | 2 +- files/ru/web/api/abortsignal/index.md | 2 +- .../getbytefrequencydata/index.md | 2 +- files/ru/web/api/analysernode/index.md | 2 +- files/ru/web/api/animationevent/index.md | 2 +- .../createmediaelementsource/index.md | 4 +- files/ru/web/api/audiocontext/index.md | 2 +- .../api/audioparam/setvalueattime/index.md | 2 +- .../baseaudiocontext/createpanner/index.md | 2 +- files/ru/web/api/beacon_api/index.md | 4 +- files/ru/web/api/beforeunloadevent/index.md | 8 +- files/ru/web/api/blob/index.md | 2 +- files/ru/web/api/broadcastchannel/index.md | 4 +- .../api/broadcastchannel/postmessage/index.md | 2 +- files/ru/web/api/cache/add/index.md | 2 +- files/ru/web/api/cache/addall/index.md | 2 +- files/ru/web/api/cache/delete/index.md | 2 +- files/ru/web/api/cache/index.md | 6 +- files/ru/web/api/cache/keys/index.md | 2 +- files/ru/web/api/cache/match/index.md | 2 +- files/ru/web/api/cache/matchall/index.md | 2 +- files/ru/web/api/cachestorage/index.md | 2 +- files/ru/web/api/cachestorage/match/index.md | 2 +- files/ru/web/api/cachestorage/open/index.md | 2 +- files/ru/web/api/canvas_api/index.md | 22 +- .../tutorial/advanced_animations/index.md | 4 +- .../canvas_api/tutorial/basic_usage/index.md | 6 +- .../canvas_api/tutorial/compositing/index.md | 2 +- .../tutorial/drawing_shapes/index.md | 8 +- .../canvas_api/tutorial/drawing_text/index.md | 4 +- files/ru/web/api/canvas_api/tutorial/index.md | 32 +- .../tutorial/optimizing_canvas/index.md | 4 +- .../pixel_manipulation_with_canvas/index.md | 2 +- .../tutorial/transformations/index.md | 2 +- .../canvas_api/tutorial/using_images/index.md | 2 +- .../canvascapturemediastreamtrack/index.md | 2 +- .../web/api/canvasrenderingcontext2d/index.md | 2 +- .../miterlimit/index.md | 2 +- .../canvasrenderingcontext2d/restore/index.md | 2 +- files/ru/web/api/characterdata/index.md | 2 +- files/ru/web/api/clients/index.md | 6 +- files/ru/web/api/clipboardevent/index.md | 6 +- .../ru/web/api/console/assert_static/index.md | 4 +- .../ru/web/api/console/clear_static/index.md | 2 +- .../ru/web/api/console/debug_static/index.md | 2 +- .../ru/web/api/console/dirxml_static/index.md | 2 +- .../ru/web/api/console/error_static/index.md | 6 +- files/ru/web/api/console/index.md | 40 +- files/ru/web/api/console/info_static/index.md | 4 +- files/ru/web/api/console/log_static/index.md | 10 +- files/ru/web/api/console/time_static/index.md | 4 +- .../web/api/console/timeend_static/index.md | 6 +- .../web/api/console/timelog_static/index.md | 4 +- .../ru/web/api/console/trace_static/index.md | 6 +- files/ru/web/api/console/warn_static/index.md | 6 +- files/ru/web/api/console_api/index.md | 10 +- .../api/credential_management_api/index.md | 2 +- files/ru/web/api/css_object_model/index.md | 4 +- .../managing_screen_orientation/index.md | 16 +- .../api/customelementregistry/define/index.md | 4 +- .../web/api/document/activeelement/index.md | 2 +- files/ru/web/api/document/alinkcolor/index.md | 4 +- files/ru/web/api/document/bgcolor/index.md | 2 +- files/ru/web/api/document/close/index.md | 2 +- files/ru/web/api/document/compatmode/index.md | 4 +- .../ru/web/api/document/contenttype/index.md | 2 +- files/ru/web/api/document/cookie/index.md | 22 +- .../web/api/document/createcomment/index.md | 2 +- .../web/api/document/createelement/index.md | 6 +- .../api/document/createtreewalker/index.md | 2 +- .../web/api/document/documentelement/index.md | 4 +- .../document/domcontentloaded_event/index.md | 2 +- files/ru/web/api/document/forms/index.md | 2 +- .../web/api/document/getelementbyid/index.md | 4 +- files/ru/web/api/document/hasfocus/index.md | 2 +- files/ru/web/api/document/importnode/index.md | 2 +- files/ru/web/api/document/index.md | 12 +- .../web/api/document/queryselector/index.md | 6 +- .../api/document/queryselectorall/index.md | 2 +- files/ru/web/api/document/readystate/index.md | 2 +- .../document/readystatechange_event/index.md | 10 +- files/ru/web/api/document/referrer/index.md | 4 +- files/ru/web/api/document/write/index.md | 6 +- files/ru/web/api/document/writeln/index.md | 6 +- .../document_object_model/examples/index.md | 2 +- .../ru/web/api/document_object_model/index.md | 4 +- .../introduction/index.md | 14 +- .../index.md | 22 +- files/ru/web/api/documentfragment/index.md | 2 +- files/ru/web/api/domhighrestimestamp/index.md | 2 +- .../createhtmldocument/index.md | 2 +- files/ru/web/api/domimplementation/index.md | 2 +- files/ru/web/api/domparser/index.md | 12 +- files/ru/web/api/domstringlist/index.md | 2 +- .../element/animationcancel_event/index.md | 12 +- .../api/element/animationend_event/index.md | 8 +- files/ru/web/api/element/attributes/index.md | 2 +- files/ru/web/api/element/blur_event/index.md | 8 +- files/ru/web/api/element/classname/index.md | 2 +- files/ru/web/api/element/click_event/index.md | 4 +- .../ru/web/api/element/clientheight/index.md | 2 +- files/ru/web/api/element/closest/index.md | 2 +- .../api/element/contextmenu_event/index.md | 2 +- .../ru/web/api/element/focusin_event/index.md | 4 +- .../web/api/element/focusout_event/index.md | 4 +- .../api/element/getelementsbytagname/index.md | 2 +- files/ru/web/api/element/index.md | 6 +- files/ru/web/api/element/innerhtml/index.md | 4 +- files/ru/web/api/element/input_event/index.md | 8 +- .../api/element/insertadjacenthtml/index.md | 2 +- .../ru/web/api/element/keydown_event/index.md | 4 +- .../web/api/element/keypress_event/index.md | 10 +- files/ru/web/api/element/keyup_event/index.md | 4 +- files/ru/web/api/element/localname/index.md | 6 +- .../web/api/element/mousedown_event/index.md | 60 +- .../web/api/element/mouseenter_event/index.md | 2 +- .../web/api/element/mouseleave_event/index.md | 20 +- .../ru/web/api/element/namespaceuri/index.md | 8 +- files/ru/web/api/element/outerhtml/index.md | 2 +- .../api/element/pointerover_event/index.md | 22 +- files/ru/web/api/element/prefix/index.md | 2 +- .../ru/web/api/element/queryselector/index.md | 2 +- .../web/api/element/queryselectorall/index.md | 8 +- .../api/element/requestpointerlock/index.md | 2 +- .../ru/web/api/element/scrollheight/index.md | 4 +- files/ru/web/api/element/shadowroot/index.md | 2 +- files/ru/web/api/element/slot/index.md | 2 +- files/ru/web/api/element/tagname/index.md | 6 +- .../api/element/transitionend_event/index.md | 4 +- files/ru/web/api/event/currenttarget/index.md | 2 +- files/ru/web/api/event/eventphase/index.md | 4 +- files/ru/web/api/event/index.md | 10 +- files/ru/web/api/event/initevent/index.md | 2 +- .../ru/web/api/event/preventdefault/index.md | 6 +- .../ru/web/api/event/stoppropagation/index.md | 4 +- files/ru/web/api/event/target/index.md | 2 +- .../api/eventtarget/dispatchevent/index.md | 6 +- files/ru/web/api/eventtarget/index.md | 4 +- files/ru/web/api/fetch_api/index.md | 8 +- .../ru/web/api/fetch_api/using_fetch/index.md | 4 +- files/ru/web/api/file/index.md | 4 +- files/ru/web/api/file/name/index.md | 2 +- .../file_and_directory_entries_api/index.md | 2 +- .../introduction/index.md | 12 +- .../index.md | 12 +- files/ru/web/api/filelist/index.md | 12 +- .../web/api/filereader/abort_event/index.md | 2 +- .../ru/web/api/filereader/filereader/index.md | 4 +- files/ru/web/api/filereader/index.md | 12 +- .../api/filereader/readasarraybuffer/index.md | 2 +- .../filereader/readasbinarystring/index.md | 2 +- .../ru/web/api/filereader/readastext/index.md | 2 +- files/ru/web/api/formdata/append/index.md | 4 +- files/ru/web/api/formdata/delete/index.md | 4 +- files/ru/web/api/formdata/entries/index.md | 4 +- files/ru/web/api/formdata/get/index.md | 4 +- files/ru/web/api/formdata/getall/index.md | 4 +- files/ru/web/api/formdata/has/index.md | 4 +- files/ru/web/api/formdata/index.md | 6 +- files/ru/web/api/formdata/keys/index.md | 4 +- files/ru/web/api/formdata/set/index.md | 8 +- files/ru/web/api/formdata/values/index.md | 4 +- files/ru/web/api/gamepad/axes/index.md | 2 +- files/ru/web/api/gamepad/buttons/index.md | 2 +- files/ru/web/api/gamepad/connected/index.md | 2 +- files/ru/web/api/gamepad/id/index.md | 2 +- files/ru/web/api/gamepad/index.md | 2 +- files/ru/web/api/gamepad/index/index.md | 2 +- files/ru/web/api/gamepad/mapping/index.md | 2 +- files/ru/web/api/gamepad/timestamp/index.md | 2 +- files/ru/web/api/gamepad_api/index.md | 2 +- files/ru/web/api/gamepadbutton/index.md | 2 +- .../ru/web/api/gamepadbutton/pressed/index.md | 2 +- files/ru/web/api/gamepadbutton/value/index.md | 2 +- .../ru/web/api/gamepadevent/gamepad/index.md | 6 +- files/ru/web/api/gamepadevent/index.md | 6 +- .../geolocation/getcurrentposition/index.md | 2 +- files/ru/web/api/geolocation_api/index.md | 4 +- .../using_the_geolocation_api/index.md | 2 +- .../web/api/geolocationcoordinates/index.md | 4 +- files/ru/web/api/geolocationposition/index.md | 2 +- .../web/api/geolocationpositionerror/index.md | 2 +- files/ru/web/api/gyroscope/index.md | 2 +- files/ru/web/api/history/index.md | 4 +- .../ru/web/api/history/replacestate/index.md | 2 +- .../working_with_the_history_api/index.md | 4 +- .../drag_operations/index.md | 70 +- files/ru/web/api/htmlbodyelement/index.md | 18 +- files/ru/web/api/htmlcanvaselement/index.md | 2 +- files/ru/web/api/htmldocument/index.md | 4 +- .../web/api/htmlelement/change_event/index.md | 6 +- .../api/htmlelement/dragstart_event/index.md | 6 +- .../web/api/htmlelement/error_event/index.md | 18 +- files/ru/web/api/htmlelement/index.md | 10 +- .../web/api/htmlelement/offsetwidth/index.md | 2 +- .../ru/web/api/htmlelement/outertext/index.md | 2 +- .../htmlformelement/reportvalidity/index.md | 4 +- .../web/api/htmlformelement/submit/index.md | 4 +- files/ru/web/api/htmlimageelement/index.md | 2 +- .../htmlinputelement/invalid_event/index.md | 4 +- files/ru/web/api/htmllinkelement/index.md | 2 +- files/ru/web/api/htmlmediaelement/index.md | 6 +- .../htmlmediaelement/seeking_event/index.md | 38 +- files/ru/web/api/htmlscriptelement/index.md | 6 +- .../setcustomvalidity/index.md | 2 +- files/ru/web/api/htmlslotelement/index.md | 6 +- files/ru/web/api/htmltableelement/index.md | 46 +- .../api/htmltableelement/insertrow/index.md | 2 +- files/ru/web/api/htmlvideoelement/index.md | 4 +- files/ru/web/api/indexeddb_api/index.md | 26 +- .../indexeddb_api/using_indexeddb/index.md | 2 +- files/ru/web/api/keyboardevent/index.md | 4 +- files/ru/web/api/keyboardevent/key/index.md | 30 +- .../mediadevices/enumeratedevices/index.md | 10 +- .../api/mediadevices/getusermedia/index.md | 10 +- files/ru/web/api/mediadevices/index.md | 4 +- .../dataavailable_event/index.md | 4 +- files/ru/web/api/mediarecorder/index.md | 8 +- .../api/mediarecorder/mediarecorder/index.md | 6 +- .../api/mediarecorder/requestdata/index.md | 8 +- files/ru/web/api/mediarecorder/start/index.md | 8 +- files/ru/web/api/mediarecorder/state/index.md | 6 +- files/ru/web/api/mediastream/index.md | 8 +- .../recording_a_media_element/index.md | 2 +- .../index.md | 2 +- files/ru/web/api/mediastreamtrack/index.md | 14 +- .../echocancellation/index.md | 4 +- files/ru/web/api/mouseevent/button/index.md | 2 +- files/ru/web/api/mouseevent/buttons/index.md | 2 +- files/ru/web/api/mouseevent/index.md | 6 +- files/ru/web/api/mouseevent/screenx/index.md | 2 +- files/ru/web/api/mutationobserver/index.md | 8 +- .../ru/web/api/navigator/connection/index.md | 4 +- .../ru/web/api/navigator/geolocation/index.md | 2 +- .../ru/web/api/navigator/getgamepads/index.md | 2 +- .../web/api/navigator/getusermedia/index.md | 8 +- .../web/api/navigator/mediadevices/index.md | 2 +- .../registerprotocolhandler/index.md | 6 +- .../ru/web/api/navigator/sendbeacon/index.md | 4 +- .../web/api/navigator/serviceworker/index.md | 4 +- files/ru/web/api/navigator/vibrate/index.md | 4 +- .../web/api/network_information_api/index.md | 2 +- files/ru/web/api/networkinformation/index.md | 4 +- files/ru/web/api/node/appendchild/index.md | 4 +- files/ru/web/api/node/baseuri/index.md | 10 +- files/ru/web/api/node/clonenode/index.md | 2 +- files/ru/web/api/node/haschildnodes/index.md | 2 +- files/ru/web/api/node/index.md | 6 +- files/ru/web/api/node/insertbefore/index.md | 4 +- .../web/api/node/lookupnamespaceuri/index.md | 4 +- files/ru/web/api/node/lookupprefix/index.md | 2 +- files/ru/web/api/node/nextsibling/index.md | 8 +- files/ru/web/api/node/nodename/index.md | 2 +- files/ru/web/api/node/nodetype/index.md | 4 +- files/ru/web/api/node/nodevalue/index.md | 2 +- files/ru/web/api/node/normalize/index.md | 2 +- files/ru/web/api/node/ownerdocument/index.md | 4 +- files/ru/web/api/node/parentnode/index.md | 2 +- .../ru/web/api/node/previoussibling/index.md | 12 +- files/ru/web/api/node/textcontent/index.md | 6 +- files/ru/web/api/nodelist/index.md | 4 +- files/ru/web/api/notification/index.md | 6 +- files/ru/web/api/notifications_api/index.md | 2 +- files/ru/web/api/page_visibility_api/index.md | 14 +- files/ru/web/api/pannernode/index.md | 2 +- files/ru/web/api/paymentrequest/index.md | 2 +- files/ru/web/api/performance/index.md | 4 +- files/ru/web/api/performance/now/index.md | 2 +- files/ru/web/api/pointer_events/index.md | 30 +- files/ru/web/api/pointer_lock_api/index.md | 12 +- files/ru/web/api/push_api/index.md | 4 +- files/ru/web/api/pushmanager/index.md | 2 +- .../ru/web/api/pushmanager/subscribe/index.md | 2 +- files/ru/web/api/range/collapsed/index.md | 2 +- .../api/range/getboundingclientrect/index.md | 2 +- files/ru/web/api/range/index.md | 2 +- .../web/api/range/surroundcontents/index.md | 2 +- files/ru/web/api/request/index.md | 4 +- files/ru/web/api/request/mode/index.md | 8 +- files/ru/web/api/response/index.md | 6 +- files/ru/web/api/response/response/index.md | 6 +- .../cantrickleicecandidates/index.md | 2 +- .../connectionstate/index.md | 6 +- .../currentlocaldescription/index.md | 2 +- .../currentremotedescription/index.md | 2 +- files/ru/web/api/rtcpeerconnection/index.md | 4 +- .../rtcpeerconnection/index.md | 4 +- .../using_screen_capture/index.md | 12 +- files/ru/web/api/service_worker_api/index.md | 10 +- files/ru/web/api/serviceworker/index.md | 4 +- .../web/api/serviceworkercontainer/index.md | 8 +- .../api/serviceworkerregistration/index.md | 6 +- .../shownotification/index.md | 4 +- .../serviceworkerregistration/update/index.md | 4 +- files/ru/web/api/sharedworker/index.md | 6 +- files/ru/web/api/speechgrammar/index.md | 2 +- files/ru/web/api/storage_access_api/index.md | 2 +- .../index.md | 4 +- files/ru/web/api/streams_api/index.md | 16 +- files/ru/web/api/svgaelement/target/index.md | 2 +- files/ru/web/api/text/index.md | 2 +- .../touch_events/using_touch_events/index.md | 32 +- files/ru/web/api/touchevent/altkey/index.md | 2 +- .../api/touchevent/changedtouches/index.md | 2 +- files/ru/web/api/touchevent/index.md | 12 +- files/ru/web/api/touchevent/touches/index.md | 6 +- .../keyboard_event_key_values/index.md | 12 +- .../api/url/createobjecturl_static/index.md | 4 +- files/ru/web/api/url/hash/index.md | 2 +- files/ru/web/api/url/index.md | 2 +- files/ru/web/api/url/url/index.md | 2 +- .../web/api/validitystate/badinput/index.md | 2 +- files/ru/web/api/validitystate/index.md | 2 +- .../validitystate/patternmismatch/index.md | 4 +- .../api/validitystate/rangeoverflow/index.md | 2 +- .../api/validitystate/rangeunderflow/index.md | 2 +- .../api/validitystate/stepmismatch/index.md | 2 +- .../ru/web/api/validitystate/toolong/index.md | 2 +- .../web/api/validitystate/tooshort/index.md | 2 +- .../api/validitystate/typemismatch/index.md | 4 +- .../web/api/web_animations_api/tips/index.md | 4 +- files/ru/web/api/web_audio_api/index.md | 42 +- .../index.md | 4 +- files/ru/web/api/web_components/index.md | 18 +- files/ru/web/api/web_speech_api/index.md | 8 +- .../using_the_web_speech_api/index.md | 14 +- files/ru/web/api/web_storage_api/index.md | 2 +- files/ru/web/api/web_workers_api/index.md | 20 +- .../structured_clone_algorithm/index.md | 46 +- .../using_web_workers/index.md | 24 +- files/ru/web/api/webgl_api/index.md | 4 +- .../index.md | 10 +- .../animating_objects_with_webgl/index.md | 2 +- .../getting_started_with_webgl/index.md | 6 +- files/ru/web/api/webgl_api/tutorial/index.md | 2 +- .../index.md | 4 +- .../tutorial/using_textures_in_webgl/index.md | 4 +- files/ru/web/api/webrtc_api/index.md | 32 +- .../api/webrtc_api/session_lifetime/index.md | 4 +- .../signaling_and_video_calling/index.md | 52 +- .../webrtc_api/using_data_channels/index.md | 2 +- files/ru/web/api/websockets_api/index.md | 18 +- .../index.md | 10 +- files/ru/web/api/webvr_api/index.md | 16 +- .../webvr_api/using_the_webvr_api/index.md | 8 +- files/ru/web/api/webxr_device_api/index.md | 4 +- .../web/api/window/afterprint_event/index.md | 4 +- files/ru/web/api/window/atob/index.md | 6 +- .../api/window/beforeunload_event/index.md | 2 +- files/ru/web/api/window/btoa/index.md | 10 +- files/ru/web/api/window/caches/index.md | 2 +- files/ru/web/api/window/closed/index.md | 2 +- files/ru/web/api/window/confirm/index.md | 2 +- .../window/deviceorientation_event/index.md | 10 +- files/ru/web/api/window/document/index.md | 2 +- files/ru/web/api/window/fetch/index.md | 6 +- files/ru/web/api/window/focus_event/index.md | 2 +- files/ru/web/api/window/frameelement/index.md | 2 +- files/ru/web/api/window/frames/index.md | 4 +- .../window/gamepaddisconnected_event/index.md | 4 +- files/ru/web/api/window/history/index.md | 2 +- files/ru/web/api/window/index.md | 36 +- files/ru/web/api/window/load_event/index.md | 24 +- files/ru/web/api/window/localstorage/index.md | 6 +- files/ru/web/api/window/location/index.md | 8 +- files/ru/web/api/window/matchmedia/index.md | 10 +- files/ru/web/api/window/name/index.md | 2 +- files/ru/web/api/window/parent/index.md | 2 +- files/ru/web/api/window/performance/index.md | 4 +- .../ru/web/api/window/popstate_event/index.md | 4 +- files/ru/web/api/window/postmessage/index.md | 6 +- files/ru/web/api/window/resize_event/index.md | 18 +- files/ru/web/api/window/scroll/index.md | 4 +- files/ru/web/api/window/scrollmaxx/index.md | 2 +- files/ru/web/api/window/scrollto/index.md | 2 +- files/ru/web/api/window/setinterval/index.md | 20 +- files/ru/web/api/window/settimeout/index.md | 18 +- .../ru/web/api/window/storage_event/index.md | 2 +- .../window/unhandledrejection_event/index.md | 2 +- files/ru/web/api/window/unload_event/index.md | 4 +- files/ru/web/api/windowclient/index.md | 6 +- files/ru/web/api/worker/index.md | 14 +- .../ru/web/api/worker/message_event/index.md | 6 +- files/ru/web/api/worker/postmessage/index.md | 4 +- files/ru/web/api/worker/worker/index.md | 4 +- files/ru/web/api/xmldocument/index.md | 2 +- files/ru/web/api/xmlhttprequest/index.md | 36 +- .../api/xmlhttprequest/loadend_event/index.md | 2 +- .../xmlhttprequest/loadstart_event/index.md | 10 +- .../readystatechange_event/index.md | 2 +- .../web/api/xmlhttprequest/response/index.md | 20 +- files/ru/web/api/xmlhttprequest/send/index.md | 4 +- .../ru/web/api/xmlhttprequest/status/index.md | 2 +- .../api/xmlhttprequest/statustext/index.md | 2 +- .../web/api/xmlhttprequest/timeout/index.md | 2 +- .../xmlhttprequest/xmlhttprequest/index.md | 6 +- .../index.md | 8 +- .../index.md | 2 +- .../using_formdata_objects/index.md | 4 +- .../using_xmlhttprequest/index.md | 10 +- files/ru/web/api/xmlserializer/index.md | 4 +- files/ru/web/css/@counter-style/index.md | 2 +- files/ru/web/css/@document/index.md | 6 +- files/ru/web/css/@font-face/index.md | 2 +- .../ru/web/css/@font-feature-values/index.md | 2 +- files/ru/web/css/@media/index.md | 2 +- .../web/css/@media/inverted-colors/index.md | 2 +- files/ru/web/css/@media/orientation/index.md | 2 +- .../css/@media/prefers-color-scheme/index.md | 2 +- .../@media/prefers-reduced-motion/index.md | 4 +- files/ru/web/css/@media/scripting/index.md | 2 +- files/ru/web/css/_colon_active/index.md | 2 +- files/ru/web/css/_colon_checked/index.md | 2 +- files/ru/web/css/_colon_default/index.md | 2 +- files/ru/web/css/_colon_defined/index.md | 6 +- files/ru/web/css/_colon_disabled/index.md | 2 +- files/ru/web/css/_colon_enabled/index.md | 2 +- .../ru/web/css/_colon_first-of-type/index.md | 2 +- files/ru/web/css/_colon_first/index.md | 2 +- files/ru/web/css/_colon_focus-within/index.md | 2 +- files/ru/web/css/_colon_focus/index.md | 2 +- .../ru/web/css/_colon_host_function/index.md | 4 +- files/ru/web/css/_colon_hover/index.md | 6 +- files/ru/web/css/_colon_in-range/index.md | 4 +- .../ru/web/css/_colon_indeterminate/index.md | 2 +- files/ru/web/css/_colon_invalid/index.md | 2 +- files/ru/web/css/_colon_is/index.md | 6 +- files/ru/web/css/_colon_lang/index.md | 2 +- files/ru/web/css/_colon_last-of-type/index.md | 2 +- files/ru/web/css/_colon_link/index.md | 2 +- files/ru/web/css/_colon_not/index.md | 4 +- files/ru/web/css/_colon_nth-child/index.md | 2 +- .../ru/web/css/_colon_nth-last-child/index.md | 2 +- .../web/css/_colon_nth-last-of-type/index.md | 2 +- files/ru/web/css/_colon_nth-of-type/index.md | 2 +- files/ru/web/css/_colon_only-child/index.md | 2 +- files/ru/web/css/_colon_optional/index.md | 2 +- files/ru/web/css/_colon_out-of-range/index.md | 4 +- .../web/css/_colon_placeholder-shown/index.md | 2 +- files/ru/web/css/_colon_read-only/index.md | 4 +- files/ru/web/css/_colon_read-write/index.md | 4 +- files/ru/web/css/_colon_required/index.md | 2 +- files/ru/web/css/_colon_right/index.md | 2 +- files/ru/web/css/_colon_root/index.md | 2 +- files/ru/web/css/_colon_valid/index.md | 2 +- files/ru/web/css/_colon_visited/index.md | 6 +- files/ru/web/css/_colon_where/index.md | 4 +- .../index.md | 2 +- files/ru/web/css/_doublecolon_after/index.md | 2 +- .../ru/web/css/_doublecolon_backdrop/index.md | 4 +- files/ru/web/css/_doublecolon_before/index.md | 2 +- files/ru/web/css/_doublecolon_cue/index.md | 2 +- .../css/_doublecolon_first-letter/index.md | 4 +- .../web/css/_doublecolon_first-line/index.md | 2 +- .../css/_doublecolon_grammar-error/index.md | 2 +- files/ru/web/css/_doublecolon_marker/index.md | 4 +- .../web/css/_doublecolon_placeholder/index.md | 4 +- .../ru/web/css/_doublecolon_slotted/index.md | 6 +- files/ru/web/css/actual_value/index.md | 6 +- files/ru/web/css/align-content/index.md | 2 +- files/ru/web/css/align-items/index.md | 6 +- files/ru/web/css/align-self/index.md | 12 +- files/ru/web/css/animation-delay/index.md | 6 +- files/ru/web/css/animation-direction/index.md | 4 +- files/ru/web/css/animation-duration/index.md | 4 +- files/ru/web/css/animation-fill-mode/index.md | 6 +- .../css/animation-iteration-count/index.md | 6 +- files/ru/web/css/animation-name/index.md | 6 +- .../ru/web/css/animation-play-state/index.md | 4 +- .../css/animation-timing-function/index.md | 6 +- files/ru/web/css/animation/index.md | 6 +- files/ru/web/css/at-rule/index.md | 10 +- .../ru/web/css/background-attachment/index.md | 4 +- files/ru/web/css/background-clip/index.md | 2 +- files/ru/web/css/background-color/index.md | 4 +- files/ru/web/css/background-image/index.md | 8 +- .../ru/web/css/background-position-x/index.md | 2 +- files/ru/web/css/background-repeat/index.md | 2 +- files/ru/web/css/background-size/index.md | 12 +- files/ru/web/css/background/index.md | 4 +- files/ru/web/css/border-width/index.md | 2 +- files/ru/web/css/border/index.md | 2 +- files/ru/web/css/box-shadow/index.md | 4 +- files/ru/web/css/box-sizing/index.md | 4 +- files/ru/web/css/child_combinator/index.md | 2 +- files/ru/web/css/clamp/index.md | 2 +- files/ru/web/css/clear/index.md | 10 +- files/ru/web/css/color-scheme/index.md | 2 +- files/ru/web/css/color_value/index.md | 8 +- files/ru/web/css/column-count/index.md | 2 +- files/ru/web/css/column-rule-color/index.md | 2 +- files/ru/web/css/comments/index.md | 8 +- files/ru/web/css/computed_value/index.md | 10 +- files/ru/web/css/containing_block/index.md | 8 +- files/ru/web/css/content/index.md | 4 +- files/ru/web/css/css_animations/index.md | 2 +- .../using_css_animations/index.md | 2 +- .../web/css/css_basic_user_interface/index.md | 2 +- .../box_alignment_in_flexbox/index.md | 4 +- files/ru/web/css/css_box_alignment/index.md | 12 +- .../index.md | 8 +- .../mastering_margin_collapsing/index.md | 2 +- .../css/css_colors/applying_color/index.md | 20 +- files/ru/web/css/css_colors/index.md | 2 +- .../block_formatting_context/index.md | 12 +- .../index.md | 4 +- .../basic_concepts_of_flexbox/index.md | 4 +- .../web/css/css_flexible_box_layout/index.md | 4 +- .../mastering_wrapping_of_flex_items/index.md | 2 +- files/ru/web/css/css_flow_layout/index.md | 4 +- .../index.md | 4 +- .../basic_concepts_of_grid_layout/index.md | 10 +- .../box_alignment_in_grid_layout/index.md | 6 +- .../index.md | 6 +- .../grid_template_areas/index.md | 2 +- .../index.md | 4 +- files/ru/web/css/css_grid_layout/index.md | 32 +- .../index.md | 12 +- files/ru/web/css/css_images/index.md | 2 +- .../css_images/using_css_gradients/index.md | 2 +- files/ru/web/css/css_media_queries/index.md | 8 +- .../testing_media_queries/index.md | 4 +- .../using_media_queries/index.md | 14 +- .../using_multicol_layouts/index.md | 2 +- .../understanding_z-index/index.md | 20 +- .../stacking_context/index.md | 20 +- .../stacking_without_z-index/index.md | 12 +- .../using_z-index/index.md | 16 +- files/ru/web/css/css_selectors/index.md | 8 +- .../ru/web/css/descendant_combinator/index.md | 2 +- files/ru/web/css/display-outside/index.md | 2 +- files/ru/web/css/display/index.md | 16 +- files/ru/web/css/filter/index.md | 6 +- files/ru/web/css/flex-basis/index.md | 4 +- files/ru/web/css/flex-flow/index.md | 8 +- files/ru/web/css/flex-grow/index.md | 6 +- files/ru/web/css/flex-shrink/index.md | 4 +- files/ru/web/css/flex-wrap/index.md | 2 +- files/ru/web/css/flex/index.md | 6 +- files/ru/web/css/flex_value/index.md | 2 +- files/ru/web/css/float/index.md | 6 +- files/ru/web/css/font-size/index.md | 2 +- .../ru/web/css/font-variant-numeric/index.md | 2 +- files/ru/web/css/grid-area/index.md | 4 +- files/ru/web/css/grid-auto-flow/index.md | 4 +- files/ru/web/css/grid-column/index.md | 4 +- files/ru/web/css/grid-row-start/index.md | 4 +- files/ru/web/css/grid-template-areas/index.md | 4 +- .../ru/web/css/grid-template-columns/index.md | 8 +- files/ru/web/css/grid-template-rows/index.md | 8 +- files/ru/web/css/grid-template/index.md | 6 +- files/ru/web/css/grid/index.md | 4 +- files/ru/web/css/height/index.md | 4 +- files/ru/web/css/index.md | 2 +- files/ru/web/css/inherit/index.md | 4 +- files/ru/web/css/inheritance/index.md | 4 +- files/ru/web/css/initial/index.md | 2 +- files/ru/web/css/initial_value/index.md | 12 +- files/ru/web/css/integer/index.md | 4 +- files/ru/web/css/isolation/index.md | 2 +- files/ru/web/css/justify-content/index.md | 10 +- files/ru/web/css/justify-items/index.md | 6 +- .../breadcrumb_navigation/index.md | 2 +- files/ru/web/css/layout_cookbook/index.md | 16 +- .../layout_cookbook/split_navigation/index.md | 2 +- .../layout_cookbook/sticky_footers/index.md | 2 +- files/ru/web/css/layout_mode/index.md | 20 +- files/ru/web/css/length/index.md | 2 +- files/ru/web/css/line-height/index.md | 2 +- files/ru/web/css/margin-bottom/index.md | 2 +- files/ru/web/css/margin-left/index.md | 4 +- files/ru/web/css/margin-right/index.md | 4 +- files/ru/web/css/margin-top/index.md | 4 +- files/ru/web/css/margin/index.md | 8 +- files/ru/web/css/max-height/index.md | 2 +- files/ru/web/css/max-width/index.md | 2 +- files/ru/web/css/min-height/index.md | 2 +- files/ru/web/css/min-width/index.md | 2 +- files/ru/web/css/minmax/index.md | 4 +- .../web/css/next-sibling_combinator/index.md | 2 +- files/ru/web/css/number/index.md | 2 +- files/ru/web/css/opacity/index.md | 4 +- files/ru/web/css/order/index.md | 2 +- files/ru/web/css/orphans/index.md | 4 +- files/ru/web/css/overflow-block/index.md | 4 +- files/ru/web/css/overflow/index.md | 4 +- files/ru/web/css/padding-right/index.md | 2 +- files/ru/web/css/padding/index.md | 4 +- files/ru/web/css/perspective/index.md | 6 +- files/ru/web/css/place-items/index.md | 10 +- files/ru/web/css/pointer-events/index.md | 4 +- files/ru/web/css/position/index.md | 2 +- files/ru/web/css/pseudo-classes/index.md | 2 +- files/ru/web/css/pseudo-elements/index.md | 4 +- files/ru/web/css/ratio/index.md | 2 +- files/ru/web/css/reference/index.md | 44 +- files/ru/web/css/replaced_element/index.md | 6 +- files/ru/web/css/resolved_value/index.md | 6 +- .../ru/web/css/shorthand_properties/index.md | 6 +- files/ru/web/css/specificity/index.md | 20 +- files/ru/web/css/specified_value/index.md | 6 +- .../subsequent-sibling_combinator/index.md | 2 +- files/ru/web/css/text-align-last/index.md | 2 +- files/ru/web/css/text-align/index.md | 4 +- .../ru/web/css/text-decoration-skip/index.md | 2 +- files/ru/web/css/text-shadow/index.md | 2 +- files/ru/web/css/text-size-adjust/index.md | 2 +- files/ru/web/css/transform-style/index.md | 2 +- files/ru/web/css/transform/index.md | 8 +- files/ru/web/css/transition-duration/index.md | 2 +- files/ru/web/css/transition/index.md | 8 +- files/ru/web/css/used_value/index.md | 10 +- files/ru/web/css/user-select/index.md | 2 +- .../web/css/visual_formatting_model/index.md | 12 +- files/ru/web/css/widows/index.md | 4 +- files/ru/web/css/width/index.md | 4 +- files/ru/web/css/z-index/index.md | 4 +- files/ru/web/events/index.md | 892 +++++++++--------- files/ru/web/guide/index.md | 22 +- .../web/html/attributes/crossorigin/index.md | 6 +- files/ru/web/html/attributes/index.md | 4 +- files/ru/web/html/attributes/pattern/index.md | 12 +- .../web/html/constraint_validation/index.md | 12 +- files/ru/web/html/content_categories/index.md | 2 +- files/ru/web/html/cors_enabled_image/index.md | 4 +- files/ru/web/html/element/abbr/index.md | 6 +- files/ru/web/html/element/acronym/index.md | 2 +- files/ru/web/html/element/address/index.md | 12 +- files/ru/web/html/element/area/index.md | 16 +- files/ru/web/html/element/article/index.md | 16 +- files/ru/web/html/element/aside/index.md | 20 +- files/ru/web/html/element/audio/index.md | 28 +- files/ru/web/html/element/b/index.md | 18 +- files/ru/web/html/element/bdi/index.md | 14 +- files/ru/web/html/element/bdo/index.md | 16 +- files/ru/web/html/element/blockquote/index.md | 20 +- files/ru/web/html/element/body/index.md | 2 +- files/ru/web/html/element/br/index.md | 6 +- files/ru/web/html/element/button/index.md | 10 +- files/ru/web/html/element/canvas/index.md | 16 +- files/ru/web/html/element/caption/index.md | 16 +- files/ru/web/html/element/cite/index.md | 16 +- files/ru/web/html/element/code/index.md | 8 +- files/ru/web/html/element/data/index.md | 14 +- files/ru/web/html/element/datalist/index.md | 16 +- files/ru/web/html/element/dd/index.md | 20 +- files/ru/web/html/element/del/index.md | 18 +- files/ru/web/html/element/details/index.md | 6 +- files/ru/web/html/element/dfn/index.md | 6 +- files/ru/web/html/element/dialog/index.md | 20 +- files/ru/web/html/element/div/index.md | 20 +- files/ru/web/html/element/dl/index.md | 16 +- files/ru/web/html/element/dt/index.md | 18 +- files/ru/web/html/element/em/index.md | 8 +- files/ru/web/html/element/embed/index.md | 16 +- files/ru/web/html/element/fieldset/index.md | 16 +- files/ru/web/html/element/figcaption/index.md | 16 +- files/ru/web/html/element/figure/index.md | 18 +- files/ru/web/html/element/footer/index.md | 16 +- files/ru/web/html/element/head/index.md | 2 +- files/ru/web/html/element/header/index.md | 16 +- files/ru/web/html/element/hr/index.md | 4 +- files/ru/web/html/element/img/index.md | 30 +- files/ru/web/html/element/index.md | 88 +- .../ru/web/html/element/input/button/index.md | 12 +- .../ru/web/html/element/input/color/index.md | 2 +- files/ru/web/html/element/input/date/index.md | 8 +- .../element/input/datetime-local/index.md | 8 +- .../ru/web/html/element/input/hidden/index.md | 2 +- .../ru/web/html/element/input/image/index.md | 12 +- files/ru/web/html/element/input/index.md | 14 +- .../ru/web/html/element/input/number/index.md | 8 +- .../web/html/element/input/password/index.md | 2 +- .../ru/web/html/element/input/radio/index.md | 14 +- .../ru/web/html/element/input/range/index.md | 2 +- files/ru/web/html/element/ins/index.md | 14 +- files/ru/web/html/element/kbd/index.md | 16 +- files/ru/web/html/element/label/index.md | 8 +- files/ru/web/html/element/legend/index.md | 16 +- files/ru/web/html/element/li/index.md | 18 +- files/ru/web/html/element/link/index.md | 28 +- files/ru/web/html/element/main/index.md | 16 +- files/ru/web/html/element/map/index.md | 16 +- files/ru/web/html/element/mark/index.md | 16 +- files/ru/web/html/element/menu/index.md | 14 +- files/ru/web/html/element/meta/index.md | 46 +- files/ru/web/html/element/meter/index.md | 14 +- files/ru/web/html/element/nav/index.md | 14 +- files/ru/web/html/element/noscript/index.md | 4 +- files/ru/web/html/element/ol/index.md | 18 +- files/ru/web/html/element/optgroup/index.md | 14 +- files/ru/web/html/element/option/index.md | 2 +- files/ru/web/html/element/output/index.md | 6 +- files/ru/web/html/element/p/index.md | 18 +- files/ru/web/html/element/picture/index.md | 2 +- files/ru/web/html/element/pre/index.md | 18 +- files/ru/web/html/element/progress/index.md | 6 +- files/ru/web/html/element/ruby/index.md | 6 +- files/ru/web/html/element/script/index.md | 24 +- files/ru/web/html/element/section/index.md | 8 +- files/ru/web/html/element/select/index.md | 18 +- files/ru/web/html/element/slot/index.md | 12 +- files/ru/web/html/element/source/index.md | 26 +- files/ru/web/html/element/span/index.md | 18 +- files/ru/web/html/element/strong/index.md | 14 +- files/ru/web/html/element/summary/index.md | 14 +- files/ru/web/html/element/template/index.md | 18 +- files/ru/web/html/element/tfoot/index.md | 14 +- files/ru/web/html/element/time/index.md | 16 +- files/ru/web/html/element/title/index.md | 16 +- files/ru/web/html/element/track/index.md | 20 +- files/ru/web/html/element/ul/index.md | 24 +- files/ru/web/html/element/video/index.md | 34 +- files/ru/web/html/element/wbr/index.md | 16 +- .../contenteditable/index.md | 4 +- .../ru/web/html/global_attributes/id/index.md | 4 +- files/ru/web/html/global_attributes/index.md | 12 +- .../html/global_attributes/inputmode/index.md | 4 +- .../ru/web/html/global_attributes/is/index.md | 2 +- .../html/global_attributes/tabindex/index.md | 4 +- files/ru/web/html/index.md | 22 +- files/ru/web/html/reference/index.md | 4 +- files/ru/web/http/authentication/index.md | 6 +- files/ru/web/http/caching/index.md | 6 +- .../index.md | 2 +- .../ru/web/http/content_negotiation/index.md | 2 +- files/ru/web/http/cookies/index.md | 8 +- files/ru/web/http/cors/index.md | 36 +- files/ru/web/http/csp/index.md | 6 +- .../ru/web/http/headers/accept-patch/index.md | 2 +- .../web/http/headers/authorization/index.md | 8 +- .../web/http/headers/cache-control/index.md | 4 +- .../http/headers/content-disposition/index.md | 2 +- .../http/headers/content-encoding/index.md | 2 +- files/ru/web/http/headers/etag/index.md | 2 +- .../strict-transport-security/index.md | 2 +- files/ru/web/http/headers/vary/index.md | 2 +- .../headers/x-content-type-options/index.md | 2 +- files/ru/web/http/index.md | 14 +- files/ru/web/http/messages/index.md | 2 +- files/ru/web/http/methods/index.md | 2 +- files/ru/web/http/methods/options/index.md | 4 +- .../web/http/mime_types/common_types/index.md | 2 +- files/ru/web/http/mime_types/index.md | 8 +- files/ru/web/http/permissions_policy/index.md | 2 +- files/ru/web/http/redirections/index.md | 2 +- files/ru/web/http/session/index.md | 6 +- files/ru/web/http/status/304/index.md | 2 +- files/ru/web/http/status/404/index.md | 2 +- files/ru/web/index.md | 22 +- .../web/javascript/data_structures/index.md | 12 +- .../index.md | 12 +- .../index.md | 8 +- files/ru/web/javascript/event_loop/index.md | 4 +- .../control_flow_and_error_handling/index.md | 8 +- .../guide/expressions_and_operators/index.md | 98 +- .../web/javascript/guide/functions/index.md | 12 +- .../guide/grammar_and_types/index.md | 12 +- files/ru/web/javascript/guide/index.md | 134 +-- .../guide/indexed_collections/index.md | 10 +- .../javascript/guide/introduction/index.md | 8 +- .../guide/iterators_and_generators/index.md | 8 +- .../guide/keyed_collections/index.md | 4 +- .../guide/loops_and_iteration/index.md | 2 +- .../guide/meta_programming/index.md | 4 +- .../ru/web/javascript/guide/modules/index.md | 6 +- .../character_classes/index.md | 8 +- .../guide/regular_expressions/index.md | 26 +- .../javascript/guide/text_formatting/index.md | 8 +- .../javascript/guide/typed_arrays/index.md | 8 +- .../javascript/guide/using_promises/index.md | 8 +- .../guide/working_with_objects/index.md | 22 +- files/ru/web/javascript/index.md | 30 +- .../javascript_technologies_overview/index.md | 30 +- .../web/javascript/language_overview/index.md | 26 +- .../web/javascript/memory_management/index.md | 2 +- .../web/javascript/reference/classes/index.md | 6 +- .../reference/errors/bad_regexp_flag/index.md | 4 +- .../index.md | 2 +- .../errors/cant_assign_to_property/index.md | 6 +- .../errors/cyclic_object_value/index.md | 2 +- .../errors/delete_in_strict_mode/index.md | 2 +- .../errors/deprecated_octal_literal/index.md | 4 +- .../index.md | 4 +- .../reference/errors/is_not_iterable/index.md | 4 +- .../errors/missing_formal_parameter/index.md | 2 +- .../missing_name_after_dot_operator/index.md | 2 +- .../errors/no_variable_name/index.md | 6 +- .../reference/errors/not_defined/index.md | 4 +- .../errors/redeclared_parameter/index.md | 2 +- .../errors/reserved_identifier/index.md | 4 +- .../errors/too_much_recursion/index.md | 2 +- .../functions/arguments/callee/index.md | 2 +- .../reference/functions/arguments/index.md | 16 +- .../functions/arrow_functions/index.md | 8 +- .../reference/functions/get/index.md | 4 +- .../javascript/reference/functions/index.md | 8 +- .../functions/rest_parameters/index.md | 4 +- .../reference/functions/set/index.md | 4 +- .../global_objects/array/foreach/index.md | 2 +- .../global_objects/array/from/index.md | 2 +- .../global_objects/array/indexof/index.md | 2 +- .../global_objects/array/isarray/index.md | 2 +- .../global_objects/array/join/index.md | 2 +- .../global_objects/array/lastindexof/index.md | 2 +- .../global_objects/array/length/index.md | 2 +- .../global_objects/array/map/index.md | 2 +- .../global_objects/array/sort/index.md | 4 +- .../global_objects/arraybuffer/index.md | 4 +- .../arraybuffer/isview/index.md | 2 +- .../reference/global_objects/atomics/index.md | 2 +- .../reference/global_objects/bigint/index.md | 2 +- .../reference/global_objects/date/index.md | 2 +- .../global_objects/date/todatestring/index.md | 2 +- .../global_objects/date/totimestring/index.md | 2 +- .../global_objects/encodeuri/index.md | 2 +- .../encodeuricomponent/index.md | 2 +- .../global_objects/error/stack/index.md | 2 +- .../reference/global_objects/eval/index.md | 10 +- .../global_objects/float32array/index.md | 4 +- .../global_objects/float64array/index.md | 4 +- .../global_objects/function/apply/index.md | 4 +- .../global_objects/function/function/index.md | 2 +- .../global_objects/function/name/index.md | 2 +- .../global_objects/generator/index.md | 4 +- .../global_objects/generator/next/index.md | 2 +- .../reference/global_objects/index.md | 6 +- .../global_objects/int32array/index.md | 4 +- .../global_objects/int8array/index.md | 4 +- .../datetimeformat/formattoparts/index.md | 2 +- .../reference/global_objects/intl/index.md | 6 +- .../reference/global_objects/isnan/index.md | 2 +- .../reference/global_objects/json/index.md | 2 +- .../global_objects/json/parse/index.md | 2 +- .../global_objects/json/stringify/index.md | 4 +- .../object/__definegetter__/index.md | 2 +- .../object/__definesetter__/index.md | 2 +- .../object/__lookupgetter__/index.md | 2 +- .../object/__lookupsetter__/index.md | 2 +- .../global_objects/object/create/index.md | 2 +- .../object/defineproperties/index.md | 2 +- .../object/defineproperty/index.md | 2 +- .../object/fromentries/index.md | 4 +- .../object/getownpropertynames/index.md | 2 +- .../object/hasownproperty/index.md | 4 +- .../global_objects/object/is/index.md | 6 +- .../global_objects/object/keys/index.md | 4 +- .../object/propertyisenumerable/index.md | 2 +- .../global_objects/object/proto/index.md | 2 +- .../global_objects/parseint/index.md | 2 +- .../global_objects/promise/all/index.md | 2 +- .../global_objects/promise/any/index.md | 2 +- .../global_objects/promise/race/index.md | 2 +- .../reference/global_objects/proxy/index.md | 8 +- .../global_objects/reflect/apply/index.md | 2 +- .../global_objects/reflect/get/index.md | 4 +- .../reference/global_objects/reflect/index.md | 4 +- .../global_objects/regexp/exec/index.md | 2 +- .../reference/global_objects/regexp/index.md | 4 +- .../global_objects/regexp/lastmatch/index.md | 2 +- .../global_objects/regexp/test/index.md | 2 +- .../global_objects/set/entries/index.md | 2 +- .../reference/global_objects/set/has/index.md | 2 +- .../global_objects/sharedarraybuffer/index.md | 4 +- .../global_objects/string/big/index.md | 2 +- .../global_objects/string/charcodeat/index.md | 2 +- .../global_objects/string/fontcolor/index.md | 2 +- .../global_objects/string/fontsize/index.md | 2 +- .../global_objects/string/matchall/index.md | 2 +- .../global_objects/string/normalize/index.md | 2 +- .../global_objects/string/raw/index.md | 8 +- .../global_objects/string/replace/index.md | 6 +- .../global_objects/string/replaceall/index.md | 4 +- .../reference/global_objects/symbol/index.md | 2 +- .../typedarray/bytes_per_element/index.md | 2 +- .../global_objects/typedarray/index.md | 2 +- .../global_objects/typedarray/join/index.md | 2 +- .../global_objects/typedarray/set/index.md | 2 +- .../typedarray/symbol.species/index.md | 6 +- .../global_objects/uint8clampedarray/index.md | 4 +- .../global_objects/undefined/index.md | 2 +- files/ru/web/javascript/reference/index.md | 2 +- .../reference/iteration_protocols/index.md | 10 +- .../reference/lexical_grammar/index.md | 6 +- .../operators/addition_assignment/index.md | 2 +- .../reference/operators/assignment/index.md | 2 +- .../operators/async_function/index.md | 2 +- .../reference/operators/bitwise_and/index.md | 2 +- .../destructuring_assignment/index.md | 4 +- .../operators/function_star_/index.md | 2 +- .../reference/operators/grouping/index.md | 4 +- .../reference/operators/logical_and/index.md | 4 +- .../operators/logical_and_assignment/index.md | 2 +- .../reference/operators/logical_not/index.md | 4 +- .../reference/operators/logical_or/index.md | 8 +- .../operators/logical_or_assignment/index.md | 2 +- .../operators/nullish_coalescing/index.md | 2 +- .../nullish_coalescing_assignment/index.md | 2 +- .../operators/object_initializer/index.md | 10 +- .../operators/optional_chaining/index.md | 4 +- .../operators/property_accessors/index.md | 2 +- .../operators/spread_syntax/index.md | 4 +- .../reference/operators/typeof/index.md | 4 +- .../reference/operators/yield/index.md | 4 +- .../reference/operators/yield_star_/index.md | 2 +- .../reference/statements/const/index.md | 4 +- .../reference/statements/debugger/index.md | 2 +- .../reference/statements/export/index.md | 4 +- .../reference/statements/for...in/index.md | 2 +- .../reference/statements/for...of/index.md | 4 +- .../reference/statements/for/index.md | 4 +- .../statements/function_star_/index.md | 6 +- .../reference/statements/if...else/index.md | 2 +- .../reference/statements/import/index.md | 4 +- .../javascript/reference/statements/index.md | 6 +- .../reference/statements/let/index.md | 6 +- .../reference/statements/return/index.md | 2 +- .../reference/statements/switch/index.md | 2 +- .../reference/statements/throw/index.md | 2 +- .../reference/statements/var/index.md | 2 +- .../reference/statements/with/index.md | 4 +- .../javascript/reference/strict_mode/index.md | 16 +- .../reference/template_literals/index.md | 2 +- .../reference/trailing_commas/index.md | 4 +- files/ru/web/manifest/index.md | 4 +- files/ru/web/mathml/attribute/index.md | 10 +- files/ru/web/mathml/authoring/index.md | 2 +- files/ru/web/mathml/element/index.md | 6 +- files/ru/web/mathml/element/maction/index.md | 6 +- files/ru/web/mathml/element/menclose/index.md | 6 +- files/ru/web/mathml/element/merror/index.md | 6 +- files/ru/web/mathml/element/mfenced/index.md | 6 +- files/ru/web/mathml/element/mn/index.md | 2 +- files/ru/web/mathml/element/mstyle/index.md | 2 +- files/ru/web/mathml/index.md | 10 +- .../index.md | 18 +- .../media/formats/codecs_parameter/index.md | 6 +- .../index.md | 24 +- .../critical_rendering_path/index.md | 2 +- .../index.md | 6 +- .../ru/web/performance/dns-prefetch/index.md | 4 +- .../ru/web/performance/fundamentals/index.md | 22 +- .../performance/how_browsers_work/index.md | 4 +- files/ru/web/performance/index.md | 46 +- .../navigation_and_resource_timings/index.md | 20 +- .../optimizing_startup_performance/index.md | 8 +- files/ru/web/progressive_web_apps/index.md | 14 +- .../js13kgames/installable_pwas/index.md | 4 +- .../web/security/same-origin_policy/index.md | 16 +- .../index.md | 8 +- files/ru/web/svg/attribute/additive/index.md | 12 +- .../web/svg/attribute/attributetype/index.md | 10 +- files/ru/web/svg/attribute/class/index.md | 12 +- files/ru/web/svg/attribute/end/index.md | 14 +- .../web/svg/attribute/fill-opacity/index.md | 16 +- files/ru/web/svg/attribute/fill/index.md | 26 +- .../ru/web/svg/attribute/font-weight/index.md | 6 +- files/ru/web/svg/attribute/index.md | 2 +- files/ru/web/svg/attribute/keytimes/index.md | 10 +- .../web/svg/attribute/letter-spacing/index.md | 16 +- .../web/svg/attribute/lighting-color/index.md | 12 +- files/ru/web/svg/attribute/overflow/index.md | 10 +- .../attribute/patterncontentunits/index.md | 12 +- .../svg/attribute/shape-rendering/index.md | 12 +- .../ru/web/svg/attribute/stop-color/index.md | 14 +- .../svg/attribute/stroke-dashoffset/index.md | 6 +- .../web/svg/attribute/stroke-width/index.md | 14 +- files/ru/web/svg/attribute/stroke/index.md | 16 +- .../ru/web/svg/attribute/text-anchor/index.md | 14 +- .../web/svg/attribute/text-rendering/index.md | 12 +- files/ru/web/svg/attribute/transform/index.md | 12 +- files/ru/web/svg/attribute/values/index.md | 24 +- .../svg/attribute/xml_colon_space/index.md | 12 +- files/ru/web/svg/element/circle/index.md | 8 +- files/ru/web/svg/element/index.md | 2 +- files/ru/web/svg/element/rect/index.md | 10 +- files/ru/web/svg/element/text/index.md | 2 +- files/ru/web/svg/index.md | 30 +- files/ru/web/svg/svg_as_an_image/index.md | 6 +- .../ru/web/svg/tutorial/basic_shapes/index.md | 16 +- .../tutorial/basic_transformations/index.md | 2 +- .../svg/tutorial/fills_and_strokes/index.md | 4 +- .../web/svg/tutorial/getting_started/index.md | 10 +- files/ru/web/svg/tutorial/gradients/index.md | 4 +- files/ru/web/svg/tutorial/index.md | 16 +- .../ru/web/svg/tutorial/introduction/index.md | 10 +- files/ru/web/svg/tutorial/positions/index.md | 2 +- .../ru/web/svg/tutorial/svg_and_css/index.md | 12 +- files/ru/web/svg/tutorial/svg_fonts/index.md | 4 +- .../web/svg/tutorial/svg_image_tag/index.md | 2 +- .../svg_in_html_introduction/index.md | 4 +- .../web/svg/tutorial/tools_for_svg/index.md | 20 +- files/ru/web/tutorials/index.md | 66 +- files/ru/web/uri/schemes/data/index.md | 8 +- .../xml/parsing_and_serializing_xml/index.md | 2 +- files/ru/web/xml/xml_introduction/index.md | 12 +- files/ru/web/xpath/functions/floor/index.md | 2 +- files/ru/webassembly/concepts/index.md | 10 +- .../webassembly/exported_functions/index.md | 8 +- files/ru/webassembly/index.md | 8 +- .../compile_static/index.md | 4 +- .../compilestreaming_static/index.md | 2 +- .../javascript_interface/table/index.md | 4 +- .../webassembly/loading_and_running/index.md | 2 +- files/ru/webassembly/rust_to_wasm/index.md | 2 +- .../webassembly/text_format_to_wasm/index.md | 2 +- .../understanding_the_text_format/index.md | 18 +- .../using_the_javascript_api/index.md | 14 +- 1281 files changed, 5403 insertions(+), 5403 deletions(-) diff --git a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md index 0ef6a0864247e1..dd7c05f5640dcc 100644 --- a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md +++ b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md @@ -16,8 +16,8 @@ slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js - Удостовериться, что вы используете современную версию браузера с поддержкой [WebGL](/ru/docs/Web/API/WebGL_API), например, Firefox или Chrome. - Создать папку для экспериментов. -- Сохранить копию [последней версии библиотеки Three.js](http://threejs.org/build/three.min.js) в вашей папке. -- Открыть [документацию Three.js](http://threejs.org/docs/) в отдельной вкладке. +- Сохранить копию [последней версии библиотеки Three.js](https://threejs.org/build/three.min.js) в вашей папке. +- Открыть [документацию Three.js](https://threejs.org/docs/) в отдельной вкладке. ## HTML структура @@ -105,7 +105,7 @@ scene.add(camera); ## Отрисовка сцены -Всё уже готово, но мы пока что ничего не видим. Хотя мы настроили рендерер, нам всё равно нужно запустить рендеринг. Функция `render()` выполнит эту работу с небольшой помощью [`requestAnimationFrame()`](/ru/docs/Web/API/window/requestAnimationFrame), которая заставляет сцену постоянно перерисовываться в каждом кадре: +Всё уже готово, но мы пока что ничего не видим. Хотя мы настроили рендерер, нам всё равно нужно запустить рендеринг. Функция `render()` выполнит эту работу с небольшой помощью [`requestAnimationFrame()`](/ru/docs/Web/API/Window/requestAnimationFrame), которая заставляет сцену постоянно перерисовываться в каждом кадре: ```js function render() { diff --git a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.md b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.md index 25212a7accb437..e0fd5b79635c06 100644 --- a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.md +++ b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.md @@ -130,7 +130,7 @@ To actually apply the newly created shaders to the cube, comment out the `basicM // var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); ``` -Далее, создаём [`shaderMaterial`](http://threejs.org/docs/#Reference/Materials/ShaderMaterial): +Далее, создаём [`shaderMaterial`](https://threejs.org/docs/#Reference/Materials/ShaderMaterial): ```js var shaderMaterial = new THREE.ShaderMaterial({ @@ -237,4 +237,4 @@ This article has taught the very basics of shaders. Our example doesn't do much ## Смотрите также - [Изучение WebGL](http://learningwebgl.com/blog/?page_id=1217) — for general WebGL knowledge -- [WebGL шейдеры и GLSL основы](http://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html) — for GLSL specific information +- [WebGL шейдеры и GLSL основы](https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html) — for GLSL specific information diff --git a/files/ru/games/techniques/async_scripts/index.md b/files/ru/games/techniques/async_scripts/index.md index 44ed99254075d1..029e295ba85dad 100644 --- a/files/ru/games/techniques/async_scripts/index.md +++ b/files/ru/games/techniques/async_scripts/index.md @@ -27,7 +27,7 @@ document.body.appendChild(script); ## Когда асинхронный не асинхронный? -Две распространённые ситуации, в которых сценарий не асинхронен (как [определено спецификацией HTML](http://www.w3.org/TR/html5/scripting-1.html) ): +Две распространённые ситуации, в которых сценарий не асинхронен (как [определено спецификацией HTML](https://www.w3.org/TR/html5/scripting-1.html) ): ```html diff --git a/files/ru/games/techniques/controls_gamepad_api/index.md b/files/ru/games/techniques/controls_gamepad_api/index.md index 17fe93f7f31251..6b55edab879100 100644 --- a/files/ru/games/techniques/controls_gamepad_api/index.md +++ b/files/ru/games/techniques/controls_gamepad_api/index.md @@ -15,7 +15,7 @@ slug: Games/Techniques/Controls_Gamepad_API ## API статус и поддержка браузера -[Gamepad API](http://www.w3.org/TR/gamepad/) все ещё находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все ещё может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad. +[Gamepad API](https://www.w3.org/TR/gamepad/) все ещё находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все ещё может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad. ## Какие геймпады лучше всего? diff --git a/files/ru/games/tools/index.md b/files/ru/games/tools/index.md index 499a45fbc6beb6..16b77f4c686333 100644 --- a/files/ru/games/tools/index.md +++ b/files/ru/games/tools/index.md @@ -19,8 +19,8 @@ slug: Games/Tools - : Shumway это рендер для Adobe Flash построенный полностью на JavaScript, WebGL, etc., преодолевающий разрыв между Flash и web-стандартами. Это статья поясняет, как пользоваться Shumway,и как вносить исправления в проекте. - Инструментарий для разработки и отладки игр - - : Чем это отличается от обычной отладки веб-приложения? Какие специальные инструменты доступны? Многое из этого доступно в [инструментах](/ru/docs/Tools), но здесь мы должны обеспечить своего рода практический учебник для отладки игры, с ссылками : + - : Чем это отличается от обычной отладки веб-приложения? Какие специальные инструменты доступны? Многое из этого доступно в [инструментах](https://firefox-source-docs.mozilla.org/devtools-user/index.html), но здесь мы должны обеспечить своего рода практический учебник для отладки игры, с ссылками : - Обзор базовых инструментов - - [Редактор шейдеров](/ru/docs/Tools/Shader_Editor) + - [Редактор шейдеров](https://firefox-source-docs.mozilla.org/devtools-user/shader_editor/index.html) - Производственные инструменты (все ещё находятся в производстве, по оценкам, в начале 2014 года) diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md b/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md index 5673464ed54ebe..ce92001ab99045 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md @@ -33,7 +33,7 @@ function ballHitBrick(ball, brick) { Спасибо Phaser за то, что передал нам в функцию эти два параметра — мячик и тот кирпич, с которым у мячика произошла коллизия. А дальше мы просто удаляем кирпич с экрана, вызвав у него функцию `kill()`. -Вы думали, что нам придётся писать много кода для отслеживания коллизий, как мы это делали на [чистом JavaScript](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection)? В этом и прелесть фреймворков — рутину они сделают за нас, а мы, в это время, можем сосредоточиться на действительно интересных вещах. +Вы думали, что нам придётся писать много кода для отслеживания коллизий, как мы это делали на [чистом JavaScript](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection)? В этом и прелесть фреймворков — рутину они сделают за нас, а мы, в это время, можем сосредоточиться на действительно интересных вещах. ## Сравните свой код diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md index 8d4803b1384623..082a0bb60ea0a0 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md @@ -130,6 +130,6 @@ function ballLeaveScreen() { ## Следующий шаг -Жизни делают игру более казуальной — даже если вы проиграете единожды, у вас будут ещё 2 жизни и вы сможете продолжить игру. Теперь мы можем поработать над внешним видом игры, сделать её более красивой, добавив [анимацию и эффекты](/ru/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens). +Жизни делают игру более казуальной — даже если вы проиграете единожды, у вас будут ещё 2 жизни и вы сможете продолжить игру. Теперь мы можем поработать над внешним видом игры, сделать её более красивой, добавив [анимацию и эффекты](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens). {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.md b/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.md index 7ced3d6b501334..367f1a51c2386f 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.md @@ -37,6 +37,6 @@ ball.events.onOutOfBounds.add(function () { ## Следующий шаг -Базовый геймплей готов. Но какой арканоид без разбивания [кирпичиков](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей)? +Базовый геймплей готов. Но какой арканоид без разбивания [кирпичиков](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field)? {{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Платформа_и_управление", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/index.md b/files/ru/games/tutorials/2d_breakout_game_phaser/index.md index 21fa3ba2943561..878921e7f23e2d 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/index.md @@ -17,18 +17,18 @@ slug: Games/Tutorials/2D_breakout_game_Phaser Все уроки и различные версии [MDN Breakout](https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/lesson16.html), которые мы сделаем вместе, доступны на [GitHub](https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/): -1. [Инициализация фреймворка](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework) -2. [Масштабирование](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Scaling) -3. [Загрузка ресурсов и их вывод](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Load_the_assets_and_print_them_on_screen) -4. [Движение мяча](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Move_the_ball) -5. [Физика](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Physics) -6. [Отскакивание от стен](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls) -7. [Управление](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Платформа_и_управление) -8. [Конец игры](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over) -9. [Создание поля блоков](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей) -10. [Определение столкновения](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Обработка_коллизий) -11. [Счёт](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Очки) -12. [Победа в игре](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Победа) +1. [Инициализация фреймворка](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework) +2. [Масштабирование](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Scaling) +3. [Загрузка ресурсов и их вывод](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_screen) +4. [Движение мяча](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball) +5. [Физика](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Physics) +6. [Отскакивание от стен](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls) +7. [Управление](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls) +8. [Конец игры](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Game_over) +9. [Создание поля блоков](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field) +10. [Определение столкновения](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Collision_detection) +11. [Счёт](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score) +12. [Победа в игре](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Win_the_game) 13. [Добавление жизней](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Extra_lives) 14. [Анимация](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens) 15. [Кнопки](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Buttons) @@ -43,6 +43,6 @@ slug: Games/Tutorials/2D_breakout_game_Phaser ## Следующие шаги -Давайте начнём! Первая часть руководства — это [Инициализация фреймворка](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework). +Давайте начнём! Первая часть руководства — это [Инициализация фреймворка](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework). {{Next("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md b/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md index 0d0172753872e8..5eaafb7442dad8 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md @@ -121,6 +121,6 @@ ball.body.velocity.set(150, -150); ## Следующий шаг -Мы можем управлять платформой и сделали так, чтобы мячик отскакивал от неё. Но какой от этого толк, если мячик отскакивает и от нижней грани экрана? В следующей главе мы добавим [логику проигрыша и экран "Game over"](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over). +Мы можем управлять платформой и сделали так, чтобы мячик отскакивал от неё. Но какой от этого толк, если мячик отскакивает и от нижней грани экрана? В следующей главе мы добавим [логику проигрыша и экран "Game over"](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Game_over). {{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md index c774fe853e5839..a04a1cbdff287c 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -5,9 +5,9 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Переместить_мяч", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}} -Это 3-й этап из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код как он должен выглядеть после завершения этого урока в [Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html). +Это 3-й этап из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код как он должен выглядеть после завершения этого урока в [Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html). -Приятно наблюдать за нашим мяч, но он быстро исчезает с экрана, удовольствие длится недолго! Чтобы продлить, мы реализуем некоторое очень простое обнаружение столкновений (о которых будет рассказано [далее](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection) более подробно), чтобы сделать отскок мяча от четырёх краёв холста. +Приятно наблюдать за нашим мяч, но он быстро исчезает с экрана, удовольствие длится недолго! Чтобы продлить, мы реализуем некоторое очень простое обнаружение столкновений (о которых будет рассказано [далее](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection) более подробно), чтобы сделать отскок мяча от четырёх краёв холста. ## Простое обнаружение столкновений @@ -103,6 +103,6 @@ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { ## Следующий шаг -Теперь мы добрались до стадии, где наш мяч одновременно двигается и остаётся на игровом поле. В четвёртой главе мы рассмотрим реализацию управления — см. [Paddle and keyboard controls](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls). +Теперь мы добрались до стадии, где наш мяч одновременно двигается и остаётся на игровом поле. В четвёртой главе мы рассмотрим реализацию управления — см. [Paddle and keyboard controls](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md index 276726eb04f395..29bb2ca313959d 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection")}} -Это 6 шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут - [Gamedev-Canvas-workshop/lesson6.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html). +Это 6 шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут - [Gamedev-Canvas-workshop/lesson6.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html). После изменения механики игрового процесса мы теперь можем проиграть - это здорово, так как это означает, что игра, наконец, больше похожа на игру. Тем не менее, он быстро станет скучным, если все, что вы делаете, это отскок шара от стен и биты. То, что действительно нужно для прорыва - это кирпичи, которые нужно уничтожить мячом, и это то, что мы сейчас создадим! @@ -106,6 +106,6 @@ drawBricks(); ## Следующие шаги -Итак, теперь у нас есть кирпичи! Но мяч вообще не взаимодействует с ними - мы изменим это, поскольку мы переходим в седьмую главу: [Collision detection](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection). +Итак, теперь у нас есть кирпичи! Но мяч вообще не взаимодействует с ними - мы изменим это, поскольку мы переходим в седьмую главу: [Collision detection](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md index a9731b704bdad8..b5ce2ee642dc36 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаём_зону_кирпичей", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}} -Это 7 шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут [Gamedev-Canvas-workshop/lesson7.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html). +Это 7 шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут [Gamedev-Canvas-workshop/lesson7.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html). У нас уже есть кирпичи, появляющиеся на экране, но игра все ещё не так интересна, ведь мяч проходит сквозь них. Нам нужно подумать о добавлении обнаружения столкновений, чтобы он мог отскакивать от кирпичей и ломать их. @@ -130,6 +130,6 @@ collisionDetection(); ## Следующие шаги -Мы уверенно движемся вперёд! Поехали! В восьмой главе мы будем учиться [отслеживать счёт и выигрывать](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win). +Мы уверенно движемся вперёд! Поехали! В восьмой главе мы будем учиться [отслеживать счёт и выигрывать](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index d3fcb9e340ad59..61eb96c30338b9 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_dra {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Переместить_мяч")}} -Это **1й шаг** из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код для этого урока по ссылке [Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html). +Это **1й шаг** из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код для этого урока по ссылке [Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html). Прежде чем мы сможем начать писать функциональные возможности игры, нам необходимо создать базовую структуру для рендеринга игры внутри. Это можно сделать с помощью HTML и элемента {{htmlelement ("canvas")}}. @@ -108,6 +108,6 @@ ctx.closePath(); ## Следующие шаги -Сейчас мы создали базовый HTML и немного узнали о canvas, давайте на следующем шаге изучим, как [Двигать мяч в нашей игре](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball). +Сейчас мы создали базовый HTML и немного узнали о canvas, давайте на следующем шаге изучим, как [Двигать мяч в нашей игре](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md index 173281fa7daf15..9464996b6e902d 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up {{GamesSidebar}}{{Previous("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Управление_мышью")}} -Это 10-й и заключительный шаг в [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код, как он должен выглядеть, после завершения этого урока в [Gamedev-Canvas-workshop/lesson10.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html). +Это 10-й и заключительный шаг в [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код, как он должен выглядеть, после завершения этого урока в [Gamedev-Canvas-workshop/lesson10.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html). В любой игре, которую мы пишем, всегда есть место для улучшений. Например, мы можем предложить игроку несколько жизней. Они могут сделать несколько ошибок и всё равно закончить игру. Мы также можем улучшить отрисовку кода. @@ -100,8 +100,8 @@ requestAnimationFrame(draw); ## Игра закончена - на данный момент! -Вы закончили все уроки — поздравляем! К этому моменту вы должны знать основы манипулирования canvas и логику простых 2D-игр. Сейчас самое время изучить некоторые фреймворки и продолжить разработку игр. Вы можете проверить аналог этой серии, [2D breakout game using Phaser](/ru/docs/Games/Workflows/2D_breakout_game_Phaser) или [Cyber Orb built in Phaser](/ru/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation) учебник. Вы также можете просмотреть раздел [Games section on MDN](/ru/docs/Games) для вдохновения и увеличения знаний. +Вы закончили все уроки — поздравляем! К этому моменту вы должны знать основы манипулирования canvas и логику простых 2D-игр. Сейчас самое время изучить некоторые фреймворки и продолжить разработку игр. Вы можете проверить аналог этой серии, [2D breakout game using Phaser](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser) или [Cyber Orb built in Phaser](/ru/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation) учебник. Вы также можете просмотреть раздел [Games section on MDN](/ru/docs/Games) для вдохновения и увеличения знаний. -Вы также можете вернуться на [this tutorial series' index page](/ru/docs/Games/Workflows/Breakout_game_from_scratch) учебника. Получайте удовольствие от написания кода! +Вы также можете вернуться на [this tutorial series' index page](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) учебника. Получайте удовольствие от написания кода! {{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md index c3ec47f66a9db6..98a6e7d818fe37 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаём_зону_кирпичей")}} -Это - 5-й шаг из 10 из [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код к этому уроку в [Gamedev-Canvas-workshop/lesson5.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html). +Это - 5-й шаг из 10 из [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код к этому уроку в [Gamedev-Canvas-workshop/lesson5.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html). Конечно интересно наблюдать за отражающимся мячом и двигать биту, но кроме этого игра ничего не делает и не имеет никакого прогресса или конечной цели. Было бы хорошо с точки зрения геймплея иметь возможность проигрыша. Логика проигрыша в потере мяча. Если вы пропустите мяч и дадите ему добраться до нижнего края экрана, то на этом игра закончится. @@ -79,6 +79,6 @@ if (y + dy < ballRadius) { ## Следующие шаги -Все идёт хорошо и наша игра начинает чувствовать себя намного более достойно. Вы уже можете проиграть! Но все ещё не хватает чего-то. Перейдём к шестой главе — [Build the brick field](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Build_the_brick_field) — и создадим некоторые кирпичи для шара, чтобы их уничтожить. +Все идёт хорошо и наша игра начинает чувствовать себя намного более достойно. Вы уже можете проиграть! Но все ещё не хватает чего-то. Перейдём к шестой главе — [Build the brick field](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field) — и создадим некоторые кирпичи для шара, чтобы их уничтожить. {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.md index 56fbd32e1ad8ee..9e013b1810ced3 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.md @@ -9,7 +9,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript К каждому шагу прилагаются редактируемые live-примеры, с которыми можно поиграть, чтобы увидеть, как должна выглядеть игра на промежуточных этапах. Вы изучите основы использования элемента {{htmlelement("canvas")}} для реализации таких фундаментальных игровых механик, как рендеринг и перемещение изображений, обнаружение столкновений, механизмы управления, а также состояния выигрыша и проигрыша. -Для извлечения максимальной пользы из этой серии статей необходимо иметь средние (или хотя бы базовые) знания языка [JavaScript](/en-US/Learn/Getting_started_with_the_web/JavaScript_basics). После прохождения этого урока вы сможете создавать собственные простые браузерные игры. +Для извлечения максимальной пользы из этой серии статей необходимо иметь средние (или хотя бы базовые) знания языка [JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics). После прохождения этого урока вы сможете создавать собственные простые браузерные игры. ![Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.](mdn-breakout-gameplay.png) @@ -17,27 +17,27 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript Все уроки и версии игры [MDN Breakout](http://breakout.enclavegames.com/lesson10.html) доступны в [GitHub](https://github.com/end3r/Canvas-gamedev-workshop): -1. [Создание Canvas и рисование на нем](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it) -2. [Движение мяча](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball) -3. [Реакция при столкновении со стеной](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls) -4. [Управление](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls) -5. [Конец игры](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over) -6. [Построение поля кирпичей](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field) -7. [Реакция при столкновении](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection) -8. [Счёт и выигрыш](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win) -9. [Контроль мышью](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls) -10. [Заключение](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up) +1. [Создание Canvas и рисование на нем](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it) +2. [Движение мяча](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball) +3. [Реакция при столкновении со стеной](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls) +4. [Управление](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls) +5. [Конец игры](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over) +6. [Построение поля кирпичей](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field) +7. [Реакция при столкновении](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection) +8. [Счёт и выигрыш](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win) +9. [Контроль мышью](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls) +10. [Заключение](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up) Лучший способ получить надёжные знания в области разработки браузерных игр — это начать с чистого JavaScript. Затем можно выбрать любой фреймворк для использования в своих проектах. Фреймворки — это инструменты, созданные на языке JavaScript; поэтому, даже если вы планируете работать с ними, нелишним будет сначала изучить сам язык, чтобы понимать, что именно происходит внутри. Фреймворки ускоряют разработку и помогают справиться со скучными частями игры, но если что-то работает не так, как ожидалось, всегда можно попытаться отладить код или написать собственное решение на чистом JavaScript. > [!NOTE] -> Если вам интересно узнать о разработке двухмерных игр с помощью игровой библиотеки, ознакомьтесь с альтернативной серией статей [2D игра Breakout с использованием Phaser](/ru/docs/Games/Workflows/2D_breakout_game_Phaser). +> Если вам интересно узнать о разработке двухмерных игр с помощью игровой библиотеки, ознакомьтесь с альтернативной серией статей [2D игра Breakout с использованием Phaser](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser). > [!NOTE] > Эту серию статей можно использовать как материал для практических занятий по разработке игр. Также можно воспользоваться набором инструментов [Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit), основанном на этом уроке, если нужно сделать доклад о разработке игр в целом. ## Следующий шаг -Ладно, давайте начнём! Перейдите к первой главе — [Создание Canvas и рисование на нем](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it). +Ладно, давайте начнём! Перейдите к первой главе — [Создание Canvas и рисование на нем](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it). {{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md index 1d447e8310527e..6e7500496b4f0f 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md @@ -5,13 +5,13 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Заключение")}} -Это 9-й шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код к этому уроку в [Gamedev-Canvas-workshop/lesson9.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html). +Это 9-й шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код к этому уроку в [Gamedev-Canvas-workshop/lesson9.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html). Сама игра на самом деле закончена, так что давайте отполируем её. Мы уже добавили элементы управления клавиатуру, но мы могли бы легко добавить элемент управления мышь. ## Отслеживание движений мыши -Отслеживание движений мыши ещё проще, чем обработка нажатий клавиш. Все, что нам нужно, это следить за событиями [`mousemove`](/ru/docs/Web/Events/mousemove). Добавьте следующую строку в том же месте, как и для других событий, чуть ниже `keyup event`: +Отслеживание движений мыши ещё проще, чем обработка нажатий клавиш. Все, что нам нужно, это следить за событиями [`mousemove`](/ru/docs/Web/API/Element/mousemove_event). Добавьте следующую строку в том же месте, как и для других событий, чуть ниже `keyup event`: ```js document.addEventListener("mousemove", mouseMoveHandler, false); @@ -44,6 +44,6 @@ function mouseMoveHandler(e) { ## Следующий шаг -Теперь у нас есть полная игра, мы закончим нашу серию уроков с ещё несколькими небольшими хитростями — [Finishing up](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up). +Теперь у нас есть полная игра, мы закончим нашу серию уроков с ещё несколькими небольшими хитростями — [Finishing up](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md index c5970fb532b1ec..3f00aa1cbe5690 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создание_Canvas_и_рисование_на_нём", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}} -Это **2й шаг** из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код для данного урока по ссылке [Gamedev-Canvas-workshop/lesson2.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html). +Это **2й шаг** из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код для данного урока по ссылке [Gamedev-Canvas-workshop/lesson2.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html). Из предыдущей статьи вы уже знаете, как нарисовать мяч, а сейчас давайте заставим его двигаться. Технически, мы будем рисовать мяч на экране, стирать его и рисовать заново на немного другой позиции каждый раз, чтобы создать эффект движения - точно так же, как это работает в фильмах. @@ -136,6 +136,6 @@ function draw() { ## Следующие шаги -Мы нарисовали мяч и заставили его двигаться, но он продолжает пропадать на краю canvas. В третьей части мы рассмотрим, как заставить его [отскакивать от стен](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Bounce_off_the_walls). +Мы нарисовали мяч и заставили его двигаться, но он продолжает пропадать на краю canvas. В третьей части мы рассмотрим, как заставить его [отскакивать от стен](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md index 872c0001ac1850..c3d34fd04f0ab1 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_contr {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over")}} -Это 4-й этап из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код как он должен выглядеть после завершения этого урока в [Gamedev-Canvas-workshop/lesson4.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html). +Это 4-й этап из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код как он должен выглядеть после завершения этого урока в [Gamedev-Canvas-workshop/lesson4.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html). Мяч беспрепятственно отражается от стен, и вы можете смотреть на него бесконечно, но в настоящее время нет интерактивности. Это не игра, если вы не можете управлять мячом. Давайте добавим взаимодействие с игрой: управление ракеткой. @@ -121,6 +121,6 @@ drawPaddle(); ## Следующий шаг -Теперь у нас есть что-то похожее на игру. Беда только в том, что пока вы можете лишь бесконечно бить мяч ракеткой. Это все изменится в пятой главе, [Game over](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Game_over), когда мы начнём добавлять конечное состояние для нашей игры. +Теперь у нас есть что-то похожее на игру. Беда только в том, что пока вы можете лишь бесконечно бить мяч ракеткой. Это все изменится в пятой главе, [Game over](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over), когда мы начнём добавлять конечное состояние для нашей игры. {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md index 30c8cfc9b72b8a..b6ebc87e9b92ff 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Обнаружение_столкновений", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Управление_мышью")}} -Это 8й шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код для этого урока по ссылке [Gamedev-Canvas-workshop/lesson8.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html). +Это 8й шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код для этого урока по ссылке [Gamedev-Canvas-workshop/lesson8.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html). Уничтожение кирпичей действительно классно, но, чтобы быть ещё более удивительным, игра должна присуждать очки за каждый кирпич, в который попадает игрок, и подсчитывать общий балл. @@ -102,6 +102,6 @@ function collisionDetection() { ## Следующие шаги -На данный момент игра выглядит довольно хорошо. В следующем уроке вы расширите привлекательность игры, добавив [Mouse controls](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Mouse_controls). +На данный момент игра выглядит довольно хорошо. В следующем уроке вы расширите привлекательность игры, добавив [Mouse controls](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}} diff --git a/files/ru/games/tutorials/index.md b/files/ru/games/tutorials/index.md index 8c052b4da17bbc..1ababdad823ef8 100644 --- a/files/ru/games/tutorials/index.md +++ b/files/ru/games/tutorials/index.md @@ -7,11 +7,11 @@ slug: Games/Tutorials Эта страница содержит несколько серий уроков, в которых освещаются различные рабочие процессы для эффективного создания разных типов веб-игр. -- [2D игра Breakout на чистом JavaScript](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript) +- [2D игра Breakout на чистом JavaScript](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) - : В этом пошаговом руководстве вы сможете реализовать простой клон игры Breakout с использованием чистого JavaScript. Попутно вы узнаете основы использования элемента {{htmlelement ('canvas')}} для реализации фундаментальной игровой механики, такой как рендеринг и движущиеся изображения, обнаружение столкновения, механизмы управления и выигрышные и проигрышные состояния. -- [2D-игра Breakout с использованием Phaser](/ru/docs/Games/Workflows/2D_breakout_game_Phaser) +- [2D-игра Breakout с использованием Phaser](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser) - : В этом пошаговом руководстве вы будете использовать тот же самый клон Breakout, что и предыдущая серия уроков, за исключением того, что на этот раз вы сделаете это, используя HTML5 игровой фреймворк[Phaser](http://phaser.io/). Идея состоит в том, чтобы научить некоторым основам (и преимуществам) работы с фреймворками наряду с фундаментальной игровой механикой. -- [2D-игра Лабиринт с применением ориентации устройства](/ru/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation) - - : В этом учебном пособии показано, как создать 2D-игру Лабиринт с использованием HTML5, включая основы, такие как обнаружение столкновения и размещение спрайтов на {{htmlelement ('canvas')}}. Это мобильная игра, в которой используются **API** [Ориентация устройства](/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes) и [Вибрация](/ru/docs/Web/Guide/API/Vibration) для улучшения игрового процесса и построенная с использованием фреймворка [Phaser](http://phaser.io/). +- [2D-игра Лабиринт с применением ориентации устройства](/ru/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation) + - : В этом учебном пособии показано, как создать 2D-игру Лабиринт с использованием HTML5, включая основы, такие как обнаружение столкновения и размещение спрайтов на {{htmlelement ('canvas')}}. Это мобильная игра, в которой используются **API** [Ориентация устройства](/ru/docs/Web/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes) и [Вибрация](/ru/docs/Web/API/Vibration_API) для улучшения игрового процесса и построенная с использованием фреймворка [Phaser](http://phaser.io/). - [2D-игра платформер с использованием Phaser](https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/) - : В этой серии уроков показано, как создать простую платформенную игру с использованием [Phaser](http://phaser.io/), освещаются такие основы, как спрайты, столкновения, физика, коллекции и многое другое. diff --git a/files/ru/glossary/accessibility/index.md b/files/ru/glossary/accessibility/index.md index a3e28d7a3dd6c6..3d279a4768c369 100644 --- a/files/ru/glossary/accessibility/index.md +++ b/files/ru/glossary/accessibility/index.md @@ -16,10 +16,10 @@ _Веб-доступность_ (**A11Y**) — регламентирует лу ### Изучение доступности - [Изучение доступности на MDN](/ru/docs/Learn/Accessibility) -- [Web Accessibility In Mind](http://webaim.org/) +- [Web Accessibility In Mind](https://webaim.org/) ### Технические материалы - [ARIA документация на MDN](/ru/docs/Web/Accessibility/ARIA) -- [Инициатива по обеспечению доступности W3C](http://www.w3.org/WAI/) -- [WAI-ARIA рекомендации](http://www.w3.org/TR/wai-aria/) +- [Инициатива по обеспечению доступности W3C](https://www.w3.org/WAI/) +- [WAI-ARIA рекомендации](https://www.w3.org/TR/wai-aria/) diff --git a/files/ru/glossary/accessibility_tree/index.md b/files/ru/glossary/accessibility_tree/index.md index 6904e9fdb70ca1..6df93170d18369 100644 --- a/files/ru/glossary/accessibility_tree/index.md +++ b/files/ru/glossary/accessibility_tree/index.md @@ -7,7 +7,7 @@ slug: Glossary/Accessibility_tree **Дерево доступности** содержит информацию для большинства HTML-элементов, связанную с {{Glossary("Accessibility", "доступностью")}}. -Браузеры преобразуют разметку во внутреннее представление, называемое [DOM-деревом](/ru/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree). DOM-дерево содержит объекты для всех элементов разметки, атрибутов, текстовых узлов. После этого, на основе DOM-дерева, браузеры создают дерево доступности, которое используется платформозависимыми API специальных возможностей для вспомогательных технологий, таких как скринридеры. +Браузеры преобразуют разметку во внутреннее представление, называемое [DOM-деревом](/ru/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model). DOM-дерево содержит объекты для всех элементов разметки, атрибутов, текстовых узлов. После этого, на основе DOM-дерева, браузеры создают дерево доступности, которое используется платформозависимыми API специальных возможностей для вспомогательных технологий, таких как скринридеры. В объекте дерева доступности есть четыре элемента: diff --git a/files/ru/glossary/alignment_container/index.md b/files/ru/glossary/alignment_container/index.md index 023c16365f7193..aaef2e2b026c2c 100644 --- a/files/ru/glossary/alignment_container/index.md +++ b/files/ru/glossary/alignment_container/index.md @@ -9,4 +9,4 @@ slug: Glossary/Alignment_Container ## Дополнительные ресурсы -- [Выравнивание блоков в CSS](/ru/docs/Web/CSS/CSS_Box_Alignment) +- [Выравнивание блоков в CSS](/ru/docs/Web/CSS/CSS_box_alignment) diff --git a/files/ru/glossary/apple_safari/index.md b/files/ru/glossary/apple_safari/index.md index 4fdf5812c24790..ad5a4f95963990 100644 --- a/files/ru/glossary/apple_safari/index.md +++ b/files/ru/glossary/apple_safari/index.md @@ -5,16 +5,16 @@ slug: Glossary/Apple_Safari {{GlossarySidebar}} -[Safari](http://www.apple.com/safari/) (Сафари) - это {{Glossary("Browser","веб-браузер")}} разработанный компанией Apple, входит в состав операционных систем macOS и iOS. [Safari](http://www.apple.com/safari/) работает на движке [WebKit](http://www.webkit.org/). +[Safari](https://www.apple.com/safari/) (Сафари) - это {{Glossary("Browser","веб-браузер")}} разработанный компанией Apple, входит в состав операционных систем macOS и iOS. [Safari](https://www.apple.com/safari/) работает на движке [WebKit](https://www.webkit.org/). ## Узнайте больше ### Общая информация -- [Safari на сайте apple.com](http://www.apple.com/safari/) +- [Safari на сайте apple.com](https://www.apple.com/safari/) ### Техническая информация -- [Проект WebKit](http://www.webkit.org/) +- [Проект WebKit](https://www.webkit.org/) - [WebKit ночная сборка](http://nightly.webkit.org/) - [Сообщить об ошибке в Safari](https://bugs.webkit.org/) diff --git a/files/ru/glossary/arpa/index.md b/files/ru/glossary/arpa/index.md index 4721d22d82e0c4..5f88fa33c0e24f 100644 --- a/files/ru/glossary/arpa/index.md +++ b/files/ru/glossary/arpa/index.md @@ -11,4 +11,4 @@ slug: Glossary/ARPA ### Общие сведения -- [Официальный веб-сайт](http://www.iana.org/domains/arpa) +- [Официальный веб-сайт](https://www.iana.org/domains/arpa) diff --git a/files/ru/glossary/atag/index.md b/files/ru/glossary/atag/index.md index f3deb366594726..70a549009bfad9 100644 --- a/files/ru/glossary/atag/index.md +++ b/files/ru/glossary/atag/index.md @@ -15,5 +15,5 @@ ATAG (Authoring Tool {{glossary("Accessibility")}} Guidelines) - это {{Glossa ### Технические ссылки -- [Обзор Authoring Tool Accessibility Guidelines (ATAG)](http://www.w3.org/WAI/intro/atag.php) -- [Рекомендации ATAG 2.0](http://www.w3.org/TR/ATAG20/) +- [Обзор Authoring Tool Accessibility Guidelines (ATAG)](https://www.w3.org/WAI/intro/atag.php) +- [Рекомендации ATAG 2.0](https://www.w3.org/TR/ATAG20/) diff --git a/files/ru/glossary/base64/index.md b/files/ru/glossary/base64/index.md index 9bf81cae83119e..091a76e44cd598 100644 --- a/files/ru/glossary/base64/index.md +++ b/files/ru/glossary/base64/index.md @@ -7,7 +7,7 @@ slug: Glossary/Base64 **Base64** - это группа схожих [binary-to-text encoding](https://en.wikipedia.org/wiki/Binary-to-text_encoding) схем, которые представляют двоичные данные в ASCII-формате методом перевода в radix-64 представление. Термин _Base64_ происходит от a specific [MIME content transfer encoding](https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding). -Кодирование Base64 широко используется в случаях, когда требуется перекодировать двоичные данные для передачи по каналу приспособленному для передачи текстовых данных. Это делается с целью защиты двоичных данных от любых возможных повреждений при передаче. Base64 широко используется во многих приложениях, включая электронную почту ([MIME](https://en.wikipedia.org/wiki/MIME)), и при сохранении больших объёмов данных в [XML](/ru/docs/XML). +Кодирование Base64 широко используется в случаях, когда требуется перекодировать двоичные данные для передачи по каналу приспособленному для передачи текстовых данных. Это делается с целью защиты двоичных данных от любых возможных повреждений при передаче. Base64 широко используется во многих приложениях, включая электронную почту ([MIME](https://en.wikipedia.org/wiki/MIME)), и при сохранении больших объёмов данных в [XML](/ru/docs/Web/XML). В языке JavaScript существуют две функции, для кодирования и декодирования данных в/из формат Base64 соответственно: @@ -20,15 +20,15 @@ slug: Glossary/Base64 ## Документация -- [`data` URIs](/ru/docs/data_URIs) - - : `data` URIs, описанные в [RFC 2397](http://tools.ietf.org/html/rfc2397), позволяют создателям контента встроить в документ маленькие файлы в виде строки (инлайном). +- [`data` URIs](/ru/docs/Web/URI/Schemes/data) + - : `data` URIs, описанные в [RFC 2397](https://tools.ietf.org/html/rfc2397), позволяют создателям контента встроить в документ маленькие файлы в виде строки (инлайном). - [Base64](https://en.wikipedia.org/wiki/Base64) - : Wikipedia article about Base64 encoding. - {{domxref("WindowBase64.atob","atob()")}} - : Decodes a string of data which has been encoded using base-64 encoding. - {{domxref("WindowBase64.btoa","btoa()")}} - : Creates a base-64 encoded ASCII string from a "string" of binary data. -- [The "Unicode Problem"](#The_Unicode_Problem) +- [The "Unicode Problem"](#the_unicode_problem) - : In most browsers, calling `btoa()` on a Unicode string will cause a `Character Out Of Range` exception. This paragraph shows some solutions. - [URIScheme](/ru/docs/URIScheme) - : List of Mozilla supported URI schemes @@ -36,7 +36,7 @@ slug: Glossary/Base64 - : In this article is published a library of ours whose aims are: - - creating a [C](http://en.wikipedia.org/wiki/C_%28programming_language%29)-like interface for strings (i.e. array of characters codes — [`ArrayBufferView`](/ru/docs/Web/JavaScript/Typed_arrays/ArrayBufferView) in JavaScript) based upon the JavaScript [`ArrayBuffer`](/ru/docs/Web/JavaScript/Typed_arrays/ArrayBuffer) interface, + - creating a [C](http://en.wikipedia.org/wiki/C_%28programming_language%29)-like interface for strings (i.e. array of characters codes — [`ArrayBufferView`](/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) in JavaScript) based upon the JavaScript [`ArrayBuffer`](/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) interface, - creating a collection of methods for such string-like objects (since now: `stringView`s) which work **strictly on array of numbers** rather than on immutable JavaScript strings, - working with other Unicode encodings, different from default JavaScript's UTF-16 [`DOMString`](/ru/docs/Web/API/DOMString)s, @@ -47,13 +47,13 @@ slug: Glossary/Base64 ## Related Topics -- [`ArrayBuffer`](/ru/docs/Web/JavaScript/Typed_arrays/ArrayBuffer) -- [Typed arrays](/ru/docs/Web/JavaScript/Typed_arrays) -- [`ArrayBufferView`](/ru/docs/Web/JavaScript/Typed_arrays/ArrayBufferView) -- [`Uint8Array`](/ru/docs/Web/JavaScript/Typed_arrays/Uint8Array) +- [`ArrayBuffer`](/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) +- [Typed arrays](/ru/docs/Web/JavaScript/Guide/Typed_arrays) +- [`ArrayBufferView`](/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) +- [`Uint8Array`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) - [`StringView` – a C-like representation of strings based on typed arrays](/ru/docs/Web/JavaScript/Typed_arrays/StringView) - [`DOMString`](/ru/docs/Web/API/DOMString) -- [`URI`](/ru/docs/URI) +- [`URI`](/ru/docs/Glossary/URI) - [`encodeURI()`](/ru/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) ## The "Unicode Problem" diff --git a/files/ru/glossary/baseline/index.md b/files/ru/glossary/baseline/index.md index fcdc0a5e6d4e19..7ae423beaeb115 100644 --- a/files/ru/glossary/baseline/index.md +++ b/files/ru/glossary/baseline/index.md @@ -19,4 +19,4 @@ slug: Glossary/Baseline ### Техническая документация -- [CSS Box Alignment](/ru/Web/CSS/CSS_Box_Alignment#Типы_выравнивания) на MDN +- [CSS Box Alignment](/ru/docs/Web/CSS/CSS_Box_Alignment#типы_выравнивания) на MDN diff --git a/files/ru/glossary/bigint/index.md b/files/ru/glossary/bigint/index.md index 51b58a3cf6cfbe..ec698cd758755c 100644 --- a/files/ru/glossary/bigint/index.md +++ b/files/ru/glossary/bigint/index.md @@ -11,5 +11,5 @@ slug: Glossary/BigInt ### Техническая документация -- Структура данных JavaScript: [`BigInt`](/ru/docs/Web/JavaScript/Data_structures#BigInt_type) +- Структура данных JavaScript: [`BigInt`](/ru/docs/Web/JavaScript/Data_structures#bigint_type) - Глобальный объект JavaScript {{jsxref("BigInt")}} diff --git a/files/ru/glossary/block-level_content/index.md b/files/ru/glossary/block-level_content/index.md index 4a42599d8272b1..5394885892ffda 100644 --- a/files/ru/glossary/block-level_content/index.md +++ b/files/ru/glossary/block-level_content/index.md @@ -43,7 +43,7 @@ p { - Форматирование по умолчанию - : По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки. -Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором [категорий контента](/ru/docs/Web/Guide/HTML/Content_categories). Категория «строчных» элементов примерно соответствует категории [текстового контента](/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content), а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории [потокового контента](/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток) в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент. +Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором [категорий контента](/ru/docs/Web/HTML/Content_categories). Категория «строчных» элементов примерно соответствует категории [текстового контента](/ru/docs/Web/HTML/Content_categories#phrasing_content), а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории [потокового контента](/ru/docs/Web/HTML/Content_categories#основной_поток) в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент. ## Элементы diff --git a/files/ru/glossary/block/css/index.md b/files/ru/glossary/block/css/index.md index 3bca4b891b05a1..e7e9611f4feaac 100644 --- a/files/ru/glossary/block/css/index.md +++ b/files/ru/glossary/block/css/index.md @@ -13,4 +13,4 @@ slug: Glossary/Block/CSS ### Общая информация -- [Visual formatting model](/ru/docs/Web/Guide/CSS/Visual_formatting_model) +- [Visual formatting model](/ru/docs/Web/CSS/Visual_formatting_model) diff --git a/files/ru/glossary/browser/index.md b/files/ru/glossary/browser/index.md index 47af599607b2ef..41a59d491a9b5a 100644 --- a/files/ru/glossary/browser/index.md +++ b/files/ru/glossary/browser/index.md @@ -15,7 +15,7 @@ _Веб браузер —_ это программа которая извле ### Скачай браузер -- [Mozilla Firefox](http://www.mozilla.org/en-US/firefox/features/) -- [Google Chrome](http://www.google.com/chrome/) -- [Microsoft Internet Explorer](http://windows.microsoft.com/en-US/internet-explorer/browser-ie) -- [Opera Browser](http://www.opera.com/) +- [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/features/) +- [Google Chrome](https://www.google.com/chrome/) +- [Microsoft Internet Explorer](https://windows.microsoft.com/en-US/internet-explorer/browser-ie) +- [Opera Browser](https://www.opera.com/) diff --git a/files/ru/glossary/callback_function/index.md b/files/ru/glossary/callback_function/index.md index 9b5fc997fe0461..8f6d83918762b9 100644 --- a/files/ru/glossary/callback_function/index.md +++ b/files/ru/glossary/callback_function/index.md @@ -41,7 +41,7 @@ function onPageLoadingFinished(pageData) { pageLoader(onPageLoadingFinished); ``` -Вот ещё один пример асинхронного обратного вызова: [maps-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html) ([живой пример](http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html)). Он использует Google Maps API и Geolocation API для отображения карты текущего местоположения вашего устройства. +Вот ещё один пример асинхронного обратного вызова: [maps-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html) ([живой пример](https://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html)). Он использует Google Maps API и Geolocation API для отображения карты текущего местоположения вашего устройства. ```js // maps-example.html diff --git a/files/ru/glossary/canvas/index.md b/files/ru/glossary/canvas/index.md index 3a692113862824..03ae9b5c02001e 100644 --- a/files/ru/glossary/canvas/index.md +++ b/files/ru/glossary/canvas/index.md @@ -11,11 +11,11 @@ slug: Glossary/Canvas ### Обучающие ресурсы -- [Руководство по Canvas в MDN](/ru/docs/Web/Guide/HTML/Canvas_tutorial) +- [Руководство по Canvas в MDN](/ru/docs/Web/API/Canvas_API/Tutorial) ### Техническая информация - HTML-элемент {{HTMLElement("canvas")}} в MDN -- [Canvas общая документация в MDN](/ru/docs/HTML/Canvas) +- [Canvas общая документация в MDN](/ru/docs/Web/API/Canvas_API) - {{domxref("CanvasRenderingContext2D")}}: Canvas 2D API для рисования -- [Canvas 2D API спецификация](http://www.w3.org/TR/2dcontext/) +- [Canvas 2D API спецификация](https://www.w3.org/TR/2dcontext/) diff --git a/files/ru/glossary/class/index.md b/files/ru/glossary/class/index.md index 1c0f394d087583..4a8e2ce79cd487 100644 --- a/files/ru/glossary/class/index.md +++ b/files/ru/glossary/class/index.md @@ -13,7 +13,7 @@ slug: Glossary/Class ### Общие знания -- [Языки, основанные на классах против прототипно-ориентированных](/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model) +- [Языки, основанные на классах против прототипно-ориентированных](/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) - [Классы в JavaScript](/ru/docs/Learn/JavaScript/Objects/Classes_in_JavaScript) - [Class-based programming](https://en.wikipedia.org/wiki/Class-based_programming) в Википедии (англ.) - [Объектно-ориентированное программирование](https://ru.wikipedia.org/wiki/Объектно-ориентированное_программирование) в Википедии diff --git a/files/ru/glossary/codec/index.md b/files/ru/glossary/codec/index.md index 6aa57650b6aebc..8131972f99b30d 100644 --- a/files/ru/glossary/codec/index.md +++ b/files/ru/glossary/codec/index.md @@ -11,4 +11,4 @@ slug: Glossary/Codec ### Технические ссылки -- [Медиа форматы, поддерживаемые audio и video элементами HTML](/ru/docs/Web/HTML/Supported_media_formats) +- [Медиа форматы, поддерживаемые audio и video элементами HTML](/ru/docs/Web/Media/Formats) diff --git a/files/ru/glossary/compile/index.md b/files/ru/glossary/compile/index.md index f90cc77462f14c..1e59bc0af90cc3 100644 --- a/files/ru/glossary/compile/index.md +++ b/files/ru/glossary/compile/index.md @@ -22,4 +22,4 @@ JIT компиляторы обычно прозрачны для вас и ис ### Обучающие ресурсы - [Введение в компиляторы](https://medium.com/basecs/a-deeper-inspection-into-compilation-and-interpretation-d98952ebc842) -- [Большой список учебных материалов на StackOverflow](http://stackoverflow.com/a/1672/133203) +- [Большой список учебных материалов на StackOverflow](https://stackoverflow.com/a/1672/133203) diff --git a/files/ru/glossary/constructor/index.md b/files/ru/glossary/constructor/index.md index 84400bbd6a7ecc..18742868d73155 100644 --- a/files/ru/glossary/constructor/index.md +++ b/files/ru/glossary/constructor/index.md @@ -32,5 +32,5 @@ var defaultReference = new Default(); ## Смотрите также -- [Конструктор в ООП для JavaScript](/ru/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Constructor) на MDN +- [Конструктор в ООП для JavaScript](/ru/docs/Learn/JavaScript/Objects#the_constructor) на MDN - [Оператор new в JavaScript](/ru/docs/Web/JavaScript/Reference/Operators/new) на MDN diff --git a/files/ru/glossary/cors/index.md b/files/ru/glossary/cors/index.md index 2b0a1961385086..781a9cd90b47b5 100644 --- a/files/ru/glossary/cors/index.md +++ b/files/ru/glossary/cors/index.md @@ -13,7 +13,7 @@ The [same-origin security policy (рус. "правило ограничения ### Основная база знаний -- [HTTP access control (CORS)](/ru/docs/Web/HTTP/Access_control_CORS) на MDN +- [HTTP access control (CORS)](/ru/docs/Web/HTTP/CORS) на MDN ### CORS заголовки diff --git a/files/ru/glossary/csrf/index.md b/files/ru/glossary/csrf/index.md index 594ed922fb550d..eddf4e5f79136b 100644 --- a/files/ru/glossary/csrf/index.md +++ b/files/ru/glossary/csrf/index.md @@ -12,4 +12,4 @@ slug: Glossary/CSRF ### General knowledge - [Prevention measures]() -- [MDN security tutorial](/en-US/Learn/tutorial/Information_Security_Basics) +- [MDN security tutorial](/ru/docs/Learn/tutorial/Information_Security_Basics) diff --git a/files/ru/glossary/css/index.md b/files/ru/glossary/css/index.md index 6d3a537b41e501..8036978db47ba8 100644 --- a/files/ru/glossary/css/index.md +++ b/files/ru/glossary/css/index.md @@ -33,9 +33,9 @@ p { ### Техническая документация - [CSS документация на MDN](/ru/docs/Web/CSS) -- [Рабочая группа CSS по текущей работе](http://www.w3.org/Style/CSS/current-work) +- [Рабочая группа CSS по текущей работе](https://www.w3.org/Style/CSS/current-work) ### Веб-курсы CSS -- [Веб курсы на codecademy.com](http://www.codecademy.com/en/tracks/web) +- [Веб курсы на codecademy.com](https://www.codecademy.com/en/tracks/web) - [Веб курсы на W3Schools](http://www.w3schools.com/css/default.asp) diff --git a/files/ru/glossary/css_preprocessor/index.md b/files/ru/glossary/css_preprocessor/index.md index 2286dfb5cfd9ed..4aa66500e23ff1 100644 --- a/files/ru/glossary/css_preprocessor/index.md +++ b/files/ru/glossary/css_preprocessor/index.md @@ -15,7 +15,7 @@ CSS препроцессор (**CSS preprocessor**) - это программа, Несколько самых популярных CSS препоцессоров: -- [SASS](http://sass-lang.com/) -- [LESS](http://lesscss.org/) +- [SASS](https://sass-lang.com/) +- [LESS](https://lesscss.org/) - [Stylus](http://stylus-lang.com/) - [PostCSS](http://postcss.org/) diff --git a/files/ru/glossary/css_selector/index.md b/files/ru/glossary/css_selector/index.md index 02cff06bcd1c14..0b258f9cf06cca 100644 --- a/files/ru/glossary/css_selector/index.md +++ b/files/ru/glossary/css_selector/index.md @@ -46,10 +46,10 @@ p { 3. Комбинаторы - 1. [Adjacent sibling selectors](/ru/docs/Web/CSS/Adjacent_sibling_selectors) `A + B` - 2. [General sibling selectors](/ru/docs/Web/CSS/General_sibling_selectors) `A ~ B` - 3. [Child selectors](/ru/docs/Web/CSS/Child_selectors) `A > B` - 4. [Descendant selectors](/ru/docs/Web/CSS/Descendant_selectors) `A B` + 1. [Adjacent sibling selectors](/ru/docs/Web/CSS/Next-sibling_combinator) `A + B` + 2. [General sibling selectors](/ru/docs/Web/CSS/Subsequent-sibling_combinator) `A ~ B` + 3. [Child selectors](/ru/docs/Web/CSS/Child_combinator) `A > B` + 4. [Descendant selectors](/ru/docs/Web/CSS/Descendant_combinator) `A B` 4. Псевдо diff --git a/files/ru/glossary/developer_tools/index.md b/files/ru/glossary/developer_tools/index.md index e7140b3f574376..ac220e584e0bd5 100644 --- a/files/ru/glossary/developer_tools/index.md +++ b/files/ru/glossary/developer_tools/index.md @@ -11,7 +11,7 @@ slug: Glossary/Developer_Tools ### Technical reference -- [Firefox Developer Tools](/ru/docs/Tools) on MDN +- [Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/index.html) on MDN - [Firebug](https://getfirebug.com/) (former developer tool for Firefox) - [Chrome DevTools](https://developer.chrome.com/docs/devtools/) on chrome.com - [Safari Web Inspector](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007874-CH1-SW1) on apple.com diff --git a/files/ru/glossary/dns/index.md b/files/ru/glossary/dns/index.md index dcec64d6808ed4..b6dd3357fb3548 100644 --- a/files/ru/glossary/dns/index.md +++ b/files/ru/glossary/dns/index.md @@ -15,4 +15,4 @@ slug: Glossary/DNS ### Общие знания -- [Что такое доменные адреса](/ru/docs/Learn/Understanding_domain_names) +- [Что такое доменные адреса](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) diff --git a/files/ru/glossary/doctype/index.md b/files/ru/glossary/doctype/index.md index 264844b5aa0385..42d0431974437d 100644 --- a/files/ru/glossary/doctype/index.md +++ b/files/ru/glossary/doctype/index.md @@ -7,12 +7,12 @@ l10n: {{GlossarySidebar}} -В {{Glossary("HTML")}} необходимо объявлять **тип документа** с помощью строки `` в самом начале каждого документа. Единственная цель этого — не допустить переключения {{Glossary("browser", "браузера")}} в так называемый режим совместимости («[quirks mode](/ru/docs/Quirks_Mode_and_Standards_Mode)») во время рендеринга документа. Указание типа документа с помощью `` гарантирует, что браузер будет следовать соответствующей спецификации, а не использовать другой режим отображения, несовместимый с некоторыми спецификациями. +В {{Glossary("HTML")}} необходимо объявлять **тип документа** с помощью строки `` в самом начале каждого документа. Единственная цель этого — не допустить переключения {{Glossary("browser", "браузера")}} в так называемый режим совместимости («[quirks mode](/ru/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)») во время рендеринга документа. Указание типа документа с помощью `` гарантирует, что браузер будет следовать соответствующей спецификации, а не использовать другой режим отображения, несовместимый с некоторыми спецификациями. Объявление типа документа не чувствительно к регистру. В примерах кода на MDN принято использовать строчные буквы, но и вариант записи `` тоже корректный. ## Смотрите также - [Определение DOCTYPE в спецификации HTML](https://html.spec.whatwg.org/multipage/syntax.html#the-doctype) -- [Режим совместимости (Quirks Mode) и стандартный режим (Standards Mode)](/ru/docs/Quirks_Mode_and_Standards_Mode) +- [Режим совместимости (Quirks Mode) и стандартный режим (Standards Mode)](/ru/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) - [Document.doctype](/ru/docs/Web/API/Document/doctype) — метод JavaScript, возвращающий тип документа diff --git a/files/ru/glossary/dom/index.md b/files/ru/glossary/dom/index.md index 9ef7ef1f943d90..63806bdfa26b7e 100644 --- a/files/ru/glossary/dom/index.md +++ b/files/ru/glossary/dom/index.md @@ -15,5 +15,5 @@ DOM не был определён изначально — он пришёл к ### Техническая информация -- [Документация DOM на MDN](/ru/docs/DOM) -- [Различные спецификации DOM на сайте W3C](http://www.w3.org/DOM/DOMTR) +- [Документация DOM на MDN](/ru/docs/Web/API/Document_Object_Model) +- [Различные спецификации DOM на сайте W3C](https://www.w3.org/DOM/DOMTR) diff --git a/files/ru/glossary/domain_name/index.md b/files/ru/glossary/domain_name/index.md index 8a723f218e41e6..26fbd2250377d1 100644 --- a/files/ru/glossary/domain_name/index.md +++ b/files/ru/glossary/domain_name/index.md @@ -11,4 +11,4 @@ slug: Glossary/Domain_name ### Общие сведения -- [Understanding domain names](/en-US/Learn/Understanding_domain_names) +- [Understanding domain names](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) diff --git a/files/ru/glossary/ecma/index.md b/files/ru/glossary/ecma/index.md index 79b1edd6bdd816..412ccbc5e22db5 100644 --- a/files/ru/glossary/ecma/index.md +++ b/files/ru/glossary/ecma/index.md @@ -7,8 +7,8 @@ slug: Glossary/ECMA **Ecma International**, ранее известная как European Computers Manufactures Association (Европейская Ассоциация Производителей Компьютеров) — некоммерческая организация, утверждающая и развивающая стандарты в областях аппаратного обеспечения компьютеров, коммуникационных технологий и языков программирования. -В интернете она прежде всего известна, как организация, утвердившая [спецификацию ECMA-262](http://www.ecma-international.org/publications/standards/Ecma-262.htm) (она же {{Glossary("ECMAScript")}}), являющуюся основной спецификацией языка {{Glossary("JavaScript")}}. +В интернете она прежде всего известна, как организация, утвердившая [спецификацию ECMA-262](https://www.ecma-international.org/publications/standards/Ecma-262.htm) (она же {{Glossary("ECMAScript")}}), являющуюся основной спецификацией языка {{Glossary("JavaScript")}}. ## Узнать больше -- [Официальный сайт Ecma International](http://www.ecma-international.org/) +- [Официальный сайт Ecma International](https://www.ecma-international.org/) diff --git a/files/ru/glossary/ecmascript/index.md b/files/ru/glossary/ecmascript/index.md index 3f6407185d67f1..5e926f6263d938 100644 --- a/files/ru/glossary/ecmascript/index.md +++ b/files/ru/glossary/ecmascript/index.md @@ -5,7 +5,7 @@ slug: Glossary/ECMAScript {{GlossarySidebar}} -**ECMAScript** - это скриптовый язык на котором основан {{glossary("JavaScript")}}. [Ecma International](http://www.ecma-international.org) - организация отвечающая за стандартизацию ECMAScript. +**ECMAScript** - это скриптовый язык на котором основан {{glossary("JavaScript")}}. [Ecma International](https://www.ecma-international.org) - организация отвечающая за стандартизацию ECMAScript. ## Learn more diff --git a/files/ru/glossary/element/index.md b/files/ru/glossary/element/index.md index 521daf1b2152ff..13d785d197d643 100644 --- a/files/ru/glossary/element/index.md +++ b/files/ru/glossary/element/index.md @@ -14,4 +14,4 @@ slug: Glossary/Element - Интерфейс {{domxref("Element")}}, представляющий элемент в DOM. - [Подробнее об элементах](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B). -- [Web_Components/Custom_Elements](/ru/docs/Web/Web_Components/Custom_Elements) +- [Web_Components/Custom_Elements](/ru/docs/Web/API/Web_components/Using_custom_elements) diff --git a/files/ru/glossary/entity_header/index.md b/files/ru/glossary/entity_header/index.md index 316f179a48dee1..dfc914007c441f 100644 --- a/files/ru/glossary/entity_header/index.md +++ b/files/ru/glossary/entity_header/index.md @@ -22,4 +22,4 @@ Content-Length: 128 ### Технические знания -- [Список всех HTTP заголовков](/ru/docs/Web/HTTP/Заголовки) +- [Список всех HTTP заголовков](/ru/docs/Web/HTTP/Headers) diff --git a/files/ru/glossary/falsy/index.md b/files/ru/glossary/falsy/index.md index 422af370bb1307..b6c73121a1f305 100644 --- a/files/ru/glossary/falsy/index.md +++ b/files/ru/glossary/falsy/index.md @@ -18,7 +18,7 @@ slug: Glossary/Falsy | `-0` | Отрицательный ноль типа {{jsxref("Number")}} (к нему также относятся `-0.0`, `-0x0` и т.д.). | | `0n` | Ноль типа {{jsxref("BigInt")}} (также `0x0n`). Обратите внимание, что не может быть негативного нуля типа {{jsxref("BigInt")}} — отрицательный `0n` равняется `0n`. | | `""`, `''`, ` `` ` | Значение, содержащее пустую [строку](/ru/docs/Web/JavaScript/Reference/Global_Objects/String) . | -| {{Glossary("null")}} | [null](/ru/docs/Web/JavaScript/Reference/Global_Objects/null) — отсутствие какого-либо значения. | +| {{Glossary("null")}} | [null](/ru/docs/Web/JavaScript/Reference/Operators/null) — отсутствие какого-либо значения. | | {{Glossary("undefined")}} | [undefined](/ru/docs/Web/JavaScript/Reference/Global_Objects/undefined) — примитивное значение. | | {{Glossary("NaN")}} | [NaN](/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN) — значение, не являющиеся числом. | | {{domxref("document.all")}} | Объекты считаются ложноподобными тогда и только тогда, когда у них есть внутренний слот [\[\[IsHTMLDDA\]\]](https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot). Этот слот есть только в объекте {{domxref("document.all")}}, и его нельзя задать через JavaScript. | diff --git a/files/ru/glossary/first_contentful_paint/index.md b/files/ru/glossary/first_contentful_paint/index.md index 68039e6fe70683..1a15822343ab6c 100644 --- a/files/ru/glossary/first_contentful_paint/index.md +++ b/files/ru/glossary/first_contentful_paint/index.md @@ -11,5 +11,5 @@ slug: Glossary/First_contentful_paint ## Смотрите также -- [First Meaningful Paint](/ru/docs/Glossary/first_meaningful_paint) +- [First Meaningful Paint](/ru/docs/Glossary/First_meaningful_paint) - [Paint Timing specification](https://w3c.github.io/paint-timing/#first-contentful-paint) diff --git a/files/ru/glossary/first_input_delay/index.md b/files/ru/glossary/first_input_delay/index.md index faf822d8d8f02a..afcd0779882dec 100644 --- a/files/ru/glossary/first_input_delay/index.md +++ b/files/ru/glossary/first_input_delay/index.md @@ -7,9 +7,9 @@ slug: Glossary/First_input_delay **Задержка первого ввода** (англ. First input delay, FID) - одна из метрик производительности веб-страниц, которая описывает время, которое прошло с момента, когда пользователь впервые начал взаимодействовать с веб-страницей, т.е. нажал на ссылку, кнопку или использует элемент управления на основе JavaScript, до момента, когда веб-браузер может ответить на данное взаимодействие. Таким образом, это промежуток времени в миллисекундах между первым взаимодействием пользователя с веб-страницей и ответом браузера на это взаимодействие. Прокрутка и масштабирование не включены в этот показатель. -Время между моментом, когда содержимое отображается на странице, и моментом, когда все функциональные возможности становятся реагирующими на взаимодействие с человеком, часто варьируется в зависимости от размера и сложности JavaScript, который необходимо загрузить, проанализировать и выполнить в основном потоке. Оно зависит также и от возможности устройства, на котором выполняется JavaScript (подумайте о недорогих мобильных устройствах). Чем дольше задержка, тем хуже пользовательский опыт. Сокращение времени инициализации сайта и устранение [долгих задач](/ru/docs/Web/API/Long_Tasks_API) может помочь устранить первые задержки ввода. +Время между моментом, когда содержимое отображается на странице, и моментом, когда все функциональные возможности становятся реагирующими на взаимодействие с человеком, часто варьируется в зависимости от размера и сложности JavaScript, который необходимо загрузить, проанализировать и выполнить в основном потоке. Оно зависит также и от возможности устройства, на котором выполняется JavaScript (подумайте о недорогих мобильных устройствах). Чем дольше задержка, тем хуже пользовательский опыт. Сокращение времени инициализации сайта и устранение [долгих задач](/ru/docs/Web/API/PerformanceLongTaskTiming) может помочь устранить первые задержки ввода. ## Смотрите также - [requestIdleCallback](/ru/docs/Web/API/Window/requestIdleCallback) -- [lazy loading](/ru/docs/Learn/Performance/Lazy_loading) +- [lazy loading](/ru/docs/Web/Performance/Lazy_loading) diff --git a/files/ru/glossary/first_paint/index.md b/files/ru/glossary/first_paint/index.md index 0849b04ea5767a..95802e335712ac 100644 --- a/files/ru/glossary/first_paint/index.md +++ b/files/ru/glossary/first_paint/index.md @@ -9,6 +9,6 @@ slug: Glossary/First_paint ## Смотрите также -- [First meaningful paint](/ru/docs/Glossary/first_meaningful_paint) +- [First meaningful paint](/ru/docs/Glossary/First_meaningful_paint) - [First contentful paint](/ru/docs/Glossary/First_contentful_paint) -- [Paint Timing API](/ru/docs/) +- [Paint Timing API](/ru/docs/Web) diff --git a/files/ru/glossary/flex_item/index.md b/files/ru/glossary/flex_item/index.md index 140e4d87e67cb3..f195051120c21d 100644 --- a/files/ru/glossary/flex_item/index.md +++ b/files/ru/glossary/flex_item/index.md @@ -21,6 +21,6 @@ slug: Glossary/Flex_Item ### Читать далее -- Руководство по флексбоксу: [Основные понятия флексбокса](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox). +- Руководство по флексбоксу: [Основные понятия флексбокса](/ru/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox). - Руководство по флексбоксу: _[Ordering flex items](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_ - Руководство по флексбоксу: [Управление соотношением элементов вдоль главной оси](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Контролирование_соотношения_элементов_вдоль_главной_оси) diff --git a/files/ru/glossary/grid_column/index.md b/files/ru/glossary/grid_column/index.md index 8f404cb9a37c10..f2e4d311b491aa 100644 --- a/files/ru/glossary/grid_column/index.md +++ b/files/ru/glossary/grid_column/index.md @@ -5,11 +5,11 @@ slug: Glossary/Grid_Column {{GlossarySidebar}} -Столбец сетки (**grid column)** — это вертикальный элемент в [CSS Grid Layout](/ru/docs/Web/CSS/CSS_Grid_Layout), а также пространство между двумя вертикальными линиями сетки. Он определяется свойством {{cssxref("grid-template-columns")}}, либо в сокращённом виде {{cssxref("grid")}} или {{cssxref("grid-template")}}. +Столбец сетки (**grid column)** — это вертикальный элемент в [CSS Grid Layout](/ru/docs/Web/CSS/CSS_grid_layout), а также пространство между двумя вертикальными линиями сетки. Он определяется свойством {{cssxref("grid-template-columns")}}, либо в сокращённом виде {{cssxref("grid")}} или {{cssxref("grid-template")}}. Кроме того, столбцы могут быть созданы в неявном виде (_implicit grid),_ когда элементы расположены за пределами столбцов, созданных в явно-заданной сетке (_explicit grid)_. Размер этих столбцов будет подобран автоматически, либо задан с помощью свойства {{cssxref("grid-auto-columns")}}. -При работе с выравниванием в [CSS Grid Layout](/ru/docs/Web/CSS/CSS_Grid_Layout), ось, идущая вниз, вдоль которой идут столбцы, также называется осью блоков или столбцов. +При работе с выравниванием в [CSS Grid Layout](/ru/docs/Web/CSS/CSS_grid_layout), ось, идущая вниз, вдоль которой идут столбцы, также называется осью блоков или столбцов. ## Смотрите также @@ -22,4 +22,4 @@ slug: Glossary/Grid_Column ### Дальнейшая информация -- CSS Grid Layout Guide: _[Basic concepts of grid layout](/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_ +- CSS Grid Layout Guide: _[Basic concepts of grid layout](/ru/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_ diff --git a/files/ru/glossary/html/index.md b/files/ru/glossary/html/index.md index c6a554b1d0e709..7739226f66b9fc 100644 --- a/files/ru/glossary/html/index.md +++ b/files/ru/glossary/html/index.md @@ -33,4 +33,4 @@ HTML принято сохранять с расширением `.htm` или ` ### Техническая справка - [Документация HTML на MDN](/ru/docs/Web/HTML) -- [Спецификация HTML](http://www.w3.org/TR/html5/) +- [Спецификация HTML](https://www.w3.org/TR/html5/) diff --git a/files/ru/glossary/iife/index.md b/files/ru/glossary/iife/index.md index 5e6147e902813e..ed007cdfb3270a 100644 --- a/files/ru/glossary/iife/index.md +++ b/files/ru/glossary/iife/index.md @@ -45,4 +45,4 @@ result; // "Barry" ### Материалы - [Ben Alman's blog post defining IIFEs](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) -- [Quick example](/ru/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Functions) (в конце абзаца "Functions", сразу после "Custom objects") +- [Quick example](/ru/docs/Web/JavaScript/Language_overview#functions) (в конце абзаца "Functions", сразу после "Custom objects") diff --git a/files/ru/glossary/isp/index.md b/files/ru/glossary/isp/index.md index f01dd5250cc54c..8a2a1bec8b0260 100644 --- a/files/ru/glossary/isp/index.md +++ b/files/ru/glossary/isp/index.md @@ -11,4 +11,4 @@ ISP (Интернет-провайдер) продаёт доступ к инт ### Общие знания -- [Как работает Интернет](/ru/docs/Learn/How_the_Internet_works) (объяснение для новичков) +- [Как работает Интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) (объяснение для новичков) diff --git a/files/ru/glossary/javascript/index.md b/files/ru/glossary/javascript/index.md index 0eb38e77ceaa61..1a5eee98ca9bbd 100644 --- a/files/ru/glossary/javascript/index.md +++ b/files/ru/glossary/javascript/index.md @@ -5,7 +5,7 @@ slug: Glossary/JavaScript {{GlossarySidebar}} -JavaScript (JS) это язык программирования, который в основном используется для создания динамических скриптов на веб-страницах, но он так же часто применяется на стороне {{Glossary("Server", "сервера")}}, используя пакеты, такие как [Node.JS](http://nodejs.org/). +JavaScript (JS) это язык программирования, который в основном используется для создания динамических скриптов на веб-страницах, но он так же часто применяется на стороне {{Glossary("Server", "сервера")}}, используя пакеты, такие как [Node.JS](https://nodejs.org/). JavaScript не следует путать с [Java](https://ru.wikipedia.org/wiki/Java). «Java» и «JavaScript» являются товарными знаками или зарегистрированными товарными знаками Oracle в США и других странах. Тем не менее, два языка программирования существенно различаются по синтаксису, семантике и использованию. @@ -15,7 +15,7 @@ JavaScript не следует путать с [Java](https://ru.wikipedia.org/w JavaScript в основном используется в браузере, что позволяет разработчикам манипулировать содержимым веб-страницы с помощью {{Glossary("DOM")}}, данными с помощью {{Glossary("AJAX")}} и {{Glossary("IndexedDB")}}, рисовать графику с помощью {{Glossary("canvas")}}, взаимодействовать с устройством под управлением браузера через различные {{Glossary("API","APIs")}} и т.д. JavaScript является одним из наиболее часто используемых языков в мире благодаря недавнему росту и повышению производительности доступных в браузерах {{Glossary ("API", "APIs")}}. -В последнее время популярность JavaScript расширилась ещё больше благодаря успешной платформе [Node.js](http://nodejs.org/) - самой популярной кроссплатформенной среде выполнения JavaScript вне браузера. Node.js позволяет разработчикам использовать JavaScript в качестве языка сценариев для автоматизации работы на ПК и создания полнофункциональных {{Glossary ("HTTP")}} и {{Glossary ("WebSockets")}} серверов. +В последнее время популярность JavaScript расширилась ещё больше благодаря успешной платформе [Node.js](https://nodejs.org/) - самой популярной кроссплатформенной среде выполнения JavaScript вне браузера. Node.js позволяет разработчикам использовать JavaScript в качестве языка сценариев для автоматизации работы на ПК и создания полнофункциональных {{Glossary ("HTTP")}} и {{Glossary ("WebSockets")}} серверов. ## Узнай больше @@ -23,11 +23,11 @@ JavaScript в основном используется в браузере, ч - [Руководство JavaScript](/ru/docs/Web/JavaScript/Guide) на MDN - [The "javascripting" workshop on NodeSchool](http://nodeschool.io/#workshoppers) -- [Курс JavaScript на codecademy.com](http://www.codecademy.com/tracks/javascript) +- [Курс JavaScript на codecademy.com](https://www.codecademy.com/tracks/javascript) - [John Resig's Learning Advanced JavaScript](http://ejohn.org/apps/learn/) ### Технический справочник -- [Последний стандарт ECMAScript](http://www.ecma-international.org/publications/standards/Ecma-262.htm) -- [Справочник по JavaScript](/ru/docs/Web/JavaScript/reference) на MDN -- [The _Eloquent JavaScript_ book](http://eloquentjavascript.net/) +- [Последний стандарт ECMAScript](https://www.ecma-international.org/publications/standards/Ecma-262.htm) +- [Справочник по JavaScript](/ru/docs/Web/JavaScript/Reference) на MDN +- [The _Eloquent JavaScript_ book](https://eloquentjavascript.net/) diff --git a/files/ru/glossary/main_axis/index.md b/files/ru/glossary/main_axis/index.md index 2ad4e066d2e5ec..0cb7c7577d59dd 100644 --- a/files/ru/glossary/main_axis/index.md +++ b/files/ru/glossary/main_axis/index.md @@ -35,6 +35,6 @@ slug: Glossary/Main_Axis ### Дальнейшее чтение -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ +- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/ru/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS Flexbox Guide: _[Aligning items in a flex container](/ru/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ +- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/ru/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ diff --git a/files/ru/glossary/method/index.md b/files/ru/glossary/method/index.md index 81005b7a27e628..b7f35a5b9aa759 100644 --- a/files/ru/glossary/method/index.md +++ b/files/ru/glossary/method/index.md @@ -14,7 +14,7 @@ slug: Glossary/Method ### Узнайте об этом -- [Определение методов в JavaScript](/ru/docs/Web/JavaScript/Reference/Functions/Определиние_методов) (сравнение традиционного синтаксиса и нового короткого) +- [Определение методов в JavaScript](/ru/docs/Web/JavaScript/Reference/Functions/Method_definitions) (сравнение традиционного синтаксиса и нового короткого) ### Техническая информация @@ -29,4 +29,4 @@ slug: Glossary/Method - {{Glossary("property","Свойство")}} - {{Glossary("static method","Статический метод")}} -- [Определение методов в JavaScript](/ru/docs/Web/JavaScript/Reference/Functions/Определиние_методов) +- [Определение методов в JavaScript](/ru/docs/Web/JavaScript/Reference/Functions/Method_definitions) diff --git a/files/ru/glossary/mime_type/index.md b/files/ru/glossary/mime_type/index.md index f22b430135f9a4..9c4fc48999776f 100644 --- a/files/ru/glossary/mime_type/index.md +++ b/files/ru/glossary/mime_type/index.md @@ -15,6 +15,6 @@ slug: Glossary/MIME_type ### Технические справки -- [List of MIME types](http://www.iana.org/assignments/media-types/media-types.xhtml) -- [Properly Configuring Server MIME Types](/ru/docs/Properly_Configuring_Server_MIME_Types) +- [List of MIME types](https://www.iana.org/assignments/media-types/media-types.xhtml) +- [Properly Configuring Server MIME Types](/ru/docs/Learn/Server-side/Configuring_server_MIME_types) - Детальная информация об использовании [MIME Types](/ru/docs/Web/HTTP/MIME_types) в контексте Веб. diff --git a/files/ru/glossary/number/index.md b/files/ru/glossary/number/index.md index 483c738174e058..3cda4ecd895376 100644 --- a/files/ru/glossary/number/index.md +++ b/files/ru/glossary/number/index.md @@ -16,5 +16,5 @@ slug: Glossary/Number ### Техническая справка -- Числовой тип данных JavaScript: [Number](/ru/docs/Web/JavaScript/Data_structures#.D0.A7.D0.B8.D1.81.D0.BB.D0.B0) +- Числовой тип данных JavaScript: [Number](/ru/docs/Web/JavaScript/Data_structures#.d0.a7.d0.b8.d1.81.d0.bb.d0.b0) - Глобальный объект JavaScript: {{jsxref("Number")}} diff --git a/files/ru/glossary/object/index.md b/files/ru/glossary/object/index.md index 8d8fbe82313bcc..4fc43ddd3fda39 100644 --- a/files/ru/glossary/object/index.md +++ b/files/ru/glossary/object/index.md @@ -14,4 +14,4 @@ slug: Glossary/Object ### Общие сведения - {{jsxref("Object")}} в [справочнике JavaScript](/ru/docs/Web/JavaScript/Reference) -- [Object data structures in JavaScript](/ru/docs/Web/JavaScript/Data_structures#Objects) +- [Object data structures in JavaScript](/ru/docs/Web/JavaScript/Data_structures#objects) diff --git a/files/ru/glossary/oop/index.md b/files/ru/glossary/oop/index.md index 7c83354ca3249a..e1da084cebcc86 100644 --- a/files/ru/glossary/oop/index.md +++ b/files/ru/glossary/oop/index.md @@ -7,7 +7,7 @@ slug: Glossary/OOP **ООП** (**О**бъектно-**О**риентированное **П**рограммирование) это подход в программировании, согласно которому, данные инкапсулированы внутри **{{glossary("object","объектов")}}**, а сам объект существует как составная часть целого. -{{glossary("JavaScript")}} сильно объектно-ориентирован. Он следует модели, базирующейся на прототипах ([в отличии от модели, базирующейся на классах](/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages)). +{{glossary("JavaScript")}} сильно объектно-ориентирован. Он следует модели, базирующейся на прототипах ([в отличии от модели, базирующейся на классах](/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#class-based_vs._prototype-based_languages)). ## Смотрите также diff --git a/files/ru/glossary/plugin/index.md b/files/ru/glossary/plugin/index.md index e30ff1cad4a6b4..6ff7f2ac5c8bff 100644 --- a/files/ru/glossary/plugin/index.md +++ b/files/ru/glossary/plugin/index.md @@ -17,7 +17,7 @@ slug: Glossary/Plugin - : Начиная с Firefox 55 в Августе 2017, пользователи смогут [выбрать](/ru/docs/Plugins/Flash_Activation:_Browser_Comparison), каким сайта разрешено активировать Flash плагин. У пользователей появится надстройка, разрешающая запуск Flash, для каждого сайта отдельно. _Это изменение будет вводится постепенно, начиная с Августа и Сентября 2017._ - В целях повышения безопасности и улучшения производительности, Mozilla будет вести [список сайтов](/ru/docs/Plugins/Blocking_By_Domain), которые не могу использовать никакие плагины. + В целях повышения безопасности и улучшения производительности, Mozilla будет вести [список сайтов](/ru/docs/Glossary/Plugin), которые не могу использовать никакие плагины. - Сентябрь 2017 - : Начиная с Firefox 56 в Сентябре 2017, в Firefox для Android будет удалена поддержка всех плагинов ([Firefox bug 1381916](https://bugzil.la/1381916)). diff --git a/files/ru/glossary/regular_expression/index.md b/files/ru/glossary/regular_expression/index.md index 8191a37dd9a23f..f745555a9dbe29 100644 --- a/files/ru/glossary/regular_expression/index.md +++ b/files/ru/glossary/regular_expression/index.md @@ -18,4 +18,4 @@ slug: Glossary/Regular_expression ### Технические -- [Написание регулярных выражений в JavaScript](/ru/docs/Web/JavaScript/Guide/Regular_Expressions) +- [Написание регулярных выражений в JavaScript](/ru/docs/Web/JavaScript/Guide/Regular_expressions) diff --git a/files/ru/glossary/request_header/index.md b/files/ru/glossary/request_header/index.md index e2ac345bf3c97f..ced432a47e585a 100644 --- a/files/ru/glossary/request_header/index.md +++ b/files/ru/glossary/request_header/index.md @@ -41,4 +41,4 @@ Content-Length: 128 ### Технические знания -- [Список всех HTTP заголовков](/ru/docs/Web/HTTP/Заголовки) +- [Список всех HTTP заголовков](/ru/docs/Web/HTTP/Headers) diff --git a/files/ru/glossary/responsive_web_design/index.md b/files/ru/glossary/responsive_web_design/index.md index ee20bff26f8cd4..2d587cc63d6cc5 100644 --- a/files/ru/glossary/responsive_web_design/index.md +++ b/files/ru/glossary/responsive_web_design/index.md @@ -11,6 +11,6 @@ _Адаптивный веб-дизайн_ ( **RWD** ) - это концепци ### Общая информация -- [Summary and resources](/ru/docs/Web_Development/Responsive_Web_design) -- [Pros and cons of going responsive](/ru/docs/Web_Development/Mobile/Responsive_design) +- [Summary and resources](/ru/docs/Web/Progressive_web_apps) +- [Pros and cons of going responsive](/ru/docs/Web/Progressive_web_apps) - [Responsive Web Design](http://msdn.microsoft.com/en-us/magazine/hh653584.aspx) diff --git a/files/ru/glossary/round_trip_time/index.md b/files/ru/glossary/round_trip_time/index.md index f1bc814820c596..c3c3d2f2852ba4 100644 --- a/files/ru/glossary/round_trip_time/index.md +++ b/files/ru/glossary/round_trip_time/index.md @@ -24,5 +24,5 @@ round-trip min/avg/max/stddev = 23.781/26.828/34.904/4.114 ms ## Смотрите также -- [Time to First Byte (TTFB)](/ru/docs/Glossary/time_to_first_byte) +- [Time to First Byte (TTFB)](/ru/docs/Glossary/Time_to_first_byte) - [Latency](/ru/docs/Glossary/Latency) diff --git a/files/ru/glossary/sdp/index.md b/files/ru/glossary/sdp/index.md index 36f54a1f7bd430..3fa0a895850554 100644 --- a/files/ru/glossary/sdp/index.md +++ b/files/ru/glossary/sdp/index.md @@ -29,4 +29,4 @@ SDP is never used alone, but by protocols like {{Glossary("RTP")}} and {{Glossar ### General knowledge -- [WebRTC protocols](/ru/docs/Web/API/WebRTC_API/Architecture/Protocols) +- [WebRTC protocols](/ru/docs/Web/API/WebRTC_API/Protocols) diff --git a/files/ru/glossary/semantics/index.md b/files/ru/glossary/semantics/index.md index faa55b64042de8..d831d3c482a227 100644 --- a/files/ru/glossary/semantics/index.md +++ b/files/ru/glossary/semantics/index.md @@ -67,8 +67,8 @@ HTML должен предоставлять структуру информац ## Learn more -- [HTML element reference](/ru/docs/Web/HTML/Element#Inline_text_semantics) on MDN -- [Using HTML sections and outlines](/ru/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Problems_solved_by_HTML5) on MDN +- [HTML element reference](/ru/docs/Web/HTML/Element#inline_text_semantics) on MDN +- [Using HTML sections and outlines](/ru/docs/Web/HTML/Element/Heading_Elements#problems_solved_by_html5) on MDN - [MDN Web Docs Glossary](/ru/docs/Glossary) - {{Glossary("SEO")}} diff --git a/files/ru/glossary/string/index.md b/files/ru/glossary/string/index.md index ed6ef0497fb57b..4b6a9aceac43c2 100644 --- a/files/ru/glossary/string/index.md +++ b/files/ru/glossary/string/index.md @@ -13,4 +13,4 @@ slug: Glossary/String ### Общие сведения -- [JavaScript data types and data structures](/ru/docs/Web/JavaScript/Data_structures#String_type) +- [JavaScript data types and data structures](/ru/docs/Web/JavaScript/Data_structures#string_type) diff --git a/files/ru/glossary/svg/index.md b/files/ru/glossary/svg/index.md index 98af6cb4475b42..8b5192ae340f2e 100644 --- a/files/ru/glossary/svg/index.md +++ b/files/ru/glossary/svg/index.md @@ -11,7 +11,7 @@ _Масштабируемая векторная графика_ ( **SVG** ) - На основе синтаксиса {{Glossary("XML")}}, SVG можно стилизовать с помощью {{Glossary("CSS")}} и сделать интерактивным с использованием {{Glossary("JavaScript")}}. HTML5 теперь позволяет прямое встраивание {{Glossary("Tag","тегов")}} SVG в {{Glossary("HTML")}} документ. -В качестве [формата векторного изображения](http://en.wikipedia.org/wiki/Vector_graphics) графика SVG может масштабироваться бесконечно, делая их неоценимыми в [адаптивном дизайне](/ru/docs/Glossary/responsive_design) , поскольку вы можете создавать элементы интерфейса и графику, масштабируемые для любого размера экрана. SVG также предоставляет полезный набор инструментов, таких как обрезание, маскирование, фильтры и анимации. +В качестве [формата векторного изображения](http://en.wikipedia.org/wiki/Vector_graphics) графика SVG может масштабироваться бесконечно, делая их неоценимыми в [адаптивном дизайне](/ru/docs/Glossary/Responsive_web_design) , поскольку вы можете создавать элементы интерфейса и графику, масштабируемые для любого размера экрана. SVG также предоставляет полезный набор инструментов, таких как обрезание, маскирование, фильтры и анимации. ## Смотрите также @@ -22,4 +22,4 @@ _Масштабируемая векторная графика_ ( **SVG** ) - ### Техническая документация - [SVG documentation on MDN](/ru/docs/Web/SVG) -- [Latest SVG specification](http://www.w3.org/TR/SVG/) +- [Latest SVG specification](https://www.w3.org/TR/SVG/) diff --git a/files/ru/glossary/tag/index.md b/files/ru/glossary/tag/index.md index fd995475a1afa1..3a030d10518bf4 100644 --- a/files/ru/glossary/tag/index.md +++ b/files/ru/glossary/tag/index.md @@ -11,7 +11,7 @@ slug: Glossary/Tag ### Общие знания -- [HTML Теги на W3](http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html) +- [HTML Теги на W3](https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html) ### Техническое руководство diff --git a/files/ru/glossary/time_to_first_byte/index.md b/files/ru/glossary/time_to_first_byte/index.md index 130612962cd392..e3c9d743457f33 100644 --- a/files/ru/glossary/time_to_first_byte/index.md +++ b/files/ru/glossary/time_to_first_byte/index.md @@ -5,7 +5,7 @@ slug: Glossary/Time_to_first_byte {{GlossarySidebar}} -**Время до первого байта** (англ. Time to First Byte, TTFB) - одна из метрик производительности веб-страниц, которая описывает время, которое прошло с момента отправления браузером запроса страницы до момента, когда он получил первый байт информации с сервера. Это время включает в себя поиск [DNS](/ru/docs/Glossary/DNS)-сервера и установление соединения с использованием [TCP](/ru/docs/Glossary/TCP)-рукопожатия и [SSL](/ru/docs/Glossary/SSL_Glossary)-рукопожатия, если запрос выполняется через [https](/ru/docs/Glossary/https). +**Время до первого байта** (англ. Time to First Byte, TTFB) - одна из метрик производительности веб-страниц, которая описывает время, которое прошло с момента отправления браузером запроса страницы до момента, когда он получил первый байт информации с сервера. Это время включает в себя поиск [DNS](/ru/docs/Glossary/DNS)-сервера и установление соединения с использованием [TCP](/ru/docs/Glossary/TCP)-рукопожатия и [SSL](/ru/docs/Glossary/SSL)-рукопожатия, если запрос выполняется через [https](/ru/docs/Glossary/HTTPS). TTFB - время между началом запроса и началом ответа в миллисекундах: diff --git a/files/ru/glossary/time_to_interactive/index.md b/files/ru/glossary/time_to_interactive/index.md index eaf04ed1f17793..58a9dda4898bca 100644 --- a/files/ru/glossary/time_to_interactive/index.md +++ b/files/ru/glossary/time_to_interactive/index.md @@ -5,7 +5,7 @@ slug: Glossary/Time_to_interactive {{GlossarySidebar}} -**Время до интерактивности** (англ. Time to Interactive, TTI) - это нестандартизированная метрика веб-производительности, которая определяется как момент времени, когда завершилась последняя [долгая задача](/ru/docs/Web/API/Long_Tasks_API), после которой следовало 5 секунд бездействия сети и основного потока. +**Время до интерактивности** (англ. Time to Interactive, TTI) - это нестандартизированная метрика веб-производительности, которая определяется как момент времени, когда завершилась последняя [долгая задача](/ru/docs/Web/API/PerformanceLongTaskTiming), после которой следовало 5 секунд бездействия сети и основного потока. TTI, предложенный WICG в 2018 году, был предназначен для предоставления показателя, описывающей состояние, когда страница или приложение содержит полезный контент, а основной поток простаивает и может свободно реагировать на взаимодействия с пользователем, включая регистрацию обработчиков событий. diff --git a/files/ru/glossary/user_agent/index.md b/files/ru/glossary/user_agent/index.md index 4aa99df06bbf90..241f1a71d04e6d 100644 --- a/files/ru/glossary/user_agent/index.md +++ b/files/ru/glossary/user_agent/index.md @@ -23,4 +23,4 @@ slug: Glossary/User_agent ### Техническая справка -- [User agent](http://tools.ietf.org/html/rfc2616#section-14.43) заголовок запроса в спецификации RFC 2616 +- [User agent](https://tools.ietf.org/html/rfc2616#section-14.43) заголовок запроса в спецификации RFC 2616 diff --git a/files/ru/glossary/w3c/index.md b/files/ru/glossary/w3c/index.md index 27cc7debd39216..95c72590fe52c9 100644 --- a/files/ru/glossary/w3c/index.md +++ b/files/ru/glossary/w3c/index.md @@ -15,4 +15,4 @@ W3C объединяет более 350 организаций-участник ### Основная информация -- [W3C веб-сайт](http://www.w3.org/) +- [W3C веб-сайт](https://www.w3.org/) diff --git a/files/ru/glossary/wai/index.md b/files/ru/glossary/wai/index.md index 32cf72c6f9ce07..0d86c30d75cbfd 100644 --- a/files/ru/glossary/wai/index.md +++ b/files/ru/glossary/wai/index.md @@ -11,4 +11,4 @@ _WAI_ или _Web Accessibility Initiative_ (англ. Инициатива до ### Базовые знания -- [Сайт WAI](http://www.w3.org/WAI/) +- [Сайт WAI](https://www.w3.org/WAI/) diff --git a/files/ru/glossary/websockets/index.md b/files/ru/glossary/websockets/index.md index 6d58ce01c7c9fa..30305fe8b14712 100644 --- a/files/ru/glossary/websockets/index.md +++ b/files/ru/glossary/websockets/index.md @@ -17,5 +17,5 @@ _WebSocket_ - это {{Glossary("protocol", "протокол")}}, которы ### Примеры использования -- [Создание клиентского приложения WebSocket](/ru/docs/WebSockets/Writing_WebSocket_client_applications) +- [Создание клиентского приложения WebSocket](/ru/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications) - [Создание сервера с использованием WebSocket](/ru/docs/Web/API/WebSockets_API/Writing_WebSocket_servers) diff --git a/files/ru/glossary/whitespace/index.md b/files/ru/glossary/whitespace/index.md index f3533d54fc88c7..99b03597bc5e0a 100644 --- a/files/ru/glossary/whitespace/index.md +++ b/files/ru/glossary/whitespace/index.md @@ -17,7 +17,7 @@ slug: Glossary/Whitespace 2. Ссылки - 1. [Пробельные символы в модели DOM](/ru/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM) + 1. [Пробельные символы в модели DOM](/ru/docs/Web/API/Document_Object_Model/Whitespace) 2. {{cssxref("white-space")}} 3. [Глоссарий](/ru/docs/Glossary) diff --git a/files/ru/glossary/world_wide_web/index.md b/files/ru/glossary/world_wide_web/index.md index 49eec5e9d5c0a4..0a4f2e27576f5b 100644 --- a/files/ru/glossary/world_wide_web/index.md +++ b/files/ru/glossary/world_wide_web/index.md @@ -23,9 +23,9 @@ slug: Glossary/World_Wide_Web ### Обучение -- [Изучение веб-разработки](/en-US/Learn) +- [Изучение веб-разработки](/ru/docs/Learn) - [Web literacy map](https://learning.mozilla.org/web-literacy) (знания и умения, необходимые для веб-разработки) ### Общие ведомости -- [Сайт международного сообщества W3C](http://w3.org) +- [Сайт международного сообщества W3C](https://w3.org) diff --git a/files/ru/glossary/xhtml/index.md b/files/ru/glossary/xhtml/index.md index 88856b05b1b88c..9336a256c17c01 100644 --- a/files/ru/glossary/xhtml/index.md +++ b/files/ru/glossary/xhtml/index.md @@ -5,24 +5,24 @@ slug: Glossary/XHTML {{GlossarySidebar}} -**XHTML** по отношению к [XML](/ru/XML) - это так же, как [HTML](/ru/HTML) по отношению к [SGML](/en/SGML). Таким образом, XHTML - язык разметки который подобен HTML, но с более строгим синтаксисом. Две версии XHTML были закончены (окончательно сформулированы) [W3C](http://www.w3.org/): +**XHTML** по отношению к [XML](/ru/XML) - это так же, как [HTML](/ru/docs/Web/HTML) по отношению к [SGML](/en-US/SGML). Таким образом, XHTML - язык разметки который подобен HTML, но с более строгим синтаксисом. Две версии XHTML были закончены (окончательно сформулированы) [W3C](https://www.w3.org/): -- [XHTML 1.0](http://www.w3.org/TR/xhtml1/) - это HTML4 повторно сформулированный как XML-приложение , и с обратной совместимостью с HTML в ограниченных случаях. -- [XHTML 1.1](http://www.w3.org/TR/xhtml11/) - это модульная версия XHTML, которая не является обратно совместимой с HTML. +- [XHTML 1.0](https://www.w3.org/TR/xhtml1/) - это HTML4 повторно сформулированный как XML-приложение , и с обратной совместимостью с HTML в ограниченных случаях. +- [XHTML 1.1](https://www.w3.org/TR/xhtml11/) - это модульная версия XHTML, которая не является обратно совместимой с HTML. -Третья версия, [XHTML 2](http://www.w3.org/TR/xhtml2/) - содержит существенные изменения словаря элементов (has significant changes to the element vocabulary). +Третья версия, [XHTML 2](https://www.w3.org/TR/xhtml2/) - содержит существенные изменения словаря элементов (has significant changes to the element vocabulary). Для получения дополнительной информации о XHTML, см.: - [Wikipedia's XHTML article](http://ru.wikipedia.org/wiki/XHTML) -- [Sending XHTML as text/html considered harmful](http://www.hixie.ch/advocacy/xhtml) +- [Sending XHTML as text/html considered harmful](https://www.hixie.ch/advocacy/xhtml) ### Инструменты - [Markup validation service (W3C)](http://validator.w3.org/) -- [Standards-Compliant Authoring Tools](/en/Standards-Compliant_Authoring_Tools) +- [Standards-Compliant Authoring Tools](/en-US/Standards-Compliant_Authoring_Tools) ### Смотрите также -- [HTML](/ru/HTML) +- [HTML](/ru/docs/Web/HTML) - [Namespaces](/ru/Namespaces) diff --git a/files/ru/learn/accessibility/css_and_javascript/index.md b/files/ru/learn/accessibility/css_and_javascript/index.md index 3b96d2e5c22456..16a6eb2fad16c7 100644 --- a/files/ru/learn/accessibility/css_and_javascript/index.md +++ b/files/ru/learn/accessibility/css_and_javascript/index.md @@ -86,7 +86,7 @@ em { } ``` -Однако не стоит сильно менять стандартную стилизацию акцентирующих элементов. Стандартный вид полужирного и курсивного текста хорошо узнаваем, поэтому изменение стилизации может вызывать путаницу. Для более подробной информации смотрите [Акцент и важность](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Акцент_и_важность). +Однако не стоит сильно менять стандартную стилизацию акцентирующих элементов. Стандартный вид полужирного и курсивного текста хорошо узнаваем, поэтому изменение стилизации может вызывать путаницу. Для более подробной информации смотрите [Акцент и важность](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#акцент_и_важность). #### Аббревиатуры @@ -107,7 +107,7 @@ abbr { } ``` -Стандартная стилизация для аббревиатур — это пунктирное подчёркивание, не стоит от этого сильно отклоняться. Для более подробной информации смотрите [Аббревиатуры](/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Аббревиатуры). +Стандартная стилизация для аббревиатур — это пунктирное подчёркивание, не стоит от этого сильно отклоняться. Для более подробной информации смотрите [Аббревиатуры](/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#аббревиатуры). #### Ссылки @@ -174,7 +174,7 @@ a:active { При выборе цветовой палитры для сайта, следует следить за тем, чтобы цвет текста имел высокий уровень контрастности относительно цвета фона. Дизайн может выглядеть очень стильно, однако это не будет иметь никакого смысла, если люди с дефектами зрения (такими как дальтонизм) не смогут прочитать ваш контент. -К счастью, проверить, всё ли в порядке с уровнем контрастности, весьма просто. Существует множество онлайн-инструментов, которые помогут сравнить пару цветов и вычислить значение контрастности. Например, [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) от WebAIM. Это довольно простой в использовании инструмент, который также предоставляет инструкции, как можно добиться соответствия критериям WCAG по контрастности цветов. +К счастью, проверить, всё ли в порядке с уровнем контрастности, весьма просто. Существует множество онлайн-инструментов, которые помогут сравнить пару цветов и вычислить значение контрастности. Например, [Color Contrast Checker](https://webaim.org/resources/contrastchecker/) от WebAIM. Это довольно простой в использовании инструмент, который также предоставляет инструкции, как можно добиться соответствия критериям WCAG по контрастности цветов. > [!NOTE] > Высокий уровень контрастности также позволяет пользователям мобильных устройств с глянцевыми экранами комфортнее читать текст при ярком освещении. @@ -192,7 +192,7 @@ a:active { А вот {{cssxref("visibility")}}`:hidden` и {{cssxref("display")}}`:none`, напротив, использовать для скрытия контента не следует, потому что они скрывают его не только визуально, но и от скринридеров. Поэтому применять эти свойства стоит, только если совсем скрыть контент и является вашей задачей. > [!NOTE] -> В статье [Невидимый контент только для пользователей скринридеров (EN)](http://webaim.org/techniques/css/invisiblecontent/) содержится множество полезной информации по этой теме. +> В статье [Невидимый контент только для пользователей скринридеров (EN)](https://webaim.org/techniques/css/invisiblecontent/) содержится множество полезной информации по этой теме. ### Помните, что пользователи могут переопределять стили @@ -214,9 +214,9 @@ a:active { Сравнительно несложно сделать доступным простой контент — например, текст, изображения, таблицы, формы и кнопки. Вспомним основные тезисы из статьи [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML): - Хорошая семантика: использование каждого элемента для своей задачи. Следует убедиться, что используются различные типы элементов: заголовки, параграфы, {{htmlelement("button")}}, {{htmlelement("a")}} и так далее. -- Контент должен быть доступен либо как обычный текст, либо как [альтернативный текст](/ru/docs/Learn/Accessibility/HTML#Альтернативный_текст), например атрибут alt для изображений. +- Контент должен быть доступен либо как обычный текст, либо как [альтернативный текст](/ru/docs/Learn/Accessibility/HTML#альтернативный_текст), например атрибут alt для изображений. -Мы также показали пример использования JavaScript для добавления некоторым элементам возможностей, которых они лишены по умолчанию — смотрите в разделе [Добавление доступности с клавиатуры](/ru/docs/Learn/Accessibility/HTML#Добавление_доступности_с_клавиатуры). Такое решение стоит рассматривать только в случае, когда по какой-то причине у вас нет доступа к изменению разметки. Намного надежнее и универсальнее будет использовать для каждой задачи соответствующий элемент. Также улучшить доступность несемантичных JavaScript-виджетов можно использованием WAI-ARIA атрибутов — с их помощью можно добавить некоторой искусственной семантики для пользователей скринридеров. В следующей статье мы рассмотрим эту тему подробнее. +Мы также показали пример использования JavaScript для добавления некоторым элементам возможностей, которых они лишены по умолчанию — смотрите в разделе [Добавление доступности с клавиатуры](/ru/docs/Learn/Accessibility/HTML#добавление_доступности_с_клавиатуры). Такое решение стоит рассматривать только в случае, когда по какой-то причине у вас нет доступа к изменению разметки. Намного надежнее и универсальнее будет использовать для каждой задачи соответствующий элемент. Также улучшить доступность несемантичных JavaScript-виджетов можно использованием WAI-ARIA атрибутов — с их помощью можно добавить некоторой искусственной семантики для пользователей скринридеров. В следующей статье мы рассмотрим эту тему подробнее. Сложные приложения, например 3D-игры, сделать доступными непросто — написанная с использованием [WebGL](/ru/docs/Web/API/WebGL_API) игра рендерится в элементе {{htmlelement("canvas")}}, который в настоящее время не предоставляет никаких возможностей для использования людьми с дефектами зрения. Можно успокаивать себя тем, что данная группа пользователей не входит в целевую аудиторию, поэтому не стоит ожидать полной доступности для них. Тем не менее, вы можете реализовать [управление с помощью клавиатуры](/ru/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) для игроков, которые не могут использовать мышь, а также сделать цветовую схему достаточно контрастной для игроков с дальтонизмом. @@ -321,7 +321,7 @@ function createLink(testItem) { > Кто-то из читателей мог задуматься о том факте, что в HTML5 формах есть встроенные механизмы валидации, такие как атрибуты `required`, `min`/`minlength` и `max`/`maxlength` (смотрите подробнее на странице элемента {{htmlelement("input")}}). Мы не использовали их в примере, потому что поддержка браузерами у HTML5 валидации весьма варьируется (например, только IE10 и новее). > [!NOTE] -> Статья [Удобная и доступная валидация форм (EN)](http://webaim.org/techniques/formvalidation/) от WebAIM содержит дополнительную полезную информацию по этой теме. +> Статья [Удобная и доступная валидация форм (EN)](https://webaim.org/techniques/formvalidation/) от WebAIM содержит дополнительную полезную информацию по этой теме. ### Прочие проблемы доступности, связанные с JavaScript @@ -347,7 +347,7 @@ imgThumb.onblur = hideImg; Первые две строки кода запускают функцию, когда указатель мыши наводится на изображение или уходит с него, соответственно. Такая реализация не позволит открыть увеличенное изображение при помощи клавиатуры. Чтобы решить эту проблему, мы добавили последние две строки, которые запускают функции в случаях, если фокус перешёл на изображение или же ушёл с него. Таким образом, увеличенное изображение будет открываться при переходе на миниатюру при помощи клавиши tab (это возможно, потому что мы добавили миниатюрам `tabindex="0"`). -Событие [click](/ru/docs/Web/API/Element/click_event) довольно любопытное — выглядит так, будто бы оно специфичное для мыши, однако большинство браузеров при нажатии клавиши Enter/Return активируют обработчики событий [onclick](/ru/docs/Web/API/GlobalEventHandlers/onclick) на находящихся в фокусе ссылках или элементах формы, а также при тапе по элементам на сенсорном экране. Впрочем, это не работает автоматически, если вы позволяете принимать фокус неинтерактивному по умолчанию элементу при помощи tabindex — в таких случаях нужно специально прослушивать нажатие нужных кнопок (смотрите [Добавление доступности с клавиатуры](/ru/docs/Learn/Accessibility/HTML#Добавление_доступности_с_клавиатуры)). +Событие [click](/ru/docs/Web/API/Element/click_event) довольно любопытное — выглядит так, будто бы оно специфичное для мыши, однако большинство браузеров при нажатии клавиши Enter/Return активируют обработчики событий [onclick](/ru/docs/Web/API/Element/click_event) на находящихся в фокусе ссылках или элементах формы, а также при тапе по элементам на сенсорном экране. Впрочем, это не работает автоматически, если вы позволяете принимать фокус неинтерактивному по умолчанию элементу при помощи tabindex — в таких случаях нужно специально прослушивать нажатие нужных кнопок (смотрите [Добавление доступности с клавиатуры](/ru/docs/Learn/Accessibility/HTML#добавление_доступности_с_клавиатуры)). ## Проверьте ваши навыки! diff --git a/files/ru/learn/accessibility/what_is_accessibility/index.md b/files/ru/learn/accessibility/what_is_accessibility/index.md index 0fd63b20b43670..61e85a4265c3c5 100644 --- a/files/ru/learn/accessibility/what_is_accessibility/index.md +++ b/files/ru/learn/accessibility/what_is_accessibility/index.md @@ -39,7 +39,7 @@ slug: Learn/Accessibility/What_is_accessibility - Некоторые платные коммерческие продукты, такие как [JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS) (Windows) и [Window Eyes](http://www.gwmicro.com/window-eyes/) (Windows). - Некоторые бесплатные продукты, такие как [NVDA](http://www.nvaccess.org/) (для Windows), [ChromeVox](http://www.chromevox.com/) (браузер Chrome, Windows и Mac ОС Х) и [Orca](https://wiki.gnome.org/Projects/Orca) (Linux). -- Некоторые из них встроены в операционную систему, например [VoiceOver](http://www.apple.com/accessibility/osx/voiceover/) (Mac OS X и iOS), [Экранный диктор](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started)([Narrator](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started)) (Microsoft Windows), [ChromeVox](http://www.chromevox.com/) (в ChromeOS) и [TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback) (Android). +- Некоторые из них встроены в операционную систему, например [VoiceOver](https://www.apple.com/accessibility/osx/voiceover/) (Mac OS X и iOS), [Экранный диктор](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started)([Narrator](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started)) (Microsoft Windows), [ChromeVox](http://www.chromevox.com/) (в ChromeOS) и [TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback) (Android). Хорошая идея ознакомиться с экранными дикторами; вы можете настроить экранный считыватель и поиграть с ним, чтобы получить представление о том, как это работает. Более подробную информацию об их использовании см. в [руководстве по кросс-браузерному тестированию](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders). Видео ниже предоставляет краткий пример взаимодействия с экранными читателями. @@ -86,7 +86,7 @@ slug: Learn/Accessibility/What_is_accessibility С точки зрения статистики, опять же цифры значительны. Отчёт Корнелльского университета [О состоянии инвалидности за 2014 год](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf) (PDF, 511 КБ)(en) показывает, что в 2014 году 4,5% людей в США в возрасте 21-64 лет имели ту или иную форму когнитивной инвалидности. -> **Примечание:** [Страница о когнитивных расстройствах](http://webaim.org/articles/cognitive/) на WebAIM обеспечивает полезное распространение этих идей, и это, безусловно, стоит прочитать. +> **Примечание:** [Страница о когнитивных расстройствах](https://webaim.org/articles/cognitive/) на WebAIM обеспечивает полезное распространение этих идей, и это, безусловно, стоит прочитать. ## Реализация доступности в проекте diff --git a/files/ru/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md b/files/ru/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md index b8aade8564d9f9..913829b178293f 100644 --- a/files/ru/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md +++ b/files/ru/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_us Эта статья содержит основные советы, которые помогут вам создавать веб-сайты для любого типа пользователей. -| Перед началом: | Сначала вам следует прочитать [What is accessibility?](/en-US/Learn/What_is_accessibility), поскольку мы не рассматриваем здесь **доступность** подробно. | -| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Универсальный дизайн означает дизайн для всех, независимо от инвалидности или технических ограничений. В этой статье перечислены наиболее важные характеристики для универсального дизайна. | +| Перед началом: | Сначала вам следует прочитать [What is accessibility?](/ru/docs/Learn/Common_questions/Design_and_accessibility/What_is_accessibility), поскольку мы не рассматриваем здесь **доступность** подробно. | +| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Универсальный дизайн означает дизайн для всех, независимо от инвалидности или технических ограничений. В этой статье перечислены наиболее важные характеристики для универсального дизайна. | ## Краткое описание @@ -26,7 +26,7 @@ slug: Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_us Давайте загрузим и установим [анализатор цветового контраста](http://www.paciellogroup.com/resources/contrastanalyser/) Paciello Group. > [!NOTE] -> В качестве альтернативы вы можете найти ряд инструментов проверки контраста в интернете, таких как [проверка цветового контраста](http://webaim.org/resources/contrastchecker/) WebAIM. Мы предлагаем локальную проверку, потому что она поставляется в комплекте с экранным цветоподборщиком, чтобы узнать значение цвета. +> В качестве альтернативы вы можете найти ряд инструментов проверки контраста в интернете, таких как [проверка цветового контраста](https://webaim.org/resources/contrastchecker/) WebAIM. Мы предлагаем локальную проверку, потому что она поставляется в комплекте с экранным цветоподборщиком, чтобы узнать значение цвета. Например, давайте протестируем цвета на этой странице и посмотрим, как мы справляемся с анализатором цветового контраста: @@ -184,7 +184,7 @@ div.container { max-width:70em; } Если изображение может быть описано кратко, вы можете предоставить атрибут `alt` и ничего больше. Если изображение не может быть описано кратко, вам придётся либо предоставить тот же контент в другой форме на той же странице (например, дополнить круговую диаграмму таблицей, содержащей те же данные), либо прибегнуть к атрибуту `longdesc`. Значение этого атрибута представляет собой URL-адрес, указывающий на ресурс, явно описывающий в деталях содержимое изображения. > [!NOTE] -> Использование и даже существование `longdesc` обсуждается уже довольно давно. Пожалуйста, обратитесь к [расширению описания изображений](http://www.w3.org/TR/html-longdesc/) W3C (longdesc) для получения полного объяснения и подробных примеров. +> Использование и даже существование `longdesc` обсуждается уже довольно давно. Пожалуйста, обратитесь к [расширению описания изображений](https://www.w3.org/TR/html-longdesc/) W3C (longdesc) для получения полного объяснения и подробных примеров. #### Аудио/видео diff --git a/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md b/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md index d492ca5dd53bad..254b8937213818 100644 --- a/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md +++ b/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md @@ -25,7 +25,7 @@ slug: Learn/Common_questions/Design_and_accessibility/Thinking_before_coding ## Активное Обучение -_На данный момент этот раздел ещё не готов. Вы можете помочь сообществу разработчиков, вступив в [Please, consider contributing](/ru/docs/MDN/Getting_started)._ +_На данный момент этот раздел ещё не готов. Вы можете помочь сообществу разработчиков, вступив в [Please, consider contributing](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Более глубокое погружение diff --git a/files/ru/learn/common_questions/index.md b/files/ru/learn/common_questions/index.md index 05494279fe2dbe..85c22a0e2b3685 100644 --- a/files/ru/learn/common_questions/index.md +++ b/files/ru/learn/common_questions/index.md @@ -11,27 +11,27 @@ slug: Learn/Common_questions Данный раздел покрывает "механику" Всемирной паутины — вопросы, относящиеся к общим знаниям о экосистеме Всемирной паутины и тому, как эта экосистема работает. -- [Как работает Интернет?](/ru/docs/Learn/Common_questions/How_does_the_Internet_work) +- [Как работает Интернет?](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) - : **Интернет** - основа Всемирной паутины; техническая инфраструктура, благодаря которой возможно существование Всемирной паутины. Выражаясь проще, Интернет - это большая сеть компьютеров, которые "общаются" друг с другом. В данной статье обсуждается, как он (Интернет) работает на базовом уровне. -- [В чём разница между веб-страницей, веб-сайтом, веб-сервером и поисковым движком?](/ru/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines) +- [В чём разница между веб-страницей, веб-сайтом, веб-сервером и поисковым движком?](/ru/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) - : В этой статье мы рассмотрим различные связанные с вебом концепции: веб-страницы, веб-сайты, веб-сервера и поисковые движки. Новички в вебе часто путают или неправильно используют данные термины. Давайте узнаем, что они означают! -- [Что такое URL?](/ru/docs/Learn/Common_questions/What_is_a_URL) +- [Что такое URL?](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) - : Наряду с понятиями [гипертекста](/ru/docs/Glossary/Hypertext) и [протокола HTTP](/ru/docs/Glossary/HTTP), понятие [URL](/ru/docs/Glossary/URL) является одной из основных концепций Всемирной паутины. Это механизм, используемый [браузерами](/ru/docs/Glossary/Browser) для получения любого опубликованного во Всемирной сети ресурса. -- [Что такое доменное имя?](/ru/docs/Learn/Common_questions/What_is_a_domain_name) +- [Что такое доменное имя?](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) - : Доменные имена являются ключевой частью инфраструктуры сети Интернет. С их помощью обеспечивается удобочитаемый адрес для любого веб-сервера, доступного в сети Интернет. -- [Что такое веб-сервер?](/ru/docs/Learn/Common_questions/What_is_a_web_server) +- [Что такое веб-сервер?](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) - : Термин «[веб-сервер](/ru/docs/Glossary/Server)» может относиться к оборудованию или программному обеспечению (ПО), которое предоставляет клиентам доступ к веб-сайтам через сеть Интернет, или к ним обоим (оборудованию и ПО), работающим вместе. В этой статье мы рассмотрим, как работают веб-серверы и то, почему они важны. -- [Что такое гиперссылки?](/ru/docs/Learn/Common_questions/What_are_hyperlinks) +- [Что такое гиперссылки?](/ru/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks) - : В этой статье мы рассмотрим, что такое [гиперссылки](/ru/docs/Glossary/Hyperlink) и почему они важны. @@ -39,43 +39,43 @@ slug: Learn/Common_questions Вопросы, связанные с инструментами / программным обеспечением, которое вы можете использовать для создания веб-сайтов. -- [Сколько стоит сделать что-то в Интернете?](/ru/docs/Learn/Common_questions/How_much_does_it_cost) +- [Сколько стоит сделать что-то в Интернете?](/ru/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost) - : Когда вы запускаете веб-сайт, вы можете ничего не потратить, или ваши расходы могут быть достаточно высокими. В этой статье мы обсудим, сколько всё стоит и что вы получаете за то, за что вы платите (или не платите). -- [Какое ПО мне необходимо для создания веб-сайта?](/ru/docs/Learn/Common_questions/What_software_do_I_need) +- [Какое ПО мне необходимо для создания веб-сайта?](/ru/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need) - : В этой статье мы объясним, какие программные компоненты необходимы вам при редактировании, выгрузке или просмотре веб-сайта. -- [Какие текстовые редакторы доступны?](/ru/docs/Learn/Common_questions/Available_text_editors) +- [Какие текстовые редакторы доступны?](/ru/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors) - : В этой статье мы выделили некоторые моменты, которые следует учитывать при выборе и установке текстового редактора для веб-разработки. -- [Что такое "Инструменты разработчика" браузера?](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) +- [Что такое "Инструменты разработчика" браузера?](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) - : Каждый браузер имеет набор инструментов разработчика для отладки HTML, CSS и другого веб-кода. В этой статье объясняется, как использовать основные функции из инструментов разработчика вашего браузера. -- [Как убедиться в том, что веб-сайт работает правильно?](/ru/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly) +- [Как убедиться в том, что веб-сайт работает правильно?](/ru/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly) - : Итак, вы опубликовали свой сайт в Интернете - очень хорошо! Но уверены ли вы в том, что он работает правильно? В этой статье приведены некоторые основные шаги по устранению неполадок. -- [Как настроить локальный сервер тестирования?](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server) +- [Как настроить локальный сервер тестирования?](/ru/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) - : В этой статье объясняется, как настроить простой локальный сервер тестирования на вашем компьютере, и основы его использования. -- [Как загрузить файлы на веб-сервер?](/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server) +- [Как загрузить файлы на веб-сервер?](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server) - : В этой статье показано, как публиковать свой сайт в Интернете с помощью инструментов FTP - одним из самых распространённых способов сделать сайт общедоступным, чтобы другие пользователи могли получить доступ к нему со своих компьютеров. -- [Как использовать GitHub Pages?](/ru/docs/Learn/Common_questions/Using_GitHub_Pages) +- [Как использовать GitHub Pages?](/ru/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages) - : В этой статье представлено базовое руководство по публикации контента с использованием функции **gh-pages** сайта GitHub. -- [Как разместить сайт в Интернете при помощи платформы Google App Engine?](/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine) +- [Как разместить сайт в Интернете при помощи платформы Google App Engine?](/ru/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine) - : Ищете место для размещения вашего сайта? Здесь представлено пошаговое руководство по размещению вашего сайта с помощью платформы Google App Engine. -- [Какие существуют инструменты для отладки сайта и увеличения его производительности?](/ru/docs/Tools/Performance) +- [Какие существуют инструменты для отладки сайта и увеличения его производительности?](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html) - : В этом группе статей рассказывается, как использовать инструменты разработчика в браузере Firefox для отладки и повышения производительности вашего веб-сайта, а именно инструменты для проверки использования памяти, просмотра дерева вызовов [JavaScript](/ru/docs/Glossary/JavaScript), количества отображаемых узлов [DOM](/ru/docs/Glossary/DOM) и т. д. @@ -83,23 +83,23 @@ slug: Learn/Common_questions В этом разделе перечислены вопросы, связанные с эстетикой, структурой страницы, техниками для достижения удобства пользованием сайта и т. д. -- [С чего мне следует начать создание дизайна веб-сайта?](/ru/docs/Learn/Common_questions/Thinking_before_coding) +- [С чего мне следует начать создание дизайна веб-сайта?](/ru/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding) - : В этой статье рассматривается крайне важный первый шаг каждого проекта: определение того, чего вы хотите достичь с его помощью. -- [Какова структура наиболее используемых макетов сайтов?](/ru/docs/Learn/Common_questions/Common_web_layouts) +- [Какова структура наиболее используемых макетов сайтов?](/ru/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts) - : При разработке страниц вашего сайта хорошо иметь представление о наиболее распространённых макетах. В этой статье приведены некоторые типичные макеты веб-сайтов, а также части, которые входят в каждый макет. -- [Что такое удобство использования?](/ru/docs/Learn/Common_questions/What_is_accessibility) +- [Что такое удобство использования?](/ru/docs/Learn/Common_questions/Design_and_accessibility/What_is_accessibility) - : В этой статье представлены основные концепции достижения удобства пользования веб-страницами. -- [Как разрабатывать сайты для всех категорий пользователей?](/ru/docs/Learn/Common_questions/Design_for_all_types_of_users) +- [Как разрабатывать сайты для всех категорий пользователей?](/ru/docs/Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_users) - : В этой статье приводятся основные методы, которые помогут вам создавать веб-сайты для любого пользователя. -- [Какие средства HTML используются для обеспечения удобства использования?](/ru/docs/Learn/Common_questions/HTML_features_for_accessibility) +- [Какие средства HTML используются для обеспечения удобства использования?](/ru/docs/Learn/Common_questions/Design_and_accessibility/HTML_features_for_accessibility) - : В этой статье описываются специфические особенности HTML, которые могут использоваться для того, чтобы сделать веб-страницу более доступной для людей с различными нарушениями. diff --git a/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md b/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md index 447227258a1b3f..2b7b6c8d506511 100644 --- a/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md +++ b/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Tools_and_setup/How_much_does_it_cost Веб-разработка обходится не так дёшево, как вам может показаться. В этой статье мы обсудим, как много вам потребуется потратить и почему. -| Прежде чем приступить: | Вам следует уже иметь представление о том, [какое программное обеспечение вам нужно](/en-US/Learn/What_software_do_I_need), различия между веб-страницей, веб-сайтом, и тд, а также о том, [что из себя представляет доменное имя](/en-US/Learn/Understanding_domain_names). | -| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Рассмотреть весь процесс создания веб-сайта и оценить расходы на каждом шаге. | +| Прежде чем приступить: | Вам следует уже иметь представление о том, [какое программное обеспечение вам нужно](/ru/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need), различия между веб-страницей, веб-сайтом, и тд, а также о том, [что из себя представляет доменное имя](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name). | +| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Рассмотреть весь процесс создания веб-сайта и оценить расходы на каждом шаге. | ## Резюме @@ -39,7 +39,7 @@ slug: Learn/Common_questions/Tools_and_setup/How_much_does_it_cost Если вы хотите встроить видео или аудио в ваш веб-сайт, то вы можете встроить онлайн сервисы (например, YouTube, Vimeo, или Dailymotion), или встроить ваши собственные видео (см. ниже расходы на пропускную способность). -Для аудиофайлов, вы можете найти бесплатное программное обеспечение ([Audacity](http://audacity.sourceforge.net/?lang=en), [Wavosaur](http://www.wavosaur.com/)), либо заплатить пару сотен долларов ([Sony Sound Forge](http://www.sonycreativesoftware.com/soundforge), [Adobe Audition](http://www.adobe.com/products/audition.html)). Подобным образом, видеоредакторы могут быть бесплатными ([PiTiVi](http://www.pitivi.org/), [OpenShot](http://www.openshot.org/) для Linux, [iMovie](https://www.apple.com/mac/imovie/) для Mac), менее чем $100 ([Adobe Premiere Elements](https://www.adobe.com/us/products/premiere-elements.html)), либо иметь стоимость в пару сотен долларов ([Adobe Premiere Pro](https://www.adobe.com/products/premiere.html), [Avid Media Composer](http://www.avid.com/US/products/family/Media-Composer), [Final Cut Pro](https://www.apple.com/final-cut-pro/)). Программное обеспечение, поставляемое с вашей цифровой камерой может, также, удовлетворить все ваши нужды. +Для аудиофайлов, вы можете найти бесплатное программное обеспечение ([Audacity](http://audacity.sourceforge.net/?lang=en), [Wavosaur](http://www.wavosaur.com/)), либо заплатить пару сотен долларов ([Sony Sound Forge](http://www.sonycreativesoftware.com/soundforge), [Adobe Audition](https://www.adobe.com/products/audition.html)). Подобным образом, видеоредакторы могут быть бесплатными ([PiTiVi](http://www.pitivi.org/), [OpenShot](http://www.openshot.org/) для Linux, [iMovie](https://www.apple.com/mac/imovie/) для Mac), менее чем $100 ([Adobe Premiere Elements](https://www.adobe.com/us/products/premiere-elements.html)), либо иметь стоимость в пару сотен долларов ([Adobe Premiere Pro](https://www.adobe.com/products/premiere.html), [Avid Media Composer](http://www.avid.com/US/products/family/Media-Composer), [Final Cut Pro](https://www.apple.com/final-cut-pro/)). Программное обеспечение, поставляемое с вашей цифровой камерой может, также, удовлетворить все ваши нужды. ### Инструменты публикации @@ -127,7 +127,7 @@ slug: Learn/Common_questions/Tools_and_setup/How_much_does_it_cost ## Следующие шаги -На данный момент у вас есть понимание того, во сколько вам может обойтись ваш сайт, так что настало время проектирования веб-сайта и [настройки вашего рабочего пространства.](/ru/docs/Learn/Set_up_a_basic_working_environment) +На данный момент у вас есть понимание того, во сколько вам может обойтись ваш сайт, так что настало время проектирования веб-сайта и [настройки вашего рабочего пространства.](/ru/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) -- Прочитайте о том, [как выбрать и установить текстовый редактор](/ru/docs/Learn/Choose,_Install_and_set_up_a_text_editor). -- Если вы больше сфокусированы на проектировании, взгляните на [анатомию веб-страницы](/en-US/Learn/Anatomy_of_a_web_page). +- Прочитайте о том, [как выбрать и установить текстовый редактор](/ru/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors). +- Если вы больше сфокусированы на проектировании, взгляните на [анатомию веб-страницы](/ru/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts). diff --git a/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md b/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md index c0275ba2d4c3e2..965eb2395de062 100644 --- a/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md +++ b/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server Эта статья объясняет как установить простой локальный тестовый сервер на вашем компьютере, а так же основы его использования. -| Требования: | Сначала вам необходимо изучить [как работает интернет](/ru/docs/Learn/How_the_Internet_works), а также [что такое веб-сервер](/ru/docs/Learn/What_is_a_Web_server). | -| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Вы научитесь как устанавливать локальный тестовый сервер. | +| Требования: | Сначала вам необходимо изучить [как работает интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work), а также [что такое веб-сервер](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server). | +| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Вы научитесь как устанавливать локальный тестовый сервер. | ## Локальные и удалённые файлы @@ -72,6 +72,6 @@ slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server Модуль Python `SimpleHTTPServer (python 2.0) http.server (python 3.0)` полезен, но он не знает, как запускать код, написанный на таких языках, как Python, PHP или JavaScript. Чтобы справиться с этим, вам понадобится нечто большее - именно то, что вам нужно, зависит от языка сервера, который вы пытаетесь запустить. Вот несколько примеров: -- Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав [Django Web Framework (Python)](/ru/docs/Learn/Server-side/Django). [Flask](http://flask.pocoo.org/) также является хорошей (чуть менее тяжёлой) альтернативой Django. Чтобы запустить это, ознакомьтесь с [install Python/PIP](/ru/docs/Learn/Server-side/Django/development_environment#Installing_Python_3), а затем установите Flask с помощью `pip3 install flask`. На этом этапе вы сможете запустить примеры Python Flask, используя, например, `python3 python-example.py`, затем перейдя на `localhost: 5000` в свой браузер. +- Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав [Django Web Framework (Python)](/ru/docs/Learn/Server-side/Django). [Flask](http://flask.pocoo.org/) также является хорошей (чуть менее тяжёлой) альтернативой Django. Чтобы запустить это, ознакомьтесь с [install Python/PIP](/ru/docs/Learn/Server-side/Django/development_environment#installing_python_3), а затем установите Flask с помощью `pip3 install flask`. На этом этапе вы сможете запустить примеры Python Flask, используя, например, `python3 python-example.py`, затем перейдя на `localhost: 5000` в свой браузер. - Чтобы запустить серверный код Node.js (JavaScript), вам нужно использовать Node.js или фреймворк, построенный поверх него. Express - хороший выбор - см. [Express Web Framework (Node.js/JavaScript)](/ru/docs/Learn/Server-side/Express_Nodejs). - Чтобы запустить PHP-серверный код, вам понадобится настройка сервера, которая может интерпретировать PHP. Хорошими вариантами для локального тестирования PHP являются [MAMP](https://www.mamp.info/en/downloads/) (Mac и Windows), [AMPPS](http://ampps.com/download) (Mac, Windows, Linux) и [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) (Linux, Apache, MySQL и PHP / Python / Perl). Это полные пакеты, которые создают локальные настройки, позволяющие запускать базы данных Apache, PHP и MySQL. diff --git a/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md index 75474128bfd1da..f3274301a314bf 100644 --- a/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md +++ b/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server Данная статья покажет, как можно опубликовать сайт в Интернет с помощью инструментов передачи файлов(file transfer tools). -| Необходимые знания: | Вы должны знать [что такое веб-сервер](/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80) и [как работают доменные имена](/ru/docs/Learn/Understanding_domain_names). Также вы должны знать, [как установить базовую среду](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server) и [как написать простую веб-страницу](/ru/docs/Learn/Getting_started_with_the_web). | -| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Научиться передавать файлы на сервер используя различные доступные инструменты передачи файлов(file transfer tools). | +| Необходимые знания: | Вы должны знать [что такое веб-сервер](/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80) и [как работают доменные имена](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name). Также вы должны знать, [как установить базовую среду](/ru/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) и [как написать простую веб-страницу](/ru/docs/Learn/Getting_started_with_the_web). | +| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Научиться передавать файлы на сервер используя различные доступные инструменты передачи файлов(file transfer tools). | ## Сводка @@ -20,7 +20,7 @@ slug: Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server Существуют различные варианты SFTP клиентов. В нашем примере мы будем использовать [FileZilla](https://filezilla-project.org/), тк он бесплатен и подходит для Windows, macOS и Linux. Чтобы установить менеджер перейдите на страницу загрузки [FileZilla downloads page](https://filezilla-project.org/download.php?type=client), нажмите на кнопку загрузки, затем установите пакет из установочного файла обычным способом. > [!NOTE] -> Конечно, есть много других вариантов. Смотрите [Publishing tools](/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client) для других способов. +> Конечно, есть много других вариантов. Смотрите [Publishing tools](/ru/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#publishing_tools.3a_ftp_client) для других способов. Откройте приложение FileZilla; вы должны увидеть что-то вроде этого: @@ -133,7 +133,7 @@ Again, you would have to get the connection credentials from your hosting provid GitHub allows you to publish websites via [GitHub pages](https://pages.github.com/) (gh-pages). -We've covered the basics of using this in the [Publishing your website](/en-US/Learn/Getting_started_with_the_web/Publishing_your_website) article from our [Getting started with the Web](/en-US/Learn/Getting_started_with_the_web) guide, so we aren't going to repeat it all here. +We've covered the basics of using this in the [Publishing your website](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website) article from our [Getting started with the Web](/ru/docs/Learn/Getting_started_with_the_web) guide, so we aren't going to repeat it all here. However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See [Using a custom domain with GitHub Pages](https://help.github.com/articles/using-a-custom-domain-with-github-pages/) for a detailed guide. diff --git a/files/ru/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/ru/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index e04399ee6c578f..4ed1ca0bd0af3f 100644 --- a/files/ru/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/ru/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -8,7 +8,7 @@ slug: Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools Каждый современный интернет-браузер оснащён мощными инструментами для веб-разработчика. Эти инструменты позволяют делать различные вещи, от изучения загруженных в настоящий момент HTML, CSS и JavaScript до отображения в каких ресурсах нуждается страница и как долго она будет загружаться. Эта статья научит вас использовать базовые функции инструментов разработчика в вашем браузере. > [!NOTE] -> Прежде чем начать заниматься с примерами, откройте [пример сайта для начинающих](http://mdn.github.io/beginner-html-site-scripted/), с которым мы работали на [предыдущих занятиях](/en-US/Learn/Getting_started_with_the_web). Вам следует держать его открытым, чтобы выполнить описанные ниже действия. +> Прежде чем начать заниматься с примерами, откройте [пример сайта для начинающих](https://mdn.github.io/beginner-html-site-scripted/), с которым мы работали на [предыдущих занятиях](/ru/docs/Learn/Getting_started_with_the_web). Вам следует держать его открытым, чтобы выполнить описанные ниже действия. ## Как открыть инструменты веб-разработчика в вашем браузере? @@ -84,7 +84,7 @@ slug: Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools Узнать больше об Inspector в различных браузерах: -- [Firefox Page inspector](/ru/docs/Tools/Page_Inspector) +- [Firefox Page inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html) - [IE DOM Explorer](http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx) - [Chrome DOM inspector](https://developer.chrome.com/docs/devtools/) (Inspector в Opera схож с Inspector в Chrome) - [Safari DOM inspector and style explorer](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1) @@ -139,7 +139,7 @@ slug: Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools Узнать больше о JavaScript консоли в различных браузерах: -- [Firefox Web Console](/ru/docs/Tools/Web_Console) +- [Firefox Web Console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html) - [IE JavaScript console](http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx) - [Chrome JavaScript Console](https://developer.chrome.com/docs/devtools/) (Inpector в Opera схож с Inspector в Chrome) - [Safari Console](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1) diff --git a/files/ru/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/ru/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md index 52708a6f16d6e1..458e2f6020d7db 100644 --- a/files/ru/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md +++ b/files/ru/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/How_does_the_Internet_work Эта статья о том, что такое Интернет, и как он работает. -| Необходимые знания: | Отсутствуют, но мы будем признательны, если вы сначала прочтёте [Материал о там как начать разрабатывать свой сайт](/ru/docs/Learn/Thinking_before_coding) | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Вы изучите основы технической инфраструктуры Веба и поймёте разницу между Вебом и интернетом. | +| Необходимые знания: | Отсутствуют, но мы будем признательны, если вы сначала прочтёте [Материал о там как начать разрабатывать свой сайт](/ru/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding) | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Вы изучите основы технической инфраструктуры Веба и поймёте разницу между Вебом и интернетом. | ## Резюме @@ -85,6 +85,6 @@ slug: Learn/Common_questions/Web_mechanics/How_does_the_Internet_work ## Дальнейшие шаги -- [Как работает Веб](/ru/Learn/Getting_started_with_the_web/How_the_Web_works) -- [Понимание разницы между веб-страницей, веб-сайтом, веб-сервером и поисковиком](/ru/docs/Learn/Pages_sites_servers_and_search_engines) -- [Что такое доменные имена](/ru/docs/Learn/Understanding_domain_names) +- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works) +- [Понимание разницы между веб-страницей, веб-сайтом, веб-сервером и поисковиком](/ru/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) +- [Что такое доменные имена](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) diff --git a/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md index 9517eeea71a454..1e9e13b374b8eb 100644 --- a/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md +++ b/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engine В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают! -| Необходимые знания: | Вы должны знать, [как работает Интернет](/en-US/Learn/How_the_Internet_works). | -| ------------------- | ----------------------------------------------------------------------------------------- | -| Цель: | Изучить различия между веб-страницами, веб-сайтами, веб-серверами и поисковыми системами. | +| Необходимые знания: | Вы должны знать, [как работает Интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work). | +| ------------------- | ------------------------------------------------------------------------------------------------------------------- | +| Цель: | Изучить различия между веб-страницами, веб-сайтами, веб-серверами и поисковыми системами. | ## В двух словах @@ -28,7 +28,7 @@ slug: Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engine ## Активное изучение -_Пока что активное изучение не доступно. Если вы можете предоставить полезную информацию, то, [пожалуйста, окажите нам содействие](/ru/docs/MDN/Getting_started)._ +_Пока что активное изучение не доступно. Если вы можете предоставить полезную информацию, то, [пожалуйста, окажите нам содействие](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Погружаемся глубже @@ -76,5 +76,5 @@ _Поисковые системы_ являются распространён ## Смотрите также -- Погружаемся глубже: [что такое Веб-сервер](/ru/docs/Learn/What_is_a_web_server) -- Рассмотрим, как веб-страницы связаны с веб-сайтом: [Разбираемся с веб-ссылками](/ru/docs/Learn/Understanding_links_on_the_web) +- Погружаемся глубже: [что такое Веб-сервер](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) +- Рассмотрим, как веб-страницы связаны с веб-сайтом: [Разбираемся с веб-ссылками](/ru/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks) diff --git a/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md b/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md index 583399d21d0c0f..a67909d461b222 100644 --- a/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md +++ b/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/What_are_hyperlinks В данной статье мы узнаем, что такое ссылки и почему они важны. -| Предварительно: | Вы должны знать [как работает интернет](/en-US/Learn/How_the_Internet_works) и иметь представление о [разнице между веб-страницей, веб-сайтом, веб-сервером и поисковой системой.](/ru/docs/Learn/page_vs_site_vs_server_vs_search_engine) | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Цель: | Изучить, что такое веб-ссылки и почему они важны. | +| Предварительно: | Вы должны знать [как работает интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) и иметь представление о [разнице между веб-страницей, веб-сайтом, веб-сервером и поисковой системой.](/ru/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Изучить, что такое веб-ссылки и почему они важны. | ## Коротко @@ -33,7 +33,7 @@ slug: Learn/Common_questions/Web_mechanics/What_are_hyperlinks ## Активно изучаем -_В данном разделе нет контента. [Please, consider contributing](/ru/docs/MDN/Getting_started)._ +_В данном разделе нет контента. [Please, consider contributing](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Глубокое погружение @@ -74,6 +74,6 @@ _В данном разделе нет контента. [Please, consider contr Так что теперь, конечно, вы захотите создать несколько веб-страниц со ссылками! -- Чтобы получить более теоретическое обоснование, узнайте об [URL-адресах и их структуре](/ru/docs/Learn/Understanding_URLs), поскольку каждая ссылка указывает на URL-адрес. +- Чтобы получить более теоретическое обоснование, узнайте об [URL-адресах и их структуре](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL), поскольку каждая ссылка указывает на URL-адрес. - Хотите что-нибудь более практичное? В статье [Создание гиперссылок](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) нашего модуля [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML) подробно объясняется, как реализовывать ссылки. -- Приступите к изучению HTML. Научитесь [создавать HTML-документы и связывать их между собой.](/ru/docs/Learn/HTML/Write_a_simple_page_in_HTML) +- Приступите к изучению HTML. Научитесь [создавать HTML-документы и связывать их между собой.](/ru/docs/Learn/Getting_started_with_the_web) diff --git a/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md b/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md index 020d6251ad373a..7e2d450ef5a11e 100644 --- a/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md +++ b/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_domain_name В этом материале мы обсудим доменные имена: что это такое, как они формируются и как зарегистрировать домен для себя. -| Необходимые знания: | Вы должны знать [как работает Интернет](/ru/docs/Learn/How_the_Internet_works) и понимать устройство [устройство URL](/en-US/Learn/Understanding_URLs). | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Вы узнаете, что такое доменные имена, как они работают и почему они важны. | +| Необходимые знания: | Вы должны знать [как работает Интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) и понимать устройство [устройство URL](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL). | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Вы узнаете, что такое доменные имена, как они работают и почему они важны. | ## Summary @@ -19,7 +19,7 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_domain_name ## Активно изучаем -_В данный момент нет обучающего курса . Но вы можете [помочь составить его](/ru/docs/MDN/Getting_started)._ +_В данный момент нет обучающего курса . Но вы можете [помочь составить его](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Глубокое погружение @@ -123,6 +123,6 @@ NOT FOUND Итак, мы поговорили о процессах и архитектуре. Время двигаться дальше. -- Если вы хотите попробовать сделать что-то руками, то самое время разобраться в дизайне и изучить [анатомию веб-страницы](/en-US/Learn/Anatomy_of_a_web_page). -- Также не стоит забывать, что некоторые аспекты создания сайта стоят денег. Здесь мы рассказываем, [сколько стоит создание веб-сайта](/ru/docs/Learn/How_much_does_it_cost). +- Если вы хотите попробовать сделать что-то руками, то самое время разобраться в дизайне и изучить [анатомию веб-страницы](/ru/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts). +- Также не стоит забывать, что некоторые аспекты создания сайта стоят денег. Здесь мы рассказываем, [сколько стоит создание веб-сайта](/ru/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost). - И ещё вы можете прочитать о [доменных именах](http://en.wikipedia.org/wiki/Domain_name) в Wikipedia. diff --git a/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md b/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md index 8299ffbad04023..1eae2ca6d7bd3e 100644 --- a/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md +++ b/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_URL Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет, что это такое, и описывает его структуру. -| Предварительно: | Вам нужно узнать [как работает интернет](/ru/docs/Learn/How_the_Internet_works), [что такое Веб сервер](/ru/docs/Learn/What_is_a_Web_server) and [что лежит в основе веб ссылок](/ru/docs/Learn/Understanding_links_on_the_web). | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Вы узнаете, что такое URL и как они работают в вебе. | +| Предварительно: | Вам нужно узнать [как работает интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work), [что такое Веб сервер](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) and [что лежит в основе веб ссылок](/ru/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks). | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Вы узнаете, что такое URL и как они работают в вебе. | ## Введение @@ -19,7 +19,7 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_URL ## Активное обучение -_Активного обучения пока не существует. [Пожалуйста подумайте, возможно вы сможете внести свой вклад](/ru/docs/MDN/Getting_started)._ +_Активного обучения пока не существует. [Пожалуйста подумайте, возможно вы сможете внести свой вклад](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Подробная информация @@ -63,7 +63,7 @@ http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereI Каждый URL может быть напечатан напрямую в адресной строке браузера, чтобы сразу получить запрошенный ресурс. Но это только вершина айсберга! -Язык {{Glossary("HTML")}} — [который будет обсуждать позже](/ru/docs/Learn/HTML/HTML_tags) — позволяет активно использовать URL для: +Язык {{Glossary("HTML")}} — [который будет обсуждать позже](/ru/docs/Learn/HTML/Introduction_to_HTML) — позволяет активно использовать URL для: - создания ссылок на другие документы с помощью тега {{HTMLElement("a")}}; - связывания документа с его дополнительными файлами, например с помощью тегов {{HTMLElement("link")}} или {{HTMLElement("script")}}; @@ -151,4 +151,4 @@ http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereI ## Следующие шаги -- [Понимание доменных имён](/ru/docs/Learn/Understanding_domain_names) +- [Понимание доменных имён](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) diff --git a/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md b/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md index e426a774374a73..5315d8fde245f2 100644 --- a/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md +++ b/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server В этой статье мы узнаем, что из себя представляют веб-серверы, как они работают, и почему они так важны. -| Необходимые знания: | Вы должны уже знать, [как работает Интернет](/ru/docs/Learn/Common_questions/How_does_the_Internet_work) и [понимать разницу между страницей, сайтом, сервером и поисковой системой.](/ru/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines) | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Вы узнаете, что такое веб-сервер и получите общее представление о том, как он работает. | +| Необходимые знания: | Вы должны уже знать, [как работает Интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) и [понимать разницу между страницей, сайтом, сервером и поисковой системой.](/ru/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) | +| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Вы узнаете, что такое веб-сервер и получите общее представление о том, как он работает. | ## Введение @@ -32,7 +32,7 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server ## Активное изучение -_Активное изучение пока не доступно. [Пожалуйста, рассмотрите возможность внести свой вклад](/ru/docs/MDN/Contribute/Getting_started)._ +_Активное изучение пока не доступно. [Пожалуйста, рассмотрите возможность внести свой вклад](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Погружаемся глубже @@ -49,9 +49,9 @@ _Активное изучение пока не доступно. [Пожалу - имеет неизменный IP адрес (не все {{Glossary("ISP", "провайдеры")}} предоставляют статический IP-адрес для домашнего подключения) - обслуживается третьей, сторонней компанией -По всем этим причинам поиск хорошего хостинг-провайдера является ключевой частью создания вашего сайта. Рассмотрите многочисленные предложения компаний и выберите то, что соответствует вашим потребностям и бюджету (предложения варьируются от бесплатных до тысяч долларов в месяц). Вы можете найти подробности в [этой статье.](/ru/docs/Learn/Common_questions/How_much_does_it_cost#hosting) +По всем этим причинам поиск хорошего хостинг-провайдера является ключевой частью создания вашего сайта. Рассмотрите многочисленные предложения компаний и выберите то, что соответствует вашим потребностям и бюджету (предложения варьируются от бесплатных до тысяч долларов в месяц). Вы можете найти подробности в [этой статье.](/ru/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#hosting) -Как только вы решили проблему с хостингом, вам понадобится только [загрузить свои файлы на ваш веб-сервер](/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server). +Как только вы решили проблему с хостингом, вам понадобится только [загрузить свои файлы на ваш веб-сервер](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server). ### Связь по HTTP @@ -90,6 +90,6 @@ HTTP задаёт строгие правила взаимодействия к Теперь, когда вы познакомились с веб-серверами, вы можете: -- прочитать [насколько сложно делать что-либо в веб](/ru/docs/Learn/Common_questions/How_much_does_it_cost) -- узнать больше о [разнообразии ПО, которое может пригодиться для создания веб-сайта](/ru/docs/Learn/Common_questions/What_software_do_I_need) -- двигаться к практике: например, [узнать как загружать файлы на веб-сервер](/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server). +- прочитать [насколько сложно делать что-либо в веб](/ru/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost) +- узнать больше о [разнообразии ПО, которое может пригодиться для создания веб-сайта](/ru/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need) +- двигаться к практике: например, [узнать как загружать файлы на веб-сервер](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server). diff --git a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md index e7c9310c58ba50..8d941eedd4fb1b 100644 --- a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md +++ b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md @@ -15,7 +15,7 @@ slug: Learn/CSS/Building_blocks/Advanced_styling_effects {{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и `text-shadow`, `box-shadows` отлично поддерживаются браузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней. -Вы можете найти примеры из стати на [box-shadow.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html) (или в [исходном коде](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html)). +Вы можете найти примеры из стати на [box-shadow.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html) (или в [исходном коде](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html)). ### Обычная тень @@ -187,7 +187,7 @@ button:active { - {{cssxref("background-blend-mode")}}, которое смешивает цвет фона и цвета отдельного элемента. - {{cssxref("mix-blend-mode")}}, которое смешивает элементы, наложенные друг на друга. -Вы можете найти больше примеров смешивания на странице [blend-modes.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) (смотрите [источник](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html)) и на странице {{cssxref("<blend-mode>")}}. +Вы можете найти больше примеров смешивания на странице [blend-modes.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) (смотрите [источник](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html)) и на странице {{cssxref("<blend-mode>")}}. > [!NOTE] > Смешивание — относительно новое свойство, поэтому поддерживается хуже, чем фильтры. Оно совсем не поддерживается на Edge, а Safari поддерживает лишь некоторые значения свойства. @@ -300,9 +300,9 @@ article div:last-child { Форма в этом примере не реагирует на содержание изображения. Вместо этого в центре изображения определяется центр окружности, как если бы мы начертили циркулем окружность, вписанную в изображение. Это та окружность, которую обтекает текст. > [!NOTE] -> В Firefox вы можете использовать [Инспектор фигур](/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes), чтобы редактировать фигуры. +> В Firefox вы можете использовать [Инспектор фигур](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html), чтобы редактировать фигуры. -Значение `circle()` — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте [Обзор CSS-фигур](/ru/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) на MDN.) +Значение `circle()` — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте [Обзор CSS-фигур](/ru/docs/Web/CSS/CSS_shapes/Overview_of_shapes) на MDN.) ## -webkit-background-clip: text @@ -320,7 +320,7 @@ article div:last-child { Если вы собираетесь использовать подобные опции, проверьте совместимость их с браузерами. > [!NOTE] -> Пример с `-webkit-background-clip: text` смотрите на [background-clip-text.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) (или [источнике](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)). +> Пример с `-webkit-background-clip: text` смотрите на [background-clip-text.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) (или [источнике](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)). ## Итог diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md index 6df04aac8c3d54..3f39279876ff0c 100644 --- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -66,7 +66,7 @@ CSS-свойство {{cssxref ("background")}} является сокраще #### Изменение размеров фонового изображения -В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является. В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения [длины](/ru/docs/Web/CSS/размер) или в [процентах](/ru/docs/Web/CSS/percentage), чтобы размер изображения соответствовал размеру фона. +В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является. В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения [длины](/ru/docs/Web/CSS/length) или в [процентах](/ru/docs/Web/CSS/percentage), чтобы размер изображения соответствовал размеру фона. Вы также можете использовать ключевые слова: @@ -104,7 +104,7 @@ CSS-свойство {{cssxref ("background")}} является сокраще } ``` -Допустимы значения [длины](/ru/docs/Web/CSS/размер) и [процентные](/ru/docs/Web/CSS/percentage): +Допустимы значения [длины](/ru/docs/Web/CSS/length) и [процентные](/ru/docs/Web/CSS/percentage): ```css .box { @@ -184,7 +184,7 @@ background-position: - `fixed`: Фиксирует элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране. - `local`: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение `scroll` довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение `local` фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним. -Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на [background-attachment.html](http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html) (также смотри [исходный код](https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds) здесь). +Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на [background-attachment.html](https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html) (также смотри [исходный код](https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds) здесь). ### Использование сокращённого свойства background diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md index a542c1026fbd7a..2204261abca002 100644 --- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -9,9 +9,9 @@ slug: Learn/CSS/Building_blocks/Cascade_and_inheritance Хотя изучение этого урока может показаться менее актуальным и немного более академичным, чем некоторые другие части курса, понимание этих вещей спасёт вас от головной боли в дальнейшем! Мы рекомендуем вам внимательно изучить этот раздел и убедиться, что вы понимаете концепции, перед тем, как двигаться дальше. -| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS ([Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Изучить понятие о каскаде и специфичности, и как работает наследование CSS. | +| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS ([Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Изучить понятие о каскаде и специфичности, и как работает наследование CSS. | ## Конфликтующие правила @@ -154,7 +154,7 @@ CSS предоставляет четыре специальных универ > [!NOTE] > Универсальный селектор (\*), комбинаторы (+, >, \~, '') и псевдокласс отрицания (:not) не влияют на специфичность. -Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали. Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в [справочнике селекторов](/ru/docs/Web/CSS/CSS_Селекторы) MDN. +Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали. Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в [справочнике селекторов](/ru/docs/Web/CSS/CSS_selectors) MDN. | Селектор | Тысячи | Сотни | Десятки | Единицы | Специфичность | | -------------------------------------------------------------------------------------------------------- | ------ | ----- | ------- | ------- | ------------- | diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.md b/files/ru/learn/css/building_blocks/debugging_css/index.md index bc3df441614915..877e07d4be34b0 100644 --- a/files/ru/learn/css/building_blocks/debugging_css/index.md +++ b/files/ru/learn/css/building_blocks/debugging_css/index.md @@ -7,25 +7,25 @@ slug: Learn/CSS/Building_blocks/Debugging_CSS Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы ожидаете от него. Возможно, вы считаете, что определённый селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого. Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит. -| Необходимые знания: | Basic computer literacy, [basic software installed](/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | -| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задачи: | Изучить основы того, что такое DevTools и как выполнять простую инспекцию и редактирование CSS. | +| Необходимые знания: | Basic computer literacy, [basic software installed](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Задачи: | Изучить основы того, что такое DevTools и как выполнять простую инспекцию и редактирование CSS. | ## Как получить доступ к DevTools браузера -Статья [What are browser developer tools](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров. +Статья [What are browser developer tools](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров. -Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править [Grid Layouts](/ru/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts), [Flexbox](/ru/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts), и [Shapes](/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes). Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе. +Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править [Grid Layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html), [Flexbox](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html), и [Shapes](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html). Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе. В этом уроке мы рассмотрим некоторые полезные функции Firefox DevTools для работы с CSS. Для того чтобы сделать это я буду использовать [файл примера](https://mdn.github.io/css-examples/learn/inspecting/inspecting.html). Загрузите его в новой вкладке если хотите следовать и откройте ваш DevTools как описано в статье, ссылка на которую дана выше. ## DOM vs View Source -То, что может сбить с толку новичков в DevTools, — это разница между тем, что вы видите когда [просматриваете источник](/ru/docs/Tools/View_source) веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на [HTML панели](/ru/docs/Tools/Page_Inspector/UI_Tour#HTML_pane) DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия. +То, что может сбить с толку новичков в DevTools, — это разница между тем, что вы видите когда [просматриваете источник](https://firefox-source-docs.mozilla.org/devtools-user/view_source/index.html) веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на [HTML панели](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/ui_tour/index.html#html_pane) DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия. В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали `

`, но закрыли `

`, браузер поймёт, что вы хотели сделать и HTML в DOM будет правильно закрывать `

` с `

`. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript. -View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. [HTML дерево](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree) в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит. +View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. [HTML дерево](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_html/index.html#html_tree) в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит. ## Инспекция применённого CSS @@ -33,7 +33,7 @@ View Source же для сравнения — это просто исходн ![The example page for this tutorial with DevTools open.](inspecting1.png) -Если вы посмотрите на [Rules view](/ru/docs/Tools/Page_Inspector/UI_Tour#Rules_view) справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу `box1` и также CSS который наследуется блоком от предков, в этом случае от ``. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента. +Если вы посмотрите на [Rules view](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/ui_tour/index.html#rules_view) справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу `box1` и также CSS который наследуется блоком от предков, в этом случае от ``. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента. Также полезна возможность расширения (развёртывания) свойств коротких записей. В нашем примере используется короткая запись `margin`. @@ -60,13 +60,13 @@ View Source же для сравнения — это просто исходн ![The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open](inspecting3-font-size.png) > [!NOTE] -> Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в [Examine and edit CSS](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS). +> Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в [Examine and edit CSS](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html). ## Понимание модели блоков В предыдущем уроке мы обсудили [модель блоков](/ru/docs/Learn/CSS/Building_blocks/The_box_model) и тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчёта размера элементов основываясь на размере который вы им задаёте, плюс padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента. -[Layout view](/ru/docs/Tools/Page_Inspector/UI_Tour#Layout_view) показывает вам диаграмму блочной модели выбранного элемента, вместе с описанием свойств и значений, которые изменяют способ расположения элемента. Это включает описание свойств, которые вы могли и не использовать напрямую к элементу, но которые имеют набор начальных значений. +[Layout view](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/ui_tour/index.html#layout_view) показывает вам диаграмму блочной модели выбранного элемента, вместе с описанием свойств и значений, которые изменяют способ расположения элемента. Это включает описание свойств, которые вы могли и не использовать напрямую к элементу, но которые имеют набор начальных значений. В этой панели одним из детальных свойств является свойство `box-sizing`, которое контролирует какую блочную модель использует элемент. @@ -77,7 +77,7 @@ View Source же для сравнения — это просто исходн ![The Layout section of the DevTools](inspecting4-box-model.png) > [!NOTE] -> Узнать больше на [Examining and Inspecting the Box Model](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model). +> Узнать больше на [Examining and Inspecting the Box Model](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_the_box_model/index.html). ## Решение проблем специфичности @@ -108,7 +108,7 @@ em { ## Узнайте больше о Firefox DevTools -На MDN имеется много информации о Firefox DevTools. Взгляните на основной [раздел DevTools](/ru/docs/Tools), а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите [The How To Guides](/ru/docs/Tools/Page_Inspector#How_to). +На MDN имеется много информации о Firefox DevTools. Взгляните на основной [раздел DevTools](https://firefox-source-docs.mozilla.org/devtools-user/index.html), а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите [The How To Guides](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html#how_to). ## Отладка проблем в CSS diff --git a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md index 6d79848316cc64..5e5a77d2469f2f 100644 --- a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md +++ b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md @@ -9,9 +9,9 @@ slug: Learn/CSS/Building_blocks/Handling_different_text_directions Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) - эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними. -| Prerequisites: | Basic computer literacy, [basic software installed](/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Понять важность режимов письма для современного CSS. | +| Prerequisites: | Basic computer literacy, [basic software installed](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Цель: | Понять важность режимов письма для современного CSS. | ## Какие бывают режимы письма? @@ -31,7 +31,7 @@ slug: Learn/CSS/Building_blocks/Handling_different_text_directions ## Writing modes and block and inline layout -We have already discussed [block and inline layout](/ru/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes), and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English. +We have already discussed [block and inline layout](/ru/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes), and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English. If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses `writing-mode: horizontal-tb`, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses `writing-mode: vertical-rl`; this is a writing mode that is written vertically and from right to left. @@ -85,7 +85,7 @@ You can see a comparison between physical and logical properties below. {{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}} -There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for [Logical Properties and Values](/ru/docs/Web/CSS/CSS_Logical_Properties). +There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for [Logical Properties and Values](/ru/docs/Web/CSS/CSS_logical_properties_and_values). ### Logical values diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.md b/files/ru/learn/css/building_blocks/images_media_form_elements/index.md index d71d95c71b30d6..043b552d95b24e 100644 --- a/files/ru/learn/css/building_blocks/images_media_form_elements/index.md +++ b/files/ru/learn/css/building_blocks/images_media_form_elements/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Building_blocks/Images_media_form_elements В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольёт свет на некоторые из этих основных вещей, которые вам нужно знать. -| Prerequisites: | Basic computer literacy, [basic software installed](/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Objective: | To understand the way that some elements behave unusually when styled with CSS. | +| Prerequisites: | Basic computer literacy, [basic software installed](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Objective: | To understand the way that some elements behave unusually when styled with CSS. | ## Замещаемые элементы diff --git a/files/ru/learn/css/building_blocks/overflowing_content/index.md b/files/ru/learn/css/building_blocks/overflowing_content/index.md index 1292ea96a34f20..0837fd543648e7 100644 --- a/files/ru/learn/css/building_blocks/overflowing_content/index.md +++ b/files/ru/learn/css/building_blocks/overflowing_content/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Building_blocks/Overflowing_content В этом уроке мы рассмотрим другую важную концепцию в CSS — **переполнение**. Переполнение это то, что случается когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять. -| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS (study [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Понять, что такое переполнение и как с ним работать. | +| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS (study [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Понять, что такое переполнение и как с ним работать. | ## Что такое переполнение? diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.md b/files/ru/learn/css/building_blocks/selectors/combinators/index.md index d8ccf5b40a86e7..0028b262015dae 100644 --- a/files/ru/learn/css/building_blocks/selectors/combinators/index.md +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Building_blocks/Selectors/Combinators Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе. -| Необходимые условия: | Базовая компьютерная грамотность, [установленное базовое программное обеспечение](/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания о [работе с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)) и понимание работы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS. | +| Необходимые условия: | Базовая компьютерная грамотность, [установленное базовое программное обеспечение](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания о [работе с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)) и понимание работы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS. | ## Комбинатор потомка diff --git a/files/ru/learn/css/building_blocks/selectors/index.md b/files/ru/learn/css/building_blocks/selectors/index.md index 311d01d8bad5fe..e9d29746ec94d2 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.md +++ b/files/ru/learn/css/building_blocks/selectors/index.md @@ -158,16 +158,16 @@ article > p { В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами. -| Селектор | Пример | Руководство | -| -------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Селектор по типу](/ru/docs/Web/CSS/Type_selectors) | `h1 { }` | [Селектор по типу](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_%d1%82%d0%b8%d0%bf%d1%83) | -| [Универсальный селектор](/ru/docs/Web/CSS/Universal_selectors) | `* { }` | [Универсальный селектор](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a3%d0%bd%d0%b8%d0%b2%d0%b5%d1%80%d1%81%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80) | -| [Селектор класса](/ru/docs/Web/CSS/Class_selectors) | `.box { }` | [Селекторы классов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%be%d0%b2) | -| [Селектор ID](/ru/docs/Web/CSS/ID_selectors) | `#unique { }` | [Селекторы по ID](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_id) | -| [Селектор атрибутов](/ru/docs/Web/CSS/Attribute_selectors) | `a[title] { }` | [Селекторы атрибутов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) | -| [Селектор псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) | `p:first-child { }` | [Псевдоклассы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d0%ba%d0%bb%d0%b0%d1%81%d1%81) | -| [Селектор псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [Псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82) | -| [Селектор потомков](/ru/docs/Web/CSS/Descendant_combinator) | `article p` | [Селектор потомков](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80_%d0%bf%d0%be%d1%82%d0%be%d0%bc%d0%ba%d0%be%d0%b2) | -| [Селектор дочерних элементов](/ru/docs/Web/CSS/Child_combinator) | `article > p` | [Селектор дочерних элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%9a%d0%be%d0%bc%d0%b1%d0%b8%d0%bd%d0%b0%d1%82%d0%be%d1%80) | -| [Смежные селекторы](/ru/docs/Web/CSS/Adjacent_sibling_combinator) | `h1 + p` | [Смежные селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%bc%d0%b5%d0%b6%d0%bd%d1%8b%d0%b5_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b) | -| [Селектор братских элементов](/ru/docs/Web/CSS/General_sibling_combinator) | `h1 ~ p` | [Селектор братских элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%91%d1%80%d0%b0%d1%82%d1%81%d0%ba%d0%b8%d0%b5_%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b) | +| Селектор | Пример | Руководство | +| ----------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Селектор по типу](/ru/docs/Web/CSS/Type_selectors) | `h1 { }` | [Селектор по типу](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_%d1%82%d0%b8%d0%bf%d1%83) | +| [Универсальный селектор](/ru/docs/Web/CSS/Universal_selectors) | `* { }` | [Универсальный селектор](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a3%d0%bd%d0%b8%d0%b2%d0%b5%d1%80%d1%81%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80) | +| [Селектор класса](/ru/docs/Web/CSS/Class_selectors) | `.box { }` | [Селекторы классов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%be%d0%b2) | +| [Селектор ID](/ru/docs/Web/CSS/ID_selectors) | `#unique { }` | [Селекторы по ID](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_id) | +| [Селектор атрибутов](/ru/docs/Web/CSS/Attribute_selectors) | `a[title] { }` | [Селекторы атрибутов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) | +| [Селектор псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) | `p:first-child { }` | [Псевдоклассы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d0%ba%d0%bb%d0%b0%d1%81%d1%81) | +| [Селектор псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [Псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82) | +| [Селектор потомков](/ru/docs/Web/CSS/Descendant_combinator) | `article p` | [Селектор потомков](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80_%d0%bf%d0%be%d1%82%d0%be%d0%bc%d0%ba%d0%be%d0%b2) | +| [Селектор дочерних элементов](/ru/docs/Web/CSS/Child_combinator) | `article > p` | [Селектор дочерних элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%9a%d0%be%d0%bc%d0%b1%d0%b8%d0%bd%d0%b0%d1%82%d0%be%d1%80) | +| [Смежные селекторы](/ru/docs/Web/CSS/Next-sibling_combinator) | `h1 + p` | [Смежные селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%bc%d0%b5%d0%b6%d0%bd%d1%8b%d0%b5_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b) | +| [Селектор братских элементов](/ru/docs/Web/CSS/Subsequent-sibling_combinator) | `h1 ~ p` | [Селектор братских элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%91%d1%80%d0%b0%d1%82%d1%81%d0%ba%d0%b8%d0%b5_%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b) | diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index 14cdc7441ed4a0..cd2bc6acc28097 100644 --- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -113,7 +113,7 @@ article p:first-child::first-line { | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{ Cssxref(":active") }} | Подходит, когда пользователь активирует (например, щёлкает мышью) элемент. | | {{ Cssxref(":any-link") }} | Соответствует как состоянию `:link,` так и состоянию`:visited` ссылки. | -| {{ Cssxref(":blank") }} | Соответствует [элементу ``](/ru/docs/Web/HTML/Element/Input), для которого значение ввода является пустым. | +| {{ Cssxref(":blank") }} | Соответствует [элементу ``](/ru/docs/Web/HTML/Element/input), для которого значение ввода является пустым. | | {{ Cssxref(":checked") }} | Соответствует переключателю или флажку в выбранном состоянии. | | {{ Cssxref(":current") }} | Соответствует элементу или предку элемента, который в данный момент отображается. | | {{ Cssxref(":default") }} | Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (_обрабатывают нажатие клавиши enter_) в наборе сходных элементов. | @@ -121,7 +121,7 @@ article p:first-child::first-line { | {{ Cssxref(":disabled") }} | Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии. | | {{ Cssxref(":empty") }} | Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела. | | {{ Cssxref(":enabled") }} | Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии. | -| {{ Cssxref(":first") }} | В [постраничном носителе](/ru/docs/Web/CSS/Paged_Media) соответствует первой странице. | +| {{ Cssxref(":first") }} | В [постраничном носителе](/ru/docs/Web/CSS/CSS_paged_media) соответствует первой странице. | | {{ Cssxref(":first-child") }} | Соответствует элементу, который является первым среди других дочерних элементов одного предка. | | {{ Cssxref(":first-of-type") }} | Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка. | | {{ Cssxref(":focus") }} | Соответствует элементу, имеющему фокус. | @@ -135,7 +135,7 @@ article p:first-child::first-line { | {{ Cssxref(":lang") }} | Соответствует элементу, основанному на языке (значение атрибута HTML [lang](/ru/docs/Web/HTML/Global_attributes/lang)). | | {{ Cssxref(":last-child") }} | Соответствует элементу, который является последним среди других дочерних элементов одного предка. | | {{ Cssxref(":last-of-type") }} | Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка. | -| {{ Cssxref(":left") }} | В [постраничном носителе](/ru/docs/Web/CSS/Paged_Media) соответствует левосторонним страницам. | +| {{ Cssxref(":left") }} | В [постраничном носителе](/ru/docs/Web/CSS/CSS_paged_media) соответствует левосторонним страницам. | | {{ Cssxref(":link")}} | Соответствует непосещавшимся ссылкам. | | {{ Cssxref(":local-link")}} | Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ. | | {{ Cssxref(":is", ":is()")}} | Соответствует любому селектору из полученного списка селекторов. | @@ -155,7 +155,7 @@ article p:first-child::first-line { | {{ Cssxref(":read-only") }} | Соответствует элементу, который не может быть изменён пользователем. | | {{ Cssxref(":read-write") }} | Соответствует элементу, который может быть изменён пользователем. | | {{ Cssxref(":required") }} | Соответствует обязательным элементам формы. | -| {{ Cssxref(":right") }} | В [постраничном носителе](/ru/docs/Web/CSS/Paged_Media) соответствует правосторонним страницам. | +| {{ Cssxref(":right") }} | В [постраничном носителе](/ru/docs/Web/CSS/CSS_paged_media) соответствует правосторонним страницам. | | {{ Cssxref(":root") }} | Соответствует элементу, который является корнем документа. | | {{ Cssxref(":scope") }} | Соответствует любому элементу, который является элементом области видимости. | | {{ Cssxref(":valid") }} | Соответствует элементу, такому как \, в допустимом состоянии. | diff --git a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md index aec5a4de5ef866..a7dca7402952a8 100644 --- a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md +++ b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS В предыдущих уроках вы познакомились с некоторыми способами изменения размеров элементов на веб-странице с помощью CSS. Понимание того, насколько велики будут различные элементы в вашем дизайне — важно, и в этом уроке мы подведем итог по различным способам задания размеров элементов с помощью CSS и расскажем о некоторых терминах, связанных с размерами, которые помогут вам в будущем. -| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS ([Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Изучить различные способы задания размеров объектов в CSS. | +| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS ([Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Изучить различные способы задания размеров объектов в CSS. | ## Размер по умолчанию или внутренний размер @@ -35,7 +35,7 @@ slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS ### Использование процентного соотношения -Во многих отношениях проценты действуют как единицы длины, и, как мы [обсуждали в уроке, посвященном значениям и единицам](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages), они часто могут использоваться как взаимозаменяемые с длиной. При использовании процентов вы должны знать, _от чего этот процент рассчитывается_. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера. +Во многих отношениях проценты действуют как единицы длины, и, как мы [обсуждали в уроке, посвященном значениям и единицам](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#percentages), они часто могут использоваться как взаимозаменяемые с длиной. При использовании процентов вы должны знать, _от чего этот процент рассчитывается_. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера. {{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}} diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.md b/files/ru/learn/css/building_blocks/styling_tables/index.md index 1e9c9e8c05dd7b..2aec8cbe3e5393 100644 --- a/files/ru/learn/css/building_blocks/styling_tables/index.md +++ b/files/ru/learn/css/building_blocks/styling_tables/index.md @@ -213,7 +213,7 @@ tfoot td { Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и ещё {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости. -Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают [несколько фоновых изображений](/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) и [линейные градиенты](). +Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают [несколько фоновых изображений](/ru/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds) и [линейные градиенты](). #### Полосатая зебра diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.md b/files/ru/learn/css/building_blocks/the_box_model/index.md index 43f79c6fa05f6b..969c48184fb72e 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.md +++ b/files/ru/learn/css/building_blocks/the_box_model/index.md @@ -155,7 +155,7 @@ html { ### Использование инструментов разработчика в браузере для просмотра блочных моделей -[Инструменты разработчика](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете! +[Инструменты разработчика](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете! ![Проверка блочной модели элемента с использованием инструментов разработчика Firefox](box-model-devtools.png) @@ -190,7 +190,7 @@ html { {{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} -Существует ряд правил, которые определяют, когда внешние отступы схлопываются, а когда нет. Для получения подробной информации см. [margin collapsing](/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). Главное, что нужно сейчас помнить, — это то, что схлопывание отступов существует. Если вы создаёте пространство с внешними отступами и не получаете ожидаемого результата, вероятно, именно это и происходит. +Существует ряд правил, которые определяют, когда внешние отступы схлопываются, а когда нет. Для получения подробной информации см. [margin collapsing](/ru/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing). Главное, что нужно сейчас помнить, — это то, что схлопывание отступов существует. Если вы создаёте пространство с внешними отступами и не получаете ожидаемого результата, вероятно, именно это и происходит. ### Рамка diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.md b/files/ru/learn/css/building_blocks/values_and_units/index.md index c6f4e9216aed80..6138285d5ea28c 100644 --- a/files/ru/learn/css/building_blocks/values_and_units/index.md +++ b/files/ru/learn/css/building_blocks/values_and_units/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Building_blocks/Values_and_units Каждое свойство используемое в CSS имеет значение или набор значений которые допустимы для этого свойства, и изучение страниц MDN со свойствами поможет вам понять какие значения валидны для того или иного свойства. В этом уроке мы рассмотрим некоторые наиболее общие значения и единицы в использовании. -| Prerequisites: | Basic computer literacy, [basic software installed](/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Objective: | To learn about the different types of values and units used in CSS properties. | +| Prerequisites: | Basic computer literacy, [basic software installed](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Objective: | To learn about the different types of values and units used in CSS properties. | ## Что такое значение CSS? @@ -230,7 +230,7 @@ In the following example we have positioned a background image 40px from the top Throughout the examples above, we've seen places where keywords are used as a value (for example `` keywords like `red`, `black`, `rebeccapurple`, and `goldenrod`). These keywords are more accurately described as _identifiers_, a special value that CSS understands. As such they are not quoted — they are not treated as strings. -There are places where you use strings in CSS, for example [when specifying generated content](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after). In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string. +There are places where you use strings in CSS, for example [when specifying generated content](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after). In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string. {{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} diff --git a/files/ru/learn/css/css_layout/floats/index.md b/files/ru/learn/css/css_layout/floats/index.md index 10e4bd1c8791db..5f4289ea1d7d91 100644 --- a/files/ru/learn/css/css_layout/floats/index.md +++ b/files/ru/learn/css/css_layout/floats/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/CSS_layout/Floats Первоначально используемое для "обтекания" картинок текстом, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания макетов из нескольких столбцов на веб-страницах. С появлением flexbox и grid оно снова используется как задумывалось в начале, о чем подробнее в этой статье. -| Предварительные требования: | Базовое знакомство с HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), а также идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов. | +| Предварительные требования: | Базовое знакомство с HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), а также идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Задача: | Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов. | ## Общие сведения о float @@ -233,7 +233,7 @@ body { {{ EmbedLiveSample('Float_2', '100%', 500) }} -[Линейные блоки](/ru/docs/Web/CSS/Visual_formatting_model#Line_boxes) нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину. +[Линейные блоки](/ru/docs/Web/CSS/Visual_formatting_model#line_boxes) нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину. ## Очистка обтекания @@ -585,7 +585,7 @@ body { ### display: flow-root -Современный способ решения этой проблемы — это использование значения `flow-root` свойства `display`. Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите `overflow: auto` из вашего правила `.wrapper` и добавьте `display: flow-root`. Если предположить, что у вас [поддерживающий браузер](/ru/docs/Web/CSS/display#Browser_compatibility), блок будет очищаться. +Современный способ решения этой проблемы — это использование значения `flow-root` свойства `display`. Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите `overflow: auto` из вашего правила `.wrapper` и добавьте `display: flow-root`. Если предположить, что у вас [поддерживающий браузер](/ru/docs/Web/CSS/display#browser_compatibility), блок будет очищаться. ```css .wrapper { diff --git a/files/ru/learn/css/css_layout/grids/index.md b/files/ru/learn/css/css_layout/grids/index.md index ebddcc55a4b305..a2845b3779b2f4 100644 --- a/files/ru/learn/css/css_layout/grids/index.md +++ b/files/ru/learn/css/css_layout/grids/index.md @@ -5,9 +5,9 @@ slug: Learn/CSS/CSS_layout/Grids {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}Сетки (grids) являются установленным инструментом проектирования и многие современные макеты веб-сайта основаны на регулярной сетке. В этой статье мы рассмотрим дизайн на основе сетки и увидим как CSS можно использовать для создания сеток — как с помощью современных инструментов, так и с помощью новых технологий, которые только начинают становиться доступными в браузерах. -| Необходимые навыки: | основы HTML(изучите [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), понимание как работает CSS (изучите [Introduction to CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) и [Styling boxes](/ru/docs/Learn/CSS/Styling_boxes).) | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Понять основные концепции, лежащие в основе систем компоновки сетки и как реализовать сетку на веб-странице. | +| Необходимые навыки: | основы HTML(изучите [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), понимание как работает CSS (изучите [Introduction to CSS](/ru/docs/Learn/CSS/First_steps) и [Styling boxes](/ru/docs/Learn/CSS/Building_blocks).) | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Понять основные концепции, лежащие в основе систем компоновки сетки и как реализовать сетку на веб-странице. | ## Что такое макет сетки (grid layout)? @@ -75,7 +75,7 @@ slug: Learn/CSS/CSS_layout/Grids ![](simple-grid-finished.png) -В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. [Changing the box model completely](/ru/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely) для большего объяснения). +В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. [Changing the box model completely](/ru/docs/Learn/CSS/Building_blocks/The_box_model#changing_the_box_model_completely) для большего объяснения). ```css * { @@ -376,7 +376,7 @@ body { ``` > [!NOTE] -> Если вы использовали препроцессор, такой как [Sass](http://sass-lang.com/), вы могли бы создать простой mixin, чтобы вставить это значение для вас. +> Если вы использовали препроцессор, такой как [Sass](https://sass-lang.com/), вы могли бы создать простой mixin, чтобы вставить это значение для вас. ### Включение офсетных контейнеров в нашей сетке @@ -593,11 +593,11 @@ Skeleton - это более простая сетка, чем некоторы ## Родные CSS Сетки с Grid Layout -В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы ещё не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS ([CSS Grid Layout Module](/ru/docs/Web/CSS/CSS_Grid_Layout)). +В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы ещё не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS ([CSS Grid Layout Module](/ru/docs/Web/CSS/CSS_grid_layout)). В настоящее время вы можете использовать только те методы, которые мы покажем вам в браузерах, которые реализуют макет сетки CSS «за флагом» - это означает, что он в настоящее время реализован, но в экспериментальном состоянии, которое вам нужно включить. -В Firefox, например, вам нужно перейти к URL-адресу `about: config`, выполнить поиск по предпочтению `layout.css.grid.enabled` и дважды щёлкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив [Grid by Example](http://gridbyexample.com/browsers). +В Firefox, например, вам нужно перейти к URL-адресу `about: config`, выполнить поиск по предпочтению `layout.css.grid.enabled` и дважды щёлкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив [Grid by Example](https://gridbyexample.com/browsers). Мы рассмотрели структуру Скелетной сетки выше - как и другие сторонние решётки и даже ручные сетки, для этого требуется добавить `
` для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах. @@ -768,7 +768,7 @@ Skeleton - это более простая сетка, чем некоторы ### Активное обучение: Напишите свою собственную простую сетку -В макете «[Введение в CSS](/ru/docs/Learn/CSS/CSS_layout/Introduction)» мы включили раздел о [CSS-таблицах](/ru/docs/Learn/CSS/CSS_layout/Introduction#CSS_tables), который включал простой пример формы (см. Пример [css-tables-example.html live](https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html) и [исходный код](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html)). Мы хотели бы, чтобы вы взяли копию этого примера и выполните следующие действия: +В макете «[Введение в CSS](/ru/docs/Learn/CSS/CSS_layout/Introduction)» мы включили раздел о [CSS-таблицах](/ru/docs/Learn/CSS/CSS_layout/Introduction#css_tables), который включал простой пример формы (см. Пример [css-tables-example.html live](https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html) и [исходный код](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html)). Мы хотели бы, чтобы вы взяли копию этого примера и выполните следующие действия: 1. Удалите элементы `
` внутри `
` - вам больше не нужны эти данные, поскольку CSS-сетки могут обрабатывать размещение содержимого по строкам и столбцам для вас. 2. Используйте свойства сетки CSS, чтобы создать макет для вашей формы как можно ближе к оригиналу. Вам нужно будет установить ширину на содержащем элементе и подумать о том, как установить пробелы в столбцах, а также пробелы в строке. diff --git a/files/ru/learn/css/css_layout/introduction/index.md b/files/ru/learn/css/css_layout/introduction/index.md index c3e36d73477c5f..6f274c0cc7c575 100644 --- a/files/ru/learn/css/css_layout/introduction/index.md +++ b/files/ru/learn/css/css_layout/introduction/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/CSS_layout/Introduction В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберём некоторые концепции, которые будут рассмотрены в этой статье. -| Требования: | Базовые знания HTML (изучите [введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и понимание как работает CSS (изучите [введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Предоставить вам обзор методов компоновки страниц CSS. Каждый метод может быть изучен более подробно в последующих статьях. | +| Требования: | Базовые знания HTML (изучите [введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и понимание как работает CSS (изучите [введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Предоставить вам обзор методов компоновки страниц CSS. Каждый метод может быть изучен более подробно в последующих статьях. | Методы компоновки страниц CSS позволяют нам использовать элементы, расположенные на веб-странице, и контролировать где они находятся относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна. Методы компоновки страниц, которые мы подробно рассмотрим в этой статье. @@ -55,11 +55,11 @@ slug: Learn/CSS/CSS_layout/Introduction Методы CSS, которыми вы можете управлять разметкой элементов: -- **Свойство {{cssxref("display")}}** — Стандартные значения `block`, `inline` или `inline-block` могут изменять поведение элементов в обычном потоке (см.подробнее [Types of CSS boxes](/ru/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes)). Также можно менять сами методы разметки такими значениями свойства `display`, как [CSS Grid](/ru/docs/Learn/CSS/CSS_layout/Grids) или [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox). +- **Свойство {{cssxref("display")}}** — Стандартные значения `block`, `inline` или `inline-block` могут изменять поведение элементов в обычном потоке (см.подробнее [Types of CSS boxes](/ru/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes)). Также можно менять сами методы разметки такими значениями свойства `display`, как [CSS Grid](/ru/docs/Learn/CSS/CSS_layout/Grids) или [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox). - **Floats** — Применение значения {{cssxref("float")}} типа `left` может заставить элемент блочного типа "прилепить" содержимое к одной стороне элемента, как иногда изображения обволакиваются текстом на газетных страницах. - **Свойство {{cssxref("position")}}** — Позволяет точно контролировать положение блоков внутри других блоков. `static` позиционирование является стандартным, но также можно применять другие значения свойства, например фиксированное в углу экрана. - **Макет Таблицы** — свойства для разметки таблиц могут быть использованы и для нетабличных элементов, с помощью `display: table` и соответствующих свойств. -- **Multi-column layout** — [Многоколоночный макет](/ru/docs/Web/CSS/CSS_Columns) поможет расположить содержимое столбцами, как в газетах. +- **Multi-column layout** — [Многоколоночный макет](/ru/docs/Web/CSS/CSS_multicol_layout) поможет расположить содержимое столбцами, как в газетах. ## Свойство display @@ -71,7 +71,7 @@ slug: Learn/CSS/CSS_layout/Introduction ## Flexbox -Flexbox (сокращение от [Flexible Box Layout](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout)) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство `display: flex` для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере. +Flexbox (сокращение от [Flexible Box Layout](/ru/docs/Web/CSS/CSS_flexible_box_layout)) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство `display: flex` для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере. Разметка HTML, представленная ниже, состоит из элемента `wrapper`, включающего в себя три {{htmlelement("div")}} элемента. По умолчанию все они будут изображаться как блочные, один под другим. diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.md b/files/ru/learn/css/css_layout/multiple-column_layout/index.md index 508c481bba35fe..97b6f8bc315218 100644 --- a/files/ru/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/CSS_layout/Multiple-column_Layout Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию. -| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Изучить как создавать макет с несколькими столбцами на веб-страницах, такой как вы можете найти в газете. | +| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Изучить как создавать макет с несколькими столбцами на веб-страницах, такой как вы можете найти в газете. | ## Базовый пример @@ -516,6 +516,6 @@ body { ## Смотрите также - [CSS Фрагментация](/ru/docs/Web/CSS/CSS_Fragmentation) -- [Применение макета с несколькими столбцами](/ru/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) +- [Применение макета с несколькими столбцами](/ru/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) {{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}} diff --git a/files/ru/learn/css/css_layout/normal_flow/index.md b/files/ru/learn/css/css_layout/normal_flow/index.md index 9734a319d3419f..9614954c77c267 100644 --- a/files/ru/learn/css/css_layout/normal_flow/index.md +++ b/files/ru/learn/css/css_layout/normal_flow/index.md @@ -9,9 +9,9 @@ slug: Learn/CSS/CSS_layout/Normal_Flow Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию. -| Что нужно знать прежде чем изучать: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и понимания как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнём вносить какие-либо изменения. | +| Что нужно знать прежде чем изучать: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и понимания как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнём вносить какие-либо изменения. | Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путём изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним. diff --git a/files/ru/learn/css/css_layout/positioning/index.md b/files/ru/learn/css/css_layout/positioning/index.md index f86b3dcd9de191..56525ce54449e5 100644 --- a/files/ru/learn/css/css_layout/positioning/index.md +++ b/files/ru/learn/css/css_layout/positioning/index.md @@ -7,11 +7,11 @@ slug: Learn/CSS/CSS_layout/Positioning Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения {{cssxref("position")}} и как их использовать. -| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Изучить как работает CSS позиционирование. | +| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Изучить как работает CSS позиционирование. | -Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию [`0_basic-flow.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html) из нашего GitHub репозитория ([исходный код здесь](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html)) и используйте его как отправную точку. +Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию [`0_basic-flow.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html) из нашего GitHub репозитория ([исходный код здесь](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html)) и используйте его как отправную точку. ## Введение в позиционирование @@ -41,7 +41,7 @@ slug: Learn/CSS/CSS_layout/Positioning И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию! > [!NOTE] -> Вы можете посмотреть живой пример на данном этапе на [`1_static-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)). +> Вы можете посмотреть живой пример на данном этапе на [`1_static-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)). ### Относительное позиционирование @@ -63,7 +63,7 @@ left: 30px; ``` > [!NOTE] -> Значения этих свойств могут принимать любые [единицы](/ru/docs/Learn/CSS/Introduction_to_CSS/Values_and_units) которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д. +> Значения этих свойств могут принимать любые [единицы](/ru/docs/Learn/CSS/Building_blocks/Values_and_units) которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д. Если вы сейчас сохраните и обновите, вы получите примерно такой результат: @@ -127,7 +127,7 @@ span { Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали `top: 30px;`, сила толкает блок, заставляя его перемещаться вниз на 30px. > [!NOTE] -> Вы можете посмотреть пример на этом этапе на [`2_relative-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html)). +> Вы можете посмотреть пример на этом этапе на [`2_relative-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html)). ### Абсолютное позиционирование @@ -207,11 +207,11 @@ span { > Да, значения `margin` все ещё влияют на позиционируемый элемент. Однако, схлопывания `margin` не происходит. > [!NOTE] -> Вы можете посмотреть пример на этом этапе на [`3_absolute-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html)). +> Вы можете посмотреть пример на этом этапе на [`3_absolute-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html)). ### Контекст позиционирования -Какой элемент является "содержащим" относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. [Определение содержащего блока](/ru/docs/Web/CSS/Containing_block#Identifying_the_containing_block)). +Какой элемент является "содержащим" относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. [Определение содержащего блока](/ru/docs/Web/CSS/Containing_block#identifying_the_containing_block)). Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в **исходным содержащем блоке**. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент {{htmlelement("html")}}. Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента {{htmlelement("html")}} и будет расположен относительно исходного окна просмотра. @@ -283,7 +283,7 @@ span { Позиционируемый элемент теперь располагается относительно элемента {{htmlelement("body")}}. > [!NOTE] -> Вы можете посмотреть живой пример на этом этапе на [`4_positioning-context.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html)). +> Вы можете посмотреть живой пример на этом этапе на [`4_positioning-context.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html)). ### Введение в z-index @@ -382,7 +382,7 @@ p:nth-of-type(1) { Обратите внимание что `z-index` принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000. > [!NOTE] -> Вы можете посмотреть живой пример на этом этапе на [`5_z-index.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html)). +> Вы можете посмотреть живой пример на этом этапе на [`5_z-index.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html)). ### Фиксированное позиционированиее @@ -485,7 +485,7 @@ p:nth-of-type(1) { {{ EmbedLiveSample('Фиксированное_позиционированиее', '100%', 400) }} > [!NOTE] -> Вы можете посмотреть живой пример на этом этапе на [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)). +> Вы можете посмотреть живой пример на этом этапе на [`6_fixed-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)). ### position: sticky @@ -659,7 +659,7 @@ dt { Липкие элементы являются "липкими" относительно ближайшего предка с "прокручивающимся механизмом", который определяется свойством [позиции](/ru/docs/Web/CSS/position) его предка. > [!NOTE] -> Вы можете посмотреть живой пример на этом этапе на [`7_sticky-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html)). +> Вы можете посмотреть живой пример на этом этапе на [`7_sticky-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html)). ## Проверь свои навыки! diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.md b/files/ru/learn/css/css_layout/practical_positioning_examples/index.md index ad5d7d226aaa11..1bbf4d7a3eff5d 100644 --- a/files/ru/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/ru/learn/css/css_layout/practical_positioning_examples/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples Основы позиционирования, приведённые в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием. -| Предпосылки: | Основы HTML (уроки [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и идея о том, как работает CSS (уроки [Introduction to CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Чтобы получить представление о практичности позиционирования | +| Предпосылки: | Основы HTML (уроки [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и идея о том, как работает CSS (уроки [Introduction to CSS](/ru/docs/Learn/CSS/First_steps).) | +| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Чтобы получить представление о практичности позиционирования | ## Информационный блок с вкладками @@ -17,7 +17,7 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples ![](tabbed-info-box.png) -> **Примечание:**Вы можете увидеть, что готовый пример работает в прямом эфире [info-box.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). Проверьте его, чтобы понять, что вы будете строить в этом разделе статьи. +> **Примечание:**Вы можете увидеть, что готовый пример работает в прямом эфире [info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). Проверьте его, чтобы понять, что вы будете строить в этом разделе статьи. Возможно, вы думаете: «Почему бы просто не создавать отдельные вкладки в виде отдельных веб-страниц и просто иметь вкладки, переходящие на отдельные страницы, чтобы создать эффект?» Этот код был бы проще, да, но тогда каждый отдельный «просмотр страницы» на самом деле был бы вновь загруженной веб-страницей, что затрудняло бы сохранение информации между представлениями и интеграцию этой функции в более крупный дизайн пользовательского интерфейса. Кроме того, так называемые «одностраничные приложения» становятся очень популярными - особенно для мобильных веб-интерфейсов - потому что все, что обслуживается как один файл, сокращает количество HTTP-запросов, необходимых для просмотра всего содержимого, тем самым повышая производительность. @@ -245,7 +245,7 @@ In our second example, we will take our first example — our info-box — and a ![](fixed-info-box.png) > [!NOTE] -> You can see the finished example running live at [fixed-info-box.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). Check it out to get an idea of what you will be building in this section of the article. +> You can see the finished example running live at [fixed-info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). Check it out to get an idea of what you will be building in this section of the article. As a starting point, you can use your completed example from the first section of the article, or make a local copy of [info-box.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html) from our Github repo. @@ -328,7 +328,7 @@ Our finished example will look like this: ![](hidden-sliding-panel.png) > [!NOTE] -> You can see the finished example running live at [hidden-info-panel.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). Check it out to get an idea of what you will be building in this section of the article. +> You can see the finished example running live at [hidden-info-panel.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). Check it out to get an idea of what you will be building in this section of the article. As a starting point, make a local copy of [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file: diff --git a/files/ru/learn/css/css_layout/responsive_design/index.md b/files/ru/learn/css/css_layout/responsive_design/index.md index 3dfb9d240e1825..8741451ac9a862 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.md +++ b/files/ru/learn/css/css_layout/responsive_design/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/CSS_layout/Responsive_Design На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция _отзывчивого (адаптивного) веб-дизайна_ _(responsive web design_ (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его. -| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) и [Устройство CSS](/ru/docs/Learn/CSS/Building_blocks).) | -| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Понять базовые концепции и историю отзывчивого дизайна. | +| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps) и [Устройство CSS](/ru/docs/Learn/CSS/Building_blocks).) | +| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Понять базовые концепции и историю отзывчивого дизайна. | ## Исторические макеты сайтов @@ -33,7 +33,7 @@ slug: Learn/CSS/CSS_layout/Responsive_Design > Посмотрите этот простой макет с фиксированной шириной: [пример](https://mdn.github.io/css-examples/learn/rwd/fixed-width.html), [исходный код](https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html). Снова изучите результат по мере изменения размера окна браузера. > [!NOTE] -> Скриншоты выше сделаны используя [Responsive Design Mode](/ru/docs/Tools/Responsive_Design_Mode) в Firefox DevTools. +> Скриншоты выше сделаны используя [Responsive Design Mode](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html) в Firefox DevTools. Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие _m.example.com_ или _example.mobi_). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта. @@ -41,7 +41,7 @@ slug: Learn/CSS/CSS_layout/Responsive_Design ## Гибкий макет до отзывчивого дизайна -Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост [Resolution dependent layout](http://www.themaninblue.com/writing/perspective/2004/09/21/), описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS. +Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост [Resolution dependent layout](https://www.themaninblue.com/writing/perspective/2004/09/21/), описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS. Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером. @@ -50,8 +50,8 @@ slug: Learn/CSS/CSS_layout/Responsive_Design Термин адаптивный дизайн был [Придуман Итаном Маркоттом в 2010 году](https://alistapart.com/article/responsive-web-design/) и описывал использование трёх методов в сочетании. 1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - [Fluid Grids](https://alistapart.com/article/fluidgrids/) (опубликовано в 2009 в A List Apart). -2. Вторым методом была идея [жидких изображений](http://unstoppablerobotninja.com/entry/fluid-images). Используя очень простой метод настройки свойства `max-width` на `100%`, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения. -3. Третьим ключевым компонентом были [медиавыражения](/ru/docs/Web/CSS/Media_Queries). Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию. +2. Вторым методом была идея [жидких изображений](https://unstoppablerobotninja.com/entry/fluid-images). Используя очень простой метод настройки свойства `max-width` на `100%`, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения. +3. Третьим ключевым компонентом были [медиавыражения](/ru/docs/Web/CSS/CSS_media_queries). Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию. Очень важно понять, что **адаптивный веб-дизайн** — **это не отдельная технология**, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще. @@ -75,7 +75,7 @@ slug: Learn/CSS/CSS_layout/Responsive_Design Общим подходом при использовании медиавыражений является создание простого одноколоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана, чтобы уместить все. Такой подход часто называют **mobile first** дизайном. -Узнать больше о [медиавыражениях](/ru/docs/Web/CSS/Media_Queries) можно в документации MDN. +Узнать больше о [медиавыражениях](/ru/docs/Web/CSS/CSS_media_queries) можно в документации MDN. ## Гибкие сетки @@ -136,7 +136,7 @@ target / context = result В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения `flex-grow` и `flex-shrink` вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя. -В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись `flex: 1` как описано в главе [Flexbox: Гибкое изменение размеров flex элементов](/ru/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items). +В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись `flex: 1` как описано в главе [Flexbox: Гибкое изменение размеров flex элементов](/ru/docs/Learn/CSS/CSS_layout/Flexbox#flexible_sizing_of_flex_items). ```css .container { @@ -153,7 +153,7 @@ target / context = result ### CSS grid -В макете CSS Grid единицы измерения `fr` позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером `1fr`. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе [Гибкие grids с единицами fr](/ru/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit). +В макете CSS Grid единицы измерения `fr` позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером `1fr`. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе [Гибкие grids с единицами fr](/ru/docs/Learn/CSS/CSS_layout/Grids#flexible_grids_with_the_fr_unit). ```css .container { diff --git a/files/ru/learn/css/first_steps/how_css_works/index.md b/files/ru/learn/css/first_steps/how_css_works/index.md index a76c3aefd738e8..7bdc72618938e5 100644 --- a/files/ru/learn/css/first_steps/how_css_works/index.md +++ b/files/ru/learn/css/first_steps/how_css_works/index.md @@ -8,9 +8,9 @@ slug: Learn/CSS/First_steps/How_CSS_works Мы уже изучили основы CSS, для чего он нужен и как создавать простые таблицы стилей. В этом уроке мы посмотрим, как браузер обрабатывает CSS и HTML и выводит содержимое на веб-страницу. -| Необходимые знания: | Основы компьютерной грамотности, [базовое программное обеспечение](/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения), умение [умение работать с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) и начальные знания HTML (рекомендуется изучить [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML)). | -| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Понимать основы того, как браузер анализирует CSS и HTML и что происходит когда браузер встречает неизвестные CSS стили | +| Необходимые знания: | Основы компьютерной грамотности, [базовое программное обеспечение](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), умение [умение работать с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) и начальные знания HTML (рекомендуется изучить [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)). | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Понимать основы того, как браузер анализирует CSS и HTML и что происходит когда браузер встречает неизвестные CSS стили | ## Как работает CSS? @@ -103,7 +103,7 @@ span { ## Что происходит, когда браузер не понимает CSS? -[В предыдущем уроке](/ru/docs/Learn/CSS/First_steps/Что_такое_CSS#Поддержка_браузера) я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт? +[В предыдущем уроке](/ru/docs/Learn/CSS/First_steps/What_is_CSS#поддержка_браузера) я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт? — Да ничего: браузер просто пропустит это! @@ -140,6 +140,6 @@ p { ## Завершение -Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в [использовании ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge). +Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в [использовании ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Styling_a_biography_page). {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} diff --git a/files/ru/learn/css/first_steps/index.md b/files/ru/learn/css/first_steps/index.md index 82b82c7bc4e252..69b3c15110732d 100644 --- a/files/ru/learn/css/first_steps/index.md +++ b/files/ru/learn/css/first_steps/index.md @@ -30,7 +30,7 @@ CSS (каскадные таблицы стилей) используется д - : Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными. - [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works) - : Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берёт CSS и HTML и превращает их в веб-страницу. -- [Использование ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge) +- [Использование ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Styling_a_biography_page) - : С учётом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам шанс сделать это. ## Смотрите также diff --git a/files/ru/learn/css/first_steps/what_is_css/index.md b/files/ru/learn/css/first_steps/what_is_css/index.md index ffef4cf3e4dbf0..0e657bb93b3ea5 100644 --- a/files/ru/learn/css/first_steps/what_is_css/index.md +++ b/files/ru/learn/css/first_steps/what_is_css/index.md @@ -28,7 +28,7 @@ slug: Learn/CSS/First_steps/What_is_CSS > [!NOTE] > Браузер иногда называют {{Glossary("User agent","user agent")}}, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати. -CSS может использоваться для очень простой стилизации текста документа, например, изменение [цвета](/ru/docs/Web/CSS/color_value) и [размера](/ru/docs/Web/CSS/font-size) заголовков и ссылок. Он может быть использован для создания макета, например, [превращение одного столбца текста в макет](/ru/docs/Web/CSS/Layout_cookbook/Column_layouts) с основной областью контента и боковой панелью для соответствующей информации. Это может даже использоваться для эффектов, таких как [анимация](/ru/docs/Web/CSS/CSS_Animations). Посмотрите на ссылки в этом параграфе для конкретных примеров. +CSS может использоваться для очень простой стилизации текста документа, например, изменение [цвета](/ru/docs/Web/CSS/color_value) и [размера](/ru/docs/Web/CSS/font-size) заголовков и ссылок. Он может быть использован для создания макета, например, [превращение одного столбца текста в макет](/ru/docs/Web/CSS/Layout_cookbook/Column_layouts) с основной областью контента и боковой панелью для соответствующей информации. Это может даже использоваться для эффектов, таких как [анимация](/ru/docs/Web/CSS/CSS_animations). Посмотрите на ссылки в этом параграфе для конкретных примеров. ## Синтаксис CSS @@ -49,7 +49,7 @@ h1 { Затем у нас есть набор фигурных скобок `{ }`. Внутри них будет один или несколько **объявлений**, которые принимают форму пары **свойства** и его **значения**. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству. -Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-{{Glossary("property/CSS","свойства")}} имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство `color`, которое может принимать различные [цветовые значения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#Color). У нас также есть свойство `font-size`. Это свойство может принимать различные [значения размера](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages), как и свойства. +Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-{{Glossary("property/CSS","свойства")}} имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство `color`, которое может принимать различные [цветовые значения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#color). У нас также есть свойство `font-size`. Это свойство может принимать различные [значения размера](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages), как и свойства. Таблица стилей CSS будет содержать много таких правил, написанных одно за другим. @@ -89,7 +89,7 @@ CSS ничем не отличается — он разработан груп ## Информация о совместимости с браузерами -После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)[.](/ru/docs/) Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN вы можете видеть статус интересующего вас свойства, чтобы вы могли определить, сможете ли вы использовать её на веб-сайте. +После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)[.](/ru/docs/Web) Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN вы можете видеть статус интересующего вас свойства, чтобы вы могли определить, сможете ли вы использовать её на веб-сайте. ## Что дальше? diff --git a/files/ru/learn/css/howto/css_faq/index.md b/files/ru/learn/css/howto/css_faq/index.md index 4c56f151dbd79b..1000d072515ce0 100644 --- a/files/ru/learn/css/howto/css_faq/index.md +++ b/files/ru/learn/css/howto/css_faq/index.md @@ -54,13 +54,13 @@ Use a class-specific style when you want to apply the styling rules to many bloc Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique). -See [CSS selectors](/ru/docs/CSS/Getting_Started/Selectors) +See [CSS selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors) ## How do I restore the default value of a property? Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property. -This has changed with CSS 2; the keyword [initial](/es/CSS/initial) is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property. +This has changed with CSS 2; the keyword [initial](/ru/docs/Web/CSS/initial) is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property. ## How do I derive one style from another? @@ -166,7 +166,7 @@ The use of the \* selector should be minimized as it is a slow selector, especia ### Specificity in CSS -When multiples rules apply to a certain element, the rule chosen depends on its style [specificity](/ru/docs/CSS/Specificity). Inline style (in HTML `style` attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors. +When multiples rules apply to a certain element, the rule chosen depends on its style [specificity](/ru/docs/Web/CSS/Specificity). Inline style (in HTML `style` attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors. ``` div { color: black; } @@ -176,7 +176,7 @@ div { color: black; }
This is red
``` -The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the [CSS 2.1 Specification chapter 6.4.3](http://www.w3.org/TR/CSS21/cascade.html#specificity). +The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the [CSS 2.1 Specification chapter 6.4.3](https://www.w3.org/TR/CSS21/cascade.html#specificity). ## What do the -moz-\*, -ms-\*, -webkit-\*, -o-\* and -khtml-\* properties do? @@ -184,7 +184,7 @@ These properties, called _prefixed properties_, are extensions to the CSS standa The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves. -Please see the [Mozilla CSS Extensions](/ru/docs/CSS/CSS_Reference/Mozilla_Extensions) page for more information on the Mozilla-prefixed CSS properties. +Please see the [Mozilla CSS Extensions](/ru/docs/Web/CSS/Mozilla_Extensions) page for more information on the Mozilla-prefixed CSS properties. ## How does z-index relate to positioning? diff --git a/files/ru/learn/css/howto/index.md b/files/ru/learn/css/howto/index.md index 97c989cd2220c9..f3f7f22f268675 100644 --- a/files/ru/learn/css/howto/index.md +++ b/files/ru/learn/css/howto/index.md @@ -11,37 +11,37 @@ slug: Learn/CSS/Howto ### Основы -- [Как применить CSS к HTML](/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML) -- [Как использовать пробелы в CSS](/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space) -- [Как писать комментарии в CSS](/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments) -- [Как выбрать элементы через имя элемента, класс или ID](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors) -- [Как выбрать элементы через имя атрибута и содержания](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors) -- [Как использовать псевдоклассы](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes) -- [Как использовать псевдо-элементы](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements) -- [Как применить несколько селекторов к тому же правилу](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule) -- [Как определить цвета в CSS](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors) -- [Как отлаживать CSS в браузере](/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS) +- [Как применить CSS к HTML](/ru/docs/Learn/CSS/First_steps/How_CSS_works#how_to_apply_your_css_to_your_html) +- [Как использовать пробелы в CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured#white_space) +- [Как писать комментарии в CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured#comments) +- [Как выбрать элементы через имя элемента, класс или ID](/ru/docs/Learn/CSS/Building_blocks/Selectors#simple_selectors) +- [Как выбрать элементы через имя атрибута и содержания](/ru/docs/Learn/CSS/Building_blocks/Selectors#attribute_selectors) +- [Как использовать псевдоклассы](/ru/docs/Learn/CSS/Building_blocks/Selectors#pseudo-classes) +- [Как использовать псевдо-элементы](/ru/docs/Learn/CSS/Building_blocks/Selectors#pseudo-elements) +- [Как применить несколько селекторов к тому же правилу](/ru/docs/Learn/CSS/Building_blocks/Selectors#multiple_selectors_on_one_rule) +- [Как определить цвета в CSS](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#colors) +- [Как отлаживать CSS в браузере](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS#inspecting_the_dom_and_css) ### CSS и текст - [Как стилизовать текст](/ru/docs/Learn/CSS/Styling_text/Fundamentals) - [How to customize a list of elements](/ru/docs/Learn/CSS/Styling_text/Styling_lists) -- [Как стилизовать ссылки](/en-US/Learn/CSS/Styling_text/Styling_links) -- [How to add shadows to text](/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows) +- [Как стилизовать ссылки](/ru/docs/Learn/CSS/Styling_text/Styling_links) +- [How to add shadows to text](/ru/docs/Learn/CSS/Styling_text/Fundamentals#text_drop_shadows) ### Блоки и разметка -- [How to size CSS boxes](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties) -- [How to control overflowing content](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow) -- [How to control the part of a CSS box that the background is drawn under](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip) -- [How do I define inline, block, and inline-block?](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes) -- [How to create fancy boxes](/ru/docs/Learn/CSS/Howto/create_fancy_boxes) (also see the [Styling boxes](/ru/docs/Learn/CSS/Styling_boxes) module, generally). -- [How to use `background-clip` to control how much of the box your background image covers](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip). -- [How to change the box model completely using `box-sizing`](/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely) -- [How to control backgrounds](/en-US/Learn/CSS/Styling_boxes/Backgrounds) -- [How to control borders](/en-US/Learn/CSS/Styling_boxes/Borders) -- [How to style an HTML table](/en-US/Learn/CSS/Styling_boxes/Styling_tables) -- [How to add shadows to boxes](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows) +- [How to size CSS boxes](/ru/docs/Learn/CSS/Building_blocks/The_box_model#box_properties) +- [How to control overflowing content](/ru/docs/Learn/CSS/Building_blocks/The_box_model#overflow) +- [How to control the part of a CSS box that the background is drawn under](/ru/docs/Learn/CSS/Building_blocks/The_box_model#background_clip) +- [How do I define inline, block, and inline-block?](/ru/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes) +- [How to create fancy boxes](/ru/docs/Learn/CSS/Howto/create_fancy_boxes) (also see the [Styling boxes](/ru/docs/Learn/CSS/Building_blocks) module, generally). +- [How to use `background-clip` to control how much of the box your background image covers](/ru/docs/Learn/CSS/Building_blocks/The_box_model#background_clip). +- [How to change the box model completely using `box-sizing`](/ru/docs/Learn/CSS/Building_blocks/The_box_model#changing_the_box_model_completely) +- [How to control backgrounds](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +- [How to control borders](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +- [How to style an HTML table](/ru/docs/Learn/CSS/Building_blocks/Styling_tables) +- [How to add shadows to boxes](/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#box_shadows) ## Необычное или передовые технологии @@ -49,19 +49,19 @@ Beyond the basics, CSS is allows very advanced design techniques. These articles ### Общие -- [How to calculate specificity of a CSS selector](/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity) -- [How to control inheritance in CSS](/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance) +- [How to calculate specificity of a CSS selector](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#specificity) +- [How to control inheritance in CSS](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#controlling_inheritance) ### Дополнительные эффекты -- [How to use filters in CSS](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters) -- [How to use blend modes in CSS](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes) +- [How to use filters in CSS](/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#filters) +- [How to use blend modes in CSS](/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#blend_modes) ### Разметка -- [Using CSS flexible boxes](/ru/docs/Web/Guide/CSS/Flexible_boxes) -- [Using CSS multi-column layouts](/ru/docs/Web/Guide/CSS/Using_multi-column_layouts) -- [Using CSS generated content](/ru/docs/Web/Guide/CSS/Getting_started/Content) +- [Using CSS flexible boxes](/ru/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Using CSS multi-column layouts](/ru/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) +- [Using CSS generated content](/ru/docs/Learn/CSS/Howto/Generated_content) ## Смотрите также diff --git a/files/ru/learn/css/index.md b/files/ru/learn/css/index.md index af22dc059cee29..58a1e0b81e3de1 100644 --- a/files/ru/learn/css/index.md +++ b/files/ru/learn/css/index.md @@ -13,7 +13,7 @@ slug: Learn/CSS > > Мы составили курс, который содержит всю необходимую информацию для достижения этой цели. > -> [**Начать изучение курса**](/ru/docs/Learn/Front-end_web_developer) +> [**Начать изучение курса**](/en-US/curriculum/) ## Необходимые условия diff --git a/files/ru/learn/css/styling_text/fundamentals/index.md b/files/ru/learn/css/styling_text/fundamentals/index.md index 7aabedfdc4822a..6ef5451e5ad230 100644 --- a/files/ru/learn/css/styling_text/fundamentals/index.md +++ b/files/ru/learn/css/styling_text/fundamentals/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Styling_text/Fundamentals В данной статье мы начнём путь к овладению стилизацией текста при помощи {{glossary("CSS")}}. Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы. -| Необходимые знания: | Базовые компьютерные знания, Основы HTML (раздел [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML)), основы CSS (раздел [Введение в CSS](/ru/docs/Learn/CSS/First_steps)). | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Изучить основные свойства и техники, необходимые для стилизации текста на веб-страницах. | +| Необходимые знания: | Базовые компьютерные знания, Основы HTML (раздел [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), основы CSS (раздел [Введение в CSS](/ru/docs/Learn/CSS/First_steps)). | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Задача: | Изучить основные свойства и техники, необходимые для стилизации текста на веб-страницах. | ## Что участвует в стилизации текста в CSS? @@ -44,13 +44,13 @@ slug: Learn/CSS/Styling_text/Fundamentals

``` -You can find the [finished example on GitHub](http://mdn.github.io/learning-area/css/styling-text/fundamentals/) (see also [the source code](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html).) +You can find the [finished example on GitHub](https://mdn.github.io/learning-area/css/styling-text/fundamentals/) (see also [the source code](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html).) ### Color The {{cssxref("color")}} property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the {{cssxref("text-decoration")}} property). -`color` can accept any [CSS color unit](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors), for example: +`color` can accept any [CSS color unit](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#colors), for example: ```css p { @@ -173,7 +173,7 @@ This gives us the following result: ### Font size -In our previous module's [CSS values and units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units) article, we reviewed length and size units. Font size (set with the {{cssxref("font-size")}} property) can take values measured in most of these units (and others, such as [percentages](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages)), however the most common units you'll use to size text are: +In our previous module's [CSS values and units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units) article, we reviewed length and size units. Font size (set with the {{cssxref("font-size")}} property) can take values measured in most of these units (and others, such as [percentages](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#percentages)), however the most common units you'll use to size text are: - `px` (pixels): The number of pixels high you want the text to be. This is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation. - `em`s: 1 `em` is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. Why bother? It is quite natural once you get used to it, and you can use `em` to size everything, not just text. You can have an entire website sized using `em`, which makes maintenance easy. @@ -316,10 +316,10 @@ text-shadow: 4px 4px 5px red; The four properties are as follows: -1. The horizontal offset of the shadow from the original text — this can take most available CSS [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size), but you'll most commonly use `px`; positive values move the shadow right, and negative values left. This value has to be included. +1. The horizontal offset of the shadow from the original text — this can take most available CSS [length and size units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size), but you'll most commonly use `px`; positive values move the shadow right, and negative values left. This value has to be included. 2. The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included. -3. The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size). -4. The base color of the shadow, which can take any [CSS color unit](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors). If not included, it defaults to `black`. +3. The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS [length and size units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size). +4. The base color of the shadow, which can take any [CSS color unit](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#colors). If not included, it defaults to `black`. #### Multiple shadows @@ -374,7 +374,7 @@ p { {{ EmbedLiveSample('Hidden_example1', '100%', 260) }} > [!NOTE] -> You can see more interesting examples of `text-shadow` usage in the Sitepoint article [Moonlighting with CSS text-shadow](http://www.sitepoint.com/moonlighting-css-text-shadow/). +> You can see more interesting examples of `text-shadow` usage in the Sitepoint article [Moonlighting with CSS text-shadow](https://www.sitepoint.com/moonlighting-css-text-shadow/). ## Text layout @@ -434,7 +434,7 @@ p { ### Line height -The {{cssxref("line-height")}} property sets the height of each line of text — this can take most [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size), but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the `line-height`. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you'd use this: +The {{cssxref("line-height")}} property sets the height of each line of text — this can take most [length and size units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size), but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the `line-height`. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you'd use this: ```css line-height: 1.6; @@ -486,7 +486,7 @@ p { ### Letter and word spacing -The {{cssxref("letter-spacing")}} and {{cssxref("word-spacing")}} properties allow you to set the spacing between letters and words in your text. You won't use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size). +The {{cssxref("letter-spacing")}} and {{cssxref("word-spacing")}} properties allow you to set the spacing between letters and words in your text. You won't use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most [length and size units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size). So as an example, we could apply some word- and letter-spacing to the first line of each {{htmlelement("p")}} element in our example: @@ -690,4 +690,4 @@ We hoped you enjoyed playing with text in this article! The next article will gi - [Styling lists](/ru/docs/Learn/CSS/Styling_text/Styling_lists) - [Styling links](/ru/docs/Learn/CSS/Styling_text/Styling_links) - [Web fonts](/ru/docs/Learn/CSS/Styling_text/Web_fonts) -- [Typesetting a community school homepage](/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage) +- [Typesetting a community school homepage](/ru/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/ru/learn/css/styling_text/styling_links/index.md b/files/ru/learn/css/styling_text/styling_links/index.md index b9c7f6b3e04405..3b8c8e7a4d6009 100644 --- a/files/ru/learn/css/styling_text/styling_links/index.md +++ b/files/ru/learn/css/styling_text/styling_links/index.md @@ -361,7 +361,7 @@ a[href*="http"] { Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод! > [!NOTE] -> Не переживайте если вы ещё не знакомы с [фоном](/ru/docs/Learn/CSS/Building_blocks) и [адаптивным (отзывчивым) веб-дизайном](/ru/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks); это объяснено в других местах +> Не переживайте если вы ещё не знакомы с [фоном](/ru/docs/Learn/CSS/Building_blocks) и [адаптивным (отзывчивым) веб-дизайном](/ru/docs/Learn/CSS/CSS_layout/Responsive_Design); это объяснено в других местах ## Стилизация ссылок в виде кнопок diff --git a/files/ru/learn/css/styling_text/styling_lists/index.md b/files/ru/learn/css/styling_text/styling_lists/index.md index 578a682135e264..f0dc6ade3d0e06 100644 --- a/files/ru/learn/css/styling_text/styling_lists/index.md +++ b/files/ru/learn/css/styling_text/styling_lists/index.md @@ -73,7 +73,7 @@ HTML для нашего примера списка представлен ни ``` -Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя [инструменты разработчика браузера](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools), то вы заметите несколько стилей установленных по умолчанию: +Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя [инструменты разработчика браузера](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools), то вы заметите несколько стилей установленных по умолчанию: - Элементы {{htmlelement("ul")}} и {{htmlelement("ol")}} имеют верхний и нижний {{cssxref("margin")}} по `16px` (`1em`) и {{cssxref("padding-left")}} `40px` (`2.5em`.) - Объекты списка (элементы {{htmlelement("li")}}) не имеют заданных значений по умолчанию для интервалов. diff --git a/files/ru/learn/css/styling_text/web_fonts/index.md b/files/ru/learn/css/styling_text/web_fonts/index.md index 250f459757765e..584dde9bb4bef2 100644 --- a/files/ru/learn/css/styling_text/web_fonts/index.md +++ b/files/ru/learn/css/styling_text/web_fonts/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Styling_text/Web_fonts В первой статье модуля, мы изучали основные функции CSS доступные для стилизации шрифтов и текста. В этой статье мы продвинемся дальше изучая веб-шрифты в деталях — они позволяют вам загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста. -| Предварительные требования: | Основная компьютерная грамотность, основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), основы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS)), [Основы CSS текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals). | -| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно. | +| Предварительные требования: | Основная компьютерная грамотность, основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), основы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps)), [Основы CSS текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals). | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Задача: | Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно. | ## Краткое повторение семейств шрифтов @@ -21,7 +21,7 @@ p { } ``` -Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространённых системах — так называемые [Безопасные веб-шрифты](/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts). Вы можете использовать стек шрифта для указания предпочтительных шрифтов, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д. +Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространённых системах — так называемые [Безопасные веб-шрифты](/ru/docs/Learn/CSS/Styling_text/Fundamentals#web_safe_fonts). Вы можете использовать стек шрифта для указания предпочтительных шрифтов, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д. ## Веб-шрифты @@ -58,7 +58,7 @@ html { Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. Сложно продемонстрировать это на встроенном живом примере, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса -Вы должны использовать файлы [web-font-start.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) и [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) как отправную точку добавляя в них ваш код (см. [живой пример](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html)). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле `web-font-start.css` вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера. +Вы должны использовать файлы [web-font-start.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) и [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) как отправную точку добавляя в них ваш код (см. [живой пример](https://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html)). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле `web-font-start.css` вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера. ### Поиск шрифтов @@ -111,7 +111,7 @@ font-family: "zantrokeregular", serif; ![](web-font-example.png) > [!NOTE] -> Если у вас возникли какие-либо проблемы с тем что что-то не работает, смело сравнивайте файлы вашей версии с нашей законченной — см. [web-font-finished.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) и [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) ([run the finished example live](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)). +> Если у вас возникли какие-либо проблемы с тем что что-то не работает, смело сравнивайте файлы вашей версии с нашей законченной — см. [web-font-finished.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) и [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) ([run the finished example live](https://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)). ## Использование онлайн-сервиса шрифтов @@ -127,7 +127,7 @@ font-family: "zantrokeregular", serif; 6. Далее вам надо скопировать CSS-объявления, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML. > [!NOTE] -> Вы можете найти законченные версии [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) и [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), если вам необходимо сверить вашу работу с нашей ([см. live](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)). +> Вы можете найти законченные версии [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) и [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), если вам необходимо сверить вашу работу с нашей ([см. live](https://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)). ## @font-face более детально diff --git a/files/ru/learn/forms/styling_web_forms/index.md b/files/ru/learn/forms/styling_web_forms/index.md index 143efe35a5564a..9fdbbbb1324606 100644 --- a/files/ru/learn/forms/styling_web_forms/index.md +++ b/files/ru/learn/forms/styling_web_forms/index.md @@ -48,7 +48,7 @@ The main issue with all these widgets, comes from the fact that they have a very ## Basic styling -To style [elements that are easy to style](/ru/docs/Learn/Forms/Styling_web_forms#the_good) with CSS, you shouldn't face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way. +To style [elements that are easy to style](#the_good) with CSS, you shouldn't face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way. ### Search fields diff --git a/files/ru/learn/forms/user_input_methods/index.md b/files/ru/learn/forms/user_input_methods/index.md index f31d67501e1a67..bbf880f21fec31 100644 --- a/files/ru/learn/forms/user_input_methods/index.md +++ b/files/ru/learn/forms/user_input_methods/index.md @@ -154,7 +154,7 @@ In open web apps any DOM element can be made directly editable using the [`conte ## Examples -- **[Tracking multiple touch points at a time](/en-US/DOM/Touch_events#example)** +- **[Tracking multiple touch points at a time](/ru/docs/Web/API/Touch_events#example)** - : This example tracks multiple touch points at a time, allowing the user to draw in a `{{htmlelement("canvas")}}` with more than one finger at a time. It will only work on a browser that supports touch events. - **[Simple pointer lock demo](/ru/docs/Web/API/Pointer_Lock_API#example)** - : We've written a simple pointer lock demo to show you how to use it to set up a simple control system. The demo uses JavaScript to draw a ball inside a `{{htmlelement("canvas")}}` element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse. diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.md b/files/ru/learn/getting_started_with_the_web/css_basics/index.md index 39262335abf4a0..57c0dddb15e845 100644 --- a/files/ru/learn/getting_started_with_the_web/css_basics/index.md +++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.md @@ -88,7 +88,7 @@ h1 { | Селектор атрибута | Элемент(ы) на странице с указанным атрибутом. | `img[src]` Выбирает `` но не `` | | Селектор псевдокласса | Указанные элемент(ы), но только в случае определённого состояния, например, при наведении курсора. | `a:hover` Выбирает ``, но только тогда, когда указатель мыши наведён на ссылку. | -Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем [Руководстве селекторов](/ru/docs/Web/Guide/CSS/Getting_started/Selectors). +Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем [Руководстве селекторов](/ru/docs/Learn/CSS/Building_blocks/Selectors). ## Шрифты и текст diff --git a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md index 9a0c95fae7ded9..39fe688f5a24a3 100644 --- a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md +++ b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md @@ -5,7 +5,7 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files {{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}} -Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге [загрузите их на сервер](/ru/Learn/Getting_started_with_the_web/Publishing_your_website). В статье _Работа с файлами_ обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта. +Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге [загрузите их на сервер](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website). В статье _Работа с файлами_ обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта. ## Где ваш веб-сайт должен располагаться на вашем компьютере? diff --git a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md index 121e3790cb8842..911606615a22bf 100644 --- a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md +++ b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md @@ -60,7 +60,7 @@ _Как работает Веб_ даст упрощённое представ ## Смотрите также -- [Как работает Интернет](/ru/Learn/How_the_Internet_works) +- [Как работает Интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) - [HTTP — Протокол уровня приложений](https://dev.opera.com/articles/http-basic-introduction/) - [HTTP: Давайте изучим его!](https://dev.opera.com/articles/http-lets-get-it-on/) - [HTTP: Коды ответов](https://dev.opera.com/articles/http-response-codes/) diff --git a/files/ru/learn/getting_started_with_the_web/html_basics/index.md b/files/ru/learn/getting_started_with_the_web/html_basics/index.md index 7cf183b2d7e96c..2b36ec1dfa906e 100644 --- a/files/ru/learn/getting_started_with_the_web/html_basics/index.md +++ b/files/ru/learn/getting_started_with_the_web/html_basics/index.md @@ -74,7 +74,7 @@ HTML не является языком программирования; это ### Анатомия HTML документа -Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш `index.html` (с которым мы впервые встретились в статье [Работа с файлами](/ru/Learn/Getting_started_with_the_web/Dealing_with_files)): +Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш `index.html` (с которым мы впервые встретились в статье [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)): ```html @@ -147,7 +147,7 @@ HTML не является языком программирования; это

Это одиночный абзац

``` -Добавьте свой образец текста (вы создавали его в статье [_Каким должен быть ваш веб-сайт?_](/ru/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like)) в один или несколько абзацев, расположенных прямо под элементом {{htmlelement("img")}}. +Добавьте свой образец текста (вы создавали его в статье [_Каким должен быть ваш веб-сайт?_](/ru/docs/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like)) в один или несколько абзацев, расположенных прямо под элементом {{htmlelement("img")}}. ### Списки @@ -216,12 +216,12 @@ HTML не является языком программирования; это ## Заключение -Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете [посмотреть её здесь](http://mdn.github.io/beginner-html-site/)): +Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете [посмотреть её здесь](https://mdn.github.io/beginner-html-site/)): ![A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text](finished-test-page-small.png) Если вы застряли, вы всегда можете сравнить свою работу с нашим [готовым примером кода](https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html) на GitHub. -Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу [Обучение HTML: руководства и уроки](/ru/Learn/HTML). +Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу [Обучение HTML: руководства и уроки](/ru/docs/Learn/HTML). {{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}} diff --git a/files/ru/learn/getting_started_with_the_web/index.md b/files/ru/learn/getting_started_with_the_web/index.md index effdfd2aa60594..5a5e80ad9a467d 100644 --- a/files/ru/learn/getting_started_with_the_web/index.md +++ b/files/ru/learn/getting_started_with_the_web/index.md @@ -13,9 +13,9 @@ _Начало работы с Вебом_ - это серия коротких Прорабатывая статьи, перечисленные ниже по порядку, вы пройдёте путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнём! -### [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения) +### [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software) -Когда речь заходит об инструментах для создания веб-сайта, тут есть из чего выбрать. Если вы только начинаете, вас может смутить количество текстовых редакторов, фреймворков и инструментов тестирования. В главе [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения) мы покажем вам шаг за шагом, как установить только то программное обеспечение, которое вам понадобится для веб-разработки на начальном этапе. +Когда речь заходит об инструментах для создания веб-сайта, тут есть из чего выбрать. Если вы только начинаете, вас может смутить количество текстовых редакторов, фреймворков и инструментов тестирования. В главе [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software) мы покажем вам шаг за шагом, как установить только то программное обеспечение, которое вам понадобится для веб-разработки на начальном этапе. ### [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like) diff --git a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md index bb29ac982f8579..00dcd70c51cca6 100644 --- a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md +++ b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md @@ -11,8 +11,8 @@ slug: Learn/Getting_started_with_the_web/Installing_basic_software - **Компьютер**. Может быть, это звучит очевидно для некоторых людей, но некоторые из вас читают эту статью с телефона или библиотечного компьютера. Для серьёзной веб-разработки, лучше приобрести настольный компьютер (Windows, Mac или Linux). - **Текстовый редактор**, чтобы писать код. Это может быть текстовый редактор (например, [Visual Studio Code](https://code.visualstudio.com/), [Notepad++](https://notepad-plus-plus.org/), [Sublime Text](https://www.sublimetext.com/), [Atom](https://atom.io/), [GNU Emacs](https://www.gnu.org/software/emacs/), или [VIM](https://www.vim.org/)) или гибридный редактор (например, [Dreamweaver](https://www.adobe.com/products/dreamweaver.html) or [WebStorm](https://www.jetbrains.com/webstorm/)). Офисные редакторы не подходят для этого, поскольку они зависят от скрытых элементов, которые мешают движкам рендеринга, используемым веб-браузерами. -- **Веб-браузеры**, для тестирования кода. В настоящее время наиболее часто используемые браузеры это [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), и [Internet Explorer](http://windows.microsoft.com/ru/internet-explorer/download-ie). Вы также должны тестировать ваш сайт на то, как он работает на мобильных устройствах и на любых старых браузерах, которые ваша целевая аудитория может все ещё широко использовать (например, IE 6-8). [Lynx](https://lynx.browser.org/), текстовый веб-браузер для терминала, отлично подходит для того, чтобы увидеть, как ваш сайт воспринимается слабовидящими пользователями. -- **Графический редактор**, такие как [The Gimp](http://www.gimp.org/), [Paint.NET](http://www.getpaint.net/), или [Photoshop](http://www.adobe.com/uk/products/photoshop.html), чтобы создавать изображения для ваших веб-страниц. +- **Веб-браузеры**, для тестирования кода. В настоящее время наиболее часто используемые браузеры это [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](https://www.opera.com/), [Safari](https://www.apple.com/safari/), и [Internet Explorer](https://windows.microsoft.com/ru/internet-explorer/download-ie). Вы также должны тестировать ваш сайт на то, как он работает на мобильных устройствах и на любых старых браузерах, которые ваша целевая аудитория может все ещё широко использовать (например, IE 6-8). [Lynx](https://lynx.browser.org/), текстовый веб-браузер для терминала, отлично подходит для того, чтобы увидеть, как ваш сайт воспринимается слабовидящими пользователями. +- **Графический редактор**, такие как [The Gimp](http://www.gimp.org/), [Paint.NET](http://www.getpaint.net/), или [Photoshop](https://www.adobe.com/uk/products/photoshop.html), чтобы создавать изображения для ваших веб-страниц. - **Система контроля версий**, чтобы управлять файлами на сервере, для совместной работы над проектом с командой, обмениваться кодом и избегать редакторских конфликтов. Сейчас [Git](http://git-scm.com/) является наиболее популярным инструментом контроля версий, и репозиторий кода [Github](https://github.com/), основанный на Git, также является очень популярным. - **FTP программа**, чтобы загружать веб-страницы на сервер для публичного просмотра. Существует обилие таких программ, доступных в том числе [Cyberduck](https://cyberduck.io/), [Fetch](http://fetchsoftworks.com/), и [FileZilla](https://filezilla-project.org/). - **Система автоматизации**, такая как [Grunt](http://gruntjs.com/) или [Gulp](http://gulpjs.com/), для автоматического выполнения повторяющихся задач, например, минимизации кода и запуска тестов. @@ -33,14 +33,14 @@ slug: Learn/Getting_started_with_the_web/Installing_basic_software На данный момент, мы установим только пару настольных веб-браузеров, чтобы проверять наш код. Выберите вашу операционную систему ниже и нажмите на соответствующие ссылки для загрузки установочных программ ваших любимых браузеров: -- Linux: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Brave](https://brave.com). -- Windows: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Internet Explorer](http://windows.microsoft.com/ru/internet-explorer/download-ie), [Brave](https://brave.com) (Если у вас есть Windows 8 или выше, вы можете установить IE 10 или более позднюю версию; иначе, вам следует установить альтернативный браузер) -- Mac: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Brave](https://brave.com) (Safari поставляется с iOS и OS X по умолчанию) +- Linux: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](https://www.opera.com/), [Brave](https://brave.com). +- Windows: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](https://www.opera.com/), [Internet Explorer](https://windows.microsoft.com/ru/internet-explorer/download-ie), [Brave](https://brave.com) (Если у вас есть Windows 8 или выше, вы можете установить IE 10 или более позднюю версию; иначе, вам следует установить альтернативный браузер) +- Mac: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](https://www.opera.com/), [Safari](https://www.apple.com/safari/), [Brave](https://brave.com) (Safari поставляется с iOS и OS X по умолчанию) Прежде, чем идти дальше, вам следует установить, по крайней мере, два из этих браузеров, чтобы использовать их для тестирования. ### Установка локального веб-сервера -Некоторые примеры для успешной работы необходимо будет запустить на веб-сервере. Вы можете узнать, как это сделать в статье [Как настроить локальный сервер для тестирования?](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server) +Некоторые примеры для успешной работы необходимо будет запустить на веб-сервере. Вы можете узнать, как это сделать в статье [Как настроить локальный сервер для тестирования?](/ru/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) {{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}} diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md index 2c2e0f472ec170..e35b08670442d8 100644 --- a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md +++ b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md @@ -61,7 +61,7 @@ JavaScript сам по себе довольно компактный, но оч Давайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало! -> **Предупреждение:** **Важно**: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью [Откройте для себя браузерные инструменты разработчика](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools). +> **Предупреждение:** **Важно**: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью [Откройте для себя браузерные инструменты разработчика](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools). ### Переменные @@ -207,7 +207,7 @@ multiply(0.5, 3); ### События -Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является [событие клика](/ru/docs/Web/Events/click), которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице: +Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является [событие клика](/ru/docs/Web/API/Element/click_event), которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице: ```js document.querySelector("html").onclick = function () { @@ -215,7 +215,7 @@ document.querySelector("html").onclick = function () { }; ``` -Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем {{htmlelement("html")}} элемент и устанавливаем ему обработчик свойства [`onclick`](/ru/docs/Web/API/GlobalEventHandlers.onclick) анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика. +Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем {{htmlelement("html")}} элемент и устанавливаем ему обработчик свойства [`onclick`](/ru/docs/Web/API/Element/click_event) анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика. Обратите внимание, что @@ -295,7 +295,7 @@ myHTML.onclick = function () {}; } ``` - Эта функция содержит функцию [`prompt()`](/ru/docs/Web/API/Window.prompt), которая вызывает диалоговое окно, немного похожее на `alert()` кроме того, что `prompt()` просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает **OK**. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием `localStorage`, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию `setItem()` из localStorage для создания и хранения данных в свойстве под названием `'name'`, и устанавливаем это значение в переменную `myName`, которая содержит имя введённое пользователем. В конце мы устанавливаем `textContent` заголовку в виде строки и имени пользователя. + Эта функция содержит функцию [`prompt()`](/ru/docs/Web/API/Window/prompt), которая вызывает диалоговое окно, немного похожее на `alert()` кроме того, что `prompt()` просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает **OK**. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием `localStorage`, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию `setItem()` из localStorage для создания и хранения данных в свойстве под названием `'name'`, и устанавливаем это значение в переменную `myName`, которая содержит имя введённое пользователем. В конце мы устанавливаем `textContent` заголовку в виде строки и имени пользователя. 4. Затем добавьте блок `if ... else` - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке: diff --git a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md index bbad0a37a8e3e8..442b17b9799624 100644 --- a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md +++ b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md @@ -116,7 +116,7 @@ The actual syntax for HTTP messages (called requests and responses) is not that Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include: -- The [developer tools](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) inside modern browsers that can be used to debug your code. +- The [developer tools](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) inside modern browsers that can be used to debug your code. - [Testing tools](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing) that can be used to run tests to show whether your code is behaving as you intended it to. - Libraries and frameworks built on top of JavaScript that allow you to build certain types of web site much more quickly and effectively. - So-called "Linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly. @@ -155,4 +155,4 @@ You'll come across the below concepts at some point in your studies. ## Смотрите также - [History of the World Wide Web](https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web) -- [How does the internet work?](/ru/docs/Learn/Common_questions/How_does_the_Internet_work) +- [How does the internet work?](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) diff --git a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md index 9ba55b02be0cc9..b1232fa5d19a58 100644 --- a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md +++ b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md @@ -41,7 +41,7 @@ _Каким должен быть ваш веб-сайт?_ обсудите пл ### Цветовая схема -Чтобы выбрать цвет, перейдите в [инструмент выбора цвета](/ru/docs/Web/CSS/CSS_Colors/Color_picker_tool) и выберите цвет, который вам нравится. Когда вы щёлкните по цвету, вы увидите странный код из шести цифр, например, `#660066`. Это называется _шестнадцатеричный код (hex(adecimal) code)_ и он представляет ваш цвет. Скопируйте это код куда-нибудь прямо сейчас. +Чтобы выбрать цвет, перейдите в [инструмент выбора цвета](/ru/docs/Web/CSS/CSS_colors/Color_picker_tool) и выберите цвет, который вам нравится. Когда вы щёлкните по цвету, вы увидите странный код из шести цифр, например, `#660066`. Это называется _шестнадцатеричный код (hex(adecimal) code)_ и он представляет ваш цвет. Скопируйте это код куда-нибудь прямо сейчас. ![](screenshot_from_2014-11-03_17-40-49.png) @@ -66,7 +66,7 @@ _Каким должен быть ваш веб-сайт?_ обсудите пл Чтобы выбрать шрифт: -1. Перейдите на [Google Fonts](http://www.google.com/fonts) и прокрутите список вниз, пока не найдёте шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов. +1. Перейдите на [Google Fonts](https://www.google.com/fonts) и прокрутите список вниз, пока не найдёте шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов. 2. Щёлкните по кнопке "плюс" рядом со шрифтом, который вы хотите выбрать. 3. Щёлкните по кнопке "\* Family Selected" на панели в нижней части страницы. ("\*" зависит от того, сколько шрифтов вы выбрали) 4. В всплывающем окне вы можете увидеть и скопировать строки кода, которые предоставляет Google, чтобы сохранить их позже в вашем текстовом редакторе. diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md index 1016f27e2baf8c..ab763c0f140f64 100644 --- a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md +++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md @@ -67,7 +67,7 @@ CDN - это географически распределённая сеть с ### Уменьшайте количество встроенных скриптов -Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования `document.write()` для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы [AJAX](/ru/docs/AJAX) для управления содержимым страницы, а не устаревшие подходы, которые основаны на `document.write()`. +Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования `document.write()` для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы [AJAX](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data) для управления содержимым страницы, а не устаревшие подходы, которые основаны на `document.write()`. ### Используйте современный CSS и корректную разметку @@ -103,7 +103,7 @@ CDN - это географически распределённая сеть с ...
``` -Смотрите также: [CSS3 Multi-column Layout Spec](http://www.w3.org/TR/css3-multicol/) и [CSS3 Flexible Box Layout](http://www.w3.org/TR/css3-flexbox/) +Смотрите также: [CSS3 Multi-column Layout Spec](https://www.w3.org/TR/css3-multicol/) и [CSS3 Flexible Box Layout](https://www.w3.org/TR/css3-flexbox/) ### Сокращайте и сжимайте активы SVG @@ -171,7 +171,7 @@ SVG, создаваемый большинством графических пр ## Ссылки по теме - Книга: ["Speed Up Your Site" by Andy King](http://www.websiteoptimization.com/) -- Отличная и очень содержательная статья [Best Practices for Speeding Up Your Web Site](http://developer.yahoo.com/performance/rules.html) (Yahoo!) +- Отличная и очень содержательная статья [Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html) (Yahoo!) - Инструменты для анализа и оптимизации производительности: [Google PageSpeed Tools](https://developers.google.com/speed/pagespeed/) ## Original Document Information diff --git a/files/ru/learn/html/howto/index.md b/files/ru/learn/html/howto/index.md index 312d23e86ff2eb..169594aab3473e 100644 --- a/files/ru/learn/html/howto/index.md +++ b/files/ru/learn/html/howto/index.md @@ -11,46 +11,46 @@ slug: Learn/HTML/Howto Основное применение HTML - это структура документа. Если вы новичок в HTML, вы должны начать с этого. -- [Как создать простой HTML документ](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document) -- [Как разделять веб-страницы на логические блоки](/ru/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections) -- [Как задавать структуру заголовков и параграфов](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs) +- [Как создать простой HTML документ](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document) +- [Как разделять веб-страницы на логические блоки](/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Как задавать структуру заголовков и параграфов](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#the_basics_headings_and_paragraphs) ### Основы организации гипертекста HTML специализируется на предоставлении семантической информации для документа, поэтому HTML отвечает на многие вопросы, которые могут у вас возникнуть о том, как лучше донести ваше сообщение в документе. -- [Как создать список элементов с помощью HTML](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists) -- [Как подчеркнуть или выделить содержание](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance) -- [Как подчеркнуть важность некоторого текста](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance) -- [Как отображать компьютерный код в HTML](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code) -- [Как комментировать (подписывать) изображения и видео](/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions) -- [Как помечать аббревиатуры и делать их понятными](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations) -- [Как добавлять цитаты на веб-страницы](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations) +- [Как создать список элементов с помощью HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists) +- [Как подчеркнуть или выделить содержание](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#emphasis_and_importance) +- [Как подчеркнуть важность некоторого текста](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#emphasis_and_importance) +- [Как отображать компьютерный код в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#representing_computer_code) +- [Как комментировать (подписывать) изображения и видео](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#annotating_images_with_figures_and_figure_captions) +- [Как помечать аббревиатуры и делать их понятными](/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations) +- [Как добавлять цитаты на веб-страницы](/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#quotations) - [Как определять термины в HTML](/ru/docs/Learn/HTML/Howto/Define_terms_with_HTML) ### Гиперссылки Одной из главных причин по которым навигация в HTML страницах столь проста являются гиперссылки, которые могут которые возможно использоваться различными способами: -- [Как создавать гиперссылки](/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) -- [Как создать "оглавление" HTML](/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu) +- [Как создавать гиперссылки](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Как создать "оглавление" HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#active_learning_creating_a_navigation_menu) ### Изображения и мультимедиа -- [Как добавить изображения на веб-страницу](/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage) -- [Как добавить видео на веб-страницу](/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) -- [Как добавить аудио на веб-страницу](/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) +- [Как добавить изображения на веб-страницу](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#how_do_we_put_an_image_on_a_webpage) +- [Как добавить видео на веб-страницу](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) +- [Как добавить аудио на веб-страницу](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) ### Сценарии и стили HTML определяет лишь структуру документа. Для улучшения внешнего вида документа обычно используется CSS. Чтобы добавить странице интерактивности вы также можете написать сценарий на одном из скриптовых языков (например JavaScript). -- [Как использовать CSS внутри веб-страницы](/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML) +- [Как использовать CSS внутри веб-страницы](/ru/docs/Learn/CSS/First_steps/How_CSS_works#how_to_apply_your_css_to_your_html) - [Как использовать JavaScript внутри веб-страницы](/ru/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage) ### Встраиваемый контент -- [Как встроить одну веб-страницу внутрь другой](/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Как встроить одну веб-страницу внутрь другой](/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) - [Как добавлять Flash содержимое на веб-страницы](/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements) ## Необычные или продвинутые проблемы @@ -61,8 +61,8 @@ HTML определяет лишь структуру документа. Для Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвящённое руководство. Вот где вы должны начать: -- [Как создать простую Веб-форму](/ru/docs/Web/Guide/HTML/Forms/My_first_HTML_form) -- [Как организовать Веб форму](/ru/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form) +- [Как создать простую Веб-форму](/ru/docs/Learn/Forms/Your_first_form) +- [Как организовать Веб форму](/ru/docs/Learn/Forms/How_to_structure_a_web_form) ### Таблицы diff --git a/files/ru/learn/html/howto/use_data_attributes/index.md b/files/ru/learn/html/howto/use_data_attributes/index.md index cdaf0e9786919a..acdc719b629d74 100644 --- a/files/ru/learn/html/howto/use_data_attributes/index.md +++ b/files/ru/learn/html/howto/use_data_attributes/index.md @@ -5,7 +5,7 @@ slug: Learn/HTML/Howto/Use_data_attributes {{QuickLinksWithSubpages("/ru/docs/Learn/HTML/Howto")}} -[HTML5](/ru/docs/Web/Guide/HTML/HTML5) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. [`data-*` атрибуты](/ru/docs/Web/HTML/Global_attributes#data-*) позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}. +[HTML5](/ru/docs/Glossary/HTML5) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. [`data-*` атрибуты](/ru/docs/Web/HTML/Global_attributes#data-*) позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}. ## Синтаксис HTML diff --git a/files/ru/learn/html/index.md b/files/ru/learn/html/index.md index 94d318a747f87d..fd142726e0e398 100644 --- a/files/ru/learn/html/index.md +++ b/files/ru/learn/html/index.md @@ -9,20 +9,20 @@ slug: Learn/HTML ## Путь обучения (образовательная траектория) -В идеале вы должны начать своё учебное путешествие с изучения HTML. Начните с прочтения раздела ["Введение в HTML"](/ru/docs/Web/Guide/HTML/Introduction). Затем вы можете перейти к изучению более продвинутых тем, таких как: +В идеале вы должны начать своё учебное путешествие с изучения HTML. Начните с прочтения раздела ["Введение в HTML"](/ru/docs/Learn/HTML/Introduction_to_HTML). Затем вы можете перейти к изучению более продвинутых тем, таких как: - ["CSS (Каскадные таблицы стилей)"](/ru/docs/Learn/CSS), и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов). - ["JavaScript"](/ru/docs/Learn/JavaScript), и как его использовать для придания динамической функциональности веб-страницам (например, определение вашего местоположения и отображение его на карте, создание элементов, которые будут появляться/исчезать при нажатии на кнопку, сохранение данных пользователей локально на их компьютерах и многое другое). Прежде чем приступить к этой теме, вы должны иметь хотя бы базовое представление об использовании компьютеров вообще и уметь "пассивно" использовать Интернет (т.е. уметь просматривать веб-страницы, быть потребителем контента). У вас должна быть базовая рабочая среда, описанная в [разделе "Установка базового программного обеспечения"](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), а также вы должны понимать, как создавать файлы и управлять ими, что подробно описано в [разделе "Работа с файлами"](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — обе статьи являются частью нашего модуля для новичков - ["Начало работы с вебом"](/ru/docs/Learn/Getting_started_with_the_web). -Перед тем, как начать эту тему, рекомендуется пройтись по разделу ["Начало работы с вебом"](/ru/docs/Learn/Getting_started_with_the_web), однако это необязательно; многое из того, что описано в статье ["Основы HTML"](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics), также рассматривается и во ["Введении в HTML"](/ru/docs/Learn/HTML/Введение_в_HTML), причём даже более подробно. +Перед тем, как начать эту тему, рекомендуется пройтись по разделу ["Начало работы с вебом"](/ru/docs/Learn/Getting_started_with_the_web), однако это необязательно; многое из того, что описано в статье ["Основы HTML"](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics), также рассматривается и во ["Введении в HTML"](/ru/docs/Learn/HTML/Introduction_to_HTML), причём даже более подробно. ## Модули Данный раздел содержит модули, которые расположены в порядке, наиболее оптимальном для их изучения. Вам определённо следует начать с первого модуля. -- [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML) +- [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML) - : Этот модуль даёт основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы. - [Мультимедиа и встраивание](/ru/docs/Learn/HTML/Multimedia_and_embedding) - : В этом модуле рассматривается использование HTML для подключения мультимедиа-контента к вашим веб-страницам, включая различные способы встраивания изображений, видео и аудио и даже других веб-страниц. @@ -30,7 +30,7 @@ slug: Learn/HTML - : Представление табличных данных на веб-странице в понятном, {{glossary("Accessibility", "доступном")}} образе, может стать проблемой. Этот модуль описывает основы табличной разметки, а также более сложные функции, такие как реализация подписок и резюме. -- [HTML Формы](/ru/docs/Learn/HTML/Forms) +- [HTML Формы](/ru/docs/Learn/Forms) - : Формы - очень важная часть интернета, они обеспечивают большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнёте с создания частей форм на стороне клиента. ## Решение общих HTML задач diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.md b/files/ru/learn/html/introduction_to_html/debugging_html/index.md index 13760838482d12..d96fa83555005a 100644 --- a/files/ru/learn/html/introduction_to_html/debugging_html/index.md +++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.md @@ -69,7 +69,7 @@ HTML не страдает от синтаксических ошибок, по - Следующая часть нарушает правила вложенности: `strong strong emphasised? what is this?`. В этом случае код тоже сложно проинтерпретировать по причине, описанной выше. - В атрибуте [`href`](/ru/docs/Web/HTML/Element/a#href) отсутствует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе. -5. Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на [Обзор инструментов разработки в браузерах](/ru/docs/Learn/Discover_browser_developer_tools). +5. Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на [Обзор инструментов разработки в браузерах](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools). 6. В DOM инспекторе вы можете увидеть как сгенерировалась новая разметка: ![The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.](html-inspector.png) 7. Используя DOM инспектор, давайте рассмотрим детали нашего кода, чтобы увидеть, как браузер пытается исправить наши ошибки в HTML (мы обозреваем в Firefox; другой современный браузер должен выдать те же результаты): diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md index c49c65f05cecd9..8106d17fa29d28 100644 --- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -39,7 +39,7 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure > [!NOTE] > Люди с дальтонизмом составляют около [8% мирового населения](http://www.color-blindness.com/2006/04/28/colorblind-population/). Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было [285 миллионов таких людей](https://en.wikipedia.org/wiki/Visual_impairment), а общая численность населения составляла [около 7 миллиардов](https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg)). -В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их _функциональности_ — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как "найти основную навигацию" или "найти основное содержимое". Как мы упоминали ранее в ходе курса, существует ряд [последствий неиспользования правильной структуры элементов и семантики для правильной работы.](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure) +В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их _функциональности_ — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как "найти основную навигацию" или "найти основное содержимое". Как мы упоминали ранее в ходе курса, существует ряд [последствий неиспользования правильной структуры элементов и семантики для правильной работы.](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure) Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например: @@ -171,9 +171,9 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure - {{HTMLElement('main')}} предназначен для содержимого, _уникального для этой страницы_. Используйте `
` только _один_ раз на странице и размещайте прямо внутри {{HTMLElement('body')}}. В идеале он не должен быть вложен в другие элементы. - {{HTMLElement('article')}} окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге). -- {{HTMLElement('section')}} подобен `
`, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с [заголовка](/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy). Также обратите внимание, что в зависимости от контекста вы можете разбить `
` на несколько `
` или, наоборот, `
` на несколько `
`. +- {{HTMLElement('section')}} подобен `
`, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с [заголовка](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Также обратите внимание, что в зависимости от контекста вы можете разбить `
` на несколько `
` или, наоборот, `
` на несколько `
`. - {{HTMLElement('aside')}} содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.). -- {{HTMLElement('header')}} представляет собой группу вводного содержимого. Если он дочерний элемент {{HTMLElement('body')}}, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент {{HTMLElement('article')}} или {{HTMLElement('section')}}, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с [titles и headings](/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title)). +- {{HTMLElement('header')}} представляет собой группу вводного содержимого. Если он дочерний элемент {{HTMLElement('body')}}, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент {{HTMLElement('article')}} или {{HTMLElement('section')}}, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с [titles и headings](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#adding_a_title)). - {{HTMLElement('nav')}} содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию. - {{HTMLElement('footer')}} представляет собой группу конечного контента для страницы. @@ -234,7 +234,7 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure

``` -Без элемента `
` абзац разместится в одну длинную линию (как было сказано ранее, [HTML игнорирует переносы строк](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML)), а с ним в коде — разметка будет выглядеть следующим образом: +Без элемента `
` абзац разместится в одну длинную линию (как было сказано ранее, [HTML игнорирует переносы строк](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html)), а с ним в коде — разметка будет выглядеть следующим образом: Жила-была девчушка Нелл, Любившая писать HTML: @@ -282,6 +282,6 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ## Дополнительные материалы -- [Using HTML sections and outlines](/ru/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines): Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5. +- [Using HTML sections and outlines](/ru/docs/Web/HTML/Element/Heading_Elements): Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5. {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}} diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.md b/files/ru/learn/html/introduction_to_html/getting_started/index.md index 654872ad071efe..af482584de908f 100644 --- a/files/ru/learn/html/introduction_to_html/getting_started/index.md +++ b/files/ru/learn/html/introduction_to_html/getting_started/index.md @@ -455,7 +455,7 @@ textarea.onkeyup = function () { > ``` -Если вы хотите вставить кавычки того же типа, то вы должны использовать [объекты HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#entity_references_including_special_characters_in_html). Например, это работать не будет: +Если вы хотите вставить кавычки того же типа, то вы должны использовать [объекты HTML](#entity_references_including_special_characters_in_html). Например, это работать не будет: ```html example-bad A link to my example. @@ -522,8 +522,8 @@ textarea.onkeyup = function () { - Добавьте заголовок страницы сразу за открывающим тегом {{htmlelement("body")}}. Текст должен находиться между открывающим тегом `

` и закрывающим `

` . - Напишите в параграфе о чём-нибудь, что кажется вам интересным. - Выделите важные слова, обернув их в открывающий тег `` и закрывающий `` -- Добавьте ссылку на свой абзац так, как [объяснено ранее в статье](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#active_learning_adding_attributes_to_an_element). -- Добавьте изображение в свой документ под абзацем, как [объяснено ранее в статье](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#empty_elements). Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец! +- Добавьте ссылку на свой абзац так, как [объяснено ранее в статье](#active_learning_adding_attributes_to_an_element). +- Добавьте изображение в свой документ под абзацем, как [объяснено ранее в статье](#empty_elements). Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец! Если вы запутались, всегда можно запустить пример сначала кнопкой _Сбросить_. Сдаётесь — посмотрите ответ, нажав на _Показать решение_. @@ -726,6 +726,6 @@ textarea.onkeyup = function () { ## Смотрите также -- [Применение цвета к элементам HTML с помощью CSS](/ru/docs/Web/HTML/Applying_color) +- [Применение цвета к элементам HTML с помощью CSS](/ru/docs/Web/CSS/CSS_colors/Applying_color) {{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}} diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md index 6de7803ce03caa..df869d6e74a619 100644 --- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md +++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md @@ -44,7 +44,7 @@ slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ``` -Однако на больших страницах блок \ может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое \ с помощью [инструментов разработчика](/ru/docs/Learn/Discover_browser_developer_tools). Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём. +Однако на больших страницах блок \ может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое \ с помощью [инструментов разработчика](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools). Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём. ## Название страницы (title) @@ -145,7 +145,7 @@ slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ![Результат поиска в Google](updated_search_result__ru.jpg) > [!NOTE] -> Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через [Google Search Console](http://www.google.com/webmasters/tools/), чтобы пользователи могли сразу перейти к ним со страницы поиска. +> Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через [Google Search Console](https://www.google.com/webmasters/tools/), чтобы пользователи могли сразу перейти к ним со страницы поиска. > [!NOTE] > Многие типы `` больше не используются. Так, поисковые системы больше не используют данные из элемента ``, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске. diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md index 33a59b6167327b..f5aabf816ceb36 100644 --- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md +++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -21,7 +21,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web - Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif) - Векторное изображение определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер может вычислить как должно выглядеть изображение, когда выводится на экран.{{glossary("SVG")}} формат позволяет нам создавать векторную графику для использования в веб-документах. -Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как [vector-versus-raster.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое - SVG. +Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как [vector-versus-raster.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое - SVG. Различия становятся заметны, когда вы изменяете масштаб страницы — PNG изображение становится неровным (становятся видны пиксели), потому что оно содержит информацию о положении и цвете каждого пикселя. При увеличении каждый пиксель также увеличивается, охватывая несколько пикселей дисплея, поэтому становятся заметны "кирпичики". Векторное изображение продолжает выглядеть ровным и красивым, потому что фигуры, масштабируются совместно с ним. @@ -30,7 +30,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web ![Two star images zoomed in, one crisp and the other blurry](raster-vector-zoomed.png) > [!NOTE] -> Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: [vector-versus-raster.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) ! +> Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: [vector-versus-raster.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) ! Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе. @@ -122,7 +122,7 @@ background-size: contain; Подобно методу ``, описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS. -Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то [данная статья укажет вам верное направление](/ru/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers). +Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то [данная статья укажет вам верное направление](/ru/docs/Web/SVG/Tutorial/Getting_Started#a_word_on_webservers). ### Как включить SVG в ваш HTML код @@ -137,7 +137,7 @@ background-size: contain; #### Плюсы - Вставка вашего SVG путём **SVG inline** позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки. -- Вы можете присваивать `class`-ы и `id` элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой [атрибут представления SVG](/ru/docs/Web/SVG/Attribute#Presentation_attributes) как свойство CSS. +- Вы можете присваивать `class`-ы и `id` элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой [атрибут представления SVG](/ru/docs/Web/SVG/Attribute#presentation_attributes) как свойство CSS. - **SVG inline** единственный метод, который позволяет вам использовать CSS-взаимодействия (как `:focus`) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей). - Вы можете разметить SVG как гиперссылку, обернув в элемент {{htmlelement("a")}}. @@ -319,7 +319,7 @@ textarea.onkeyup = function () { - [SVG tutorial](/ru/docs/Web/SVG/Tutorial/Getting_Started) on MDN - [Quick tips for responsive SVGs](http://thenewcode.com/744/Making-SVG-Responsive) - [Sara Soueidan's tutorial on responsive SVG images](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/) -- [Accessibility benefits of SVG](http://www.w3.org/TR/SVG-access/) +- [Accessibility benefits of SVG](https://www.w3.org/TR/SVG-access/) - [How to scale SVGs](https://css-tricks.com/scale-svg/) (it's not as simple as raster graphics!) {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md index 9da23c76475eeb..8f0b5bdefc636e 100644 --- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md @@ -5,7 +5,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_ {{learnsidebar}} -Цель этого теста навыков - оценить, поняли ли вы нашу статью [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML). +Цель этого теста навыков - оценить, поняли ли вы нашу статью [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML). > [!NOTE] > Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/) для работы с задачами. diff --git a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md index 270e6ce58ce463..0cfd88a722005a 100644 --- a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md +++ b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md @@ -58,7 +58,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page Убедитесь, что вы использовали изображения, соответствующие ссылкам. > [!NOTE] -> Для проверки правильности работы `srcset`/`sizes` , вам нужно загрузить ваш сайт на сервер (используйте [Github pages](/ru/docs/Learn/Common_questions/Using_Github_pages) - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в [Responsive images: useful developer tools](/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools). +> Для проверки правильности работы `srcset`/`sizes` , вам нужно загрузить ваш сайт на сервер (используйте [Github pages](/ru/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages) - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в [Responsive images: useful developer tools](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#useful_developer_tools). ### Искусственно изменённая красная панда diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index 64ac6310124f37..2a2d0aaf0f5d05 100644 --- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -219,7 +219,7 @@ textarea.onkeyup = function () { Помимо безопасности, вы также должны знать об интеллектуальной собственности. Большинство контента находится под защитой авторских прав, даже тот, от которого вы не могли ожидать (например, большинство картинок на [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page)). Никогда не выводите контент на свою страницу, если он вам не принадлежит или если нет однозначного письменного разрешения от правообладателя. Наказания за нарушения авторских прав строги. И, повторимся, вы никогда не можете быть слишком осторожными. -Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на [licensed under CC-BY-SA](/ru/docs/MDN/About#Copyrights_and_licenses). Это означает, что вы [должны относиться к нам с уважением](https://wiki.creativecommons.org/wiki/Best_practices_for_attribution), когда цитируете наш контент, даже если внесли в него существенные изменения. +Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на [licensed under CC-BY-SA](/ru/docs/MDN/Writing_guidelines#copyrights_and_licenses). Это означает, что вы [должны относиться к нам с уважением](https://wiki.creativecommons.org/wiki/Best_practices_for_attribution), когда цитируете наш контент, даже если внесли в него существенные изменения. #### Используйте HTTPS @@ -230,7 +230,7 @@ textarea.onkeyup = function () { Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку (хотя есть [Let's Encrypt](https://letsencrypt.org/), что облегчает задачу). Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS _во что бы то ни стало_ вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через \ diff --git a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md index c0025fb325a22a..c9046c4dc839b9 100644 --- a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md +++ b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md @@ -104,4 +104,4 @@ L'événement **audioprocess** est déclenché lorsqu'un tampon d'entrée d'une ## Voir aussi -- [Web Audio API](/fr/docs/Web_Audio_API) +- [Web Audio API](/fr/docs/Web/API/Web_Audio_API) diff --git a/files/fr/web/api/selection/tostring/index.md b/files/fr/web/api/selection/tostring/index.md index 056f4069947d57..52b8bc8d28ac30 100644 --- a/files/fr/web/api/selection/tostring/index.md +++ b/files/fr/web/api/selection/tostring/index.md @@ -25,7 +25,7 @@ Aucun. Cette méthode renvoie le texte sélectionné. -En [JavaScript](/fr/JavaScript), cette méthode est appelée automatiquement pour des objets `selection` aux fonctions nécessitant un paramètre `string` : +En [JavaScript](/fr/docs/Web/JavaScript), cette méthode est appelée automatiquement pour des objets `selection` aux fonctions nécessitant un paramètre `string` : ```js alert(window.getSelection()); // Appel automatique diff --git a/files/fr/web/api/selection_api/index.md b/files/fr/web/api/selection_api/index.md index 4cec7a127ade1e..a4b431d7cc5727 100644 --- a/files/fr/web/api/selection_api/index.md +++ b/files/fr/web/api/selection_api/index.md @@ -18,7 +18,7 @@ Les méthodes [`Window.getSelection()`](/fr/docs/Web/API/Window/getSelection) et L'API Selection fournit deux évènements, qui se déclenchent sur [`Document`](/fr/docs/Web/API/Document) : -- l'évènement [`selectstart`](/fr/docs/Web/API/Document/selectstart_event) qui est déclenché lorsque l'utilisatrice ou l'utilisateur démarre une nouvelle sélection +- l'évènement [`selectstart`](/fr/docs/Web/API/Node/selectstart_event) qui est déclenché lorsque l'utilisatrice ou l'utilisateur démarre une nouvelle sélection - l'évènement [`selectionchange`](/fr/docs/Web/API/Document/selectionchange_event) qui est déclenché lorsque la sélection courante change. ## Interfaces @@ -31,7 +31,7 @@ L'API Selection fournit deux évènements, qui se déclenchent sur [`Document`]( - : Une méthode renvoyant un objet `Selection` qui représente la sélection courante ou la position courante du curseur. - [`selectionchange`](/fr/docs/Web/API/Document/selectionchange_event) - : Un évènement déclenché lorsque la sélection courante change. -- [`selectstart`](/fr/docs/Web/API/Document/selectstart_event) +- [`selectstart`](/fr/docs/Web/API/Node/selectstart_event) - : Un évènement déclenché lorsqu'une nouvelle sélection est initiée. ## Spécifications diff --git a/files/fr/web/api/server-sent_events/index.md b/files/fr/web/api/server-sent_events/index.md index 7ba986f76dabcc..c3e2293220d235 100644 --- a/files/fr/web/api/server-sent_events/index.md +++ b/files/fr/web/api/server-sent_events/index.md @@ -9,9 +9,9 @@ Habituellement, une page web doit envoyer une requête au serveur pour obtenir d ## Documentation -- [Utilisation des événements envoyés par le serveur](/fr/docs/Server-sent_events/Using_server-sent_events) +- [Utilisation des événements envoyés par le serveur](/fr/docs/Web/API/Server-sent_events/Using_server-sent_events) - : Un tutoriel sur l'écriture d'une partie côté serveur et côté client d'une application d'événements envoyée par le serveur. -- [EventSource référence](/fr/docs/Server-sent_events/EventSource) +- [EventSource référence](/fr/docs/Web/API/EventSource) - : Une référence à l'API EventSource côté client. ## Outils @@ -22,14 +22,14 @@ Habituellement, une page web doit envoyer une requête au serveur pour obtenir d ## Rubriques connexes -- [AJAX](/fr/docs/AJAX), [JavaScript](/fr/docs/JavaScript), [WebSockets](/fr/docs/WebSockets) +- [AJAX](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data), [JavaScript](/fr/docs/Web/JavaScript), [WebSockets](/fr/docs/Web/API/WebSockets_API) ## Voir aussi -- Une [application de type Twitter](http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/) alimentée par des événements envoyés par le serveur et [son code sur Github](https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline). -- [Événements HTML5 et envoyés par le serveur](http://dsheiko.com/weblog/html5-and-server-sent-events) -- [Événements envoyés par le serveur à l'aide d'Asp.Net](http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html) +- Une [application de type Twitter](https://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/) alimentée par des événements envoyés par le serveur et [son code sur Github](https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline). +- [Événements HTML5 et envoyés par le serveur](https://dsheiko.com/weblog/html5-and-server-sent-events) +- [Événements envoyés par le serveur à l'aide d'Asp.Net](https://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html) ## Spécification -- [Événements envoyés par le serveur](http://dev.w3.org/html5/eventsource/) +- [Événements envoyés par le serveur](https://dev.w3.org/html5/eventsource/) diff --git a/files/fr/web/api/serviceworker/index.md b/files/fr/web/api/serviceworker/index.md index bf32a9ab9a0e82..99cd609a61c035 100644 --- a/files/fr/web/api/serviceworker/index.md +++ b/files/fr/web/api/serviceworker/index.md @@ -5,7 +5,7 @@ slug: Web/API/ServiceWorker {{APIRef("Service Workers API")}} -L'interface **`ServiceWorker`** de l'[API ServiceWorker](/fr/docs/Web/API/ServiceWorker_API) met à disposition une référence vers un service worker. Plusieurs {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un _worker_, etc.) peuvent être associés au même service worker, chacun à travers un unique objet `ServiceWorker`. +L'interface **`ServiceWorker`** de l'[API ServiceWorker](/fr/docs/Web/API/Service_Worker_API) met à disposition une référence vers un service worker. Plusieurs {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un _worker_, etc.) peuvent être associés au même service worker, chacun à travers un unique objet `ServiceWorker`. Un objet `ServiceWorker` est disponible dans les propriétés {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée). @@ -78,8 +78,8 @@ if ('serviceWorker' in navigator) { ## Voir aussi - [ServiceWorker Cookbook](https://github.com/mdn/serviceworker-cookbook) -- [Using Service Workers](/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Using Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - [Service workers basic code example](https://github.com/mdn/sw-test) - [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} -- [Using web workers](/fr/docs/Web/Guide/Performance/Using_web_workers) +- [Using web workers](/fr/docs/Web/API/Web_Workers_API/Using_web_workers) diff --git a/files/fr/web/api/serviceworkercontainer/index.md b/files/fr/web/api/serviceworkercontainer/index.md index a6ec01424e6d03..dcf8dd294f4d57 100644 --- a/files/fr/web/api/serviceworkercontainer/index.md +++ b/files/fr/web/api/serviceworkercontainer/index.md @@ -5,7 +5,7 @@ slug: Web/API/ServiceWorkerContainer {{SeeCompatTable}}{{APIRef("Service Workers API")}} -L'interface `ServiceWorkerContainer` de l'[API ServiceWorker](/fr/docs/Web/API/ServiceWorker_API) fournit un objet représentant le service worker comme une unité globale de l'écosystème réseau, incluant des fonctionnalités pour enregistrer, désenregistrer et mettre à jour des services workers, et accéder à l'état des services workers et de leurs enregistrements. +L'interface `ServiceWorkerContainer` de l'[API ServiceWorker](/fr/docs/Web/API/Service_Worker_API) fournit un objet représentant le service worker comme une unité globale de l'écosystème réseau, incluant des fonctionnalités pour enregistrer, désenregistrer et mettre à jour des services workers, et accéder à l'état des services workers et de leurs enregistrements. Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} utilisée pour enregistrer les services workers, et la propriété {{domxref("ServiceWorkerContainer.controller")}} utilisée pour déterminer si oui ou non la page courante est activement conrôlée. @@ -77,8 +77,8 @@ if ("serviceWorker" in navigator) { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - [Service workers : exemple basique](https://github.com/mdn/sw-test) - [Le ServiceWorker est-il prêt ?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} -- [Utiliser les web workers](/fr/docs/Web/Guide/Performance/Using_web_workers) +- [Utiliser les web workers](/fr/docs/Web/API/Web_Workers_API/Using_web_workers) diff --git a/files/fr/web/api/serviceworkercontainer/register/index.md b/files/fr/web/api/serviceworkercontainer/register/index.md index a47d837bbf238a..a46f78b9aec676 100644 --- a/files/fr/web/api/serviceworkercontainer/register/index.md +++ b/files/fr/web/api/serviceworkercontainer/register/index.md @@ -21,12 +21,12 @@ serviceWorkerContainer.register(scriptURL, options) ### Paramètres - `scriptURL` - - : L' URL du script contenant le `ServiceWorker`. Le fichier qui a enregistré le `ServiceWorker` doit avoir un [JavaScript MIME type](/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types) valide. + - : L' URL du script contenant le `ServiceWorker`. Le fichier qui a enregistré le `ServiceWorker` doit avoir un [JavaScript MIME type](/fr/docs/Web/HTTP/MIME_types#javascript_types) valide. - `options` {{optional_inline}} - : Un objet contenant les options d'enregistrement. Les options sont: - - `scope`: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un `ServiceWorker`; c'est-à-dire quelle plage d'URL un `ServiceWorker` peut contrôler. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'enregistrement d'un `ServiceWorker` est limité au répertoire qui contient le script du `ServiceWorker`. Consultez la section [Exemples](#Exemples) pour plus d'informations sur son fonctionnement. + - `scope`: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un `ServiceWorker`; c'est-à-dire quelle plage d'URL un `ServiceWorker` peut contrôler. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'enregistrement d'un `ServiceWorker` est limité au répertoire qui contient le script du `ServiceWorker`. Consultez la section [Exemples](#exemples) pour plus d'informations sur son fonctionnement. - {{non-standard_inline}} `type`: Un {{domxref("WorkerType")}}, il prend les valeurs "classic" ou "module". Par défaut, la valeur est fixé à "classic". - {{non-standard_inline}} `updateViaCache`: Un {{domxref("ServiceWorkerUpdateViaCache")}}, il prend les valeurs "imports" ou "all" ou "none". Par défaut, la valeur est fixé à "imports". diff --git a/files/fr/web/api/serviceworkerregistration/active/index.md b/files/fr/web/api/serviceworkerregistration/active/index.md index 7ec8f33b6514d6..a6c4d97af24d95 100644 --- a/files/fr/web/api/serviceworkerregistration/active/index.md +++ b/files/fr/web/api/serviceworkerregistration/active/index.md @@ -32,8 +32,8 @@ Un objet {{domxref("ServiceWorker")}}, si le _worker_ est actuellement dans un ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - [Service workers basic code example](https://github.com/mdn/sw-test) - [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} -- [Utilisation des web workers](/fr/docs/Web/Guide/Performance/Using_web_workers) +- [Utilisation des web workers](/fr/docs/Web/API/Web_Workers_API/Using_web_workers) diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.md b/files/fr/web/api/serviceworkerregistration/shownotification/index.md index 952ee27860d408..384520519f6f44 100644 --- a/files/fr/web/api/serviceworkerregistration/shownotification/index.md +++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.md @@ -38,13 +38,13 @@ serviceWorkerRegistration.showNotification(title, [options]); - `dir`: La direction dans laquelle afficher la notification. La valeur par défaut est `auto`, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de `ltr` et `rtl` (bien que la plupart des navigateurs semblent ignorer ces paramètres.) - `icon`: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification. - `image`: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification. - - `lang`: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une [balise de langue BCP 47](https://www.rfc-editor.org/rfc/bcp/bcp47.txt). Consultez la page des [codes de langue à 2 lettres ISO](http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/) de Sitepoint pour une référence simple. + - `lang`: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une [balise de langue BCP 47](https://www.rfc-editor.org/rfc/bcp/bcp47.txt). Consultez la page des [codes de langue à 2 lettres ISO](https://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/) de Sitepoint pour une référence simple. - `renotify`: Un {{domxref ("Boolean", "Booléen")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est `false`, ce qui signifie qu'ils ne seront pas notifiés. - `requireInteraction`: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est `false`. - `silent`: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est `false`, ce qui signifie qu'il ne sera pas silencieux. - `tag`: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification. - `timestamp`: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer. - - `vibrate`: Un [modèle de vibration](/fr/docs/Web/Guide/API/Vibration#Vibration_patterns) que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration est un tableau (qui peut contenir un seul élément comme plusieurs). Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, \[300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms. + - `vibrate`: Un [modèle de vibration](/fr/docs/Web/API/Vibration_API#vibration_patterns) que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration est un tableau (qui peut contenir un seul élément comme plusieurs). Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, \[300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms. ### Valeur de retour diff --git a/files/fr/web/api/sharedworker/index.md b/files/fr/web/api/sharedworker/index.md index bb72f398945644..af7b03a240e3f0 100644 --- a/files/fr/web/api/sharedworker/index.md +++ b/files/fr/web/api/sharedworker/index.md @@ -32,7 +32,7 @@ _Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente ## Exemple -Dans notre [Exemple basique d'un worker partagé](https://github.com/mdn/simple-shared-worker) ([lancer le worker partagé](http://mdn.github.io/simple-shared-worker/)), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes. +Dans notre [Exemple basique d'un worker partagé](https://github.com/mdn/simple-shared-worker) ([lancer le worker partagé](https://mdn.github.io/simple-shared-worker/)), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes. L'extrait de code suivant illustre la création d'un objet `SharedWorker` en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci : @@ -91,4 +91,4 @@ onconnect = function (e) { ## Voir aussi - {{ domxref("Worker") }} -- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers) +- [Utilisation des web workers](/fr/docs/Web/API/Web_Workers_API/Using_web_workers) diff --git a/files/fr/web/api/sharedworker/sharedworker/index.md b/files/fr/web/api/sharedworker/sharedworker/index.md index c8a32900fd48f8..50647a30329ce7 100644 --- a/files/fr/web/api/sharedworker/sharedworker/index.md +++ b/files/fr/web/api/sharedworker/sharedworker/index.md @@ -41,7 +41,7 @@ new SharedWorker(uneURL, options); - `SecurityError` [`DOMException`](/fr/docs/Web/API/DOMException) - : Déclenchée si le document n'est pas autorisé à démarrer des workers, par exemple si la syntaxe de l'URL est invalide ou si cette dernière ne respecte pas la règle de même origine. - `NetworkError` [`DOMException`](/fr/docs/Web/API/DOMException) - - : Déclenchée si le type MIME du script du worker est incorrect. Ce devrait _toujours_ être `text/javascript` (pour des raisons historiques, [d'autres types MIME JavaScript](/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types#textjavascript) peuvent être acceptés). + - : Déclenchée si le type MIME du script du worker est incorrect. Ce devrait _toujours_ être `text/javascript` (pour des raisons historiques, [d'autres types MIME JavaScript](/fr/docs/Web/HTTP/MIME_types#textjavascript) peuvent être acceptés). - `SyntaxError` [`DOMException`](/fr/docs/Web/API/DOMException) - : Déclenchée si `uneURL` ne peut pas être analysée. diff --git a/files/fr/web/api/sharedworkerglobalscope/connect_event/index.md b/files/fr/web/api/sharedworkerglobalscope/connect_event/index.md index a2bb5d45825ba1..3336a8248cf9f3 100644 --- a/files/fr/web/api/sharedworkerglobalscope/connect_event/index.md +++ b/files/fr/web/api/sharedworkerglobalscope/connect_event/index.md @@ -32,7 +32,7 @@ onconnect = function (e) { }; ``` -Pour l'exemple complet en fonctionnement, voir [Basic shared worker example](https://github.com/mdn/simple-shared-worker) ([run shared worker](http://mdn.github.io/simple-shared-worker/).) +Pour l'exemple complet en fonctionnement, voir [Basic shared worker example](https://github.com/mdn/simple-shared-worker) ([run shared worker](https://mdn.github.io/simple-shared-worker/).) > [!NOTE] > La propriété `data` de l'objet évènement est `null` dans Firefox. À partir de la version 65, elle est initialisée comme une chaîne vide, selon les spécifications ([bug Firefox 1508824](https://bugzil.la/1508824)). diff --git a/files/fr/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md b/files/fr/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md index 7ad67284d7219a..58b2c817bc8d7d 100644 --- a/files/fr/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md +++ b/files/fr/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md @@ -9,7 +9,7 @@ slug: Web/API/Storage_API/Storage_quotas_and_eviction_criteria > Il existe un certain nombre de technologies Web qui stockent des données d'un type ou d'un autre du côté client (c'est-à-dire sur le disque local). Le processus par lequel le navigateur calcule l'espace alloué au stockage de données Web et les données à supprimer quand la limite est atteinte n'est pas simple et diffère d'un navigateur à l'autre. Cet article tente d'expliquer comment tout cela fonctionne. > [!NOTE] -> Les informations ci-dessous devraient être assez précises pour la plupart des navigateurs modernes, mais les spécificités du navigateur sont évoquées quand elles sont connues. Opera et Chrome devraient se comporter de la même manière dans tous les cas. Mais [Opera Mini](http://www.opera.com/mobile/mini) (encore basé sur presto du côté serveur) ne stocke aucune donnée sur le client. +> Les informations ci-dessous devraient être assez précises pour la plupart des navigateurs modernes, mais les spécificités du navigateur sont évoquées quand elles sont connues. Opera et Chrome devraient se comporter de la même manière dans tous les cas. Mais [Opera Mini](https://www.opera.com/mobile/mini) (encore basé sur presto du côté serveur) ne stocke aucune donnée sur le client. ## Les différents types de stockage des données @@ -104,7 +104,7 @@ Nous traçons le "dernier temps d'accès" pour chaque origine utilisant le stock Dans Firefox, les technologies suivantes utilisent le stockage de données du navigateur pour stocker des données au besoin. Nous les qualifions de "quota clients" dans ce contexte : -- [IndexedDB](/fr/docs/Web/API/API_IndexedDB) +- [IndexedDB](/fr/docs/Web/API/IndexedDB_API) - [asm.js](http://asmjs.org/) caching - [Cache API](/fr/docs/Web/API/Cache) diff --git a/files/fr/web/api/streams_api/index.md b/files/fr/web/api/streams_api/index.md index 432d58b03a989e..ff41914b238a94 100644 --- a/files/fr/web/api/streams_api/index.md +++ b/files/fr/web/api/streams_api/index.md @@ -19,7 +19,7 @@ Avec la mise à disposition des Streams en JavaScript, tout ceci a changé — v Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence ou prend fin, chaîner les flux entre eux, traiter les erreurs et annuler les flux si nécessaire et vous adapter à la vitesse de lecture du flux. -L'usage basique des Streams s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, le corps de réponse retourné par une [requête `fetch`](/fr/docs/Web/API/fetch) réussie peut être exposé en tant que [`ReadableStream`](/fr/docs/Web/API/ReadableStream) — vous pourrez ainsi le lire en utilisant un lecteur créé par [`ReadableStream.getReader()`](/fr/docs/Web/API/ReadableStream/getReader), l'annuler avec [`ReadableStream.cancel()`](/fr/docs/Web/API/ReadableStream/cancel), etc. +L'usage basique des Streams s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, le corps de réponse retourné par une [requête `fetch`](/fr/docs/Web/API/Window/fetch) réussie peut être exposé en tant que [`ReadableStream`](/fr/docs/Web/API/ReadableStream) — vous pourrez ainsi le lire en utilisant un lecteur créé par [`ReadableStream.getReader()`](/fr/docs/Web/API/ReadableStream/getReader), l'annuler avec [`ReadableStream.cancel()`](/fr/docs/Web/API/ReadableStream/cancel), etc. Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un [service worker](/fr/docs/Web/API/Service_Worker_API). @@ -58,9 +58,9 @@ Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("Wri ### Extensions vers d'autres APIs - {{domxref("Request")}} - - : Quand un nouvel objet `Request` est construit, vous pouvez lui passer un {{domxref("ReadableStream")}} dans la propriété `body` de son dictionnaire `RequestInit`. Cette `Request` peut alors être envoyée à un [`fetch()`](/fr/docs/Web/API/fetch) pour initier l'appel vers le flux. + - : Quand un nouvel objet `Request` est construit, vous pouvez lui passer un {{domxref("ReadableStream")}} dans la propriété `body` de son dictionnaire `RequestInit`. Cette `Request` peut alors être envoyée à un [`fetch()`](/fr/docs/Web/API/Window/fetch) pour initier l'appel vers le flux. - {{domxref("Body")}} - - : La réponse {{domxref("Body")}} retrouné par un [appel fetch](/fr/docs/Web/API/fetch) réussi est exposée par défaut comme un {{domxref("ReadableStream")}}, et peut être ratachée à un reader, etc. + - : La réponse {{domxref("Body")}} retrouné par un [appel fetch](/fr/docs/Web/API/Window/fetch) réussi est exposée par défaut comme un {{domxref("ReadableStream")}}, et peut être ratachée à un reader, etc. ### Interfaces liées aux flux d'octets @@ -78,12 +78,12 @@ Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("Wri We have created a directory of examples to go along with the Streams API documentation — see [mdn/dom-examples/streams](https://github.com/mdn/dom-examples/tree/master/streams). The examples are as follows: -- [Simple stream pump](http://mdn.github.io/dom-examples/streams/simple-pump/): This example shows how to consume a ReadableStream and pass its data to another. -- [Grayscale a PNG](http://mdn.github.io/dom-examples/streams/grayscale-png/): This example shows how a ReadableStream of a PNG can be turned into grayscale. -- [Simple random stream](http://mdn.github.io/dom-examples/streams/simple-random-stream/): This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again. -- [Simple tee example](http://mdn.github.io/dom-examples/streams/simple-tee-example/): This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently. -- [Simple writer](http://mdn.github.io/dom-examples/streams/simple-writer/): This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI. -- [Unpack chunks of a PNG](http://mdn.github.io/dom-examples/streams/png-transform-stream/): This example shows how [`pipeThrough()`](/fr/docs/Web/API/ReadableStream/pipeThrough) can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks. +- [Simple stream pump](https://mdn.github.io/dom-examples/streams/simple-pump/): This example shows how to consume a ReadableStream and pass its data to another. +- [Grayscale a PNG](https://mdn.github.io/dom-examples/streams/grayscale-png/): This example shows how a ReadableStream of a PNG can be turned into grayscale. +- [Simple random stream](https://mdn.github.io/dom-examples/streams/simple-random-stream/): This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again. +- [Simple tee example](https://mdn.github.io/dom-examples/streams/simple-tee-example/): This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently. +- [Simple writer](https://mdn.github.io/dom-examples/streams/simple-writer/): This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI. +- [Unpack chunks of a PNG](https://mdn.github.io/dom-examples/streams/png-transform-stream/): This example shows how [`pipeThrough()`](/fr/docs/Web/API/ReadableStream/pipeThrough) can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks. Examples from other developers: diff --git a/files/fr/web/api/stylesheet/disabled/index.md b/files/fr/web/api/stylesheet/disabled/index.md index 9a00d2132157b0..e6e766991e970e 100644 --- a/files/fr/web/api/stylesheet/disabled/index.md +++ b/files/fr/web/api/stylesheet/disabled/index.md @@ -24,4 +24,4 @@ if (stylesheet.disabled) { ## Spécification -[désactivée](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-disabled) +[désactivée](https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-disabled) diff --git a/files/fr/web/api/stylesheet/href/index.md b/files/fr/web/api/stylesheet/href/index.md index 3981fb7079294c..4a84f89d852790 100644 --- a/files/fr/web/api/stylesheet/href/index.md +++ b/files/fr/web/api/stylesheet/href/index.md @@ -46,4 +46,4 @@ Cette propriété est en lecture seule sur Firefox, Opera, Google Chrome et Safa ## Spécification -[Href](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href) +[Href](https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href) diff --git a/files/fr/web/api/stylesheet/parentstylesheet/index.md b/files/fr/web/api/stylesheet/parentstylesheet/index.md index e906460b951000..c33da10abb293e 100644 --- a/files/fr/web/api/stylesheet/parentstylesheet/index.md +++ b/files/fr/web/api/stylesheet/parentstylesheet/index.md @@ -26,4 +26,4 @@ Cette propriété renvoie NULL est la feuille de style actuelle est une feuille ## Spécification -- [ParentStyleSheet](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-parentStyleSheet) +- [ParentStyleSheet](https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-parentStyleSheet) diff --git a/files/fr/web/api/stylesheet/title/index.md b/files/fr/web/api/stylesheet/title/index.md index 80c4c13b34916d..bae014d2cb8498 100644 --- a/files/fr/web/api/stylesheet/title/index.md +++ b/files/fr/web/api/stylesheet/title/index.md @@ -13,4 +13,4 @@ Le titre est souvent spécifié dans {{domxref ("StyleSheet / OwnerNode", "owner ## Spécification -- [Titre](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title) +- [Titre](https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title) diff --git a/files/fr/web/api/stylesheet/type/index.md b/files/fr/web/api/stylesheet/type/index.md index 679bb20609f47e..be578937d9bbec 100644 --- a/files/fr/web/api/stylesheet/type/index.md +++ b/files/fr/web/api/stylesheet/type/index.md @@ -21,4 +21,4 @@ stylesheet.type = "text/css"; ## Spécification -[type](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-type) +[type](https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-type) diff --git a/files/fr/web/api/subtlecrypto/digest/index.md b/files/fr/web/api/subtlecrypto/digest/index.md index d58041191731ca..62f484e0d46a02 100644 --- a/files/fr/web/api/subtlecrypto/digest/index.md +++ b/files/fr/web/api/subtlecrypto/digest/index.md @@ -32,7 +32,7 @@ const digest = crypto.subtle.digest(algorithm, data); ## Algorithmes supportés -Les algorithmes de condensé, aussi connue sous le nom de [fonctions de hachage cryptographique](/fr/docs/Glossaire/Fonction_de_hachage_cryptographique), transforme un bloque de données de longueur arbitraire dans un résultat de taille fixe, souvent plus petit que l'entré. Ils ont de nombreuses utilisations en cryptographie. +Les algorithmes de condensé, aussi connue sous le nom de [fonctions de hachage cryptographique](/fr/docs/Glossary/Cryptographic_hash_function), transforme un bloque de données de longueur arbitraire dans un résultat de taille fixe, souvent plus petit que l'entré. Ils ont de nombreuses utilisations en cryptographie. ### SHA-1 diff --git a/files/fr/web/api/svgelement/index.md b/files/fr/web/api/svgelement/index.md index 06a0b0479ab5dc..ea4875148a031d 100644 --- a/files/fr/web/api/svgelement/index.md +++ b/files/fr/web/api/svgelement/index.md @@ -39,15 +39,15 @@ _Cette interface n'a pas de méthode en propre, mais elle hérite de celles four On pourra intercepter les évènements suivants en utilisant [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) ou en affectant un gestionnaire d'évènements à la propriété `on…` correspondante de [`GlobalEventHandlers`](/fr/docs/Web/API/GlobalEventHandlers). - [`abort`](/fr/docs/Web/API/SVGElement/abort_event) - - : Déclenché lorsque le chargement de la page est interrompu avant qu'un élément SVG ait pu être chargé complètement. Également disponible avec la propriété [`onabort`](/fr/docs/Web/API/GlobalEventHandlers/onabort). + - : Déclenché lorsque le chargement de la page est interrompu avant qu'un élément SVG ait pu être chargé complètement. Également disponible avec la propriété [`onabort`](/fr/docs/Web/API/HTMLMediaElement/abort_event). - [`error`](/fr/docs/Web/API/SVGElement/error_event) - - : Déclenché lorsqu'un élément SVG ne charge pas correctement ou lorsqu'une erreur se produit lors de l'exécution d'un script. Également disponible avec la propriété [`onerror`](/fr/docs/Web/API/GlobalEventHandlers/onerror). + - : Déclenché lorsqu'un élément SVG ne charge pas correctement ou lorsqu'une erreur se produit lors de l'exécution d'un script. Également disponible avec la propriété [`onerror`](/fr/docs/Web/API/Window/error_event). - [`load`](/fr/docs/Web/API/SVGElement/load_event) - - : Déclenché sur un objet `SVGElement` lorsqu'il est chargé dans le navigateur. Également disponible avec la propriété [`onload`](/fr/docs/Web/API/GlobalEventHandlers/onload). + - : Déclenché sur un objet `SVGElement` lorsqu'il est chargé dans le navigateur. Également disponible avec la propriété [`onload`](/fr/docs/Web/API/Window/load_event). - [`resize`](/fr/docs/Web/API/SVGElement/resize_event) - - : Déclenché lorsqu'un document SVG est redimensionné. Également disponible avec la propriété [`onresize`](/fr/docs/Web/API/GlobalEventHandlers/onresize). + - : Déclenché lorsqu'un document SVG est redimensionné. Également disponible avec la propriété [`onresize`](/fr/docs/Web/API/Window/resize_event). - [`scroll`](/fr/docs/Web/API/SVGElement/scroll_event) - - : Declenché lorsque la vue d'un document SVG est décalée le long de l'axe horizontal ou vertical. Également disponible avec la propriété [`onscroll`](/fr/docs/Web/API/GlobalEventHandlers/onscroll). + - : Declenché lorsque la vue d'un document SVG est décalée le long de l'axe horizontal ou vertical. Également disponible avec la propriété [`onscroll`](/fr/docs/Web/API/Element/scroll_event). - [`unload`](/fr/docs/Web/API/SVGElement/unload_event) - : Déclenché lorsque l'implémentation du DOM retire un document SVG de la fenêtre ou de la frame. diff --git a/files/fr/web/api/textencoder/index.md b/files/fr/web/api/textencoder/index.md index 21d756132408c5..8a2fbe19255455 100644 --- a/files/fr/web/api/textencoder/index.md +++ b/files/fr/web/api/textencoder/index.md @@ -5,7 +5,7 @@ slug: Web/API/TextEncoder {{APIRef("Encoding API")}}{{SeeCompatTable}} -**`TextEncoder`** prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir [`StringView` – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés](/fr/Add-ons/Code_snippets/StringView). +**`TextEncoder`** prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir [`StringView` – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés](/fr/docs/Mozilla/Add-ons/Code_snippets/StringView). > [!NOTE] > Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que `utf-8` (tels que `utf-16`, `iso-8859-2`, `koi8`, `cp1261`, et `gbk`). À partir de Firefox 48 ([bug Firefox 1257877](https://bugzil.la/1257877)), Chrome 54 ([ticket](https://www.chromestatus.com/feature/5630760492990464)) et Opera 41, aucun type d'encodage autre que `utf-8` n'est disponible, de manière à être en accord avec la [spécification](https://www.w3.org/TR/encoding/#dom-textencoder). Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage). @@ -30,7 +30,7 @@ _L'interface `TextEncoder` n'hérite d'aucune propriété._ **L'interface `TextEncoder` n'hérite d'aucune propriété**. - {{DOMxRef("TextEncoder.encode()")}} - - : Retourne un [`Uint8Array`](/fr/docs/Web/JavaScript/Typed_arrays/Uint8Array) conternant un texte encodé en utf-8. + - : Retourne un [`Uint8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) conternant un texte encodé en utf-8. ## Prothèse d'émulation @@ -108,6 +108,6 @@ if (typeof TextEncoder === "undefined") { ## Voir aussi - The {{DOMxRef("TextDecoder")}} interface describing the inverse operation. -- [`StringView`](/fr/Add-ons/Code_snippets/StringView) – a C-like representation of strings based on typed arrays +- [`StringView`](/fr/docs/Mozilla/Add-ons/Code_snippets/StringView) – a C-like representation of strings based on typed arrays - A [shim](https://github.com/inexorabletash/text-encoding) allowing to use this interface in browsers that don't support it. - [`Components.utils.importGlobalProperties`](/fr/docs/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/timeranges/index.md b/files/fr/web/api/timeranges/index.md index b25c0e1888b7eb..3204c2ef2281f2 100644 --- a/files/fr/web/api/timeranges/index.md +++ b/files/fr/web/api/timeranges/index.md @@ -9,7 +9,7 @@ L'interface TimeRanges est utilisée pour représenter un ensemble de plages de Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer. -Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object)" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande). +Le terme "[normalized TimeRanges object](https://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object)" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande). ### Propriétés @@ -46,4 +46,4 @@ Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe-e ### Spécification -- [WHATWG Working Draft](http://www.whatwg.org/specs/web-apps/current-work/#timeranges) +- [WHATWG Working Draft](https://www.whatwg.org/specs/web-apps/current-work/#timeranges) diff --git a/files/fr/web/api/toggleevent/index.md b/files/fr/web/api/toggleevent/index.md index 0d81b0241ef773..a945e2c250d4f9 100644 --- a/files/fr/web/api/toggleevent/index.md +++ b/files/fr/web/api/toggleevent/index.md @@ -13,7 +13,7 @@ Cette interface est implémentée par les évènements [`beforetoggle`](/fr/docs {{InheritanceDiagram}} -> **Note :** `ToggleEvent` n'a aucun rapport avec l'évènement [`toggle`](/fr/docs/Web/API/HTMLDetailsElement/toggle_event) de l'élément [`
`](/fr/docs/Web/HTML/Element/details), qui se déclenche sur un élément `
` lorsque son état `open`/`closed` change. Dans ce cas, `toggle` implémente l'interface générique [`Event`](/fr/docs/Web/API/Event). +> **Note :** `ToggleEvent` n'a aucun rapport avec l'évènement [`toggle`](/fr/docs/Web/API/HTMLElement/toggle_event) de l'élément [`
`](/fr/docs/Web/HTML/Element/details), qui se déclenche sur un élément `
` lorsque son état `open`/`closed` change. Dans ce cas, `toggle` implémente l'interface générique [`Event`](/fr/docs/Web/API/Event). ## Constructeur diff --git a/files/fr/web/api/transitionevent/index.md b/files/fr/web/api/transitionevent/index.md index d23684cc547994..56e8f7ee62424b 100644 --- a/files/fr/web/api/transitionevent/index.md +++ b/files/fr/web/api/transitionevent/index.md @@ -29,13 +29,13 @@ _Cette interface hérite également des propriétés de son parent [`Event`](/fr ## Évènements de type `TransitionEvent` -- [`transitioncancel`](/fr/docs/Web/API/HTMLElement/transitioncancel_event) +- [`transitioncancel`](/fr/docs/Web/API/Element/transitioncancel_event) - : Un [évènement](/fr/docs/Web/API/Event) déclenché lorsqu'une [transition CSS](/fr/docs/Web/CSS/CSS_transitions) a été annulée. -- [`transitionend`](/fr/docs/Web/API/HTMLElement/transitionend_event) +- [`transitionend`](/fr/docs/Web/API/Element/transitionend_event) - : Un [évènement](/fr/docs/Web/API/Event) déclenché lorsqu'une [transition CSS](/fr/docs/Web/CSS/CSS_transitions) a terminé. -- [`transitionrun`](/fr/docs/Web/API/HTMLElement/transitionrun_event) +- [`transitionrun`](/fr/docs/Web/API/Element/transitionrun_event) - : Un [évènement](/fr/docs/Web/API/Event) déclenché lorsqu'une [transition CSS](/fr/docs/Web/CSS/CSS_transitions) est créée (c'est-à-dire ajoutée à l'ensemble des transitions lancées), sans qu'elle soit nécessairement démarrée. -- [`transitionstart`](/fr/docs/Web/API/HTMLElement/transitionstart_event) +- [`transitionstart`](/fr/docs/Web/API/Element/transitionstart_event) - : Un [évènement](/fr/docs/Web/API/Event) déclenché lorsqu'une [transition CSS](/fr/docs/Web/CSS/CSS_transitions) a démarré. ## Méthodes des instances diff --git a/files/fr/web/api/url/createobjecturl_static/index.md b/files/fr/web/api/url/createobjecturl_static/index.md index b2c663b1c73fb0..3d6af768bbb9e5 100644 --- a/files/fr/web/api/url/createobjecturl_static/index.md +++ b/files/fr/web/api/url/createobjecturl_static/index.md @@ -30,7 +30,7 @@ Une {{domxref("DOMString")}} contenant une URL d'objet, pouvant être utilisée ## Exemple -Voir [Utilisation de l'objet URLs pour afficher des images](/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images). +Voir [Utilisation de l'objet URLs pour afficher des images](/fr/docs/Web/API/File_API/Using_files_from_web_applications#exemple_utilisation_de_l'objet_urls_pour_afficher_des_images). ## Notes d'utilisation @@ -57,8 +57,8 @@ Dans d'anciennes versions de la spécification de Media Source, attacher un flux ## Voir aussi -- [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/Using_files_from_web_applications) -- [Utilisation de l'objet URLs pour afficher des images](/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images) +- [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File_API/Using_files_from_web_applications) +- [Utilisation de l'objet URLs pour afficher des images](/fr/docs/Web/API/File_API/Using_files_from_web_applications#exemple_utilisation_de_l'objet_urls_pour_afficher_des_images) - {{domxref("URL.revokeObjectURL()")}} - {{domxref("HTMLMediaElement.srcObject")}} - {{domxref("FileReader.readAsDataURL()")}} diff --git a/files/fr/web/api/url/hash/index.md b/files/fr/web/api/url/hash/index.md index 137652a2693cc2..733e26075f6a1c 100644 --- a/files/fr/web/api/url/hash/index.md +++ b/files/fr/web/api/url/hash/index.md @@ -7,7 +7,7 @@ slug: Web/API/URL/hash La propriété **`hash`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère `'#'` suivi par l'identificateur de fragment de URL. -Le fragment n'est pas [décodé en pourcent](/fr/docs/Glossary/percent-encoding). Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — `""`. +Le fragment n'est pas [décodé en pourcent](/fr/docs/Glossary/Percent-encoding). Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — `""`. {{AvailableInWorkers}} diff --git a/files/fr/web/api/url/index.md b/files/fr/web/api/url/index.md index d7cefcb2b0fe3e..6dafa6f4a82395 100644 --- a/files/fr/web/api/url/index.md +++ b/files/fr/web/api/url/index.md @@ -54,10 +54,10 @@ Pour les anciens navigateurs qui n'implémenteraient pas le constructeur [`URL() ## Méthodes statiques -- [`createObjectURL()`](/fr/docs/Web/API/URL/createObjectURL) +- [`createObjectURL()`](/fr/docs/Web/API/URL/createObjectURL_static) - : Renvoie une chaîne de caractères contenant une URL de blob unique, c'est-à-dire une URL dont le schéma est `blob:`, suivi d'une chaîne de caractères opaque identifiant de façon unique l'objet dans le navigateur. -- [`revokeObjectURL()`](/fr/docs/Web/API/URL/revokeObjectURL) - - : Révoque un objet `URL` précédemment créé à l'aide de [`URL.createObjectURL()`](/fr/docs/Web/API/URL/createObjectURL). +- [`revokeObjectURL()`](/fr/docs/Web/API/URL/revokeObjectURL_static) + - : Révoque un objet `URL` précédemment créé à l'aide de [`URL.createObjectURL()`](/fr/docs/Web/API/URL/createObjectURL_static). ## Notes d'utilisation @@ -113,5 +113,5 @@ const response = await fetch( - [Une prothèse d'émulation pour `URL` avec la bibliothèque tierce `core-js`](https://github.com/zloirock/core-js#url-and-urlsearchparams) - [L'API URL](/fr/docs/Web/API/URL_API) -- [Qu'est-ce qu'une URL ?](/fr/docs/Learn/Common_questions/What_is_a_URL) +- [Qu'est-ce qu'une URL ?](/fr/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) - [`URLSearchParams`](/fr/docs/Web/API/URLSearchParams). diff --git a/files/fr/web/api/url/revokeobjecturl_static/index.md b/files/fr/web/api/url/revokeobjecturl_static/index.md index ab8cb0c1a26934..a67e43b8be95f2 100644 --- a/files/fr/web/api/url/revokeobjecturl_static/index.md +++ b/files/fr/web/api/url/revokeobjecturl_static/index.md @@ -26,7 +26,7 @@ window.URL.revokeObjectURL(objectURL); ## Exemple -Voir [Utilisation de l'objet URLs pour afficher des images](/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images). +Voir [Utilisation de l'objet URLs pour afficher des images](/fr/docs/Web/API/File_API/Using_files_from_web_applications#exemple_utilisation_de_l'objet_urls_pour_afficher_des_images). ## Spécifications @@ -38,6 +38,6 @@ Voir [Utilisation de l'objet URLs pour afficher des images](/fr/docs/Web/API/Fil ## Voir aussi -- [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/Using_files_from_web_applications) -- [Utilisation de l'objet URLs pour afficher des images](/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images) +- [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File_API/Using_files_from_web_applications) +- [Utilisation de l'objet URLs pour afficher des images](/fr/docs/Web/API/File_API/Using_files_from_web_applications#exemple_utilisation_de_l'objet_urls_pour_afficher_des_images) - {{domxref("URL.createObjectURL()") }} diff --git a/files/fr/web/api/web_animations_api/index.md b/files/fr/web/api/web_animations_api/index.md index 8a7e9b72e93080..3bfb547c733eea 100644 --- a/files/fr/web/api/web_animations_api/index.md +++ b/files/fr/web/api/web_animations_api/index.md @@ -16,7 +16,7 @@ L'API Web Animations fournit un langage commun aux navigateurs et aux développe - {{domxref("Animation")}} - : Fournit des commandes de lecture et une chronologie pour un nœud ou une source d'animation. Peut prendre un objet créé avec le constructeur {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}. - {{domxref("KeyframeEffect")}} - - : Décrit des ensembles de propriétés et de valeurs animables, appelées **images clés** (_keyframes_) et leurs [options de minutage](/fr/docs/Web/API/Web_Animations_API/Animation_timing_options) . Ceux-ci peuvent ensuite être lus en utilisant le constructeur {{domxref("Animation.Animation", "Animation()")}}. + - : Décrit des ensembles de propriétés et de valeurs animables, appelées **images clés** (_keyframes_) et leurs [options de minutage](/fr/docs/Web/API/KeyframeEffect/KeyframeEffect) . Ceux-ci peuvent ensuite être lus en utilisant le constructeur {{domxref("Animation.Animation", "Animation()")}}. - {{domxref("AnimationTimeline")}} - : Représente la chronologie de l'animation. Cette interface existe pour définir les fonctionnalités de la chronologie (héritées par {{domxref("DocumentTimeline")}} et les futurs objets de chronologie) et n'est pas elle-même accessible par les développeurs. - {{domxref("AnimationEvent")}} diff --git a/files/fr/web/api/web_animations_api/tips/index.md b/files/fr/web/api/web_animations_api/tips/index.md index 913d72a55cfaae..6c9f868f320b3b 100644 --- a/files/fr/web/api/web_animations_api/tips/index.md +++ b/files/fr/web/api/web_animations_api/tips/index.md @@ -10,7 +10,7 @@ Les animations CSS permettent de réaliser réaliser des effets incroyables en m ## Relancer une animation -La spécifications des [animations CSS](/fr/docs/Web/CSS/CSS_Animations) ne permet pas de relancer une animation. Il n'existe pas de méthode `resetAnimation()` qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur `"running"`. Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce. +La spécifications des [animations CSS](/fr/docs/Web/CSS/CSS_animations) ne permet pas de relancer une animation. Il n'existe pas de méthode `resetAnimation()` qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur `"running"`. Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce. ### CSS @@ -166,6 +166,6 @@ watchme.addEventListener("click", () => ## Voir aussi -- [Manipuler les animations CSS](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS) -- [Les animations CSS](/fr/docs/Web/CSS/Animations_CSS) +- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_animations/Using_CSS_animations) +- [Les animations CSS](/fr/docs/Web/CSS/CSS_animations) - {{domxref("Window.requestAnimationFrame()")}} diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md index 0276873d4278f4..62acbf35f560ab 100644 --- a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md @@ -30,7 +30,7 @@ Les sources audio peuvent être de provenance variée : - générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur) - créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés) - fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}) -- récupérées directement avec [WebRTC](/fr/docs/WebRTC) {{domxref("MediaStream")}} (une webcam ou un microphone) +- récupérées directement avec [WebRTC](/fr/docs/Web/API/WebRTC_API) {{domxref("MediaStream")}} (une webcam ou un microphone) ## Données audio: ce qu'on trouve dans un échantillon diff --git a/files/fr/web/api/web_audio_api/index.md b/files/fr/web/api/web_audio_api/index.md index ee9a4810933867..d208b64e955629 100644 --- a/files/fr/web/api/web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/index.md @@ -60,7 +60,7 @@ Conteneurs et définitions qui donnent sa forme au graphe audio - {{domxref("MediaElementAudioSourceNode")}} - : Un objet **`MediaElementAudio.SourceNode`** est une source audio composée d'un élément HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. - {{domxref("MediaStreamAudioSourceNode")}} - - : Un objet **`MediaStreamAudio.SourceNode`** est une source audio composée d'un [WebRTC](/fr/docs/WebRTC) {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. + - : Un objet **`MediaStreamAudio.SourceNode`** est une source audio composée d'un [WebRTC](/fr/docs/Web/API/WebRTC_API) {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. ### Définition des filtres d'effets audio @@ -86,7 +86,7 @@ Une fois que le signal audio a été traité, ces interfaces définissent sa des - {{domxref("AudioDestinationNode")}} - : Un noeud **`AudioDestinationNode`** représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel. - {{domxref("MediaStreamAudioDestinationNode")}} - - : Un noeud **`MediaStreamAudio.DestinationNode`** représente une destination audio constituée d'un {{domxref("MediaStream")}} [WebRTC](/fr/docs/WebRTC) à une seule piste `AudioMediaStreamTrack`; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio. + - : Un noeud **`MediaStreamAudio.DestinationNode`** représente une destination audio constituée d'un {{domxref("MediaStream")}} [WebRTC](/fr/docs/Web/API/WebRTC_API) à une seule piste `AudioMediaStreamTrack`; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio. ### Analyse des données et visualisation @@ -132,7 +132,7 @@ Il est possible de traiter et exporter un graphe audio très rapidement en tâch ### Audio Workers -Les Audio workers offrent la possibilité de traiter le son directement dans le contexte d'un [web worker](/fr/docs/Web/Guide/Performance/Using_web_workers). En date du 29 August 2014, ils ne sont encore implémentés par aucun navigateur. Lorsqu'ils seront implémentés, ils remplaceront {{domxref("ScriptProcessorNode")}}, et les autres fonctionnalités mentionnées dans la section [Traitement audio avec JavaScript](#Audio_processing_via_JavaScript) ci-avant. +Les Audio workers offrent la possibilité de traiter le son directement dans le contexte d'un [web worker](/fr/docs/Web/API/Web_Workers_API/Using_web_workers). En date du 29 August 2014, ils ne sont encore implémentés par aucun navigateur. Lorsqu'ils seront implémentés, ils remplaceront {{domxref("ScriptProcessorNode")}}, et les autres fonctionnalités mentionnées dans la section [Traitement audio avec JavaScript](#audio_processing_via_javascript) ci-avant. - {{domxref("AudioWorkerNode")}} - : Un objet AudioWorkerNode représente un {{domxref("AudioNode")}} qui interagit avec le thread d'un worker pour générer, traiter, ou analyse le son directement. @@ -166,14 +166,14 @@ Vous pouvez trouver différents exemples dans [le dépôt webaudio-example](http - [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) - [Visualizations with Web Audio API](/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) -- [Voice-change-O-matic example](http://mdn.github.io/voice-change-o-matic/) -- [Violent Theremin example](http://mdn.github.io/violent-theremin/) -- [Web audio spatialisation basics](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics) -- [Mixing Positional Audio and WebGL](http://www.html5rocks.com/tutorials/webaudio/positional_audio/) -- [Developing Game Audio with the Web Audio API](http://www.html5rocks.com/tutorials/webaudio/games/) -- [Porting webkitAudioContext code to standards based AudioContext](/fr/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext) +- [Voice-change-O-matic example](https://mdn.github.io/voice-change-o-matic/) +- [Violent Theremin example](https://mdn.github.io/violent-theremin/) +- [Web audio spatialisation basics](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) +- [Mixing Positional Audio and WebGL](https://www.html5rocks.com/tutorials/webaudio/positional_audio/) +- [Developing Game Audio with the Web Audio API](https://www.html5rocks.com/tutorials/webaudio/games/) +- [Porting webkitAudioContext code to standards based AudioContext](/fr/docs/Web/API/Web_Audio_API) - [Tones](https://github.com/bit101/tones): a simple library for playing specific tones/notes using the Web Audio API. -- [howler.js](https://github.com/goldfire/howler.js/): a JS audio library that defaults to [Web Audio API](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html) and falls back to [HTML5 Audio](http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element), as well as providing other useful features. +- [howler.js](https://github.com/goldfire/howler.js/): a JS audio library that defaults to [Web Audio API](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html) and falls back to [HTML5 Audio](https://www.whatwg.org/specs/web-apps/current-work/#the-audio-element), as well as providing other useful features. - [Mooog](https://github.com/mattlima/mooog): jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more. ### Guides @@ -181,13 +181,13 @@ Vous pouvez trouver différents exemples dans [le dépôt webaudio-example](http - [Les concepts de base de la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) - [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) - [Visualizations with Web Audio API](/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) -- [Web audio spatialisation basics](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics) -- [Porting webkitAudioContext code to standards based AudioContext](/fr/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext) +- [Web audio spatialisation basics](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) +- [Porting webkitAudioContext code to standards based AudioContext](/fr/docs/Web/API/Web_Audio_API) ### Démos -- [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) -- [Violent Theremin](http://mdn.github.io/violent-theremin/) +- [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) +- [Violent Theremin](https://mdn.github.io/violent-theremin/) ### API diff --git a/files/fr/web/api/web_audio_api/using_web_audio_api/index.md b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md index 6bc7f085697358..fc5ea3d48f8761 100644 --- a/files/fr/web/api/web_audio_api/using_web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md @@ -5,9 +5,9 @@ slug: Web/API/Web_Audio_API/Using_Web_Audio_API {{DefaultAPISidebar("Web Audio API")}} -La [Web Audio API](/fr/docs/Web_Audio_API) offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples. +La [Web Audio API](/fr/docs/Web/API/Web_Audio_API) offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples. -La Web Audio API ne vient pas remplacer l'élément [\