[ru] remove mdn.mozillademos.org references (#17234)

* [ru] remove images duplicating with mdn/content

* [ru] reduce 'mdn.mozillademos.org' usage

* [ru] update 'Web/API/FileReader/readAsDataURL' translation

* [ru] improve 'Web/CSS/@font-face' translation

files/ru/mozilla/add-ons/webextensions/api/webrequest/index.md

@@ -21,7 +21,7 @@ slug: Mozilla/Add-ons/WebExtensions/API/webRequest
 
 Для использования webRequest API для определённого хоста, расширение должно иметь "webRequest" [API permission](/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) и [host permission](/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) для этого хоста. Для использования возможности "блокирования" расширение должно также иметь "webRequestBlocking" API разрешение.
 
-Для перехвата ресурсов, загруженных страницей (таких как картинки, скрипты или таблицы стилей), расширение должно иметь разрешение хоста для ресурса также как и для главной страницы, запрашивающей ресурс. К примеру, если страница на "https\://developer.mozilla.org" загружает картинку из "https\://mdn.mozillademos.org", тогда расширение должно иметь разрешения обоих хостов чтобы перехватить запрос картинки.
+Для перехвата ресурсов, загруженных страницей (таких как картинки, скрипты или таблицы стилей), расширение должно иметь разрешение хоста для ресурса также как и для главной страницы, запрашивающей ресурс. К примеру, если страница на `https://developer.mozilla.org` загружает картинку из `https://mdn.mozillademos.org`, тогда расширение должно иметь разрешения обоих хостов чтобы перехватить запрос картинки.
 
 ## Модифицирование заголовков
 

files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.md

@@ -40,7 +40,7 @@ slug: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests
 
 ```js
 function logURL(requestDetails) {
-  console.log("Loading: " + requestDetails.url);
+  console.log("Загрузка: " + requestDetails.url);
 }
 
 browser.webRequest.onBeforeRequest.addListener(logURL, {
@@ -50,7 +50,7 @@ browser.webRequest.onBeforeRequest.addListener(logURL, {
 
 Здесь мы используем {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} для вызова функции `logURL()` перед началом запроса. Функция `logURL()` берёт URL запроса из объекта event и выводит в консоль браузера. [Шаблон](/en-US/Add-ons/WebExtensions/Match_patterns) `{urls: ["<all_urls>"]}` означает, что мы будем перехватывать HTTP запросы ко всем URL.
 
-Для проверки [проинсталлируйте WebExtension](/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox), [откройте консоль браузера](/ru/docs/Tools/Browser_Console) и откройте какую-нибудь веб-страницу. В консоли вы должны увидеть URL для каждого ресурса, который запрашивает браузер:
+Для проверки [установите WebExtension](/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox), [откройте консоль браузера](/ru/docs/Tools/Browser_Console) и откройте какую-нибудь веб-страницу. В консоли вы должны увидеть URL для каждого ресурса, который запрашивает браузер:
 
 {{EmbedYouTube("X3rMgkRkB1Q")}}
 
@@ -68,7 +68,7 @@ browser.webRequest.onBeforeRequest.addListener(logURL, {
   "permissions": [
     "webRequest",
     "webRequestBlocking",
-    "https://mdn.mozillademos.org"
+    "https://developer.mozilla.org/"
   ],
 
   "background": {
@@ -82,7 +82,7 @@ browser.webRequest.onBeforeRequest.addListener(logURL, {
 Затем замените «background.js» следующим образом:
 
 ```js
-var pattern = "https://mdn.mozillademos.org/*";
+let pattern = "https://developer.mozilla.org/*";
 
 function redirect(requestDetails) {
   console.log("Redirecting: " + requestDetails.url);

files/ru/web/api/filereader/readasdataurl/index.md

@@ -1,57 +1,118 @@
 ---
-title: FileReader.readAsDataURL()
+title: "FileReader: readAsDataURL() method"
 slug: Web/API/FileReader/readAsDataURL
+l10n:
+  sourceCommit: 497d322c61511b11e4877a77660f8d7b394a8277
 ---
 
-{{APIRef("File API")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
 
-Метод `readAsDataURL` используется для чтения содержимого указанного {{domxref("Blob")}} или {{domxref("File")}}.Когда операция закончится, {{domxref("FileReader.readyState","readyState")}} примет значение `DONE`, и будет вызвано событие {{event("loadend")}}. В то же время, атрибут {{domxref("FileReader.result","result")}} будет содержать данные как URL, представляющий файл, кодированый в `base64` строку.
+Метод `readAsDataURL()` интерфейса {{domxref("FileReader")}} используется для чтения содержимого {{domxref("Blob")}} или {{domxref("File")}}. После завершения операции свойство {{domxref("FileReader.readyState", "readyState")}} принимает значение `DONE` и возникает событие {{domxref("FileReader/loadend_event", "loadend")}}. В то же время атрибут {{domxref("FileReader.result", "result")}} будет содержать данные файла, закодированные в `base64`-строку в виде [Data URL](/ru/docs/Web/HTTP/Basics_of_HTTP/Data_URLs).
+
+> **Note:** Атрибут {{domxref("FileReader.result","result")}} не может быть напрямую декодирован как Base64 без предварительного удаления объявления `Data URL`, которое предшествует данным в кодировке `base64`. Чтобы получить только строку в кодировке `base64`, необходимо удалить `data:*/*;base64,` из результата.
 
 ## Синтаксис
 
-```
-instanceOfFileReader.readAsDataURL(blob);
+```js-nolint
+readAsDataURL(blob)
 ```
 
 ### Параметры
 
 - `blob`
-  - : {{domxref("Blob")}} или{{domxref("File")}} которые следует прочитать.
+  - : {{domxref("Blob")}} или {{domxref("File")}} для чтения.
+
+### Возвращаемое значение
 
-## Пример
+Нет ({{jsxref("undefined")}}).
 
-### HTML
+## Примеры
+
+### Чтение одного файла
+
+#### HTML
 
 ```html
 <input type="file" onchange="previewFile()" /><br />
-<img src="" height="200" alt="Image preview..." />
+<img src="" height="200" alt="Предварительный просмотр изображения" />
 ```
 
-### JavaScript
+#### JavaScript
 
 ```js
 function previewFile() {
-  var preview = document.querySelector("img");
-  var file = document.querySelector("input[type=file]").files[0];
-  var reader = new FileReader();
-
-  reader.onloadend = function () {
-    preview.src = reader.result;
-  };
+  const preview = document.querySelector("img");
+  const file = document.querySelector("input[type=file]").files[0];
+  const reader = new FileReader();
+
+  reader.addEventListener(
+    "load",
+    () => {
+      // Конвертация изображения в base64-строку
+      preview.src = reader.result;
+    },
+    false,
+  );
 
   if (file) {
     reader.readAsDataURL(file);
-  } else {
-    preview.src = "";
   }
 }
 ```
 
-### Результат
+#### Результат
+
+{{EmbedLiveSample("Чтение одного файла", "100%", 240)}}
+
+### Чтение нескольких файлов
+
+#### HTML
+
+```html
+<input id="browse" type="file" multiple />
+<div id="preview"></div>
+```
+
+#### JavaScript
+
+```js
+function previewFiles() {
+  const preview = document.querySelector("#preview");
+  const files = document.querySelector("input[type=file]").files;
+
+  function readAndPreview(file) {
+    // Проверяем, что `file.name` соответствует необходимым расширениям
+    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
+      const reader = new FileReader();
+
+      reader.addEventListener(
+        "load",
+        () => {
+          const image = new Image();
+          image.height = 100;
+          image.title = file.name;
+          image.src = reader.result;
+          preview.appendChild(image);
+        },
+        false,
+      );
+
+      reader.readAsDataURL(file);
+    }
+  }
+
+  if (files) {
+    Array.prototype.forEach.call(files, readAndPreview);
+  }
+}
+
+const picker = document.querySelector("#browse");
+picker.addEventListener("change", previewFiles);
+```
 
-{{EmbedLiveSample("Пример", "100%", 240)}}
+#### Результат
 
-> **Примечание:** [`FileReader()`](/ru/docs/Web/API/FileReader) конструктор не поддерживается Internet Explorer до 10 версии. Для полностью совместимого решения прочтите [crossbrowser possible solution for image preview](https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html). Смотрите также [this more powerful example](https://mdn.mozillademos.org/files/3698/image_upload_preview.html).
+{{EmbedLiveSample("Чтение нескольких файлов", "100%", 240)}}
 
 ## Спецификации
 
@@ -64,3 +125,4 @@ function previewFile() {
 ## Смотрите также
 
 - {{domxref("FileReader")}}
+- {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}}

files/ru/web/css/@font-face/index.md

@@ -3,6 +3,8 @@ title: "@font-face"
 slug: Web/CSS/@font-face
 ---
 
+{{CSSRef}}
+
 **`@font-face`** [CSS](/ru/docs/CSS) [@-правило](/ru/docs/CSS/At-rule) позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция `local()`, с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции `url()`. `@font-face` позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом.Распространённым случаем является одновременное использование `url()` и `local()`, чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого [@-правила](/ru/docs/CSS/At-rule).
 
 ```css
@@ -20,9 +22,6 @@ slug: Web/CSS/@font-face
 
 - {{cssxref("@font-face/font-display", "font-display")}}
   - : Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.
-
-<!---->
-
 - {{cssxref("@font-face/font-family", "font-family")}}
   - : Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.
 - {{cssxref("@font-face/font-stretch", "font-stretch")}}
@@ -45,26 +44,52 @@ slug: Web/CSS/@font-face
     src: url(ideal-sans-serif.woff) format("woff"),
     url(basic-sans-serif.ttf) format("opentype");Список доступных форматов: `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"`, и `"svg"`.
 
-<!---->
-
 - {{cssxref("@font-face/unicode-range", "unicode-range")}}
   - : Диапазон Unicode кодов, который будет использоваться в шрифте.
 
-### Formal syntax
+## MIME-типы шрифтов
+
+| Формат                 | MIME-тип     |
+| ---------------------- | ------------ |
+| TrueType               | `font/ttf`   |
+| OpenType               | `font/otf`   |
+| Web Open File Format   | `font/woff`  |
+| Web Open File Format 2 | `font/woff2` |
+
+## Примечания
+
+- Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью [CORS](/ru/docs/Web/HTTP/CORS).
+- `@font-face` не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
+
+  ```css example-bad
+  .className {
+    @font-face {
+      font-family: "MyHelvetica";
+      src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
+        url("MgOpenModernaBold.ttf");
+      font-weight: bold;
+    }
+  }
+  ```
+
+### Формальный синтаксис
 
 {{csssyntax}}
 
 ## Примеры
 
-Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:
+### Использование загружаемого шрифта
 
-[Смотреть живой пример](https://mdn.mozillademos.org/files/7775/webfont-sample.html)
+Этот пример указывает загружаемый шрифт для использования и применяет его ко всему телу документа:
 
 ```html
-<html>
+<!doctype html>
+<html lang="en-US">
   <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
     <title>Web Font Sample</title>
-    <style type="text/css" media="screen, print">
+    <style media="screen, print">
       @font-face {
         font-family: "Bitstream Vera Serif Bold";
         src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
@@ -76,64 +101,40 @@ slug: Web/CSS/@font-face
     </style>
   </head>
   <body>
-    This is Bitstream Vera Serif Bold.
+    Это шрифт "Bitstream Vera Serif Bold" (он не поддерживает кириллические
+    символы).
   </body>
 </html>
 ```
 
-В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold"; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием "MgOpenModernaBold.ttf":
+Результат будет таким:
+
+{{EmbedLiveSample("Specifying a downloadable font", "100%", 100)}}
+
+### Использование локальных шрифтов
+
+В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold". Если у пользователя этот шрифт не установлен (поиск происходит по полному названию шрифта и по Postscript-названию), тогда вместо него используется загружаемый шрифт "MgOpenModernaBold.ttf":
 
 ```css
 @font-face {
-  font-family: MyHelvetica;
+  font-family: "MyHelvetica";
   src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
-    url(MgOpenModernaBold.ttf);
+    url("MgOpenModernaBold.ttf");
   font-weight: bold;
 }
 ```
 
-## MIME-типы шрифтов
-
-| Формат                 | MIME-тип     |
-| ---------------------- | ------------ |
-| TrueType               | `font/ttf`   |
-| OpenType               | `font/otf`   |
-| Web Open File Format   | `font/woff`  |
-| Web Open File Format 2 | `font/woff2` |
-
-## Примечания
-
-- Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью [CORS](/ru/docs/Glossary/CORS).
-- @font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
-
-  ```css example-bad
-  .className {
-    @font-face {
-      font-family: MyHelvetica;
-      src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
-        url(MgOpenModernaBold.ttf);
-      font-weight: bold;
-    }
-  }
-  ```
-
 ## Спецификации
 
 {{Specifications}}
 
-## Browser compatibility
+## Совместимость с браузерами
 
 {{Compat}}
 
-## See also
-
-- [About WOFF](/ru/docs/WOFF)
-- [Everythingfonts font-face generator](https://everythingfonts.com/font-face)
-- [FontSquirrel @font-face generator](http://www.fontsquirrel.com/fontface/generator)
-- [Beautiful fonts with @font-face](http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/)
-- [Open Font Library](http://openfontlibrary.org/)
-- [Microsoft Developer Network (MSDN) @font-face reference](<http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx>)
-- [When can I use WOFF?](http://caniuse.com/woff)
-- [When can I use SVG Fonts?](http://caniuse.com/svg-fonts)
+## Смотрите также
 
-{{CSSRef}}
+- [WOFF](/ru/docs/Web/CSS/CSS_fonts/WOFF)
+- [Генератор FontSquirrel @font-face](https://www.fontsquirrel.com/tools/webfont-generator)
+- [Красивые шрифты с помощью @font-face](https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/)
+- [Библиотека шрифтов](https://fontlibrary.org/)

files/ru/web/css/backdrop-filter/index.md

@@ -75,7 +75,7 @@ body {
 }
 
 body {
-  background-image: url("./anemones.jpg");
+  background-image: url("anemones.jpg");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;