Что такое медиаобъект? Еще один кирпичик вашего сайта

Из чего состоит интернет? По крайней мере, уровень пользовательского интерфейса в основном состоит из медиаблоков. Ранее мы рассказывали обо всех крошечных объектах, из которых состоит типичная история из ленты одной социальной сети. И по большей части такая история состоит из медиаобъекта, который повторяется снова и снова.

Обычно, медиаобъект это изображение, расположенное слева, и какой-нибудь описательный текст справа от него:

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

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

Что известно?

• Может быть вложенным
• Необязательная кнопка справа
• Должен сбрасывать обтекание (clearfix)

Что решено отнести в область неизвестного? (Подумайте о гибкости!)

В равной степени важно определить характеристики объекта, отвечающие за его гибкость, т. е. изначально неизвестные:

• Ширина изображения, отступы и оформление могут различаться
• Неизвестно, какой контент будет справа
• Неизвестна общая ширина

После определения всех характеристик мы можем создавать множество одних и тех же базовых объектов.

Подробнее о реализации

Как это работает? Самое сложное - это убедиться, что изображение может быть любой ширины, чтобы элемент можно было использовать повторно. Это означает, что наша область содержимого должна быть гибкой, чтобы она могла заполнить все оставшееся доступное пространство. Нам придется создать новый контекст форматирования, чтобы сделать столбец гибким.

HTML:

<div class="media attribution">

  <a href="http://twitter.com/stubbornella" class="img">
    <img src="http://stubbornella.com/profile_image.jpg" alt="me" />
  </a>

  <div class="bd">
    @Stubbornella 14 minutes ago
  </div>

</div>

CSS:

.media {
  margin: 10px;
}

.media, .bd {
  overflow: hidden;
  _overflow: visible;
  zoom: 1;
}

.media .img {
  float: left;
  margin-right: 10px;
}

.media .img img {
  display: block;
}

.media .imgExt {
  float: right;
  margin-left: 10px;
}

Итак, что мы делаем:

1. Мы сбрасываем обтекание как элемента .media, так и внутреннего содержимого .bd, используя недокументированные возможности свойства overflow. При этом, такой сброс можно сделать любым другим способом, плюс добавляем новый контекст форматирования.
2. Затем мы выстраиваем элемент изображения (обычно ссылку) слева, а нашу необязательную правую область справа.
3. Наконец, чтобы аккуратно все выровнять, мы задаем поля и отступы. Если есть несколько разных типов изображений с разными отступами и оформлением, то можно задать поля с помощью класса, расширяющего объект .img.

Готово! Это очень простой объект, но он обладает большой мощью. Базируясь на этом повторяющемся шаблоне мы можем значительно сократить количество используемого кода. При этом все остается просто и понятно.