renovations
This commit is contained in:
Ilya Kantor
parent
6444024a9d
commit
fad6615c42
22 changed files with 94 additions and 161 deletions
|
|
@ -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]
|
||||
|
||||
## Итого
|
||||
|
||||
|
|
|
|||
|
|
@ -245,8 +245,6 @@ li::after {
|
|||
Стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. А для IE8 нужно по-прежнему одно.
|
||||
|
||||
Поэтому если вам важна поддержка IE8, то имеет смысл использовать одно двоеточие.
|
||||
|
||||
Версии IE7- не понимают этих селекторов.
|
||||
[/smart]
|
||||
|
||||
## Практика
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
|
||||
Размер шрифта -- это некоторая "условная единица", которая встроена в шрифт.
|
||||
|
||||
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание.
|
||||
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом "хвосты" букв, таких как `р`, `g` могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
|
||||
[/smart]
|
||||
|
||||
[smart header="Единицы `ex` и `ch`"]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
Loading…
Add table
Add a link
Reference in a new issue