minor

Author: iliakan

2-ui/1-document/08-styles-and-classes/article.md

@@ -7,26 +7,27 @@
 1. Создать класс в CSS и использовать его: `<div class="...">`
 2. Писать стили непосредственно в атрибуте `style`: `<div style="...">`.
 
-Использование CSS -- это всегда предпочтительный вариант и не только для HTML, но и для JavaScript.
+JavaScript может менять и классы и свойство `style`.
 
-Мы должны манипулировать свойством `style` только в том случае, если классы "не могут справиться".
+Классы - всегда предпочтительный вариант по сравнению со `style`. Мы должны манипулировать свойством `style` только в том случае, если классы "не могут справиться".
 
-Например, использование `style` является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript, подобно этому:
+Например, использование `style` является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript:
 
 ```js
 let top = /* сложные расчёты */;
 let left = /* сложные расчёты */;
-elem.style.left = left; // например, '123px'
+
+elem.style.left = left; // например, '123px', значение вычисляется во время работы скрипта
 elem.style.top = top; // например, '456px'
 ```
 
-В других случаях, например, чтобы сделать текст красным, добавить значок фона -- опишите это в CSS и примените класс. Это более гибкое и легкое в поддержке решение.
+В других случаях, например, чтобы сделать текст красным, добавить значок фона -- описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и легкое в поддержке решение.
 
 ## className и classList
 
 Изменение класса является одним из наиболее часто используемых действий в скриптах.
 
-Раньше в JavaScript существовало ограничение: зарезервированное слово типа `"class"` не могло быть свойством объекта. Это ограничение сейчас не существует, но в то время было невозможно иметь свойство `elem.class`.
+Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа `"class"` не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство `elem.class`.
 
 Поэтому для классов было введено схожее свойство `"className"`: `elem.className` соответствует атрибуту `"class"`.
 
@@ -44,7 +45,7 @@ elem.style.top = top; // например, '456px'
 
 Для этого есть другое свойство: `elem.classList`.
 
-`elem.classList` -- это специальный объект с методами для добавления/удаления классов.
+`elem.classList` -- это специальный объект с методами для добавления/удаления одного класса.
 
 Например:
 
@@ -65,9 +66,9 @@ elem.style.top = top; // например, '456px'
 
 Методы `classList`:
 
-- `elem.classList.add/remove("class")` -- добавление/удаление класса.
+- `elem.classList.add/remove("class")` -- добавить/удалить класса.
 - `elem.classList.toggle("class")` -- добавить класс, если его нет, иначе удалить.
-- `elem.classList.contains("class")` -- возвращает `true/false`, в зависимости от наличия данного класса.
+- `elem.classList.contains("class")` -- проверка наличия класса, возвращает `true/false`.
 
 Кроме того, `classList` является перебираемым, поэтому можно перечислить все классы при помощи `for..of`:
 
@@ -83,7 +84,7 @@ elem.style.top = top; // например, '456px'
 
 ## Element style
 
-Свойство `elem.style` - это объект, который соответствует тому, что написано в атрибуте `"style"`. Установка стиля `elem.style.width="100px"` работает так же, как добавление в атрибут `style="width:100px"`.
+Свойство `elem.style` - это объект, который соответствует тому, что написано в атрибуте `"style"`. Установка стиля `elem.style.width="100px"` работает так же, как наличие в атрибуте `style` строки `width:100px`.
 
 Для свойства из нескольких слов используется camelCase:
 
@@ -99,15 +100,15 @@ border-left-width => elem.style.borderLeftWidth
 document.body.style.backgroundColor = prompt('background color?', 'green');
 ```
 
-````smart header="Prefixed properties"
-Стили с браузерным префиксом, например, `-moz-border-radius`, `-webkit-border-radius` также работают по тому же принципу:
+````smart header="Свойства с префиксом"
+Стили с браузерным префиксом, например, `-moz-border-radius`, `-webkit-border-radius`  преобразуются по тому же принципу: дефис означает прописную букву.
+
+Например:
 
 ```js
 button.style.MozBorderRadius = '5px';
 button.style.WebkitBorderRadius = '5px';
 ```
-
-То есть тире `"-"` становится прописной буквой.
 ````
 
 ## Сброс стилей
@@ -119,13 +120,13 @@ button.style.WebkitBorderRadius = '5px';
 Затем мы можем удалить свойство `style.display`, чтобы вернуться к первоначальному состоянию. Вместо `delete elem.style.display` мы должны присвоить ему пустую строку: `elem.style.display = ""`.
 
 ```js run
