Заметки по css.
Css
Css-анимация: пример-игрушка
10 марта 2015. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
Блог выводится из летаргического сна. Насколько успешно — увидим.
Вниманию публики предлагается небольшая игрушка на css: демонстрация возможностей свойств transform и transition. «Каруселька» сделана на чистом css, без единого скрипта и без единой картинки; если бы она ещё запоминала положение стрелки, её можно было бы назвать «Лото» или «Рулетка», но такое без скрипта никак.
Примечание: каруселька работает в ИЕ, начиная с 10. В старых версиях ИЕ такое сделать невозможно. (далее…)
Лечить или резать?
13 августа 2012. Рубрики: Интернет, Курьёзы; автор — Юлия Панина aka Княгиня.
После отпуска ничего умного писать не хочется. Поэтому напишу немножко бреда. Но тематического. (далее…)
Табличные значения display: table, table-cell, table-row, table-column, и другие
10 октября 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
Этой заметкой я хочу заглянуть в будущее, которое, надеюсь, будет не очень отдалённым. В будущее — потому что IE7 не поддерживает табличные значения свойства display, а с арены пока не сошёл.
Адекватной замены табличным свойствам, которая работала бы в IE7, на данный момент не существует. Многочисленные способы сымитировать табличные элементы на плавающих блоках дают весьма приблизительный результат и не гарантируют устойчивости, свойственной табличным элементам.
Display: inline-block, или на грани кроссбраузерности
5 сентября 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
Из этой заметки вы узнаете:
- как ведёт себя элемент со значением display: inline-block;
- какие бывают сюрпризы при его применении;
- как обойти зловредный IE7;
- а также как можно использовать display: inline-block и чем он лучше float: left.
Волшебное свойство display, или типы отображения элементов html
22 августа 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
Часть первая, адаптированная под ИЕ7.
Css-свойство display задаёт тип отображения элемента. На русский язык его можно перевести фразой: «Веди себя как». То есть, берём любой элемент html и говорим ему: веди себя как… блок, строка, таблица или вообще как будто тебя нет.
Все существующие на данный момент значения свойства display: (далее…)
Селекторы атрибутов: примеры практического применения
19 июня 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
К сожалению, в интернете полно примеров css-технологий будущего, которые сейчас поддерживаются не всеми браузерами, а найти что-нибудь практическое, кроссбраузерное и применимое прямо сейчас, надо постараться. Селекторы атрибутов как раз относятся к категории практического. Привожу ряд примеров, как можно использовать этот тип селекторов на живых реальных сайтах. (далее…)
Селекторы атрибутов: краткий список
27 марта 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
Чем дальше уходит в прошлое 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.
О том, как можно использовать селекторы атрибутов на практике, расскажу в следующий раз.