Контекстные меню на языке HTML5 пришли, и выглядят они сносно

  • Tutorial
Пару раз на Хабрахабре я упоминал ужé ([1], [2]), что Firefox 8 станет поддерживать контекстные меню, написанные на языке HTML5. Именно поэтому, едва мой Firefox по бета-каналу обновился до версии 8 beta, я пошёл пощупать, как эти меню будут выглядеть. Мне достаточно было из статьи «Firefox 8 for developers» по гиперссылкам допрыгать до соответствующей демонстрационной страницы да жмякнуть правой кнопкою мыши — и вот что предстало моим глазам:

[скриншот контекстного меню]
Как нетрудно видеть, контекстное меню сайта располагается чуть выше обыкновенного контекстного меню браузера и отделяется от него горизонтальным разделителем. Контекстное меню сайта может содержать отдельные пункты и целые подменю, а также может быть украшено цветными значками.

Вот полный листинг кода демонстрационной страницы:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>testing menu</title>

<style>
  .rotate {
    -moz-transform: rotate(90deg);
  }
  .resize {
    -moz-transform: scale(0.7);
  }
</style>


</head><body><div contextmenu="supermenu">
  <h1>Yo. Look at the source code.</h1>
  <img src="http://people.mozilla.com/~prouget/bugs/context-menu-test/b.gif">
</div>

<menu type="context" id="supermenu">
  <menuitem label="rotate" onclick="rotate()" icon="http://cdn1.iconfinder.com/data/icons/silk2/arrow_rotate_clockwise.png"></menuitem>
  <menuitem label="resize" onclick="resize()" icon="http://cdn3.iconfinder.com/data/icons/fugue/icon/image-resize.png"></menuitem>
  <menu label="share">
    <menuitem label="twitter" onclick="alert('foo')"></menuitem>
    <menuitem label="facebook" onclick="alert('bar')"></menuitem>
  </menu>
</menu>

<script>
  function rotate() { document.querySelector("img").classList.toggle("rotate"); }
  function resize() { document.querySelector("img").classList.toggle("resize"); }
</script>

<style>@import url("http://paulrouget.com/style/pure.css")</style>
</body></html>

Как нетрудно видеть, содержательная часть меню находится в атрибутах нового элемента menuitem, который прежним браузерам не известен — и потому они обязаны всецело его игнорировать.

