Кроссбраузерные проблемы псевдокласса :active

[@Sytrus]

Я хоть и не новичок, но когда читал, ничего не понял, пока не посмотрел сам пример. Хабр не только гуру читают, которые влет все понимают. Добавьте примеры кода под картинки, пожалуйста, будет намного понятнее о чем идет речь.

Хорошее наблюдение, спасибо.

[@Operatino]

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

[@psywalker]

Молодец дружище! Отличные наблюдения ты провёл. Подчеркнул для себя полезное :)

[@Sadykh]

А у меня немного схожая проблема возникла. В последней версии Opera (11.61) у классов :active не задать. Он просто не реагирует. Если присвоить классу :hover — реагирует, если :active — то глухо. Но для кнопок (button'ов) :active работает (свои кнопки ставили, поэтому и требовалось).

[@m1kola]

В Опере для этого приходится использовать :focus. Почему-то он в ней работает как :active, а на :active опера не реагирует.

Я, кстати, сталкивался недавно с такой же проблемой: верстальщики сделали кнопочку с такой структурой:
Text

Мне пришлось добавить активное состояние для всех браузеров (вебкитах и FF). Получились примерно такие костыли:
/* :hover везде нормально работает */
.anchorClass:hover span
.anchorClass:hover span span

/* Для нормальных браузеров и для оперы */
.anchorClass:active span, .anchorClass:focus span
.anchorClass:active span span, .anchorClass:focus span span

/* Для IE */
.anchorClass span:focus
.anchorClass span span:focus

Насколько я помню, это работает для IE7+, Оперы (последних версий — точно) и большого ряда версий нормальных браузеров (точно не проверяли).

Не совсем понял что нужно сделать автору топика, но возможно ему это тоже поможет, если я всё правильно вспомнил.

[@m1kola]

Прошу прощения. Обернул всё в source, но по некоторым причинам, я не могу использовать теги.

Думаю, структура элемента понятна из css: ссылка с элементом span в котором ещё один span.

[@Operatino]

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

[@m1kola]

В моём случае мне :active вообще не как не помог: я перепробовал все варианты его использования (и для элемента на который идет непосредственно клик, и для родителя, и ещё что-то...), но реакции не добился не под одной из платформ (Windows (XP\7), Linux, Mac OS). Возможно проблема актуальна только для тех версий под которыми тестировали (точно не помню какие версии были, но 11.61 среди них точно была) или только для составных элементов (на простых не пробовал). Спас только :focus.

В вашу ситуацию толком не вникал: писал относительно проблемы кнопок которая возникла у меня и у Shutich.

[@undead_ekb]

Очень радует большое количество статей про CSS в последнее время.

[@Sytrus]

Ага, порой даже удивляешься: «неужеле еще не обо всем написали?» (:

[@Operatino]

Еще писать и писать, технологии не стоят на месте.

[@Sytrus]

Да, с этим никто не спорит! Пишите, будем только рады.

[@standy]

Эти схематичные рисунки так и остались для меня загадкой, почему выбраны такие цвета, как понять где сработал :active, а где нет, и чем отличается поведение браузеров на втором и четвертом — неясно.

Но проблема в опере и ие действительно есть, и посмотреть можно на простом примере jsfiddle.net/gpCbA/33/

[@Operatino]

Цвета играют чисто декоративную роль, я добавил код в статью, что бы можно было сразу отследить какой элемент какого цвета, в том числе, какой цвет мы передаём, декорируя через :active.

Спасибо за пример, надеюсь он поможет другим понять суть топика.

[@Operatino]

Это нативное поведение кнопок по нажатию на них, остановить смещение текста на прямую не получится, только обвешивать хаками (декорируя через :active), или заменять button на другой тег.

Я пробывал наоборот, повторить эффект button/input для ссылок, делал это через :active

a:active {
    position: relative;
    top: 1px;
    left: 1px;
    }

[@Night_Coder]

Кстати, если кто-то хочет задействовать :active на iOS (на андроид не тестил, может и там работает), напишите внутри head следующее:

<script type="text/javascript">document.addEventListener("touchstart", function() {},false);</script>

Круто смотрится с «box-shadow: inset», тащусь от кнопок, которые продавливаются внутрь ^^

[@IDVsbruck]

Сорри, что поднимаю старую тему, но столкнулся сейчас…
Хак с :after, конечно, работает, но только до тех пор, пока в верхнем контейнере не появился текст. При его наличии в ИЕ нижние контейнеры перестают реагировать. Тут может быть какое-то решение?