[Global style] Отображение хоткеев для содержащих их элементов сайтов

iDev.Pi · №1

Display keyboard shortcuts

Этот стиль глобальный (т.е. применяется везде). На многих сайтах есть возможность навигации через клавиатуру, с использованием хоткеев. Часто, узнать об этом можно только покопавшись в исходном коде сайта, что вы вряд ли станете делать. Этот стиль отображает эти хоткеи вот так:

Установить этот стиль с userstyles.org можно здесь.

Выделить код

Код:

@namespace url(http://www.w3.org/1999/xhtml);
*[accesskey]::after {
    text-transform: uppercase !important;
    border: 1px solid gray !important;
    background-color: rgb(220, 220, 220) !important;
    color: black ! important;
    -moz-border-radius: 4px !important;
    content: attr(accesskey) !important;
    margin-left: 2px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-family: monospace !important;
}
*[accesskey]:focus::after {
    background-color: yellow !important;
}

Отредактировано iDev.Pi (17-11-2011 05:29:22)

Shutnik · №2

Мне понравилась идея, но не понравилась реализация. Сделал свой вариант с кнопками, более похожими на клавиши клавиатуры:

Нажатое состояние:

Устанавливаем с userStyles.org или добавляем в userContent.css:

Выделить код

Код:

@namespace url(http://www.w3.org/1999/xhtml);

/* горячие клавиши для элементов */

*[accesskey]:after {
    -moz-border-radius:3px!important;
    background:#ddd!important;
    border-bottom:1px solid #999!important;
    border-left:1px solid #bbb!important;
    border-right:1px solid #999!important;
    border-top:1px solid #bbb!important;
    color:#555!important;
    content:attr(accesskey)!important;
    display:inline-block!important;
    font:9px monospace!important;
    height:13px!important;
    left:3px!important;
    line-height:13px!important;
    overflow:hidden!important;
    position:relative!important;
    text-align:center!important;
    text-transform:lowercase!important;
    top:3px!important;
    width:13px!important
}

*[accesskey]:focus:after, *[accesskey]:active:after {
    background:#ccc!important;
    border-bottom:1px solid #aaa!important;
    border-left:1px solid #888!important;
    border-right:1px solid #aaa!important;
    border-top:1px solid #888!important;
    color:#444!important
}

gleb_evs · №3

Интересно! Нуна будет воспользоваться!) СПС!

Полезная информация

№101-11-2011 18:52:58