Уверен, что со временем авторы плагинов к ведущим джаваскриптовым библиотекам (прежде всего, видимо, jQuery) сочинят и приспособят какой-нибудь «костыль», обеспечивающий тем браузерам, которые ещё не понимают этот подраздел стандарта HTML5, альтернативный вариант — джаваскриптовое преобразование контекстного меню на языке HTML5 в те виды наджаваскриптованных контекстных меню, которые употреблялись в последние годы перед этой нынешней новинкою.
Поделиться публикацией
Комментарии 41
    +4
    Это отличная новость!
    Без обид, но после этого хочется закрыть страницу и пропустить статью:
    ткнуть правой клавишею мыши
      +20
      Кажется, настала пора исправить «ткнуть» на «жмякнуть», и исправлю.
        +9
        И «клавишею» на «кнопкою».

        Всё, теперь вроде сойдёт.
          +3
          А разве в таком случае не следует писать «правою»?
            +26
            Не обязательно. Достаточно согласование прилагательного и существительного по падежу (творительному), а выбор полногласной или неполногласной формы падежа остаётся на усмотрение автора. Например, у Бестужева-Марлинского встречаем словосочетания «бессмертною славой», «твёрдой рукою», «с надменной душою», и так далее.
              +24
              Плюс ещё добавить слово «невозбранно».
              +2
              Осталось только «листинг кода» обратить в православие.
                +4
                и это — «предстало моим глазам» — переформулировать в «предстало пред мои очи».
                  +2
                  Тогда уж «моими очами» %)
                    +1
                    Тоже можно. Просто «пред мои очи» выглядит чуть более архаично и торжественно (и является допустимым вариантом).
          +1
          про ie молчу, но когда появиться поддержка со стороны webkit?
            +1
            Соответствующий баг открыт в багзилле Вебкита. Как я понял, работа ещё не ведётся: в багзилле W3C не договорились ещё о формате.
              +2
              Эта недоговорённость, кстати, должна служить всем нам мрачным предостережением: велика вероятность, что в итоге в W3C договорятся совсем о другом формате контекстных меню HTML5.

              В частности, авторитетнейший специалист Ян Хиксон противостоит самой идее элемента menuitem, указывая, во-первых, на то, что этот элемент не обеспечивает бережного отношения к браузерам, этот элемент не понимающим (такие браузеры просто не увидят пункт меню — так что нет возможности подсунуть им вместо пункта меню гиперссылку, например), а во-вторых, на то, что есть ужé элемент command (ещё одна новинка HTML5), который мог бы выполнять все функции menuitem, так что зачем menuitem вообще нужен.

              Лично мне кажется, что Хиксон немного перегибает палку: у него command задумывается и как средство задать некоторую команду (например, <command id="foo" type="…" label="…">), и как средство добавления команды в меню (из-за чего возможна разметка навроде <command command="имяКоманды">, несколько обескураживающая.

              Если им нужно бережное отношение к прежним браузерам, то могли бы ввести <menuitem></menuitem> (с игнорируемыми внутренностями, как у <object></object> или как у <video></video>) вместо простого <menuitem>, да на том и успокоиться.
                0
                к прежним браузерам

                Ну почему только к прежним, есть ведь например планшеты, где меню в принципе не используется.
                  +4
                    +2
                    В версии Firefox для Android контекстное меню всплывает после нажатия и удержания пальца.
                +3
                Правильно молчите — там это можно сделать уже лет как 10.
                Вот только не ХТМЛ5 конечно.
                0
                Я так понимаю, что раз один из плюсов HTML5 — мультиплатформенность, то в мобильном браузере это же меню будет отображаться. Наверное, оно добавится в меню-по-долгому-тапу.
                  +1
                  Замечательная новость
                    +1
                    <!DOCTYPE html>
                    <html><head>
                    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>testing menu</title>
                    ...
                    <style>@import url("http://paulrouget.com/style/pure.css")</style>


                    куда там надо написать, чтобы они это пример исправили?
                    0
                    Теперь будем щелкать по всем элементам на странице с целью поиска контекстного меню?
                      0
                      Вообще-то достаточно будет мышью пошарить, если только загодя курсор переменить:

                      .someClass { cursor: context-menu; }
                      

                      Вот любителям сенсорных экранов туго придётся (палец ведь не мышка).
                        0
                        Конечно, для этого браузер должен значение «context-menu» отображать не как «default». В своё время создатели Файерфокса решили, к моему превеликому неудовольствию, что если в Windows наличие контекстного меню не отображается специальным курсором, то этого не следует делать и в браузере. Теперь всей Паутине придётся поневоле пожать плоды этого стародавнего непродуманного решения.
                        +1
                        Можно сделать контекстное меню опциональным, что бы человек точно знал, что оно есть.

                        Например, включаешь в википедии контекстное меню в настройках, и со страницы пропадают все ссылки "[правка]", "[свернуть]" — всё переносится в контекстное меню.
                          0
                          Через некоторое время все станет интуитивно понятно, не сразу.
                          0
                          ура, начинается новая эра пиксель-хантинга! ))
                            –1
                            К чему делать пояснения к каждому встречному-поперечному слову? Ей-богу, как в википедию попал. Мне кажется, если человеку надо, он выделит слово, скопипастит и прогуглит.
                              +2
                              Это называется — предупредительность по отношению к ближнему.
                            +1
                            если честно, жил до этого без этой функции, и дальше наверное без нее обойдусь.
                              +2
                              Прискорбно, что меню все-таки влепили сверху. Теперь, если я подсознательно запомнил расположение нативных пунктов меню и сверху разработчик придумал добавить своих, то я потрачу чуть больше времени на поиск нужной мне команды.

                              Все же, стоило лепить дополнительные пункты ниже или хотя бы дать мне выбор.
                                +4
                                Можно лепить их выше курсора :)
                                  +2
                                  Изящная идея, кстати.
                                +1
                                Знаете, а ведь новая спецификация html5 дает отличный простор для развития новых браузеров, например отображающих все сайты в одном шаблоне, или текстовых браузеров.
                                  +2
                                  мм. интересно, это чудо как-то ограничивает количество пунктов в меню и количество символов в надписях? как реагирует если у уже открытого меню меняется описание javascript'ом (добавил 100 пунктов, через секунду убрал)? как решат проблему, что в меню можно добавить пункты с привычными пользователю названиями, но выполняющие совершенно иные действия?
                                    –2
                                    Нет языка, который называется HTML5, есть HTML и стек технологий, которые объединены в понятие HTML5.
                                      +1
                                      Авторы статьи о HTML5 в Википедии не разделяют Вашего мнения, да и я его также, признаться, не разделяю. Я не готов называть термином «HTML5» весь стек (всю кучу) технологий-новинок не только потому, что это размывает понятие «HTML», но также и потому, что это оставляет нас без того термина, которым можно просто и приятно называть версию языка HTML, следующую за HTML 4.01.
                                        –1
                                        Википедию пишут обычные люди, как мы с вами.
                                        А называть вещи чужими именами только потому что это удобнее с точки зрения терминологии — неправильно. Сейчас есть HTML, который отличается от прошлого HTML новыми тегами. Если добавят еще тегов, это не будет HTML6, это будет всё тот же HTML. И никакого размазывания понятия здесь нет.
                                      0
                                      Такое было возможно ещё в IE6. Жутко неудобно, и нарушает принципы web-разработки и подачи материала. Если никто не знает о меню, то никто никогда его и не найдёт, если основное взаимодействие сделанно именно через меню а не другие привычные HTML элементы.
                                        0
                                        Спамеры одобряют контекстные меню

                                        image
                                          0
                                          Ну и конечно в контекстном меню можно размещать рекламу и платные ссылки.

                                          С приходом context-menu, веб действительно станет другим!

                                          з.ы. /печаль

                                          image

                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                          Самое читаемое