Несколько малоизвестных возможностей CSS

В процессе работы с CSS я постоянно нахожу что-нибудь интересненькое, так что решил написать пост и поделиться своими знаниями с вами. Правда, учитывайте, что не всё, о чем будет рассказано, имеет непосредственное практическое значение, но, на всякий случ

Несколько малоизвестных возможностей CSS

» » Сообщение:

CSS - не очень сложный язык. Но даже если вы пишете таблицы стилей в течении многих лет, наверняка бывают моменты, когда вы узнаете еще что-нибудь новенькое: свойства или значения, которые вам не доводилось использовать, детали спецификации, о которых вы не имели понятия.

В процессе работы с CSS я постоянно нахожу что-нибудь интересненькое, так что решил написать пост и поделиться своими знаниями с вами. Правда, учитывайте, что не всё, о чем будет рассказано, имеет непосредственное практическое значение, но, на всякий случай, в хозяйстве пригодится.

color не только текст красит

Начнем, пожалуй, с простых вещей. Свойство color используется разработчиками постоянно. Те из вас, у кого не так много опыта работы с CSS, возможно, и не знали, что это свойство определяет не только цвет текста!

HTML

Код: Выделить всё Развернуть
<img alt="Example alt text" width="200" height="200">

<ul>
  <li>Example list item</li>
</ul>

<ol>
  <li>Example list item</li>
</ol>

<hr>

CSS

Код: Выделить всё Развернуть
body {
  color: yellow;
  background: #444;
  font-size: 20px;
  font-family: Arial, sans-serif;
  text-align: center;
}
ul {
  border: solid 2px;
  text-align: left;
}
ol {
  text-align: left;
}
hr {
  border-color: inherit;
}

Обратите внимание, что в CSS свойство color:yellow используется лишь раз применительно к элементу body. Как видите, всё окрасилось в желтый цвет:

  • Альтернативный текст на месте отсутствующего изображения
  • Рамка у элементов списка
  • Маркер ненумерованного списка
  • Номер упорядоченного списка
  • Элемент hr

Интересно, что по умолчанию элемент hr не наследует значение свойства color, однако этого можно достичь, установив свойству border-color значение inherit. Как по мне, так это несколько странное поведение.


Свойство visibility может иметь значение collapse

Вам наверняка доводилось использовать свойство visibility, и не раз. «Обычные» значения — visible (по умолчанию у всех элементов) и hidden, которое скрывает элемент, оставляя при этом под него место (в отличие от display:none).

Третье, редко используемое значение — collapse. Работает так же, как и hidden применительно ко всем элементам, кроме табличных рядов, колонок и их групп. В случае с элементами таблиц предполагается, что значение collapse скроет их подобно display:none таким образом, что на ранее занимаемом ими месте расположится другое содержимое таблицы.

К сожалению, не все браузеры одинаково обрабатывают данное значение. По этой причине альманах CSS-Tricks вообще не рекомендует использовать данное свойство.


Новые значения свойства background

В CSS 2.1 короткая запись свойства background включала в себя пять значений следующих свойств: background-color, background-image, background-repeat, background-attachment и background-position. Начиная с CSS 3 добавилось еще три значения, так что данное свойство теперь выглядит так:

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip]

Обратите внимание на слеш, который ставится там подобно короткой записи свойства font и border-radius [ссылка]. Этот слеш позволит вам включить значение background-size после background-position в тех браузерах, которые это поддерживают. Также вы можете добавить еще два значения: background-origin и background-clip.

Итоговый синтаксис:

Код: Выделить всё Развернуть
.example {
     background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

Новые значения работают во всех современных браузерах, однако и про старичков забывать не стоит, предлагая адекватную замену.


Никто не использует border-image

Не так давно я писал о свойстве border-image на SitePoint. Оно поддерживается всеми современными браузерами, за исключением IE 10 и ниже. Но кому какая разница?

border-image — весьма забавное свойство, которое позволяет обрамлять контейнер неким изображением.

К сожалению, border-image — одна из новинок, пользующаяся недостаточной популярностью. Хотя, возможно, я не прав. Если у вас есть примеры использования border-image — добро пожаловать в комментарии!


Есть такое свойство empty-cells

И оно поддерживается всеми браузерами, включая IE 8:

Код: Выделить всё Развернуть
table {
  empty-cells: hide;
}

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

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


word-wrap — то же, что и overflow-wrap

Свойство word-wrap используется не так часто, однако в некоторых случаях может оказаться полезным. Очень распространенный пример — разбиение длинной непрерывной строки текста во избежание выхода за пределы контейнера.

Поскольку данное свойство придумали в Microsoft, оно поддерживается всеми браузерами, в том числе IE с версии 5.5.

Несмотря на кросс-браузерность и надлежащую поддержку, W3C решило заменить свойство word-wrap на overflow-wrap: по всей видимости, они посчитали прежнее название неправильным. overflow-wrap имеет те же значения, что и word-wrap, а последнее сейчас рассматривается как «альтернативное».

Несмотря на то, что поддержка overflow-wrap еще мало распространена, не стоит переживать, ибо мы все так же можем использовать word-wrap: браузеры его поддерживают в том числе и в целях обратной совместимости.

Что до overflow-wrap — там уж когда все популярные браузеры обновятся, а пока я не вижу смысла что-то менять.

© http://habrahabr.ru/post/220237/

html, css, веб-разработка, overflow-wrap, word-wrap, empty-cells, border-image, background, visibility-collapse, color



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0657Несколько фактов о мужчинах, которы...
Сообщение от: Admin
0314Как удалить/отрезать несколько симв...
Сообщение от: Admin
0484Как освежить чувства? Несколько пол...
Сообщение от: Admin
0235Несколько веских причин не спать но...
Сообщение от: Admin
0375Несколько полезных советов для само...
Сообщение от: Admin