css

Табличные значения display: table, table-cell, table-row, table-column, и другие

10 октября 2011. Рубрики: Рабочие заметки; автор — Княгиня.

Этой заметкой я хочу заглянуть в будущее, которое, надеюсь, будет не очень отдалённым. В будущее — потому что IE7 не поддерживает табличные значения свойства display, а с арены пока не сошёл.

Адекватной замены табличным свойствам, которая работала бы в IE7, на данный момент не существует. Многочисленные способы сымитировать табличные элементы на плавающих блоках дают весьма приблизительный результат и не гарантируют устойчивости, свойственной табличным элементам.

(далее…)

Отзывов (54) »

Display: inline-block, или на грани кроссбраузерности

5 сентября 2011. Рубрики: Рабочие заметки; автор — Княгиня.

Из этой заметки вы узнаете:

• как ведёт себя элемент со значением display: inline-block;
• какие бывают сюрпризы при его применении;
• как обойти зловредный IE7;
• а также как можно использовать display: inline-block и чем он лучше float: left.

(далее…)

Отзывов (20) »

Волшебное свойство display, или типы отображения элементов html

22 августа 2011. Рубрики: Рабочие заметки; автор — Княгиня.

Часть первая, адаптированная под ИЕ7.

Css-свойство display задаёт тип отображения элемента. На русский язык его можно перевести фразой: «Веди себя как». То есть, берём любой элемент html и говорим ему: веди себя как… блок, строка, таблица или вообще как будто тебя нет.

Все существующие на данный момент значения свойства display: (далее…)

Отзывов (12) »

Селекторы атрибутов: примеры практического применения

19 июня 2011. Рубрики: Рабочие заметки; автор — Княгиня.

К сожалению, в интернете полно примеров css-технологий будущего, которые сейчас поддерживаются не всеми браузерами, а найти что-нибудь практическое, кроссбраузерное и применимое прямо сейчас, надо постараться. Селекторы атрибутов как раз относятся к категории практического. Привожу ряд примеров, как можно использовать этот тип селекторов на живых реальных сайтах. (далее…)

Отзывов (6) »

Селекторы атрибутов: краткий список

27 марта 2011. Рубрики: Рабочие заметки; автор — Княгиня.

Чем дальше уходит в прошлое ie6, тем охотней я пользуюсь примочками css, доступными современным браузерам. Одна из таких возможностей — селекторы атрибута (attribute selectors), или селекторы по атрибутам.

Примечание: IE7 и 8 понимают селекторы атрибута только в том случае, когда у страницы указан правильный доктайп. В противном случае они утрачивают понятливость.

Виды селекторов атрибутов

Название	Вид	Область действия
Селектор существования атрибута (existence attribute selector)	[имя атрибута]	Все элементы, имеющие этот атрибут (с любым значением)
Селектор равенства атрибута (equality attribute selector)	[имя="значение"]	Все элементы, имеющие данный атрибут с данным значением
Селектор атрибута с пробелами (whitespase attribute selector)	[имя~="значение"]	Элементы, имеющие этот атрибут с данным словом в списке значений
Селектор атрибута с дефисом (hyphen attribute selector)	[имя|="значение"]	Элементы, имеющие этот атрибут, при том, что его значение либо совпадает с указанной частью, либо начинается с неё и дефиса
Селектор префикса атрибута (prefix attribute selector)	[имя^="значение"]	Элементы, у которых значение данного атрибута начинается с указанной части
Селектор суффикса атрибута (suffix attribute selector)	[имя$="значение"]	Элементы, у которых значение данного атрибута оканчивается указанной частью
Селектор подстроки атрибута (substring attribute selector)	[имя*="значение"]	Элементы, у которых значение данного атрибута содержит указанную часть

Между значением селектора и квадратным скобками не должно быть пробелов! Значение атрибута рекомендуется заключать в кавычки.

Селекторы атрибутом можно комбинировать друг с другом и другими селекторами:

input[type="text"]

— выбраны элементы input типа text (текстовые поля)

input[type="text"].error

— выбраны текстовые поля с классом error

td input[type="text"]

—выбраны текстовые поля, заключённые в табличные ячейки

input[type="button"][onclick]

— выбраны элементы input типа button (кнопка), на который повешено событие onclick

Селекторы существования, равенства, с пробелом и с дефисом определены в стандарте CSS2.1. Селекторы префикса, суффикса и подстроки определены в стандарте CSS3.

