Подтвердить что ты не робот

Как вы применяете правило стиля в Safari Web Inspector?

Инструменты разработчика Chrome позволяют применять правило стиля на панели "Стили". Я не нашел способ сделать это в Safari (панель правил стиля). Кто-нибудь знает, возможно ли это?

Кроме того, есть ли у Safari такие линейки, как Chrome?

4b9b3361

Ответ 1

Safari 8.0.8 на OS X

  • Щелкните правой кнопкой мыши любой элемент и выберите "Проверить элемент" во всплывающем меню
  • Убедитесь, что стили и правила выбраны с правой стороны инспектора.
  • Затем вы можете либо добавить отдельные правила, нажав + Новое правило, либо просто щелкнуть и начать вводить правила, на которых отображается "Click to Edit" (см. изображение ниже).
  • Введите новые правила, и они будут применены к тому, чтобы элемент был "проверен" в окне браузера.

Safari Inspector - применить правила стилей

Что касается линейки? Ну, я его не нашел, но кнопка Inspect даст вам размеры элементов, зависающих в окне браузера.

Кнопка проверки Safari Web Inspector

Проверка элементов Safari

Ответ 2

ДА это абсолютно возможно - и вот как:


Safari 6.0.1 style editor

Safari 6.x.x

(решение Safari 6.0.1 подтверждено на Mac OsX)

для новейшей версии Safari 6.0+ Apple взяла на себя ответственность за удаление этих элементов gui. функция все еще доступна, но немного больше спрятана. для добавления стилей в сафари 6 вам необходимо выполнить указанные шаги:

ШАГИ:

  • сначала выберите значок {} скобок в правой боковой панели
  • Из модели DOM в центральной белой области веб-инспектора. Нажмите, чтобы выбрать элемент HTML, который вы хотите просмотреть. (они будут отображаться в правой боковой панели стиля)
  • На правой боковой панели стиля: дважды щелкните по закрывающей скобке существующего стиля для селектора, который вы хотите отредактировать.

     OR
    

    Дважды щелкните открытую область под "Атрибутом стиля" на той же боковой панели, чтобы добавить свои собственные стили к этому конкретному элементу


Safari 5.x.x и предыдущий (5.x.x подтвержденный Win 7 и Mac OS X)

Предполагая, что вы включили инспектор в расширенном меню настроек, вы можете начать правый щелчок и проверять элементы...

с этой точки выберите элемент в DOM слева от разметки html. теперь на правой боковой панели убедитесь, что меню "Стиль" расширено.

один раз здесь у вас есть два варианта:

inspector style menu right sidebar

должен быть пустой селектор "element.style", доступный для каждого элемента DOM, который вы можете выбрать слева. они предназначены для вашей настройки. вы можете дважды щелкнуть здесь, чтобы получить возможность добавлять стили к этому селектору.

the option gear

вы также можете щелкнуть шестерню в верхнем правом углу меню стилей на этой правой боковой панели и выбрать последний вариант "New Style Rule", это позволит вам определить свой собственный селектор независимо от элемента DOM, который у вас есть выбранный слева

здесь вы можете найти полную документацию по яблоку

Ответ 3

  • Откройте панель, подобную DevTools (CMD + OPT + C)
  • Перейдите на вкладку Элементы
  • Если он еще не открыт, нажмите "Показать боковую панель деталей" справа (CMD + OPT + 0)

ИЛИ

  • Щелкните элемент правой кнопкой мыши и выберите "Осмотреть элемент"
  • Если он еще не открыт, нажмите "Показать боковую панель деталей" справа (CMD + OPT + 0)