Объем свойств CSS позволяет легко забыть те, которые не используются каждый день. Вот список из 5 полезных, но редко используемых свойств CSS, которые работают во всех современных браузерах…
1. Использование заглавных букв с text-transform
Это свойство изменяет, как текстовое содержимое HTML-элемента пишется с большой буквы. Это может быть очень полезно, когда ваш отдел дизайна вносит изменения в заглавные буквы в последнюю минуту, и это проще, чем перекодировать ваш HTML. Основными ценностями являются:
- Прописать: делает первый символ в каждом слове заглавными
- нижний регистр: переводит все символы в нижний регистр
- Прописные буквы: ИЗМЕНЯЕТ ВСЕ ПЕРСОНАЖИ ВЕРХНИЙ
- нет: капитализация не меняется
Большинство браузеров ведут себя хорошо, хотя IE может установить «none», если для font-variant установлено значение «small-caps».
2. Текстовые letter-spacing и word-spacing
Сохранение текста вашей страницы в формате HTML облегчает обслуживание и улучшает SEO. Простые текстовые эффекты могут быть реализованы без графики, используя letter-spacing чтобы уменьшить или увеличить межсимвольный интервал на фиксированную величину (px, em, ex,% и т. Д.), Например
h2 { letter-spacing: 0.1em; }
Широко разнесенный заголовок H2 (0.1em)
Титульный титул H2 (-0.1em)
расстояние между словами аналогично, за исключением того, что оно влияет на расстояние между словами, а не на символы.
3. Отступ с text-indent
text-indent определяет левый отступ первой строки в блоке текста (или правый отступ, если direction установлено в «rtl»), например
p { text-indent: 10px; }
Это свойство часто кажется избыточным, потому что подобные эффекты могут быть достигнуты с padding . Однако text-indent не влияет на ширину элемента, поэтому он может быть полезен в ситуациях, таких как IE-совместимые меню, когда весь блок является интерактивным, например
ul#menu li a { display: block; width: 100%; /* IE hasLayout applied */ text-indent: 10px; }
4. Фиксация ширины table-layout
Таблицы все еще требуются для табличных данных, но стилизация ширины столбцов может быть затруднена, если в браузере по умолчанию для table-layout «auto». Автоматический алгоритм может переопределить указанную ширину таблицы, если текст ячейки требует больше места.
Установка «фиксированного» table-layout заставляет браузер придерживаться указанной вами ширины таблицы. Полную информацию об алгоритмах можно найти на странице форматирования справочной таблицы SitePoint CSS .
5. Альтернативные варианты использования white-space
white-space определяет, как браузер отображает пробел в вашем HTML. Кросс-браузерная поддержка неоднозначна, но следующие свойства работают последовательно:
- нормальный: пробел сворачивается в один символ и разрывы строк происходят там, где это необходимо
- nowrap: пробелы сворачиваются в один символ, но разрывы строк подавляются
- pre: пробелы не будут разрушаться, и строки будут разбиваться только на новых строках в HTML
white-space необходим при представлении фрагментов кода, но есть и другие ситуации, когда он может быть полезен. Например, у нас есть таблица с table-layout установленной на «fixed»:
Стол фиксированной ширины с различной высотой строки
Однако мы бы предпочли, чтобы высота всех строк была согласованной, а длинный текст обрезался (возможно, потому, что мы реализуем всплывающую подсказку JS, чтобы в полной мере продемонстрировать навыки). Установка height CSS для элементов tr или td не работает, но вместо этого мы можем использовать white-space , например:
td { white-space: nowrap; /* suppress line breaks */ overflow: hidden; /* crop the text */ }
Строки таблицы с одинаковой высотой и обрезанным текстом
Смотрите также:
- 5 самых малоиспользуемых тегов HTML
- 10 исправлений, которые решают проблемы IE6
- Проект Opera MAMA (поисковая система структуры веб-страниц)
Я пропустил ваш любимый редко используемый CSS?