Небольшой обзор полезных качеств некоторых 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.
4 комментария
10 полезных кроссбраузерных свойств CSS…
Thank you for submitting this cool story — Trackback from progg.ru…
Спасибо, доступно и понятно… побольше бы таких советов «бывалых», а то ведь всё и во всех браузерах неиспробуещь…
все я твой блог полюбил=) хорошо что случаной нашел его. пиши попобльше про css
про White-Space нашел только у тебя 🙂 по сочитанию непереносимая строка 😉