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

Список ответов на каверзные вопросы можно получить в FAQ-разделе форума.
  • Форумы
  •  » CSS-стили
  •  » [Global style] Отображение хоткеев для содержащих их элементов сайтов

№101-11-2011 18:52:58

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2718
UA: Nightly 10.0

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

Display keyboard shortcuts

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

Установить этот стиль с 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)


mzfx

Отсутствует

 

№208-11-2011 13:33:37

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785
UA: Firefox 7.0

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

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

accesskeys.png

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

accesskeys2.png

Устанавливаем с 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
}

Отсутствует

 

№302-02-2012 12:51:27

gleb_evs
Участник
 
Группа: Members
Откуда: Санкт-Петербург
Зарегистрирован: 02-02-2012
Сообщений: 1
UA: Opera 11.6
Веб-сайт

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

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


Ешь - потей, работай - мёрзни!))

Отсутствует

 
  • Форумы
  •  » CSS-стили
  •  » [Global style] Отображение хоткеев для содержащих их элементов сайтов

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]