diff --git a/1-js/3-writing-js/2-coding-style/code-style.svg b/1-js/3-writing-js/2-coding-style/code-style.svg index 3573dd54..727538ce 100644 --- a/1-js/3-writing-js/2-coding-style/code-style.svg +++ b/1-js/3-writing-js/2-coding-style/code-style.svg @@ -19,8 +19,9 @@ - Между именем функции - и скобкой ( нет пробела + Между именем функции и скобкой ( + между скобкой и первым параметром + нет пробела @@ -46,15 +47,15 @@ - - пустая строка + + Пустая строка между логическими блоками - - длина строки + + Длина строки не более 80 символов @@ -65,6 +66,12 @@ + + Пробелы + вокруг операторов + + + Фигурная скобка { на той же строке, через пробел diff --git a/1-js/4-data-structures/3-string/article.md b/1-js/4-data-structures/3-string/article.md index db397eec..9e32762b 100644 --- a/1-js/4-data-structures/3-string/article.md +++ b/1-js/4-data-structures/3-string/article.md @@ -106,12 +106,12 @@ alert( str.charAt(0) ); // "j" В JavaScript **нет отдельного типа "символ"**, так что `charAt` возвращает строку, состоящую из выбранного символа. -Также (кроме IE7-) для доступа к символу можно также использовать квадратные скобки: +Также для доступа к символу можно также использовать квадратные скобки: ```js //+ run var str = "Я - современный браузер!"; -alert( str[0] ); // "Я", IE8+ +alert( str[0] ); // "Я" ``` Разница между этим способом и `charAt` заключается в том, что если символа нет -- `charAt` выдает пустую строку, а скобки -- `undefined`: @@ -119,7 +119,7 @@ alert( str[0] ); // "Я", IE8+ ```js //+ run alert( "".charAt(0) ); // пустая строка -alert( "" [0] ); // undefined, IE8+ +alert( "" [0] ); // undefined ``` Вообще же метод `charAt` существует по историческим причинам, ведь квадратные скобки -- проще и короче. diff --git a/1-js/7-js-misc/2-json/article.md b/1-js/7-js-misc/2-json/article.md index ff9b48cc..ad99b881 100644 --- a/1-js/7-js-misc/2-json/article.md +++ b/1-js/7-js-misc/2-json/article.md @@ -335,7 +335,6 @@ alert( str ); diff --git a/1-js/7-js-misc/4-eval/article.md b/1-js/7-js-misc/4-eval/article.md index c8df6f79..7f8ab9e2 100644 --- a/1-js/7-js-misc/4-eval/article.md +++ b/1-js/7-js-misc/4-eval/article.md @@ -201,6 +201,8 @@ alert( mul(a, b) ); // 6 В браузерах IE7- не было методов `JSON.stringify` и `JSON.parse`, поэтому работа с JSON происходила через `eval`. +Этот способ работы с JSON давно устарел, но его можно встретить кое-где в старом коде, так что для примера рассмотрим его. + Вызов `eval(code)` выполняет код и, если это выражение, то возвращает его значение, поэтому можно в качестве кода передать JSON. Например: @@ -248,8 +250,6 @@ alert( user.age ); // 25 **Поэтому рекомендуется, всё же, использовать `JSON.parse`.** При разборе через `JSON.parse` некорректный JSON просто приведёт к ошибке, а вот при разборе через `eval` этот код реально выполнится, он может вывести что-то на странице, перенаправить посетителя куда-то и т.п. - -Если вам важна поддержка IE7, в котором `JSON.parse нет`, то от злого кода можно защититься проверкой текста при помощи регулярного выражения из [стандарта RFC 4627, секция 6](https://www.ietf.org/rfc/rfc4627.txt) или подключить библиотеку [json2](https://github.com/douglascrockford/JSON-js/blob/master/json2.js). [/warn] diff --git a/12-extra/5-setImmediate/article.md b/12-extra/5-setImmediate/article.md index 178ddfdc..cd0e5e9e 100644 --- a/12-extra/5-setImmediate/article.md +++ b/12-extra/5-setImmediate/article.md @@ -35,17 +35,14 @@ if (!window.setImmediate) window.setImmediate = (function() { window.attachEvent( 'onmessage', onmessage ); } - return window.postMessage ? function(func) { + return function(func) { tail = tail.next = { func: func }; window.postMessage(ID, "*"); - } : - function(func) { // IE7- - setTimeout(func, 0); }; }()); ``` -Есть и более сложные эмуляции, включая [MessageChannel](http://www.w3.org/TR/webmessaging/#channel-messaging) для работы с [Web Workers](http://www.w3.org/TR/workers/) и хитрый метод для поддержки IE6-8: [](https://github.com/NobleJS/setImmediate). Все они по существу являются "хаками", направленными на то, чтобы обеспечить поддержку `setImmediate` в тех браузерах, где его нет. +Есть и более сложные эмуляции, включая [MessageChannel](http://www.w3.org/TR/webmessaging/#channel-messaging) для работы с [Web Workers](http://www.w3.org/TR/workers/) и хитрый метод для поддержки IE8-: [](https://github.com/NobleJS/setImmediate). Все они по существу являются "хаками", направленными на то, чтобы обеспечить поддержку `setImmediate` в тех браузерах, где его нет. ## Тест производительности diff --git a/12-extra/5-setImmediate/setImmediate.view/setImmediate.js b/12-extra/5-setImmediate/setImmediate.view/setImmediate.js index 771fa684..aa90843d 100644 --- a/12-extra/5-setImmediate/setImmediate.view/setImmediate.js +++ b/12-extra/5-setImmediate/setImmediate.view/setImmediate.js @@ -18,13 +18,10 @@ if (!window.setImmediate) window.setImmediate = (function() { window.attachEvent('onmessage', onmessage); } - return window.postMessage ? function(func) { - tail = tail.next = { - func: func - }; - window.postMessage(ID, "*"); - } : - function(func) { // IE7- - setTimeout(func, 0); + return function(func) { + tail = tail.next = { + func: func }; + window.postMessage(ID, "*"); + }; }()); \ No newline at end of file diff --git a/2-ui/1-document/15-metrics/cssWidthScroll.view/index.html b/2-ui/1-document/15-metrics/cssWidthScroll.view/index.html index 22943c54..a29f8a3a 100755 --- a/2-ui/1-document/15-metrics/cssWidthScroll.view/index.html +++ b/2-ui/1-document/15-metrics/cssWidthScroll.view/index.html @@ -13,7 +13,7 @@ У элемента стоит style="width:300px" diff --git a/2-ui/1-document/19-dom-cheatsheet/article.md b/2-ui/1-document/19-dom-cheatsheet/article.md index 0217f834..51820faf 100644 --- a/2-ui/1-document/19-dom-cheatsheet/article.md +++ b/2-ui/1-document/19-dom-cheatsheet/article.md @@ -96,7 +96,7 @@
По классу, IE9+, корректно работает с элементами, у которых несколько классов.
-Если не нужно поддерживать IE7-, то можно использовать только `querySelector/querySelectorAll`. Методы `getElement*` работают быстрее (за счёт более оптимальной внутренней реализации), но в 99% случаев это различие очень небольшое и роли не играет. +Вообще, обычно можно использовать только `querySelector/querySelectorAll`. Методы `getElement*` работают быстрее (за счёт более оптимальной внутренней реализации), но в 99% случаев это различие очень небольшое и роли не играет. Дополнительно есть методы:
diff --git a/2-ui/1-document/5-searching-elements-dom/article.md b/2-ui/1-document/5-searching-elements-dom/article.md index ae46cc53..b4dbc2c1 100644 --- a/2-ui/1-document/5-searching-elements-dom/article.md +++ b/2-ui/1-document/5-searching-elements-dom/article.md @@ -355,17 +355,17 @@ IE тоже поддерживает XPath, но эта поддержка не `querySelector` CSS-селектор ✔ -кроме IE7- +везде `querySelectorAll` CSS-селектор ✔ -кроме IE7- +везде -Если браузеры IE7- не нужны, то в 95% ситуаций достаточно и одного `querySelector(All)`. +Практика показывает, что в 95% ситуаций достаточно `querySelector/querySelectorAll`. Хотя более специализированные методы `getElement*` работают чуть быстрее, но разница в миллисекунду-другую редко играет роль. Кроме того:
    diff --git a/2-ui/1-document/8-dom-polyfill/article.md b/2-ui/1-document/8-dom-polyfill/article.md index c2a8a373..c9701ee0 100644 --- a/2-ui/1-document/8-dom-polyfill/article.md +++ b/2-ui/1-document/8-dom-polyfill/article.md @@ -159,8 +159,6 @@ alert( document.body.lowerTag ); // body В IE8 современные методы для работы со свойствами, такие как [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty), [Object.getOwnPropertyDescriptor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) и другие не поддерживаются для произвольных объектов, но отлично работают для DOM-элементов. Чем полифиллы и пользуются, "добавляя" в IE8 многие из современных методов DOM. - -В IE6,7 геттеры/сеттеры совсем не работают. Когда-то для них использовалась особая "IE-магия" при помощи `.htc`-файлов, которые [более не поддерживаются](http://msdn.microsoft.com/en-us/library/ie/hh801216.aspx). Если нужно поддерживать и эти версии, то рекомендуется воспользоваться фреймворками. К счастью, для большинства проектов эти браузеры уже стали историей. [/warn] diff --git a/2-ui/1-document/9-attributes-and-custom-properties/article.md b/2-ui/1-document/9-attributes-and-custom-properties/article.md index 1ead670a..faf8d359 100644 --- a/2-ui/1-document/9-attributes-and-custom-properties/article.md +++ b/2-ui/1-document/9-attributes-and-custom-properties/article.md @@ -473,12 +473,13 @@ div.classList.add('order-state-canceled'); ``` -## "Особенности" IE8- +## "Особенности" IE8 + +Если вам нужна поддержка этих версий IE -- есть пара нюансов. -Если вам нужна поддержка этих версий IE -- ознакомьтесь с их проблемами. Ничего критичного, но они, всё же, есть.
      -
    1. Во-первых, версии IE8- синхронизируют все свойства и атрибуты, а не только стандартные: +
    2. Во-первых, версии IE8- синхронизируют все свойства и атрибуты, а не только стандартные: ```js //+ run @@ -489,31 +490,11 @@ alert( document.body.my ); // 123 в IE8- При этом даже тип данных не меняется. Атрибут не становится строкой, как ему положено.
      3. -
    3. Во-вторых, в IE7- (или в IE8 в режиме совместимости с IE7) свойства и атрибуты -- одно и то же. - -Поэтому возникают забавные казусы. - -Например, названия свойств регистрозависимы, а названия атрибутов -- нет. Что будет если два свойства имеют одинаковое имя в разном регистре? Как поведет себя соответствующий атрибут? - -```js -//+ run -document.body.abba = 1; // задаем свойство -document.body.ABBA = 5; // задаем свойство, теперь уже прописными буквами - -// запрашиваем атрибут в *!*смешаном*/!* регистре -alert( document.body.getAttribute('AbBa') ); // что должен вернуть браузер? -``` - -Браузер выходит из ситуации, возвращая первое назначенное свойство(`abba`). Также, в IE8- существует второй параметр для `getAttribute`, который делает его чувствительным к регистру. Подробнее тут:MSDN getAttribute. -
      4. -
    4. Ещё одна некорректность IE8-: для изменения класса нужно использовать именно свойство `className/classList`, вызов `setAttribute('class', ...)` не сработает.
      5. +
    5. Ещё одна некорректность IE8-: для изменения класса нужно использовать именно свойство `className`, вызов `setAttribute('class', ...)` не сработает.
    Вывод из этого довольно прост -- чтобы не иметь проблем в IE8, нужно использовать всегда только свойства, кроме тех ситуаций, когда нужны именно атрибуты. Впрочем, это в любом случае хорошая практика. -А для IE7- тонких различий между свойствами и атрибутами, о которых мы говорили выше, нет. Впрочем, надеюсь, вам эти версии IE поддерживать не придётся. - - ## Итого
      diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md index 602df467..7a6991f4 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -247,7 +247,7 @@ age.onblur = function() { У них две особенности:
        -
      • Не поддерживаются Firefox, хотя поддерживаются даже IE6+.
        • +
      • Не поддерживаются Firefox, хотя поддерживаются даже старейшими IE.
      • Во всех браузерах, кроме IE, должны быть назначены не через `on`-свойство, а при помощи `elem.addEventListener`.
      diff --git a/4-ajax/12-ajax-iframe/article.md b/4-ajax/12-ajax-iframe/article.md index 77be4652..bb761263 100644 --- a/4-ajax/12-ajax-iframe/article.md +++ b/4-ajax/12-ajax-iframe/article.md @@ -2,7 +2,7 @@ Эта глава посвящена `IFRAME` -- самому древнему и кросс-браузерному способу AJAX-запросов. -Сейчас он используется, разве что, для поддержки кросс-доменных запросов в IE7- и для COMET в IE9-. +Сейчас он используется, разве что, для поддержки кросс-доменных запросов в IE7- и, что чуть более актуально, для реализации COMET в IE9-. Для общения с сервером создается невидимый `IFRAME`. В него отправляются данные, и в него же сервер пишет ответ. diff --git a/6-optimize/1-memory-leaks/article.md b/6-optimize/1-memory-leaks/article.md index 0cc9d101..7bca13a2 100644 --- a/6-optimize/1-memory-leaks/article.md +++ b/6-optimize/1-memory-leaks/article.md @@ -146,7 +146,7 @@ function empty(elem) { ```js function leak() { - var xhr = new XMLHttpRequest(); // в IE6 создать через ActiveX + var xhr = new XMLHttpRequest(); xhr.open('GET', '/server.do', true); diff --git a/8-css-for-js/12-space-under-img/article.md b/8-css-for-js/12-space-under-img/article.md index 837fb7c0..717c363e 100644 --- a/8-css-for-js/12-space-under-img/article.md +++ b/8-css-for-js/12-space-under-img/article.md @@ -16,12 +16,12 @@ ``` -[iframe src="inline"] +[iframe src="inline" height=80] Посмотрите внимательно! Вы видите расстояние между рамками снизу? Это потому, что **браузер резервирует дополнительное место под инлайновым элементом, чтобы туда выносить "хвосты" букв**. Вот так выглядит та же картинка с выступающим вниз символом рядом: -[iframe src="inline-p"] +[iframe src="inline-p" height=80] В примере картинка обёрнута в красный `TD`. Таблица подстраивается под размер содержимого, так что проблема явно видна. Но она касается не только таблицы. Аналогичная ситуация возникнет, если вокруг `IMG` будет другой элемент с явно указанным размером, "облегающий" картинку по высоте. Браузер постарается зарезервировать место под `IMG`, хотя оно там не нужно. @@ -45,7 +45,7 @@ ``` -[iframe src="block"] +[iframe src="block" height=80] Под блочным элементом ничего не резервируется. Проблема исчезла. @@ -75,17 +75,17 @@ ``` -[iframe src="valign"] +[iframe src="valign" height=80] А вот, как браузер отобразит соседние символы в этом случае: `pp` -[iframe src="valign-p"] +[iframe src="valign-p" height=80] С другой стороны, сама строка никуда не делась, изображение по-прежнему является её частью, а браузер планирует разместить другое текстовое содержимое рядом, хоть и сверху. Поэтому если изображение маленькое, то произойдёт дополнение пустым местом до высоты строки: Например, для ``: -[iframe src="valign-small"] +[iframe src="valign-small" height=80] Таким образом, требуется уменьшить еще и `line-height` контейнера. Окончательное решение для маленьких изображений с `vertical-align`: @@ -108,7 +108,7 @@ Результат: -[iframe src="valign-small-lh"] +[iframe src="valign-small-lh" height=80] ## Итого diff --git a/8-css-for-js/15-css-selectors/article.md b/8-css-for-js/15-css-selectors/article.md index 9a023542..218b845d 100644 --- a/8-css-for-js/15-css-selectors/article.md +++ b/8-css-for-js/15-css-selectors/article.md @@ -245,8 +245,6 @@ li::after { Стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. А для IE8 нужно по-прежнему одно. Поэтому если вам важна поддержка IE8, то имеет смысл использовать одно двоеточие. - -Версии IE7- не понимают этих селекторов. [/smart] ## Практика diff --git a/8-css-for-js/16-css-no-ie6/article.md b/8-css-for-js/16-css-no-ie6/article.md deleted file mode 100644 index 22174be7..00000000 --- a/8-css-for-js/16-css-no-ie6/article.md +++ /dev/null @@ -1,46 +0,0 @@ -# CSS без IE6(7) - -CSS-возможности, которыми мы можем пользоваться, если НЕ поддерживаем IE6. -[cut] -
      -
      Селекторы атрибутов:
      -
      -
        -
      • `[attr]` -- атрибут установлен,
        • -
      • `[attr="val"]` -- атрибут равен `val`,
        • -
      • `[attr^="val"]` -- атрибут начинается с `val`, например `"value"`.
        • -
      • `[attr*="val"]` -- атрибут содержит `val`, например равен `"myvalue"`.
        • -
      • `[attr$="val"]` -- атрибут заканчивается на `val`, например равен `"myval"`.
        • -
      • `[attr~="val"]` -- атрибут содержит `val` как одно из значений через пробел, например: `[data-actions~="edit"]` верно для значения `data-actions="edit delete"`.
        • -
      • `[attr|="val"]` -- атрибут равен `val` *или* начинается с `val-`, например равен `"val-1"`.
        • -
      - -
      -
      Селекторы элементов:
      -
      - - -
        -
      • `ul > li` -- непосредственный потомок,
        • -
      • `.prev + .me` -- выбирает `.me`, которые стоят сразу после `.prev`, т.е. "правый брат".
        • -
      • `.prev ~ .me` -- выбирает `.me`, которые стоят после `.prev`, но не обязательно сразу после, между ними могут быть другие элементы,
        • -
      • `.a.b` -- несколько классов одновременно,
        • -
      • `:hover` -- курсор над элементом (в IE6 работает только с `A`), -
      • `:first-child` -- первый потомок в своём родителе.
        • -
      - -Внимание, IE7 не пересчитывает стили при изменении окружающих элементов для селекторов `.prev + .me`, `.prev` и `:first-child`. Иными словами, не обновляет стиль при добавлении/удалении соседей через JavaScript. -
      -
      Свойства:
      -
      -
        -
      • `min-width/min-height` -- минимальная ширина/высота
        • -
      • `max-width/max-height` -- максимальная ширина/высота
        • -
      • `position: fixed`
        • -
      -
      -
      - -Здесь перечислены в основном возможности. Разумеется, была поправлена и масса багов. - -При отказе от поддержки IE7, и, тем более, IE8, список ещё шире и включает в себя почти весь CSS 2.1. diff --git a/8-css-for-js/2-css-units/article.md b/8-css-for-js/2-css-units/article.md index fbb7c40a..34662009 100644 --- a/8-css-for-js/2-css-units/article.md +++ b/8-css-for-js/2-css-units/article.md @@ -81,7 +81,7 @@ Размер шрифта -- это некоторая "условная единица", которая встроена в шрифт. -Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. +Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом "хвосты" букв, таких как `р`, `g` могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта. [/smart] [smart header="Единицы `ex` и `ch`"] diff --git a/8-css-for-js/5-position/article.md b/8-css-for-js/5-position/article.md index 90829df0..424782e2 100644 --- a/8-css-for-js/5-position/article.md +++ b/8-css-for-js/5-position/article.md @@ -1,4 +1,4 @@ -# Свойство "position" [todo] +# Свойство "position" Свойство `position` позволяет сдвигать элемент со своего обычного места. Цель этой главы -- не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей. [cut] @@ -18,10 +18,10 @@ position: static; ```html -
      +
      Без позиционирования ("position: static"). -

      Заголовок

      +

      Заголовок

      А тут - всякий разный текст...
      ... В две строки!
      @@ -61,10 +61,10 @@ top: 10px; */!* -
      +
      Заголовок сдвинут на 10px вниз. -

      Заголовок

      +

      Заголовок

      А тут - всякий разный текст...
      ... В две строки!
      @@ -97,10 +97,10 @@ top: 10px; */!* -
      +
      Заголовок сдвинут на 10% влево. -

      Заголовок

      +

      Заголовок

      А тут - всякий разный текст...
      ... В две строки!
      @@ -143,10 +143,10 @@ position: absolute; */!* -
      +
      Заголовок в правом-верхнем углу документа. -

      Заголовок

      +

      Заголовок

      А тут - всякий разный текст...
      ... В две строки!
      @@ -165,7 +165,7 @@ position: absolute; **В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.** -Браузер растянет такой элемент до границ. Работает везде, кроме IE6: +Браузер растянет такой элемент до границ. ```html @@ -218,7 +218,7 @@ div { right: 0; bottom: 0; /* ..указанием противоположных границ */ } ``` - + С виду логично, но нет, не получится! Координаты `top/right/left/bottom` вычисляются относительно *окна*. Значение `bottom: 0` -- нижняя граница окна, а не документа, блок растянется до неё. То есть, будет то же самое, что и в предыдущем примере. @@ -244,10 +244,10 @@ div { */!* -
      +
      Заголовок в правом-верхнем углу DIV'а. -

      Заголовок

      +

      Заголовок

      А тут - всякий разный текст...
      ... В две строки!
      @@ -330,8 +330,6 @@ position: fixed;

      Много строк..

      Много строк..

      ``` -Поддерживается во всех современных браузерах, в IE начиная с версии 7. Для реализации аналогичного функционала в IE6 используют CSS-выражения. - ## Итого @@ -355,7 +353,7 @@ position: fixed;
      • Ширина элемента по умолчанию устанавливается по содержимому.
        • -
      • Можно указать противположные границы `left/right` (`top/bottom`). Элемент растянется. Возможность не поддерживается в IE7-.
        • +
      • Можно указать противположные границы `left/right` (`top/bottom`). Элемент растянется.
      • Окружающие элементы заполняют освободившееся место.
      diff --git a/8-css-for-js/6-css-center/article.md b/8-css-for-js/6-css-center/article.md index e28f405e..a10ccf1a 100644 --- a/8-css-for-js/6-css-center/article.md +++ b/8-css-for-js/6-css-center/article.md @@ -40,23 +40,20 @@
      ``` -Впрочем, в примере выше блок будет центрирован в IE6,7 (это отклонение от стандарта). - ### margin: auto -Для всех браузеров, кроме IE6,7, блок по горизонтали центрируется `margin: auto`.: +Блок по горизонтали центрируется `margin: auto`: ```html @@ -390,7 +387,7 @@ Для горизонтального центрирования:
        -
      • `text-align: center` -- центрирует инлайн-элементы в блоке. В IE7- центрирует всё, но это нестандартное поведение.
        • +
      • `text-align: center` -- центрирует инлайн-элементы в блоке.
      • `margin: 0 auto` -- центрирует блок внутри родителя. У блока должна быть указана ширина.
      diff --git a/8-css-for-js/7-font-size-line-height/article.md b/8-css-for-js/7-font-size-line-height/article.md index 8c11ebed..24ac3731 100644 --- a/8-css-for-js/7-font-size-line-height/article.md +++ b/8-css-for-js/7-font-size-line-height/article.md @@ -8,7 +8,7 @@
    • `line-height` -- *высота строки*.
    -Сделаем HTML, в котором шрифт и размер строки одинаковы: +Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы: ```html @@ -17,22 +17,28 @@ body { *!* font-size: 30px; font-family: monospace; - line-height: 1em; /* 1em = размер шрифта = 30px */ + line-height: 30px; */!* } -
    Ёрш
    -
    Ёрш
    +
    Ёрш р
    +
    Ёрш Ё
    ``` -**Как видно из примера,`font-size` -- это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях, это даже не "самая большая буква", а просто такая прикидка, чтобы было удобно планировать размер строки.** +Размер шрифта `font-size` -- это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях. -При размере строки, равном `font-size`, строка не будет размером точно "под букву". В зависимости от шрифта, "хвосты" букв при этом могут вылезать, поэтому обычно размер строки делают чуть больше, чем шрифт. +Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая "нижние хвосты" букв, таких как `р`, `g`. Как видно из примера выше, при размере строки, равном `font-size`, строка не будет размером точно "под букву". + +В зависимости от шрифта, "хвосты" букв при этом могут вылезать, правые буквы `Ё` и `р` в примере выше пересекаются как раз поэтому. + +В некоторых особо размашистых шрифтах "хвосты букв" могут быть размером с саму букву, а то и больше больше. Но это, всё же исключение. + +Обычно размер строки делают чуть больше, чем шрифт. **По умолчанию в браузерах используется специальное значение `line-height:normal`.** -Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне `1.0 - 1.25`, но стандарт не гарантирует этого, он говорит лишь, что оно должно быть "разумным" (reasonable). +Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне `1.1 - 1.25`, но стандарт не гарантирует этого, он говорит лишь, что оно должно быть "разумным" (дословно -- англ. reasonable). ## Множитель для line-height @@ -44,9 +50,11 @@ body {
    • **Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.** + То есть, при `line-height: 2` означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
    • **Значение, заданное в единицах измерения, запоминается и наследуется "как есть".** + Это означает, что `line-height: 32px` будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.
    diff --git a/8-css-for-js/8-white-space/article.md b/8-css-for-js/8-white-space/article.md index 9b2d438f..e9d31c21 100644 --- a/8-css-for-js/8-white-space/article.md +++ b/8-css-for-js/8-white-space/article.md @@ -8,7 +8,7 @@
  • `white-space: pre` -- текст ведёт себя, как будто оформлен в тег `pre`.
-Но браузеры поддерживают ещё 3, два из которых -- только в IE8+ и очень полезны. +Но браузеры поддерживают и другие, которые также бывают очень полезны. [cut] ## pre / nowrap @@ -19,19 +19,19 @@ **`pre`**:
    -
  • **сохраняет пробелы**
    • -
  • **переносит текст при явном разрыве строки.**
    • +
  • Сохраняет пробелы.
    • +
  • Переносит текст при явном разрыве строки.
**`nowrap`**
    -
  • **не сохраняет пробелы**
    • -
  • **игнорирует явные разрывы строки (не переносит текст).**
    • +
  • Не сохраняет пробелы.
    • +
  • Игнорирует явные разрывы строки (не переносит текст).
Оба этих значения поддерживаются кросс-браузерно. -**Их основной недостаток -- текст вылезает из контейнера.** +**Их основной недостаток -- текст может вылезти из контейнера.** Для примера, рассмотрим следующий фрагмент кода: @@ -45,7 +45,7 @@ if (hours > 18) {
  • **`white-space: pre`:** [pre] -
    if (hours > 18) { +
    if (hours > 18) { // Пойти поиграть в теннис }
    @@ -56,7 +56,7 @@ if (hours > 18) {
  • **`white-space: nowrap`:** [pre] -
    if (hours > 18) { +
    if (hours > 18) { // Пойти поиграть в теннис }
    @@ -68,14 +68,12 @@ if (hours > 18) { Допустим, мы хотим разрешить посетителям публиковать код на сайте, с сохранением разметки. Но тег `PRE` и описанные выше значения `white-space` для этого не подойдут! -Злой Василий Пупкин может написать такой текст, который вылезет из контейнера и поломает вёрстку страницы. +Злой посетитель Василий Пупкин может написать такой текст, который вылезет из контейнера и поломает вёрстку страницы. Можно скрыть вылезшее значение при помощи `overflow-x: hidden` или сделать так, чтобы была горизонтальная прокрутка, но, к счастью, есть другие значения `white-space`, специально для таких случаев. ## pre-wrap/pre-line -Эти значения не поддерживаются в IE7-. -
    `pre-wrap`
    То же самое, что `pre`, но переводит строку, если текст вылезает из контейнера.
    @@ -89,7 +87,7 @@ if (hours > 18) {
  • **`white-space: pre-wrap`:** [pre] -
    if (hours > 18) { +
    if (hours > 18) { // Пойти поиграть в теннис }
    @@ -100,7 +98,7 @@ if (hours > 18) {
  • **`white-space: pre-line`:** [pre] -
    if (hours > 18) { +
    if (hours > 18) { // Пойти поиграть в теннис }
    @@ -110,13 +108,14 @@ if (hours > 18) {
    • -Никто не мешает использовать эти значения на сайте, а для IE7- игнорировать проблему или задавать контейнеру `overflow-x: hidden`. +Целесообразно использовать эти значения на сайте там, где текст пишется пользователями. +[head] \ No newline at end of file + +[/head] \ No newline at end of file