jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-03-10 14:43:25 +03:00
parent 6444024a9d
commit fad6615c42
22 changed files with 94 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

19
1-js/3-writing-js/2-coding-style/code-style.svg
View file

@ -19,8 +19,9 @@
<path d="M236,215 L236,205.5" id="Line-5" stroke="#4990E2" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M236.5,214.5 L246.5,214.5" id="Line-20" stroke="#4990E2" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="Между-именем-функции" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="122.139648" y="89">Между именем функции</tspan>
<tspan x="126.559082" y="108">и скобкой ( нет пробела</tspan>
<tspan x="60.2202148" y="89">Между именем функции и скобкой ( </tspan>
<tspan x="52.8442383" y="108">между скобкой и первым параметром</tspan>
<tspan x="150.478516" y="127">нет пробела</tspan>
</text>
<path d="M270.5,118.5 L326.5,174.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M326.361436,174.361436 C324.431034,170.94611 322.776404,168.018688 320.846003,164.603362 C319.361079,166.088286 318.088286,167.361079 316.603362,168.846003 C320.018688,170.776404 322.94611,172.431034 326.361436,174.361436 C326.361436,174.361436 326.361436,174.361436 326.361436,174.361436 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
@ -46,15 +47,15 @@
</text>
<path d="M326,507 L300,481.565217" id="Line-15" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-15-decoration-1" d="M300.265975,481.82541 C302.233789,485.219318 303.920486,488.128382 305.8883,491.522289 C307.356818,490.021138 308.615547,488.734437 310.084065,487.233285 C306.647734,485.340529 303.702307,483.718167 300.265975,481.82541 C300.265975,481.82541 300.265975,481.82541 300.265975,481.82541 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="пустая-строка" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="51.4902344" y="374">пустая строка</tspan>
<text id="Пустая-строка" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="50.8374023" y="374">Пустая строка</tspan>
<tspan x="77.7128906" y="393">между </tspan>
<tspan x="18.0761719" y="412">логическими блоками</tspan>
</text>
<path d="M170.441667,385.5 L223,385.5" id="Line-7" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-7-decoration-1" d="M222.441667,385.5 C218.661667,384.45 215.421667,383.55 211.641667,382.5 C211.641667,384.6 211.641667,386.4 211.641667,388.5 C215.421667,387.45 218.661667,386.55 222.441667,385.5 C222.441667,385.5 222.441667,385.5 222.441667,385.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="длина-строки" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="569.00293" y="380">длина строки</tspan>
<text id="Длина-строки" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="568.302246" y="380">Длина строки</tspan>
<tspan x="539.126465" y="399">не более 80 символов</tspan>
</text>
<path d="M534.441667,385.5 L443,420" id="Line-13" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
@ -65,6 +66,12 @@
</text>
<path d="M591,252.5 L386,252.5" id="Line-8" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-8-decoration-1" d="M386,252.5 C389.78,253.55 393.02,254.45 396.8,255.5 C396.8,253.4 396.8,251.6 396.8,249.5 C393.02,250.55 389.78,251.45 386,252.5 C386,252.5 386,252.5 386,252.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Пробелы-" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="596.064453" y="186">Пробелы </tspan>
<tspan x="559.283691" y="205">вокруг операторов</tspan>
</text>
<path d="M575.5,188.5 L401.5,225.5" id="Line-16" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-16-decoration-1" d="M402.370943,225.3148 C406.286668,225.555622 409.643004,225.762041 413.558729,226.002864 C413.121943,223.94879 412.747556,222.188156 412.31077,220.134082 C408.83183,221.947333 405.849882,223.501548 402.370943,225.3148 C402.370943,225.3148 402.370943,225.3148 402.370943,225.3148 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Фигурная-скобка-{" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="525.230957" y="85">Фигурная скобка {</tspan>
<tspan x="477.153809" y="104">на той же строке, через пробел</tspan>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 123 KiB

After

Width:  |  Height:  |  Size: 124 KiB

Before After
Before After

6
1-js/4-data-structures/3-string/article.md
View file

@ -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` существует по историческим причинам, ведь квадратные скобки -- проще и короче.

1
1-js/7-js-misc/2-json/article.md
View file

@ -335,7 +335,6 @@ alert( str );
<ul>
<li>JSON -- формат для представления объектов (и не только) в виде строки.</li>
<li>Методы [JSON.parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) и [JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) позволяют интеллектуально преобразовать объект в строку и обратно.</li>
<li>Для IE7- можно подключить библиотеку [json2](https://github.com/douglascrockford/JSON-js/blob/master/json2.js).</li>
</ul>

4
1-js/7-js-misc/4-eval/article.md
View file

@ -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]

7
12-extra/5-setImmediate/article.md
View file

@ -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` в тех браузерах, где его нет.
## Тест производительности

13
12-extra/5-setImmediate/setImmediate.view/setImmediate.js
View file

@ -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, "*");
};
}());