-// если мы запустим этот код, <body> "будет мигать"
+// если мы запустим этот код, <body> "мигнёт"
 document.body.style.display = "none"; // скрыть
 
 setTimeout(() => document.body.style.display = "", 1000); // возврат к нормальному состоянию
 ```
 
-Если мы установим в `display` пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства `display` вообще не было.
+Если мы установим в `style.display` пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства `style.display` вообще не было.
 
 ````smart header="Полная перезапись `style.cssText`"
 Обычно мы используем `style.*` для присвоения индивидуальных свойств стиля. Нельзя установить список стилей как, например, `div.style="color: red; width: 100px"`, потому что `div.style` -- это объект, и он доступен только для чтения.
@@ -136,7 +137,7 @@ setTimeout(() => document.body.style.display = "", 1000); // возврат к 
 <div id="div">Button</div>
 
 <script>
-  // здесь мы даже можем устанавливать специальные флаги для стилей, например, "important"
+  // можем даже устанавливать специальные флаги для стилей, например, "important"
   div.style.cssText=`color: red !important;
     background-color: yellow;
     width: 100px;
@@ -149,12 +150,12 @@ setTimeout(() => document.body.style.display = "", 1000); // возврат к 
 
 Это свойство редко используется, потому что такое присваивание удаляет все существующие стили: оно не добавляет, а заменяет их. Можно ненароком удалить что-то нужное. Но его можно использовать, к примеру, для новых элементов, когда мы точно знаем, что не удалим существующий стиль.
 
-То же самое можно сделать, если установить атрибут: `div.setAttribute('style', 'color: red...')`.
+То же самое можно сделать установкой атрибута: `div.setAttribute('style', 'color: red...')`.
 ````
 
 ## Следите за единицами измерения
 
-Единицы измерения в CSS должны быть представлены в стилевых значениях.
+Не забудьте добавить к значениям единицы измерения.
 
 Например, мы должны устанавливать `10px`, а не просто `10` в свойство `elem.style.top`. Иначе это не сработает:
 
@@ -167,7 +168,7 @@ setTimeout(() => document.body.style.display = "", 1000); // возврат к 
     alert(document.body.style.margin); // '' (пустая строка, присваивание игнорируется)
   */!*
 
-    // сейчас добавим единицу измерения (px) - и это работает
+    // сейчас добавим единицу измерения (px) - и заработает
     document.body.style.margin = '20px';
     alert(document.body.style.margin); // 20px
 
@@ -177,11 +178,11 @@ setTimeout(() => document.body.style.display = "", 1000); // возврат к 
 </body>
 ```
 
-Пожалуйста, обратите внимание, как браузер "распаковывает" свойство `style.margin` в последних строках и выводит `style.marginLeft` и `style.marginTop` (и другие части внешнего отступа) из него.
+Пожалуйста, обратите внимание, браузер "распаковывает" свойство `style.margin` в последних строках и выводит `style.marginLeft` и `style.marginTop` из него.
 
 ## Вычисленные стили: getComputedStyle
 
-Изменить стиль очень просто. Но как его *прочитать*?
+Итак, изменить стиль очень просто. Но как его *прочитать*?
 
 Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать?
 
@@ -207,23 +208,23 @@ setTimeout(() => document.body.style.display = "", 1000); // возврат к 
 </body>
 ```
 
-...Но что, если нам нужно, скажем, увеличить отступ на 20px? Для начала нужно его текущее значение получить.
+...Но что, если нам нужно, скажем, увеличить отступ на `20px`? Для начала нужно его текущее значение получить.
 
 Для этого есть метод: `getComputedStyle`.
 
 Синтаксис:
 
 ```js
-getComputedStyle(element[, pseudo])
+getComputedStyle(element, [pseudo])
 ```
 
 element
 : Элемент, значения для которого нужно получить
 
 pseudo
-: Указывается, если нужен стиль псевдоэлемента, например "::before". Пустая строка или отсутствие аргумента означают сам элемент.
+: Указывается, если нужен стиль псевдоэлемента, например `::before`. Пустая строка или отсутствие аргумента означают сам элемент.
 
