diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index a4a1144587..a461966b8b 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -96,7 +96,7 @@ BOM является частью общей [спецификации HTML](htt Говоря о стандартах, у нас есть: Спецификация DOM -: описывает структуру документа, манипуляции с контентом и события, подробнее на . +: Описывает структуру документа, манипуляции с контентом и события, подробнее на . Спецификация CSSOM : Описывает файлы стилей, правила написания стилей и манипуляций с ними, а также то, как это всё связано со страницей, подробнее на . diff --git a/20-css-for-js/10-box-sizing/article.md b/20-css-for-js/10-box-sizing/article.md index ece76c0026..2db3edf632 100755 --- a/20-css-for-js/10-box-sizing/article.md +++ b/20-css-for-js/10-box-sizing/article.md @@ -5,7 +5,7 @@ ## Значения box-sizing `content-box` -: Это значение по умолчанию. В этом случае свойства `width/height` обозначают то, что находится *внутри `padding`*. +: Это значение по умолчанию. В этом случае свойства `width/height` обозначают то, что находится *внутри* `padding`. `border-box` : Значения `width/height` задают высоту/ширину *всего элемента*. @@ -68,7 +68,7 @@ div { Как сделать, чтобы элементы растянулись чётко по ширине `FORM`? Попробуйте добиться этого самостоятельно, перед тем как читать дальше. -### Попытка width:100% +### Попытка width: 100% Первое, что приходит в голову -- поставить всем элементам `INPUT` ширину `width: 100%`. diff --git a/20-css-for-js/17-css-sprite/article.md b/20-css-for-js/17-css-sprite/article.md index 09abaaf5c8..766e484467 100755 --- a/20-css-for-js/17-css-sprite/article.md +++ b/20-css-for-js/17-css-sprite/article.md @@ -40,7 +40,7 @@ CSS-спрайт -- способ объединить много изображ ## Шаг 1. Использовать background -Первый шаг к объединению изображений в "спрайт" -- показывать их через `background`., а не через тег `IMG`. +Первый шаг к объединению изображений в "спрайт" -- показывать их через `background`, а не через тег `IMG`. В данном случае он уже сделан. Стиль для дерева: diff --git a/20-css-for-js/2-css-units/article.md b/20-css-for-js/2-css-units/article.md index ac4f921ddf..deca094f39 100644 --- a/20-css-for-js/2-css-units/article.md +++ b/20-css-for-js/2-css-units/article.md @@ -55,7 +55,7 @@ ``` -`24` пикселей -- и в Африке `24` пикселей, поэтому размер шрифта в `
` одинаков. +`24` пикселя -- и в Африке `24` пикселя, поэтому размер шрифта в `
` одинаков. А вот аналогичный пример с `em` вместо `px`: @@ -66,7 +66,7 @@
``` -Так как значение в `em` высчитывается относительно *текущего шрифта*, то вложенная строка в `1.5` раза больше, чем первая. +Так как значение в `em` высчитывается относительно *текущего шрифта*, то текст во вложенном `
` в `1.5` раза крупнее, чем в родительском. Выходит, размеры, заданные в `em`, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно. @@ -160,7 +160,7 @@
  • от жизни
      -
    • собачей
      • +
    • собачьей
@@ -196,7 +196,7 @@
  • от жизни
      -
    • собачей
      • +
    • собачьей
@@ -245,7 +245,7 @@
  • от жизни
      -
    • собачей
      • +
    • собачьей
@@ -262,7 +262,7 @@ let html = document.documentElement; up.onclick = function() { // при помощи JS увеличить размер шрифта html на 2px - html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px'; + html.style.fontSize = parseInt(getComputedStyle(html).fontSize) + 2 + 'px'; }; ``` @@ -273,7 +273,7 @@ up.onclick = function() { Единица `rem` не поддерживается в IE8-. -## Относительно экрана: vw, vh, vmin, vmax +## Относительно окна браузера: vw, vh, vmin, vmax Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта [CSS Values and Units 3](https://drafts.csswg.org/css-values-3/): @@ -297,8 +297,8 @@ up.onclick = function() { Мы рассмотрели единицы измерения: - `px` -- абсолютные пиксели, к которым привязаны и потому не нужны `mm`, `cm`, `pt` и `pc`. Используется для максимально конкретного и точного задания размеров. -- `em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компоненты. +- `em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компонента. - `rem` -- задаёт размер относительно шрифта ``, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в `rem`, а JS меняет шрифт у ``. - `%` -- относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты. -- `vw`, `vh`, `vmin`, `vmax` -- относительно размера экрана. +- `vw`, `vh`, `vmin`, `vmax` -- относительно размеров окна браузера. diff --git a/3-frames-and-windows/06-clickjacking/article.md b/3-frames-and-windows/06-clickjacking/article.md index 9eeb9a9323..1fcfd7117e 100644 --- a/3-frames-and-windows/06-clickjacking/article.md +++ b/3-frames-and-windows/06-clickjacking/article.md @@ -62,7 +62,7 @@ iframe { /* ифрейм с сайта-жертвы */ ```smart header="Clickjacking-атака для кликов мыши, а не для клавиатуры" Эта атака срабатывает только на действия мыши (или аналогичные, вроде нажатия пальцем на мобильном устройстве). -Клавиатурный ввод гораздо сложнее перенаправить. Технически, если у нас есть текстовое поле для взлома, мы можем расположить ифрейм таким образом, чтобы текстовые поля перекрывали друг друга. Тогда посетитель при попытке сфокусироваться на текстовом поле, которое он видит на странице, фактически будет фокусироваться на текстовом поле внутри ифрейм. +Клавиатурный ввод гораздо сложнее перенаправить. Технически, если у нас есть текстовое поле для взлома, мы можем расположить ифрейм таким образом, чтобы текстовые поля перекрывали друг друга. Тогда посетитель при попытке сфокусироваться на текстовом поле, которое он видит на странице, фактически будет фокусироваться на текстовом поле внутри ифрейма. Но есть одна проблема. Всё, что посетитель печатает, будет скрыто, потому что ифрейм не виден. @@ -87,9 +87,9 @@ if (top != window) { ### Блокировка top-навигации -Мы можем заблокировать переход, вызванный сменой `top.location` в обработчике события beforeunload. +Мы можем заблокировать переход, вызванный изменением `top.location`, в обработчике события beforeunload. -Внешняя страница (принадлежащая хакеру) устанавливает обработчик на это событие, отменяющий его, например, такой: +Внешняя страница (принадлежащая хакеру) устанавливает на это событие обработчик, отменяющий действие браузера по умолчанию, например: ```js window.onbeforeunload = function() { @@ -97,7 +97,7 @@ window.onbeforeunload = function() { }; ``` -Когда iframe пытается изменить `top.location`, посетитель увидит сообщение с вопросом действительно ли он хочет покинуть эту страницу. В большинстве случаев посетитель ответит отрицательно, поскольку он не знает об ифрейме: всё, что он видит - это верхнюю страницу, которую нет причин покидать. Поэтому `top.location` не изменится! +Тогда при попытке ифрейма изменить `top.location` посетитель увидит сообщение с вопросом, действительно ли он хочет покинуть эту страницу. В большинстве случаев посетитель ответит отрицательно, поскольку он не знает об ифрейме: всё, что он видит - это верхнюю страницу, которую нет причин покидать. Поэтому `top.location` не изменится! В действии: diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md index eaf65164cf..b806c80ff3 100644 --- a/4-binary/03-blob/article.md +++ b/4-binary/03-blob/article.md @@ -203,7 +203,7 @@ canvas.toBlob(function(blob) { let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')); ``` -Для создания скриншота страницы мы можем использовать такую библиотеку, как . Всё, что она делает, это просто проходит страницу и отрисовывает её в ``. После этого мы может получить Blob одним из вышеуказанных способов. +Для создания скриншота страницы мы можем использовать такую библиотеку, как . Всё, что она делает, это просто проходит страницу и отрисовывает её в ``. После этого мы можем получить Blob одним из вышеуказанных способов. ## Из Blob в ArrayBuffer

AltStyle によって変換されたページ (->オリジナル) /