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

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

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

Ответ 1

Safari 8.0.8 на OS X

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

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

Ответ 2

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

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. теперь на правой боковой панели убедитесь, что меню "Стиль" расширено.

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

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

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

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

Ответ 3

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

ИЛИ

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