CSS Peeper — новый инструмент для веб-дизайнеров
CSS Peeper — это расширение для браузера, предназначенное для просмотра CSS и предназначенное для дизайнеров. Используя это, дизайнеры могут сосредоточиться на дизайне и тратить как можно меньше времени на копание в коде. Какова высота строки, кнопка или размер шрифта на веб-сайте? На все эти вопросы можно получить ответы с помощью CSS Peeper. Это позволяет вам проверять код самым простым способом. Можно извлечь CSS и создать красивые руководства по стилю.
Преимущества:
- Легко доступны.
- Обеспечивает интуитивно понятное управление.
- Адаптация и кроссплатформенность под любой браузер.
- Дает интеграцию своего функционала в те продукты, где нет доступа к ядру.
- Объедините облачное хранилище и систему в единое рабочее пространство.
Недостатки:
- Требуется постоянное обновление.
- Различному браузеру нужна своя адаптированная версия программы.
- Они часто требуют возможности читать и даже изменять все на посещаемых веб-страницах, что в некоторых случаях может привести к утечке данных, захвату паролей, отслеживанию просмотра и т. д.
Монтаж:
Установка CSS Peeper аналогична установке любого другого расширения для браузера и состоит всего из двух шагов:
Шаг 1. Посетите CSS-пипер в Интернет-магазине Chrome или в надстройках Firefox и нажмите «Добавить в хром».
Шаг 2: Нажмите «Добавить расширение».
Вуаля, у вас установлен CSS-пипер. После успешной установки вы увидите в правом верхнем углу расширение, которое будет добавлено в ваш браузер.
Применение:
Можно использовать это расширение, просто перейдя на веб-страницу, чей CSS вы хотите узнать, и просто щелкнув по ней.
Пример 1: Компьютерщики для Гиков
Общий:
На общей вкладке отображается только некоторая информация о заголовках, BODY, размере файла CSS и времени загрузки.
Цвета:
На вкладке цветов мы можем увидеть все цвета, используемые на веб-странице, с их цветовым кодом и цветом. Мы также можем скопировать код цвета оттуда в наш буфер обмена, используя кнопку, выделенную ниже.
Ресурсы:
На вкладке ресурсов мы можем увидеть все ресурсы, используемые на веб-странице, и даже можем экспортировать их все или несколько, если необходимо, нажав «Экспортировать все» вверху.
Отдельные элементы:
Мы даже можем проверить отдельные элементы, такие как кнопки, и получить весь CSS, необходимый для создания этой кнопки текста, точно такого же, как тот, который показан на веб-странице. Для этого вам просто нужно щелкнуть элемент, который вы хотите проверить, и программа просмотра CSS покажет его свойства. Красная рамка появляется на элементе, когда вы щелкаете область, которую хотите проверить, точно так же, как она появилась на «Курсах в GeeksforGeeks».
Ниже приведен еще один пример, здесь мы проверили еще один элемент на этой странице. Стрелка используется для отображения выделенной области.
Пример 2: Ютуб
Общий:
На вкладке «Общие» отображается только некоторая информация о шрифтах, такая как заголовки, ТЕЛО, размер файла CSS и время загрузки.
Цвета:
На вкладке цветов мы можем увидеть все цвета, используемые на веб-странице, с их цветовым кодом и цветом. Мы также можем скопировать код цвета оттуда в наш буфер обмена, используя кнопку, выделенную ниже.
Ресурсы:
На вкладке ресурсов мы можем увидеть все ресурсы, используемые на веб-странице, и даже можем экспортировать их все или несколько, если необходимо, нажав «Экспортировать все» вверху.
Отдельные элементы:
Мы даже можем проверить отдельные элементы, такие как кнопки, и получить весь CSS, необходимый для создания этой кнопки текста, точно такого же, как тот, который показан на веб-странице. Для этого вам просто нужно щелкнуть элемент, который вы хотите проверить, и программа просмотра CSS покажет его свойства. Красная рамка появляется на элементе, когда вы щелкаете область, которую хотите проверить, точно так же, как она появилась в «Исследовать».
Ниже приведен еще один пример, здесь мы проверили еще один элемент на этой странице. Стрелка используется для отображения выделенной области.
В заключение, CSS Peeper — очень полезное расширение для веб-дизайнеров, которые хотят заглянуть на какую-то веб-страницу и узнать ее CSS. Но следует быть очень осторожным при использовании этого расширения, поскольку они часто требуют возможности читать и даже изменять все на посещаемых веб-страницах, что в некоторых случаях может привести к утечке данных, захвату паролей, отслеживанию просмотра и т. д.