2
2-ui/1-document/15-metrics/cssWidthScroll.view/index.html
View file

@ -13,7 +13,7 @@
</div>
<script>
// FF: 200, Ch/Sa: 184, Op: 200, IE9: 184, IE7,8:200
// FF: 200, Ch/Sa: 184, Op: 200, IE9: 184, IE8:200
</script>
У элемента стоит <code>style="width:300px"</code>

2
2-ui/1-document/19-dom-cheatsheet/article.md
View file

@ -96,7 +96,7 @@
<dd>По классу, IE9+, корректно работает с элементами, у которых несколько классов.</dd>
</dl>
Если не нужно поддерживать IE7-, то можно использовать только `querySelector/querySelectorAll`. Методы `getElement*` работают быстрее (за счёт более оптимальной внутренней реализации), но в 99% случаев это различие очень небольшое и роли не играет.
Вообще, обычно можно использовать только `querySelector/querySelectorAll`. Методы `getElement*` работают быстрее (за счёт более оптимальной внутренней реализации), но в 99% случаев это различие очень небольшое и роли не играет.
Дополнительно есть методы:
<dl>

6
2-ui/1-document/5-searching-elements-dom/article.md
View file

@ -355,17 +355,17 @@ IE тоже поддерживает XPath, но эта поддержка не
<td>`querySelector`</td>
<td>CSS-селектор</td>
<td>✔</td>
<td>кроме IE7-</td>
<td>везде</td>
</tr>
<tr>
<td>`querySelectorAll`</td>
<td>CSS-селектор</td>
<td>✔</td>
<td>кроме IE7-</td>
<td>везде</td>
</tr>
</table>
Если браузеры IE7- не нужны, то в 95% ситуаций достаточно и одного `querySelector(All)`.
Практика показывает, что в 95% ситуаций достаточно `querySelector/querySelectorAll`. Хотя более специализированные методы `getElement*` работают чуть быстрее, но разница в миллисекунду-другую редко играет роль.
Кроме того:
<ul>

2
2-ui/1-document/8-dom-polyfill/article.md
View file

@ -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]

29
2-ui/1-document/9-attributes-and-custom-properties/article.md
View file

