Как найти идентификаторы интерфейса Firefox для использования в пользовательском стиле

Веб-браузер Firefox, без сомнения, является наиболее настраиваемым веб-браузером, если сравнивать его со значительной долей рынка. Вы можете многое сделать с точки зрения настроек: от перемещения элементов интерфейса, добавления новых элементов в интерфейс и даже использования настраиваемого стиля для изменения внешнего вида, ощущений и видимости элементов интерфейса Firefox.

Если вы пользователь Firefox, вы, вероятно, встречали руководства, в которых используются индивидуальные методы стилизации. Черт возьми, мы опубликовали довольно много за последние годы, например, полностью скрыть полосу прокрутки, чтобы разделите кнопку остановки и перезагрузки, или в постоянно отображать кнопки вперед и назад.

Чтобы внести эти изменения, вам необходимо знать идентификаторы, используемые для стилизации элементов интерфейса Firefox. В этом руководстве объясняется, как вы можете их найти, чтобы вы могли создать свой собственный стиль или попросить кого-нибудь, кто знает CSS, сделать это за вас.

Идентификаторы интерфейса Firefox

Хорошая новость в том, что вы можете искать идентификаторы прямо в Firefox, поэтому вам не нужно сканировать исходный код или выполнять другие утомительные задачи. Однако для этого вам понадобится надстройка.

Инспектор DOM — удобное расширение для Firefox, которое интегрируется непосредственно в набор инструментов веб-разработчика браузера, с которым оно поставляется. Просто установите расширение и перезапустите Firefox один раз, чтобы получить к нему доступ.

Вы можете запустить новый инструмент, нажав клавишу Alt и выбрав Инструменты> Веб-разработчик> Инспектор DOM.

дом инспектор Firefox

У вас есть два основных варианта его использования. Первое, что вы можете сделать, это выбрать «Файл»> «Проверить элемент Chrome», а затем — один из открытых веб-сайтов браузера.

Как только это будет решено, вы можете использовать кнопку выбора в самом левом углу адресной строки в DOM Inspector. Щелкните значок, а затем элемент в интерфейсе Firefox. Вскоре он должен быть выделен красным, что служит подтверждением.

Вместо использования значка селектора вы также можете нажать кнопку поиска и использовать ее для поиска элемента, но это работает, только если вы знаете его официальное название. Обратите внимание, что вы можете искать по идентификатору, тегу или атрибуту. Поиск работает хорошо, если интересующий вас элемент интерфейса в данный момент не отображается на странице.

Теперь, когда у вас есть идентификатор элемента, вы можете начать добавлять к нему собственный стиль. Популярные примеры:

  • Чтобы скрыть элемент: #ID {display: none:! Important;}
  • Изменить цвет: #ID {color: #AAAAAA}
  • Изменить цвет фона: #ID {background: #AAAAAA}
  • Изменить шрифт: #ID {font-family: NAME;}

Вам необходимо применить эти изменения к файлу userChrome.css, который вы найдете в папке профиля Firefox.

Вывод

Вы можете найти идентификаторы элементов интерфейса Firefox с помощью надстройки DOM Inspector. Это особенно полезно для пользователей Firefox, которые знают CSS и у которых нет проблем с применением пользовательских стилей к некоторым элементам Chrome Firefox.