css-for-js

Author: iliakan

20-css-for-js/1-css-why/article.md

@@ -0,0 +1,61 @@
+# О чём пойдёт речь
+
+Неужели мы сейчас будем учить CSS? Ничего подобного. Предполагается, что вы *уже* знаете CSS, во всяком случае понимаете его на таком уровне, который позволяет делать Web-страницы.
+
+Особенность квалификации JavaScript-разработчика заключается в том, что он не обязан выбирать цвета, рисовать иконки, "делать красиво". Он также не обязан верстать макет в HTML, разве что если является по совместительству специалистом-верстальщиком.
+
+**Вот что он должен уметь абсолютно точно -- так это и разработать такую структуру HTML/CSS для элементов управления, которая не сломается, и с которой ему же потом удобно будет взаимодействовать**.
+
+Это требует отличного знания CSS в области позиционирования элементов, включая тонкости работы `display`, `margin`, `border`, `outline`, `position`, `float`, `border-box` и остальных свойств, а также подходы к построению структуры компонент (CSS layouts).
+
+Многое можно сделать при помощи JavaScript. И зачастую, не зная CSS, так и делают. Но мы на это ловиться не будем.
+
+```summary
+Если что-то можно сделать через CSS -- лучше делать это через CSS.
+```
+
+Причина проста -- обычно, даже если CSS на вид сложнее -- поддерживать и развивать его проще, чем JS. Поэтому овчинка стоит выделки.
+
+Кроме того, есть ещё одно наблюдение.
+
+```summary
+Знание JavaScript не может заменить знание CSS.
+```
+
+Жить становится приятнее и проще, если есть хорошее знание и CSS, и JavaScript.
+
+## Чек-лист
+
+Ниже находится "чек-лист". Если хоть одно свойство незнакомо -- это стоп-сигнал для дальнейшего чтения этого раздела.
+
+- Блочная модель, включая:
+    - `margin`, `padding`, `border`, `overflow`
+    - а также `height/width` и `min-height/min-width`.
+- Текст:
+    - `font`
+    - `line-height`.
+- Различные курсоры `cursor`.
+- Позиционирование:
+    - `position`, `float`, `clear`, `display`, `visibility`
+    - Центрирование при помощи CSS
+    - Перекрытие `z-index` и прозрачность `opacity`
+- Селекторы:
+    - Приоритет селекторов
+    - Селекторы `#id`, `.class`, `a > b`
+
+- Сброс браузерных стилей, <a href="http://meyerweb.com/eric/tools/css/reset/">reset.css</a>
+
+## Почитать
+
+Книжек много, но хороших -- как всегда, мало.
+
+С уверенностью могу рекомендовать следующие:
+
+- <a href="http://www.ozon.ru/context/detail/id/24493075/?partner=iliakan">Большая книга CSS3.</a>
+<i>Дэвид Макфарланд.</i>
+- <a href="http://www.ozon.ru/context/detail/id/3881079/?partner=iliakan">CSS. Каскадные таблицы стилей. Подробное руководство.</a>
+<i>Эрик Мейер</i>
+
+Дальнейшие статьи раздела не являются *учебником* CSS, поэтому пожалуйста, изучите эту технологию до них.
+
+Это очерки для лучшей систематизации и дополнения уже существующих знаний.

20-css-for-js/10-box-sizing/article.md