О том, как можно использовать селекторы атрибутов на практике, расскажу в следующий раз.

Отзывов (3) »

Position:fixed и его практическое применение

20 марта 2011. Рубрики: Рабочие заметки; автор — Княгиня.

Сразу оговорюсь, что всё нижесказанное — сугубо личное мнение из сугубо личного опыта. Кому-то, может быть, удобней иначе.

По мере ухода со сцены IE6 появляется возможность использовать продвинутые свойства css. Position:fixed — из их числа. Фиксированное позиционирование отличается от других видов позиционирования тем, что прилепляет позиционированный блок к видимой части страницы (визуально — к окну браузера). То есть, при пролистывании страницы блок с этим свойством всегда остаётся видимым.

Казалось бы, очень интересное свойство, но на его применение нашлись ограничения: (далее…)

Ваш отзыв »

Графическое оформление кнопок — 2

5 декабря 2010. Рубрики: Рабочие заметки; автор — Княгиня.

Апдейт к оформлению кнопок.

Неудобным местом в оформлении кнопки является одинаковое имя у всех элементов форм: input. Чтобы отличить текстовые поля от кнопок, а также флажков (чекбоксов) и переключателей (радиобаттонов), приходится снабжать их классами или придумывать обёртки (а при такой возможности проще использовать обычный графический <input type="image" />).

Однако по мере ухода со сцены IE6 появилась возможность обойтись без этих ухищрений. Теперь проблему решает селектор атрибута (иначе — селектор по атрибуту). Выглядит он так:

input[type="submit"]{
  …
}

Теперь оформление кнопки (на том же примере, что и в прошлый раз) будет выглядеть так:

<form action="">
  <fieldset>
    <legend>Пример кнопки
    <input type="text"/>
    <input type="submit" value="Отправить" />
  </fieldset>
</form>

<style type="text/css">
	input[type="submit"]{
	  width:30px;/*Ширина картинки*/
	  height:21px;/*Высота картинки*/
	  padding:0 0 0 30px;
	  /*Выталкивает надпись с картинки в ИЕ*/
	  overflow:hidden;
	  /*Обрезает кнопку до указанных размеров*/
	  cursor:pointer;
	  border:none;
	  background:url('button.gif') no-repeat;
	  /*Положить картинку фоном*/
	  color:transparent;
	  /*Надпись на кнопке прозрачна в ФФ и Опере*/
	}
    fieldset{
	  padding:50px;
	  border:2px solid #3a5777;
	}
</style>

И вот результат: Пример. Не работает в IE6, но понимается современными браузерами.

Ваш отзыв »

Как прижать футер к низу страницы (руководство к действию)

26 сентября 2010. Рубрики: Рабочие заметки; автор — Княгиня.

Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта: (далее…)

Отзывов (33) »

Глюки и хаки: ie7 (2)

12 сентября 2010. Рубрики: Рабочие заметки; автор — Княгиня.

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

Методом последовательного исключения обнаружилось, что глюк вызывает правило, задающее минимальную высоту абзацам:

#content p{
  min-height:1.2em;
}

(Зачем? Чтобы пустые строки не схлопывались. Мне не нужно, заказчику нужно).

Пришлось специально для седьмого ие сделать min-height:auto, остальное пусть будет на совести его разработчиков. Абзацы встали на место:

Старый полуслепой ИЕ6 таких фортелей не выкидывал. Он был инвалидом, но у его глюков была человеческая логика.

Ваш отзыв »

Универсальный селектор

11 апреля 2010. Рубрики: Рабочие заметки; автор — Княгиня.

6. Твой CSS начинается со строчек * {padding:0; margin:0;}

«16 признаков крутого верстальщика», Максим Покровский

Символ * в css называется универсальным селектором (universal selector). Универсальность состоит в том, что он означает любой элемент: правило, которое начинается с этого селектора, относится ко всем элементам страницы.

Какие объявления стоит и какие не стоит указывать в этом правиле? Например, полезны те, которые приведены в эпиграфе:

*{
  margin:0;
  padding:0;
}

Такое правило обнуляет поля и отступы у всех элементов на странице. Полезное правило: у элемента могут быть ненулевые дефолтовые значения, создающие в дальнейшем путаницу. Кстати, они могут быть разными у разных браузеров. (далее…)

Отзывов (11) »