[ru] replace old noteblock syntax with GFM syntax in `learn/tools_and…

…_testing` folder (#22773)

[ru] replace old noteblock syntax with GFM syntax in 'learn/tools_and_testing' folder

files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.md

@@ -35,7 +35,8 @@ Your code will be richer and more professional as a result, and you'll be able t
 
 ## React tutorials
 
-> **Примечание:** React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.
+> [!NOTE]
+> React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.
 >
 > If you need to check your code against our version, you can find a finished version of the sample React app code in our [todo-react repository](https://github.com/mdn/todo-react). For a running live version, see <https://mdn.github.io/todo-react-build/>.
 
@@ -56,7 +57,8 @@ Your code will be richer and more professional as a result, and you'll be able t
 
 ## Ember tutorials
 
-> **Примечание:** Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.
+> [!NOTE]
+> Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.
 >
 > If you need to check your code against our version, you can find a finished version of the sample Ember app code in the [ember-todomvc-tutorial repository](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc). For a running live version, see <https://nullvoxpopuli.github.io/ember-todomvc-tutorial/> (this also includes a few additional features not covered in the tutorial).
 
@@ -75,7 +77,8 @@ Your code will be richer and more professional as a result, and you'll be able t
 
 ## Vue tutorials
 
-> **Примечание:** Vue tutorials last tested in May 2020, with Vue 2.6.11.
+> [!NOTE]
+> Vue tutorials last tested in May 2020, with Vue 2.6.11.
 >
 > If you need to check your code against our version, you can find a finished version of the sample Vue app code in our [todo-vue repository](https://github.com/mdn/todo-vue). For a running live version, see <https://mdn.github.io/todo-vue/dist/>.
 

files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md

@@ -49,7 +49,8 @@ const header = (
 );
 ```
 
-> **Примечание:** The parentheses in the previous snippet aren't unique to JSX, and don't have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:
+> [!NOTE]
+> The parentheses in the previous snippet aren't unique to JSX, and don't have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:
 >
 > ```jsx
 > const header = (
@@ -114,7 +115,8 @@ This creates a `moz-todo-react` directory, and does several things inside it:
 - Creates a structure of files and directories that define the basic app architecture.
 - Initializes the directory as a git repository, if you have git installed on your computer.
 
-> **Примечание:** if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag `--use-npm` when you run create-react-app:
+> [!NOTE]
+> If you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag `--use-npm` when you run create-react-app:
 >
 > ```bash
 > npx create-react-app moz-todo-react --use-npm
@@ -293,7 +295,8 @@ Line 7 calls React's `ReactDOM.render()` function with two arguments:
 
 All of this tells React that we want to render our React application with the `App` component as the root, or first component.
 
-> **Примечание:** In JSX, React components and HTML elements must have closing slashes. Writing just `<App>` or just `<img>` will cause an error.
+> [!NOTE]
+> In JSX, React components and HTML elements must have closing slashes. Writing just `<App>` or just `<img>` will cause an error.
 
 [Service workers](/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers) are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they're not in scope for this article. You can delete line 5, as well as lines 9 through 12.
 

files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md

@@ -70,11 +70,13 @@ if ("geolocation" in navigator) {
 
 Здесь мы берём ссылку на второй элемент `<link>` и создаём элемент `<div>` как часть нашего теста. В нашем условном выражении мы проверяем, что свойства {{cssxref ("flex")}} и {{cssxref ("flex-flow")}} существуют в браузере. Обратите внимание, что представления JavaScript этих свойств, которые хранятся внутри объекта {{domxref ("HTMLElement.style")}}, используют нижний горбатый регистр, а не дефисы, для разделения слов.
 
-> **Примечание:** Если у вас возникли проблемы с выполнением этого, вы можете сравнить его с нашим кодом [css-feature-detect-finished.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html) (см. Также [живую версию](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html)).
+> [!NOTE]
+> Если у вас возникли проблемы с выполнением этого, вы можете сравнить его с нашим кодом [css-feature-detect-finished.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html) (см. Также [живую версию](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html)).
 
 Когда вы сохраните все и опробуете свой пример, вы должны увидеть макет flexbox, применённый к странице, если браузер поддерживает современный flexbox, и макет float, если нет.
 
-> **Примечание:** Часто такой подход является излишним из-за незначительной проблемы с обнаружением функций - вы часто можете обойтись без использования префиксов нескольких поставщиков и свойств резервирования, как описано в разделе [Поведение CSS-откат](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#CSS_fallback_behaviour) и [Обработка префиксов CSS](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes).
+> [!NOTE]
+> Часто такой подход является излишним из-за незначительной проблемы с обнаружением функций - вы часто можете обойтись без использования префиксов нескольких поставщиков и свойств резервирования, как описано в разделе [Поведение CSS-откат](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#CSS_fallback_behaviour) и [Обработка префиксов CSS](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes).
 
 #### @supports
 
@@ -122,7 +124,8 @@ if ("geolocation" in navigator) {
 | _Метод на возвращаемое значение элемента_   | Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, а затем проверьте, существует ли метод для него. Если это так, проверьте, какое значение он возвращает.                                                    | См. [Dive Into HTML5 Video Formats detection](http://diveinto.html5doctor.com/detect.html#video-formats).            |
 | _Свойство на сохраняемое значение элемента_ | Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, установите для свойства определённое значение, затем проверьте, сохраняется ли значение.                                                                   | См. [Dive into HTML5 `<input>` types detection](http://diveinto.html5doctor.com/detect.html#input-types).            |
 
-> **Примечание:** Двойное `NOT` в приведённом выше примере (`!!`) это способ заставить возвращаемое значение стать «правильным» логическим значением, а не {{glossary("Truthy")}}/{{glossary("Falsy")}} значение, которое может исказить результаты.
+> [!NOTE]
+> Двойное `NOT` в приведённом выше примере (`!!`) это способ заставить возвращаемое значение стать «правильным» логическим значением, а не {{glossary("Truthy")}}/{{glossary("Falsy")}} значение, которое может исказить результаты.
 
 Страница [Погружение в HTML5 Обнаружение функций HTML5](http://diveinto.html5doctor.com/detect.html) содержит гораздо больше полезных тестов для обнаружения функций, помимо перечисленных выше, и вы можете найти тест обнаружения функций для большинства вещей, выполнив поиск «обнаружение поддержки для ВАШИ-ФУНКЦИИ-ЗДЕСЬ» в своей любимой поисковой системе. Имейте в виду, однако, что некоторые функции, как известно, не обнаруживаются - см. список Modernizr [Необнаруживаемые](https://github.com/Modernizr/Modernizr/wiki/Undetectables).
 
@@ -200,7 +203,8 @@ blob-constructor cookies cors ...AND LOADS MORE VALUES!>
 - `flexboxtweener` для промежуточного синтаксиса 2011 года, поддерживаемого IE10.
 - `flexwrap` для свойства {{cssxref ("flex-wrap")}}, которого нет в некоторых реализациях.
 
-> **Примечание:** вы можете найти список того, что означают все имена классов — см. [Функции, обнаруженные Modernizr](https://modernizr.com/docs#features).
+> [!NOTE]
+> Вы можете найти список того, что означают все имена классов — см. [Функции, обнаруженные Modernizr](https://modernizr.com/docs#features).
 
 Далее, давайте обновим наш CSS, чтобы использовать Modernizr вместо `@supports`. Перейдите в `modernizr-css.css`, и замените два блока `@supports` следующим:
 
@@ -239,9 +243,11 @@ blob-constructor cookies cors ...AND LOADS MORE VALUES!>
 
 Так как же это работает? Поскольку все эти имена классов были помещены в элемент `<html>` вы можете настроить таргетинг на браузеры, которые поддерживают или не поддерживают функцию, используя определённые селекторы-потомки. Поэтому здесь мы применяем верхний набор правил только для браузеров, которые поддерживают flexbox, а нижний набор правил - только для браузеров, которые не поддерживают (`no-flexbox`).
 
-> **Примечание:** Имейте в виду, что все тесты функций HTML и JavaScript Modernizr также представлены в этих именах классов, так что вы можете свободно применять CSS выборочно в зависимости от того, поддерживает ли браузер функции HTML или JavaScript, если это необходимо.
+> [!NOTE]
+> Имейте в виду, что все тесты функций HTML и JavaScript Modernizr также представлены в этих именах классов, так что вы можете свободно применять CSS выборочно в зависимости от того, поддерживает ли браузер функции HTML или JavaScript, если это необходимо.
 
-> **Примечание:** Если у вас возникли проблемы с выполнением этого, проверьте ваш код по файлам [`modernizr-css.html`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html) и [`modernizr-css.css`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.css) (см. Также этот запуск в реальном времени).
+> [!NOTE]
+> Если у вас возникли проблемы с выполнением этого, проверьте ваш код по файлам [`modernizr-css.html`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html) и [`modernizr-css.css`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.css) (см. Также этот запуск в реальном времени).
 
 ### JavaScript
 

files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.md

@@ -21,16 +21,12 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Introduction
 
 Поймите, что вы - не ваши пользователи — если ваш сайт работает на Macbook Pro или Galaxy Nexus, это не значит, что он будет работать так для всех пользователей — нужно сделать много тестов!
 
-> **Примечание:** Статья [сделаем веб доступным для всех](https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/) предоставляет более полезную информацию о различных браузерах, которые используют люди, их доле рынка и связанных с этим проблемах совместимости браузеров.
-
 Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, "работающих кросс-браузерной", на самом деле мы говорим о том, что они должны обеспечивать приемлемое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию. Если владелец сайта доволен, вы сделали своё дело.
 
 С другой стороны, плохо, когда сайт полноценно работает для обычных людей, но может быть совершенно недоступен для людей, имеющих проблемы со зрением, т.к. их приложения для чтения экрана не могут распознать информацию на сайте.
 
 Когда мы говорим "приемлемое количество браузеров", мы не говорим, что это должно быть 100% всех браузеров в мире — это почти невозможно. Вы можете собрать информацию о том, какими браузеры и устройства используют ваши пользователи (это мы обсудим во второй статье — см. [Gotta test 'em all?](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all)), но это ничего не гарантирует. Как веб-разработчик, вы должны определить для себя несколько браузеров и устройств, на которых код должен работать полностью, но кроме этого, вы должны писать код так, чтобы и другие браузеры были способны максимально использовать ваш сайт (defensive coding). Это одна из самых больших проблем веб-разработки.
 
-> **Примечание:** Мы разберём defensive coding позже в этом модуле.
-
 ## Почему возникают кросс-браузерные проблемы?
 
 Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разному в разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнётесь с проблемами браузера, вы должны исправить все ошибки в коде (см. [Отладка HTML](/ru/docs/Learn/HTML/Введение_в_HTML/Debugging_HTML), [Отладка CSS](/ru/docs/Learn/CSS/Introduction_to_CSS/Отладка_CSS), and [Что пошло не так? Устранение ошибок JavaScript](/ru/docs/Learn/JavaScript/Первые_шаги/Что_пошло_не_так) из предыдущего раздела).
@@ -69,7 +65,8 @@ Now you know your target testing platforms, you should go back and review the re
 
 You should compile a list of the potential problem areas.
 
-> **Примечание:** You can find browser support information for technologies by looking up the different features on MDN — the site you're on! You should also consult [caniuse.com](http://caniuse.com/), for some further useful details.
+> [!NOTE]
+> You can find browser support information for technologies by looking up the different features on MDN — the site you're on! You should also consult [caniuse.com](http://caniuse.com/), for some further useful details.
 
 Once you've agreed on these details, you can go ahead and start developing the site.