@@ -0,0 +1,184 @@
+# Свойство "box-sizing"
+
+Свойство `box-sizing` может принимать одно из двух значений -- `border-box` или `content-box`. В зависимости от выбранного значения браузер по-разному трактует значение свойств `width/height`.
+
+## Значения box-sizing
+
+`content-box`
+: Это значение по умолчанию. В этом случае свойства `width/height` обозначают то, что находится *внутри `padding`*.
+
+`border-box`
+: Значения `width/height` задают высоту/ширину *всего элемента*.
+
+Для большей наглядности посмотрим на картинку этого `div` в зависимости от `box-sizing`:
+
+```css
+/*+ no-beautify */
+div {
+  width: 200px;
+  height: 100px;
+*!*
+  box-sizing: border-box (вверху) | content-box (внизу);
+*/!*
+
+  padding: 20px;
+  border:5px solid brown;
+}
+```
+
+![](border-box.png)
+
+В верхнем случае браузер нарисовал весь элемент размером в `width x height`, в нижнем -- интерпретировал `width/height` как размеры внутренней области.
+
+Исторически сложилось так, что по умолчанию принят `content-box`, а `border-box` некоторые браузеры используют если не указан `DOCTYPE`, в режиме совместимости.
+
+Но есть как минимум один случай, когда явное указание `border-box` может быть полезно: растягивание элемента до ширины родителя.
+
+## Пример: подстроить ширину к родителю
+
+Задача: подогнать элемент по ширине внешнего элемента, чтобы он заполнял всё его пространство. Без привязки к конкретному размеру элемента в пикселях.
+
+Например, мы хотим, чтобы элементы формы ниже были одинакового размера:
+
+```html autorun
+<style>
+  form {
+    width: 200px;
+    border: 2px solid green;
+  }
+
+  form input,
+  form select {
+    display: block;
+    padding-left: 5px;
+    /* padding для красоты */
+  }
+</style>
+
+<form>
+*!*
+  <input>
+  <input>
+  <select>
+    <option>опции</option>
+  </select>
+*/!*
+</form>
+```
+
+Как сделать, чтобы элементы растянулись чётко по ширине `FORM`? Попробуйте добиться этого самостоятельно, перед тем как читать дальше.
+
+### Попытка width:100%
+
+Первое, что приходит в голову -- поставить всем `INPUT'ам` ширину `width: 100%`.
+
+Попробуем:
+
+```html autorun height=100 no-beautify
+<style>
+  form {
+    width: 200px;
+    border: 2px solid green;
+  }
+
+  form input, form select {
+    display: block;
+    padding-left: 5px;
+*!*
+    width: 100%;
+*/!*
+  }
+</style>
+
+<form>
+  <input>
+  <input>
+  <select><option>опции</option></select>
+</form>
+```
+
+Как видно, не получается. **Элементы вылезают за пределы родителя.**
+
+**Причина -- ширина элемента 100% по умолчанию относится к внутренней области, не включающей `padding` и `border`.** То есть, внутренняя область растягивается до `100%` родителя, и к ней снаружи прибавляются `padding/border`, которые и вылезают.
+
+Есть два решения этой проблемы.
+
+### Решение: дополнительный элемент
+
+Можно убрать `padding/border` у элементов `INPUT/SELECT` и завернуть каждый из них в дополнительный `DIV`, который будет обеспечивать дизайн:
+
+```html autorun height=100
+<style>
+  form {
+    width: 200px;
+    border: 2px solid green;
+  }
+  /* убрать padding/border */
+
+  form input,
+  form select {
+    padding: 0;
+    border: 0;
+    width: 100%;
+  }
+  /* внешний div даст дизайн */
+
+  form div {
+    padding-left: 5px;
+    border: 1px solid black;
+  }
+</style>
+
+<form>
+  <div>
+    <input>
+  </div>
+  <div>
+    <input>
+  </div>
+  <div>
+    <select>
+      <option>опции</option>
+    </select>
+  </div>
+</form>
+```
+
+В принципе, это работает. Но нужны дополнительные элементы. А если мы делаем дерево или большую редактируемую таблицу, да и вообще -- любой интерфейс, где элементов и так много, то лишние нам точно не нужны.
+
+Кроме того, такое решение заставляет пожертвовать встроенным в браузер дизайном элементов `INPUT/SELECT`.
+
+### Решение: box-sizing
+
+Существует другой способ, гораздо более естественный, чем предыдущий.
+
+**При помощи `box-sizing: border-box` мы можем сказать браузеру, что ширина, которую мы ставим, относится к элементу полностью, включая `border` и `padding`**:
+
+```html autorun height=100 no-beautify
+<style>
+  form {
+    width: 200px;
+    border: 2px solid green;
+  }
+
+  form input, form select {
+    display: block;
+    padding-left: 5px;
+*!*
+    -moz-box-sizing: border-box; /* в Firefox нужен префикс */
+    box-sizing: border-box;
+    width: 100%;
+*/!*
+  }
+</style>
+
+<form>
+  <input>
+  <input>
+  <select><option>опции</option></select>
+</form>
+```
+
+Мы сохранили "родную" рамку вокруг `INPUT/SELECT` и не добавили лишних элементов. Всё замечательно.
+
+Свойство `box-sizing` поддерживается в IE начиная с версии 8.

20-css-for-js/10-box-sizing/border-box.png