@ -473,12 +473,13 @@ div.classList.add('order-state-canceled');
```
## "Особенности" IE8-
## "Особенности" IE8
Если вам нужна поддержка этих версий IE -- есть пара нюансов.
Если вам нужна поддержка этих версий IE -- ознакомьтесь с их проблемами. Ничего критичного, но они, всё же, есть.
<ol>
<li>Во-первых, версии IE8- синхронизируют <u>все</u> свойства и атрибуты, а не только стандартные:
<li>Во-первых, версии IE8- синхронизируют все свойства и атрибуты, а не только стандартные:
```js
//+ run
@ -489,31 +490,11 @@ alert( document.body.my ); // 123 в IE8-
При этом даже тип данных не меняется. Атрибут не становится строкой, как ему положено.
</li>
<li>Во-вторых, в IE7- (или в IE8 в режиме совместимости с IE7) свойства и атрибуты -- одно и то же.
Поэтому возникают забавные казусы.
Например, названия свойств регистрозависимы, а названия атрибутов -- нет. Что будет если два свойства имеют одинаковое имя в разном регистре? Как поведет себя соответствующий атрибут?
```js
//+ run
document.body.abba = 1; // задаем свойство
document.body.ABBA = 5; // задаем свойство, теперь уже прописными буквами
// запрашиваем атрибут в *!*смешаном*/!* регистре
alert( document.body.getAttribute('AbBa') ); // что должен вернуть браузер?
```
Браузер выходит из ситуации, возвращая первое назначенное свойство(`abba`). Также, в IE8- существует второй параметр для `getAttribute`, который делает его чувствительным к регистру. Подробнее тут:<a href="http://msdn.microsoft.com/en-us/library/ms536429(v=vs.85).aspx">MSDN getAttribute</a>.
</li>
<li>Ещё одна некорректность IE8-: для изменения класса нужно использовать именно свойство `className/classList`, вызов `setAttribute('class', ...)` не сработает.</li>
<li>Ещё одна некорректность IE8-: для изменения класса нужно использовать именно свойство `className`, вызов `setAttribute('class', ...)` не сработает.</li>
</ol>
Вывод из этого довольно прост -- чтобы не иметь проблем в IE8, нужно использовать всегда только свойства, кроме тех ситуаций, когда нужны именно атрибуты. Впрочем, это в любом случае хорошая практика.
А для IE7- тонких различий между свойствами и атрибутами, о которых мы говорили выше, нет. Впрочем, надеюсь, вам эти версии IE поддерживать не придётся.
## Итого
<ul>

2
2-ui/4-forms-controls/2-focus-blur/article.md
View file

@ -247,7 +247,7 @@ age.onblur = function() {
У них две особенности:
<ul>
<li>Не поддерживаются Firefox, хотя поддерживаются даже IE6+.</li>
<li>Не поддерживаются Firefox, хотя поддерживаются даже старейшими IE.</li>
<li>Во всех браузерах, кроме IE, должны быть назначены не через `on`-свойство, а при помощи `elem.addEventListener`.</li>
</ul>

2
4-ajax/12-ajax-iframe/article.md
View file

@ -2,7 +2,7 @@
Эта глава посвящена `IFRAME` -- самому древнему и кросс-браузерному способу AJAX-запросов.
Сейчас он используется, разве что, для поддержки кросс-доменных запросов в IE7- и для COMET в IE9-.
Сейчас он используется, разве что, для поддержки кросс-доменных запросов в IE7- и, что чуть более актуально, для реализации COMET в IE9-.
Для общения с сервером создается невидимый `IFRAME`. В него отправляются данные, и в него же сервер пишет ответ.

2
6-optimize/1-memory-leaks/article.md
View file

@ -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);

14
8-css-for-js/12-space-under-img/article.md
View file

