Следующее введение в инструменты качества кода CSS — это выдержка из предстоящей книги Tiffany, Master Master, 2nd Edition, которая будет доступна в ближайшее время.
На вашем пути к становлению мастером CSS вам нужно знать, как устранить неполадки и оптимизировать ваш CSS. Как вы диагностируете и устраняете проблемы с рендерингом? Как вы гарантируете, что ваш CSS не создаст отставание в производительности для конечных пользователей? И как вы гарантируете качество кода?
Знать, какие инструменты использовать, поможет вам убедиться, что ваш передний конец работает хорошо.
В этой статье мы рассмотрим браузерные инструменты для разработчиков для Chrome, Safari, Firefox и Microsoft Edge.
Большинство настольных браузеров включают функцию инспектора элементов, которую вы можете использовать для устранения неполадок вашего CSS. Начните использовать эту функцию, щелкнув правой кнопкой мыши и выбрав Inspect Element в меню. Пользователи Mac также могут проверять элемент нажатием на элемент при нажатии клавиши Ctrl . Ниже приведено изображение, которое вы можете увидеть в Firefox Developer Edition.
Средства разработчика Firefox Developer Edition
В Firefox, Chrome и Safari вы также можете нажать Ctrl + Shift + I (Windows / Linux) или Cmd + Вариант + I (macOS), чтобы открыть панель инструментов разработчика. На рисунке ниже показаны инструменты разработчика Chrome.
Инструменты разработчика Chrome
В Microsoft Edge откройте инструменты разработчика, нажав клавишу F12 как показано ниже.
Microsoft Edge Developer Tools
Вы также можете открыть инструменты разработчика каждого браузера, используя меню приложения:
- Microsoft Edge: Инструменты> Инструменты разработчика
- Firefox: Инструменты> Веб-разработчик
- Chrome: Вид> Разработчик
- Сафари: Развить> Показать веб-инспектора
В Safari вам, возможно, придется включить меню Develop перейдя в Safari> Preferences …> Advanced и установите флажок рядом с Show Develop меню в строке меню . Ниже приведено представление для инструментов разработчика Safari.
Инструменты разработчика Safari 11
После открытия интерфейса инструментов разработчика вам может понадобиться выбрать правильную панель:
- Microsoft Edge: DOM Explorer
- Firefox: Инспектор
- Хром: Элементы
- Сафари: Элементы
Вы узнаете, что находитесь в правильном месте, когда вы видите HTML на одной стороне панели, а правила CSS — на другом.
Примечание. Разметка, которую вы увидите на панели HTML, представляет собой представление DOM. Он генерируется, когда браузер завершает анализ документа и может отличаться от исходной разметки. Использование View Source показывает оригинальную разметку, но имейте в виду, что для приложений JavaScript не может быть никакой разметки для просмотра.
Содержание статьи
Использование панели «Стили»
Иногда элемент не выглядит так, как ожидалось. Возможно, типографское изменение не получилось, или меньше абзаца вокруг абзаца, чем вы хотели. Вы можете определить, какие правила влияют на элемент, используя панель Styles веб-инспектора.
Браузеры довольно последовательны в том, как они организуют панель Styles . В первую очередь перечисляются типичные стили, если они есть. Это стили, заданные с помощью атрибута стиля HTML, будь то автор CSS или программно с помощью скриптов.
В строках стилей следуют список правил стиля, применяемых с помощью стилей стилей автора — те, которые написаны вами или вашими коллегами. Стили в этом списке сгруппированы по запросу и / или имени файла.
Правила стиля авторского стиля предшествуют стилям пользовательского агента. Стилем пользовательского агента являются стили браузера по умолчанию. Они также оказывают влияние на внешний вид вашего сайта. (В Firefox вам, возможно, придется выбрать опцию Show Browser Styles чтобы просмотреть стили пользовательского агента. Этот параметр можно найти в панели панели инструментов .)
Свойства и значения сгруппированы по селектору. Рядом с каждым свойством установлен флажок, позволяющий включать или отключать определенные правила. Нажав на свойство или значение, вы можете изменить его, чтобы избежать необходимости редактировать, сохранять и перезагружать.
Определение проблем каскада и наследования
Когда вы проверяете стили, вы можете заметить, что некоторые свойства вычеркнуты. Эти свойства были отменены либо каскадным правилом, либо конфликтующим правилом, либо более конкретным селектором, как показано ниже.
Идентификация пар свойств и значений, которые были заменены другой декларацией
На изображении выше изображены границы и font-size объявления блока [type=button] с линией через них. Эти декларации были отменены теми, что были в блоке .close который преуспевает в [type=button] в нашем CSS.
Споттинг недопустимых свойств и значений
Вы также можете использовать инспектор элементов для обнаружения недопустимых или неподдерживаемых свойств и значений свойств. В браузерах, основанных на хромах, неверные правила CSS имеют линию через них и соседний значок предупреждения, который можно увидеть ниже.
Пятничное определение значения свойства CSS с помощью Chrome
Firefox также ударяет по недействительным или неподдерживаемым свойствам и значениям. Firefox Developer Edition также использует значок предупреждения, как показано ниже. Стандартный Firefox отображает ошибки аналогично, но не включает значок предупреждения.
Как Firefox Developer Edition указывает недопустимые свойства и значения
На скриншоте ниже Safari ударяет по неподдерживаемым правилам красной линией и выделяет их желтым фоном и значком предупреждения.
Недопустимое значение свойства CSS в Safari
Microsoft Edge вместо этого использует волнистую подчеркивание для указания неподдерживаемых свойств или значений.
Неподдерживаемое значение свойства CSS в Microsoft Edge
Когда дело доходит до основных конфликтов отладки и наследования, какой бы браузер вы ни выбрали, это не имеет значения. Однако ознакомьтесь со всеми из них в тех редких случаях, когда вам нужно диагностировать проблему, специфичную для браузера.
Отладка ответных макетов
Проверки на устройстве всегда лучше. Однако во время разработки полезно имитировать мобильные устройства с помощью браузера рабочего стола. Все основные настольные браузеры включают режим отлаженной отладки.
Хром
Chrome предлагает функцию панели инструментов устройства в составе инструментария разработчика. Чтобы использовать его, щелкните значок устройства (на фото ниже) в верхнем левом углу рядом с Выберите значок элемента .
Значок режима адаптивного режима Chrome
Режим устройства позволяет вам имитировать несколько видов устройств Android и iOS, включая более старые устройства, такие как iPhone 5 и Galaxy S5. Режим устройства также включает функцию дросселирования сети для аппроксимации различных скоростей сети и возможность имитировать автономность.
Firefox
В Firefox эквивалентный режим известен как Отзывчивый дизайн . Его значок напоминает ранние iPod. Вы найдете его в правой части экрана на панели инструментов разработчика, как показано ниже.
Значок режима оптимизационного режима Firefox
В гибком режиме вы можете переключаться между портретной и альбомной ориентацией, имитировать события касания и снимать скриншоты. Как и Chrome, Firefox также позволяет разработчикам моделировать медленные соединения посредством дросселирования.
Microsoft Edge
Microsoft Edge позволяет имитировать мобильные устройства Windows, такие как Surface, с вкладкой Emulation . Выберите Windows Phone в меню Browser profile как показано ниже.
SitePoint.com с использованием режима эмуляции устройства Microsoft Edge
В дополнение к подражательной ориентации и разрешению режим эмуляции позволяет тестировать функции геолокации. Однако вы не можете использовать режим эмуляции для имитации сетевых условий.
Сафари
Отзывчивый дизайн Safari в своем инструменте разработчика. Это похоже на режим эмуляции в Firefox, но добавляет возможность имитировать устройства iOS, как показано ниже.
SitePoint.com при просмотре с помощью адаптивного режима Safari режим проектирования
Чтобы войти в режим адаптивного дизайна Safari, выберите Развернуть> Ввести режим адаптивного дизайна или Cmd + Ctrl + R .
В книге Тиффани обсуждаются вопросы отладки для реагирования на пользовательский интерфейс, включая оплату и рецензирование, а также другие инструменты для работы с браузером, такие как работа с инструментом временной шкалы каждого браузера.
Чтобы узнать больше о отладке и оптимизации CSS, посмотрите книгу Тиффани, Мастер CSS, 2-е издание .
Статьи по теме:
Тиффани Б. Браун — независимый веб-разработчик и технический писатель, базирующийся в Лос-Анджелесе. Браун предлагает веб-разработки и консалтинговые услуги крупным агентствам и малым предприятиям. Бывший член команды разработчиков программного обеспечения Opera Software, Браун также является соавтором книги JumpStart HTML5 SitePoint. Она спорадически пишет о технологии веб-разработки в своем блоге. Вы можете следить за ней в Twitter на @webinista.
Загрузка...
