В браузере Firefox 16 мы лишаем префикса:
- CSS3 Animations (баг 762302)
- CSS3 Transitions (баг 762303)
- CSS3 Transforms (баг 745523)
- CSS3 Gradients (баг 752187)
- IndexedDB (баг 726378)
Также и
calc() может остаться без префикса
(баг 771678).
В ходе эксперимента использовались псевдо-классы, чтобы создать 84 простых GUI иконки на чистом CSS и HTML. Это не готовый пак CSS иконок и я публикую его в качестве в качестве упражнения на креативное решение проблемы в условиях ограниченных возможностей.
В этой блогозаписи я намерена поделиться несколькими такими советами по увеличению юзабилити сайта, каждый из которых очень лёгок в реализации. Не все они кросс-браузерны, но всё равно они «глазурь на тортике»: читатель и не заметит, что их нет.
1. Отображайте нажатия кнопок и кнопкоподобных ссылок
Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент
<img />), то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Вот какой простой уловкою вы можете дать знать посетителю сайта, что он и впрямь нажал на нечто нажимаемое:
.mybutton:active {
position: relative;
top: 1px;
left: 1px;
}
Этим кодом кнопка смещается на 1 пиксел направо и на 1 пиксел вниз, когда её нажимают. Испробуйте: выглядит весьма убедительно.
Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если
где-то ещё на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них.
2. Плавные переходы (CSS3 transitions)
Читать дальше →