@ -16,12 +16,12 @@
</table>
```
[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 @@
</table>
```
[iframe src="block"]
[iframe src="block" height=80]
Под блочным элементом ничего не резервируется. Проблема исчезла.
@ -75,17 +75,17 @@
</table>
```
[iframe src="valign"]
[iframe src="valign" height=80]
А вот, как браузер отобразит соседние символы в этом случае: `p<img src="square.png">p`
[iframe src="valign-p"]
[iframe src="valign-p" height=80]
С другой стороны, сама строка никуда не делась, изображение по-прежнему является её частью, а браузер планирует разместить другое текстовое содержимое рядом, хоть и сверху. Поэтому если изображение маленькое, то произойдёт дополнение пустым местом до высоты строки:
Например, для `<img src="square.png" style="height:10px">`:
[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]
## Итого

2
8-css-for-js/15-css-selectors/article.md
View file

@ -245,8 +245,6 @@ li::after {
Стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. А для IE8 нужно по-прежнему одно.
Поэтому если вам важна поддержка IE8, то имеет смысл использовать одно двоеточие.
Версии IE7- не понимают этих селекторов.
[/smart]
## Практика

46
8-css-for-js/16-css-no-ie6/article.md
View file

@ -1,46 +0,0 @@
# CSS без IE6(7)
CSS-возможности, которыми мы можем пользоваться, если НЕ поддерживаем IE6.
[cut]
<dl>
<dt>Селекторы атрибутов:</dt>
<dd>
<ul>
<li>`[attr]` -- атрибут установлен,</li>
<li>`[attr="val"]` -- атрибут равен `val`,</li>
<li>`[attr^="val"]` -- атрибут начинается с `val`, например `"value"`.</li>
<li>`[attr*="val"]` -- атрибут содержит `val`, например равен `"myvalue"`.</li>
<li>`[attr$="val"]` -- атрибут заканчивается на `val`, например равен `"myval"`.</li>
<li>`[attr~="val"]` -- атрибут содержит `val` как одно из значений через пробел, например: `[data-actions~="edit"]` верно для значения `data-actions="edit delete"`.</li>
<li>`[attr|="val"]` -- атрибут равен `val` *или* начинается с `val-`, например равен `"val-1"`.</li>
</ul>
</dd>
<dt>Селекторы элементов:</dt>
<dd>
<ul>
<li>`ul > li` -- непосредственный потомок,</li>
<li>`.prev + .me` -- выбирает `.me`, которые стоят сразу после `.prev`, т.е. "правый брат".</li>
<li>`.prev ~ .me` -- выбирает `.me`, которые стоят после `.prev`, но не обязательно сразу после, между ними могут быть другие элементы,</li>
<li>`.a.b` -- несколько классов одновременно,</li>
<li>`:hover` -- курсор над элементом (в IE6 работает только с `A`),
<li>`:first-child` -- первый потомок в своём родителе.</li>
</ul>
Внимание, IE7 не пересчитывает стили при изменении окружающих элементов для селекторов `.prev + .me`, `.prev` и `:first-child`. Иными словами, не обновляет стиль при добавлении/удалении соседей через JavaScript.
</dd>
<dt>Свойства: </dt>
<dd>
<ul>
<li>`min-width/min-height` -- минимальная ширина/высота</li>
<li>`max-width/max-height` -- максимальная ширина/высота</li>
<li>`position: fixed`</li>
</ul>
</dd>
</dl>
Здесь перечислены в основном возможности. Разумеется, была поправлена и масса багов.
При отказе от поддержки IE7, и, тем более, IE8, список ещё шире и включает в себя почти весь CSS 2.1.

2
8-css-for-js/2-css-units/article.md
View file

@ -81,7 +81,7 @@
Размер шрифта -- это некоторая "условная единица", которая встроена в шрифт.
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание.
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом "хвосты" букв, таких как `р`, `g` могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
[/smart]
[smart header="Единицы `ex` и `ch`"]

30
8-css-for-js/5-position/article.md
View file

@ -1,4 +1,4 @@
# Свойство "position" [todo]
# Свойство "position"
Свойство `position` позволяет сдвигать элемент со своего обычного места. Цель этой главы -- не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.
[cut]
@ -18,10 +18,10 @@ position: static;
```html
<!--+ autorun height=200 -->
<div style="background: #aef; width: 500px">
<div style="background: #fee; width: 500px">
Без позиционирования ("position: static").
<h2 style="background: #fee; margin: 0">Заголовок</h2>
<h2 style="background: #aef; margin: 0">Заголовок</h2>
<div>А тут - всякий разный текст... <br/>
... В две строки!</div>
@ -61,10 +61,10 @@ top: 10px;
</style>
*/!*
<div style="background: #aef; width: 500px">
<div style="background: #fee; width: 500px">
Заголовок сдвинут на 10px вниз.
<h2 style="background: #fee; margin: 0;">Заголовок</h2>
<h2 style="background: #aef; margin: 0;">Заголовок</h2>
<div>А тут - всякий разный текст... <br/>
... В две строки!</div>
@ -97,10 +97,10 @@ top: 10px;
</style>
*/!*
<div style="background: #aef; width: 500px">
<div style="background: #fee; width: 500px">
Заголовок сдвинут на 10% влево.
<h2 style="background: #fee; margin: 0;">Заголовок</h2>
<h2 style="background: #aef; margin: 0;">Заголовок</h2>
<div>А тут - всякий разный текст... <br/>
... В две строки!</div>
@ -143,10 +143,10 @@ position: absolute;
</style>
*/!*
<div style="background: #aef; width: 500px">
<div style="background: #fee; width: 500px">
Заголовок в правом-верхнем углу документа.
<h2 style="background: #fee; margin: 0;">Заголовок</h2>
<h2 style="background: #aef; margin: 0;">Заголовок</h2>
<div>А тут - всякий разный текст... <br/>
... В две строки!</div>
@ -165,7 +165,7 @@ position: absolute;
**В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.**
Браузер растянет такой элемент до границ. Работает везде, кроме IE6:
Браузер растянет такой элемент до границ.
```html
<!--+ autorun height=50 -->
@ -218,7 +218,7 @@ div {
right: 0; bottom: 0; /* ..указанием противоположных границ */
}
```
С виду логично, но нет, не получится!
Координаты `top/right/left/bottom` вычисляются относительно *окна*. Значение `bottom: 0` -- нижняя граница окна, а не документа, блок растянется до неё. То есть, будет то же самое, что и в предыдущем примере.
@ -244,10 +244,10 @@ div {
</style>
*/!*
<div style="background: #aef; width: 500px; *!*position: relative*/!*">
<div style="background: #fee; width: 500px; *!*position: relative*/!*">
Заголовок в правом-верхнем углу DIV'а.
<h2 style="background: #fee; margin: 0;">Заголовок</h2>
<h2 style="background: #aef; margin: 0;">Заголовок</h2>
<div>А тут - всякий разный текст... <br/>
... В две строки!</div>
@ -330,8 +330,6 @@ position: fixed;
<p>Много строк..</p><p>Много строк..</p>
```
Поддерживается во всех современных браузерах, в IE начиная с версии 7. Для реализации аналогичного функционала в IE6 используют CSS-выражения.
## Итого
@ -355,7 +353,7 @@ position: fixed;
<ul>
<li>Ширина элемента по умолчанию устанавливается по содержимому.</li>
<li>Можно указать противположные границы `left/right` (`top/bottom`). Элемент растянется. Возможность не поддерживается в IE7-.</li>
<li>Можно указать противположные границы `left/right` (`top/bottom`). Элемент растянется.</li>
<li>Окружающие элементы заполняют освободившееся место.</li>
</ul>
</li>

9
8-css-for-js/6-css-center/article.md
View file

@ -40,23 +40,20 @@
</div>
```
Впрочем, в примере выше блок будет центрирован в IE6,7 (это отклонение от стандарта).
### margin: auto
Для всех браузеров, кроме IE6,7, блок по горизонтали центрируется `margin: auto`.:
Блок по горизонтали центрируется `margin: auto`:
```html
<!--+ autorun height=50 -->
<style>
.outer {
*!*text-align: center;*/!* /* Для IE7- */
border: 1px solid blue;
}
.inner {
width: 100px;
border: 1px solid red;
*!*margin: auto;*/!* /* Для IE8+ и других браузеров */
*!*margin: auto;*/!*
}
</style>
@ -390,7 +387,7 @@
Для горизонтального центрирования:
<ul>
<li>`text-align: center` -- центрирует инлайн-элементы в блоке. В IE7- центрирует всё, но это нестандартное поведение.</li>
<li>`text-align: center` -- центрирует инлайн-элементы в блоке.</li>
<li>`margin: 0 auto` -- центрирует блок внутри родителя. У блока должна быть указана ширина.</li>
</ul>

22
8-css-for-js/7-font-size-line-height/article.md
View file

@ -8,7 +8,7 @@
<li>`line-height` -- *высота строки*.</li>
</ul>
Сделаем HTML, в котором шрифт и размер строки одинаковы:
Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:
```html
<!--+ autorun height=100 -->
@ -17,22 +17,28 @@ body {
*!*
font-size: 30px;
font-family: monospace;
line-height: 1em; /* 1em = размер шрифта = 30px */
line-height: 30px;
*/!*
}
</style>
<div style="outline: 1px dotted red">Ёрш</div>
<div style="outline: 1px dotted red">Ёрш</div>
<div style="outline: 1px dotted red">Ёрш р</div>
<div style="outline: 1px dotted red">Ёрш Ё</div>
```
**Как видно из примера,`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 {
<ul>
<li>**Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.**
То есть, при `line-height: 2` означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
</li>
<li>**Значение, заданное в единицах измерения, запоминается и наследуется "как есть".**
Это означает, что `line-height: 32px` будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.</li>
</ul>

33
8-css-for-js/8-white-space/article.md
View file

@ -8,7 +8,7 @@
<li>`white-space: pre` -- текст ведёт себя, как будто оформлен в тег `pre`.</li>
</ul>
Но браузеры поддерживают ещё 3, два из которых -- только в IE8+ и очень полезны.
Но браузеры поддерживают и другие, которые также бывают очень полезны.
[cut]
## pre / nowrap
@ -19,19 +19,19 @@
**`pre`**:
<ul>
<li>**сохраняет пробелы**</li>
<li>**переносит текст при явном разрыве строки.**</li>
<li>Сохраняет пробелы.</li>
<li>Переносит текст при явном разрыве строки.</li>
</ul>
**`nowrap`**
<ul>
<li>**не сохраняет пробелы**</li>
<li>**игнорирует явные разрывы строки (не переносит текст).**</li>
<li>Не сохраняет пробелы.</li>
<li>Игнорирует явные разрывы строки (не переносит текст).</li>
</ul>
Оба этих значения поддерживаются кросс-браузерно.
**Их основной недостаток -- текст вылезает из контейнера.**
**Их основной недостаток -- текст может вылезти из контейнера.**
Для примера, рассмотрим следующий фрагмент кода:
@ -45,7 +45,7 @@ if (hours > 18) {
<li>**`white-space: pre`:**
[pre]
<div class="example" style="white-space:pre">if (hours > 18) {
<div class="white-space-example" style="white-space:pre">if (hours > 18) {
// Пойти поиграть в теннис
}
</div>
@ -56,7 +56,7 @@ if (hours > 18) {
<li>**`white-space: nowrap`:**
[pre]
<div class="example" style="white-space:nowrap">if (hours > 18) {
<div class="white-space-example" style="white-space:nowrap">if (hours > 18) {
// Пойти поиграть в теннис
}
</div>
@ -68,14 +68,12 @@ if (hours > 18) {
Допустим, мы хотим разрешить посетителям публиковать код на сайте, с сохранением разметки. Но тег `PRE` и описанные выше значения `white-space` для этого не подойдут!
Злой Василий Пупкин может написать такой текст, который вылезет из контейнера и поломает вёрстку страницы.
Злой посетитель Василий Пупкин может написать такой текст, который вылезет из контейнера и поломает вёрстку страницы.
Можно скрыть вылезшее значение при помощи `overflow-x: hidden` или сделать так, чтобы была горизонтальная прокрутка, но, к счастью, есть другие значения `white-space`, специально для таких случаев.
## pre-wrap/pre-line
Эти значения не поддерживаются в IE7-.
<dl>
<dt>`pre-wrap`</dt>
<dd>То же самое, что `pre`, но переводит строку, если текст вылезает из контейнера.</dd>
@ -89,7 +87,7 @@ if (hours > 18) {
<li>**`white-space: pre-wrap`:**
[pre]
<div class="example" style="white-space:pre-wrap">if (hours > 18) {
<div class="white-space-example" style="white-space:pre-wrap">if (hours > 18) {
// Пойти поиграть в теннис
}
</div>
@ -100,7 +98,7 @@ if (hours > 18) {
<li>**`white-space: pre-line`:**
[pre]
<div class="example" style="white-space:pre-line">if (hours > 18) {
<div class="white-space-example" style="white-space:pre-line">if (hours > 18) {
// Пойти поиграть в теннис
}
</div>
@ -110,13 +108,14 @@ if (hours > 18) {
</li>
</ul>
Никто не мешает использовать эти значения на сайте, а для IE7- игнорировать проблему или задавать контейнеру `overflow-x: hidden`.
Целесообразно использовать эти значения на сайте там, где текст пишется пользователями.
[head]
<style>
/* not in HEAD, because of export */
.example {
.white-space-example {
font-family: monospace;
width: 200px;
border: 1px solid black;
}
</style>
</style>
[/head]