-Результат вызова - объект со свойствами стилей, похожий на `elem.style`, но с учётом всех CSS-классов.
+Результат вызова - объект со стилями, похожий на `elem.style`, но с учётом всех CSS-классов.
 
 Например:
 
@@ -253,7 +254,7 @@ pseudo
 
 Давным-давно `getComputedStyle` был создан для получения вычисленных значений, но оказалось, что окончательные значения гораздо удобнее, и стандарт изменился.
 
-Так что, в настоящее время `getComputedStyle` фактически возвращает окончательное значение свойства.
+Так что, в настоящее время `getComputedStyle` фактически возвращает окончательное значение свойства, для геометрии оно обычно в пискселях.
 ```
 
 ````warn header="`getComputedStyle` требует полное свойство!"
@@ -276,28 +277,27 @@ pseudo
 ```
 ````
 
-```smart header="\"Посещенные\" (visited) ссылки скрываются!"
+```smart header="Стили, примяемые к посещённым `:visited` ссылкам, скрываются!"
 Посещенные ссылки могут быть окрашены с помощью псевдокласса `:visited`.
 
 Но `getComputedStyle` не дает доступ к этой информации, чтобы произвольная страница не могла определить, посещал ли пользователь ту или иную ссылку, проверив стили.
 
-JavaScript не видит стили, применяемые с помощью `:visited`. Кроме того, в CSS есть ограничение, которое запрещает в целях безопасности применять к `:visited` CSS-стили, изменяющие геометрию элемента. Это гарантирует, что нет обходного пути для "плохой" страницы, чтобы проверить, была ли ссылка посещена и, следовательно, нарушить конфиденциальность.
-
+JavaScript не видит стили, применяемые с помощью `:visited`. Кроме того, в CSS есть ограничение, которое запрещает в целях безопасности применять к `:visited` CSS-стили, изменяющие геометрию элемента. Это гарантирует, что нет обходного пути для "злой" страницы проверить, была ли ссылка посещена и, следовательно, нарушить конфиденциальность.
 ```
 
 ## Итого
 
 Для управления классами существуют два DOM-свойства:
 
-- `className` -- строковое значение, удобно для управления всем набором классов
+- `className` -- строковое значение, удобно для управления всем набором классов.
 - `classList` - объект с методами `add/remove/toggle/contains`, удобно для управления отдельными классами.
 
 Чтобы изменить стили:
 
-- Свойство `style` является объектом со стилями в формате camelCase. Чтение и запись в него работают так же, как изменение соответствующих свойств в атрибуте `"style"`. Чтобы узнать, как добавить в него `important` и делать некоторые другие редкие вещи - смотрите [документацию](mdn:api/CSSStyleDeclaration].
+- Свойство `style` является объектом со стилями в формате camelCase. Чтение и запись в него работают так же, как изменение соответствующих свойств в атрибуте `"style"`. Чтобы узнать, как добавить в него `important` и делать некоторые другие редкие вещи - смотрите [документацию](mdn:api/CSSStyleDeclaration).
 
 - Свойство `style.cssText` соответствует всему атрибуту `"style"`, полной строке стилей.
 
 Для чтения окончательных стилей (с учётом всех классов, после применения CSS и вычисления окончательных значений) используется:
 
-- Метод `getComputedStyle(elem[, pseudo])` возвращает объект, похожий по формату на `style`. Только для чтения.
+- Метод `getComputedStyle(elem, [pseudo])` возвращает объект, похожий по формату на `style`. Только для чтения.

2-ui/1-document/09-size-and-scroll/article.md

@@ -2,8 +2,7 @@
 
 Существует множество JavaScript-свойcтв, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики. В этой главе мы будем называть их "метрики".
 
-Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript для того, чтобы правильно вычислять координаты.
-
+Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript.
 
 ## Простой пример
 
@@ -39,7 +38,7 @@
 ```
 
 ```smart header="Область `padding-bottom` (нижний внутренний отступ) может быть заполнена текстом"
-Нижние внутренние отступы `padding-bottom` изображены пустыми на иллюстрациях, но если элемент содержит много текста, то браузеры отображают его перекрывающим `padding-bottom`. 
+Нижние внутренние отступы `padding-bottom` изображены пустыми на иллюстрациях, но если элемент содержит много текста, то браузеры отображают его перекрывающим `padding-bottom`.
 
 Это заметка, чтобы избежать недопониманий, так как во всех стилях дальнейших примеров `padding-bottom` есть (если не указано противное).
 ```