10 полезных кроссбраузерных свойств CSS.

Небольшой обзор полезных качеств некоторых CSS свойств

1.Overflow

Его итак все знают. Включает прокрутку, если содержимое не влазиет в блок. Однако есть у него замечательное качество — данное свойство может растянуть блок без обтекания(float).

Проблемы иногда бывают в огнелисе — элементы сжаты по высоте, для исправления нужно выставлять обтекание. Обтекание может принести проблем при auto высоте или при естесственно отпозиционированных элементов.

Таким образом, используя overflow:hidden; для блочных элементов, можно растянуть элемент по высоте без выставления обтекания.

2. Visibility

Использование visibility: hidden легко заменяется display: none, но между ними есть важная разница. 99% случаев, когда вы хотите спрятать элемент на странице, вы используете display: none.

Использование display: none убирает также место, занимаемое “невидимым” элементом, вместе с ним самим. Только иногда это совсем не нужно.

Чтобы оставить место, которое занимает удаленный элемент, например чтобы отобразить там другой элемент вместо него, используют visibility: hidden.

Подытоживая, display: none затронет расположение (и позиционирование относительно друг друга) элементов; visibility: hidden нет.

3. White-Space

Сделать строку «непереносимой», т.е. независимо от ширины строка не будет разбиваться на две очень просто — white-space: nowrap.

Для небольших надписей в меню это очень хороший вариант. Только надо аккуратно использовать в абзацах, у которых есть ширина, потому что строка может потянуть ширину и все поползет.

4. Font-Variant

Для управления регистром текста часто используют свойство text-transform. При помощи него выставляют регистры текста, верхний и нижний. Этого достаточно, но иногда нужно выставить особые свойства только для первой буквы в слове (не буквицу!) и вот тут используют “small-caps«.

5. Letter-Spacing

Регулирует расстояние между буквами, про вкусности, которые можно сделать при помощи данное свойства писал в посте про типографику.

Это свойство не имеет абсолютной величины. Оно расчитывается из уже заданного имеющегося значения, причем может быть и в плюсе и в минусе. Таким образом, можно слегка увеличить/уменьшить блок с текстом, не меняя свойств самого блока.

6. Z-Index

Головомойный элемент. Применяется для указания, какой блок перекрывает какой. Или попросту — какой блок лежит выше а какой ниже. Если указать блоку z-index:999, то он перекроет все блоки, если -999, то он будет подо всеми остальными блоками.

Но чтобы элемент с указанным z-index не нарушал структуру страницы, его надо еще отпозиционировать его как relative, absolute, или fixed и выставить индексы для других элементов страницы.

Вкратце: z-index работает только с отпозиционированными элементами, поэтому используя его для определения порядка наложения позиционируйте остальные элементы.

7. Border-Collapse

Если нужно вывести таблицу с расстоянием между ячейками и границей, можно получить сдвоенную границу, потому что border:2px будет считаться отдельно для каждой ячейки.

Свойство border-collapse: collapse выставит заданную толщину границы и заданное расстояние между ячейками не дублируя их

8. Background-Attachment

Определяет, прокручивать ли фоновую картинку или нет. Пример с CSS Garden

9. Text-Indent

Частенько применяется для «отталкивания» текста от левого края при добавлении изображения перед текстом, например в списках или в ссылках.
Польза от него в том, что текст, отформатированный таким образом также форматируется при печати.

10. Font-Weight / Font-Style

Применение данных свойств знают итак, но для ровного числа и для просто так я напомню.
Используются для указания написания и жирности текста. Вместо них могут быть использованы теги strong и em, что будет еще и плюсом в плане SEO.
Однако, если не преследуется задача увеличения веса слов в глаза ПС, то этими свойствами можно выделить любой строчный элемент без изменения самого кода HTML.

Вольный перевод данной статьи

3.33 avg. rating (70% score) - 3 votes

4 комментария

  • 10 полезных кроссбраузерных свойств CSS…

    Thank you for submitting this cool story — Trackback from progg.ru…

  • Спасибо, доступно и понятно… побольше бы таких советов «бывалых», а то ведь всё и во всех браузерах неиспробуещь…

  • все я твой блог полюбил=) хорошо что случаной нашел его. пиши попобльше про css

  • про White-Space нашел только у тебя 🙂 по сочитанию непереносимая строка 😉

css.php