@@ -0,0 +1,5 @@
+Ошибка заключается в том, что `margin` при задании в процентах высчитывается *относительно ширины*. Так написано [в стандарте](http://www.w3.org/TR/CSS2/box.html#margin-properties).
+
+При этом не важно, какой отступ: левый, правый. верхний или нижний. Все они в процентах отсчитываются от ширины. Из-за этого и ошибка.
+
+Ситуацию можно исправить, например, заданием `margin-top/margin-bottom` в пикселях, если это возможно или, в качестве альтернативы, использовать другие средства, в частности, `position` или `padding-top/padding-bottom` на родителе.

20-css-for-js/10-box-sizing/border-box@2x.png

@@ -0,0 +1,43 @@
+importance: 3
+
+---
+
+# Нерабочие margin?
+
+В примере ниже находится блок `.block` фиксированной высоты, а в нём -- прямоугольник `.spacer`.
+
+При помощи `margin-left: 20%` и `margin-right: 20%`, прямоугольник центрирован в родителе по горизонтали. Это работает.
+
+Далее делается попытка при помощи свойств `height: 80%`, `margin-top: 10%` и  `margin-bottom: 10%` расположить прямоугольник в центре по вертикали, чтобы сам элемент занимал `80%` высоты родителя, а сверху и снизу был одинаковый отступ.
+
+Однако, как видите, это не получается. Почему? Как поправить?
+
+```html autorun run no-beautify
+<style>
+  .block {
+    height: 150px;
+
+    border: 1px solid #CCC;
+    background: #eee;
+  }
+
+  .spacer {
+    margin-left: 20%;
+    margin-right: 20%;
+
+*!*
+    height: 80%;
+    margin-top: 10%;
+    margin-bottom: 10%;
+*/!*
+
+    border: 1px solid black;
+    background: #FFF;
+  }
+</style>
+
+<div class="block">
+  <div class="spacer"></div>
+</div>
+```
+

20-css-for-js/11-margin/1-failing-margins/solution.md

@@ -0,0 +1,28 @@
+# Подсказка
+Надвиньте элемент с текстом на `INPUT` при помощи отрицательного `margin`.
+
+# Решение
+
+Надвинем текст на `INPUT` при помощи отрицательного `margin-top`. Поднять следует на одну строку, т.е. на `1.25em`, можно для красоты чуть больше -- `1.3em`:
+
+Также нам понадобится обнулить "родной" `margin` у `INPUT`, чтобы не сбивал вычисления.
+
+```html run
+<style>
+  input {
+    *!*margin: 0;*/!*
+    width: 12em;
+  }
+
+  #placeholder {
+    color: red;
+*!*
+    margin: -1.3em 0 0 0.2em;
+*/!*
+  }
+</style>
+
+<input type="password" id="input">
+<div id="placeholder">Скажи пароль, друг</div>
+```
+

20-css-for-js/11-margin/1-failing-margins/task.md

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    input {
+      margin: 0;
+      width: 12em;
+    }
+    
+    #placeholder {
+      color: red;
+      margin: -1.3em 0 0 0.2em;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div>Добро пожаловать</div>
+  <input type="password" id="input">
+
+  <div id="placeholder">Скажи пароль, друг</div>
+
+  <div>.. и заходи</div>
+</body>
+
+</html>

20-css-for-js/11-margin/2-position-text-into-input/solution.md

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <div>Добро пожаловать</div>
+
+  <input type="password" id="input">
+
+  <div id="placeholder">Скажи пароль, друг</div>
+
+  <div>.. и заходи</div>
+
+</body>
+
+</html>

20-css-for-js/11-margin/2-position-text-into-input/solution.view/index.html

@@ -0,0 +1,15 @@
+importance: 5
+
+---
+
+# Расположить текст внутри INPUT
+
+Создайте `<input type="password">` с цветной подсказкой внутри (должен правильно выглядеть, не обязан работать):
+
+[iframe src="solution" height=90 border="1"]
+
+В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.
+
+P.S. Обратите внимание: `type="password"`! То есть, просто `value` использовать нельзя, будут звёздочки. Кроме того, подсказка, которую вы реализуете, может быть как угодно стилизована.
+
+P.P.S. Вокруг `INPUT` с подсказкой не должно быть лишних отступов, блоки до и после продолжают идти в обычном потоке.