CSS Guru

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

Что же мне не понравилось в это раз? Ну, ни то, что не понравилось, но все же.

Приводится способ выравнивания блоков с картинками по центру родительского контейнера. Что ж, хороший способ применения нечасто используемого свойства inline-block. Но…

Так это выглядит в браузере

Рецепт основан на двойственной природе элемента INS. Как известно элементы INS и DEL могут быть как блочными (display: block), так и строчными (display: inline). При этом, будучи строчными, они могут быть контейнерами для блочных элементов, таких как DIV или P. Впервые подобный трюк я увидел около двух лет назад у Stuart Nicholls. Там была необходимость расположить по центру меню из табов при произвольной общей ширине меню. К сожалению, это пример был пересмотрен 24 января этого года)). Я сам использовал этот прием на своей народовской страничке (не смеяться!!!). Что забавно, в новом способе центрирования меню использован метод, который я впервые увидел у Лебедева. Но вернемся к нашим баранам.

Для чего в рецепте элементы DIV оборачиваются в INS? Дело в том, что применяемое свойство display: inline-block в Internet Explorer не действует на блочные элементы, такие как DIV, а только на строчные. INS же элемент строчный, но может быть контейнером для блочных, не нарушая стандартов (что нельзя помещать блочные элементы внутрь строчных). Эта особенность INS плюс особенность поведения display: inline-block-элементов — вот и весь трюк)

И опять но. А зачем, собственно, использовать DIV, если картинки с описаниями можно поместить в SPAN, который элемент строчный и на, него соотвественно действует display: inline-block. Ведь для чего предназначен INS? Теги INS и DEL предназначены для выделения добавленных или удаленных частей документа, соотвественно. Обычно, INS выделяют подчеркиванием текста, а DEL выглядит как зачеркнутый текст. Оба элемента имеют особые атрибуты cite (URI, отсылающий к документу, объясняющему причину изменения) и datetime (дата внесения изменения). И использование INS таким образом, как описано в техногрете, существенно нарушает семантику документа. И при этом добавляет лишний код в HTML.

Но предположим, что для описание картинки нам необходимо использовать заголовок (любого уровня). Тогда, соблюдая требования стандарта, что нельзя помещать блочные элементы внутрь строчных, нам придется использовать DIV вместо SPAN. Получается, что display: inline-block работать не будет и нам придется использовать трюк с INS? Вовсе нет. Вместо того, чтобы портить HTML мы воспользуемся небольшим трюком в CSS. Трюк простой и забавный, как все, что касается Internet Explorer, но эффективный. Напишем в нашем файле стилей следущее:

.some_class {
    display: -moz-inline-stack;
/*на мой взгляд малонужное правило для файрфокса 2
*/
    display: inline-block;
/*для браузеров, которые понимают, в том числе ИЕ8*/
}
/** и вот трюк (можно написать в файле стилей для ИЕ,
*  подключаемом через условные комментарии
*  или же используя хаки)
*/
/*стили для ИЕ6 и ИЕ7 */
.some_class {
    display: inline;
}

И все чудесным образом заработает.

Что неприятно удивило, так использование BR, чтобы картинка и подпись к ней располагались на разных строках. Ведь и так уже обернули картинку и текст в ссылки по отдельности. Так почему бы не задать одной из ссылок, или обеим, display: block. Зачем плодить мусор в коде в виде BR. А еще лучше задать display: block; картинке и обернуть и картинку, и текст в одну ссылку

В итоге можем получить короткий и кроссбраузерный код

Вариант без учета ФФ2

HTML:

<a href="#someURI" class="thumbnail">
    <img src="someImage" />
    описание картинки
</a>

CSS

.thumbnail {
    display: inline-block;
	}
    .thumbnail img {
    	dispaly: block;
        }

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

Если же нам понадобится добавить поддержку ФФ2 и в качестве контейнера использовать DIV, то пример немного усложниться, но все равно останется компактнее.

Inline-block с поддержкой Файрфокс 2

HTML

<div class="thumbnail">
	<a href="#someURI">
    	<img src="someImage" />
        описание картинки
	</a>
</div>

CSS

.thumbnail {
	display: -moz-inline-stack;/*ФФ2*/
    display: inline-block;
	margin:2em  0 0 2em;
	}
    .thumbnail img {
    	display: block;
        }
	/* hack section )*/
	/** с некоторых  пор я предпочитаю хаки в стилях
	  * условным комментариям для подключения стилей
	  * почему? будет время - будет пост
	 */
@-moz-document url-prefix() {
    .thumbnail a {
        display: block;
/*нужно для ФФ2, чтобы привести в чувство -moz-inline-stack*/
    }
    .thumbnail a {
        position:relative;
/* фигасе, это нужно для ФФ2, чтобы он увидел ссылку */
    }
}
/*IE 7*/
*+html .thumbnail {
    display:inline;
    }
/*IE 6*/
* html .thumbnail {
    display:inline;
    }

хотя можно и проще

.thumbnail {
    //display:inline;
    }

эту запись поймут только ИЕ7 и ИЕ6

А вот и небольшой пример, по максимуму приближенный к техногретному. За одним исключением — я не задал ширину для .thumbnail.

Когда уже заканчивал редактировать, наткнулся на вот такой вот пост. Более подробно, лучше оформлено, но по аглицки. Зуб даю), что все изложенное выше добыто потом и кровью, а не скопипастено.

Метки: верстка

Запись создана: Среда, 8 Апрель 2009 в 22:45 и находится в рубриках CSS. Вы можете следить за комментариями к этой записи через ленту RSS 2.0. Вы можете оставить отзыв, или trackback с вашего собственного сайта.