Подготовка к работе с CSS Grid: Google Chrome Dev Tools
Больше вкусностей найдешь на моем канале - https://t.me/emotional_robot
Вот и настал момент изучения вспомогательных вещей, без которых тяжело обойтись в боевых условиях (это я так официальную работку назвал). Я бы в любом случае написал эту статью, но в связи с изучением CSS Grid понял, что её время настало именно сейчас. У CSS Grid довольно много свойств и нюансов работы, и чтобы понимать результат ваших трудов в браузере, нам нужно понять, а какие, собственно, инструменты этот самый браузер нам предоставляет.
Самыми удобными в плане разработки веба я считаю инструменты браузера Google Chrome. Разумеется, есть и другие, и я пробовал многие из них, но остановил свой выбор именно на хроме. И хоть рассказывать я буду о Google Chrome Dev Tools, в других браузерах все выглядит практически идентично.
Что из себя представляют Google Chrome Dev Tools
Сразу оставлю вот эту ссылочку для тех, кто может читать документации на английском, потому что лучше самих создателей я объяснить не смогу. Однако, в рамках изучения CSS Grid будет достаточно той информации, которую я приведу ниже. Можно изучить её, а документацию оставить в закладках, почитав потом.
Давайте сначала взглянем на эту шайтан-машину. Откройте любой сайт в браузере Google Chrome (десктопная версия, разумеется) и нажмите клавишу "F12". Вы увидите внизу окно с кучей вкладок. Закройте глаза, остановите чувство нарастающего ужаса - это нормальная реакция на первое знакомство с Dev Tools. Спешу успокоить - верстальщикам достаточно разобраться только с первой вкладкой "Elements" и двумя иконками слева от неё.
Итак, что же у нас расположено в самой большой части вкладки?
Если вы не забыли, мы создаем сайты с помощью HTML и CSS. Вся эта кодовая вакханалия интерпретируется браузером в конкретный UI. Но с помощью "Elements" мы можем получить доступ к так называемым исходникам (исходный код), то бишь, к HTML и CSS.
Однако, в браузере все HTML теги представлены не просто абы как, а по определенной модели, которая называется DOM - Document Object Model - Объектная Модель Документа. В соответствии с этой моделью, каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом. Все это имеет огромное значение при работе с DOM с помощью JavaScript, однако для верстальщика важно только видеть само DOM-дерево и уметь ручками с ним взаимодействовать.
Зачем нам смотреть исходники при изучении результата? Это удобно. Вместо того, чтобы скакать из браузера в текстовый редактор или IDE и обратно, мы можем смотреть все в одном окне. Плюс, есть возможность изменять расположение тегов и их стили прямо во вкладке "Elements", так сказать, "на горячую".
Нажмите на любой HTML-тег и посмотрите на область со стилями справа:
Здесь представлены все стили, которые вы лично задали тегам, а также стили по умолчанию, заданные браузером. В представленном окне стили отображаются в определенной последовательности: от непосредственно примененных к выделенному тегу (в самом верху), до глобальных (например, примененные к тегам <body>, <html>).
В самом низу секции "Styles" у нас расположен интересный блок:
Помните, как я объяснял в статье про блочную верстку, из чего складывается размер любого HTML элемента (блока)? Так вот здесь показываются конкретные цифры: каков размер содержимого, внутренних полей, границ, внешних полей. Это весьма полезно для понимания, где именно вы накосячили, если блоки стоят не так, как вы задумывали (или не по макету).
Самое часто используемое в "Styles" является, конечно, редактирование стилей. Попробуйте прямо сейчас поменять любое CSS свойство, или даже добавьте свое собственное, тот же "background-color: black". Не факт, конечно, что оно применится (на это есть причины, которые в рамках этой статьи не будут обсуждаться), но если повезет, вы увидите мгновенные изменения.
Из полезного в этой секции можно отметить поле "Filter" для фильтрации имен селекторов (весьма удобно, если вы знаете, стили какого селектора нужно проверить) и специальная кнопка ":hov" для фильтрации по псевдоклассам.
Вернемся в секцию с DOM. Теги тоже можно редактировать на лету. Попробуйте взять какой-нибудь тег (прямо так левой кнопкой мыши зажмите и потяните) и переместите его в другое место. А если нажмете правой кнопкой мыши, увидите контекстное меню с еще кучей дополнительных команд, применимых к тегу. Можно добавлять и удалять атрибуты, копировать тег целиком, удалить его и так далее.
Чтобы посмотреть на "детей" тега, нужно нажать левой кнопкой мыши по небольшому треугольнику в самом начале тега:
А что насчет поиска нужного тега конкретного элемента на странице? Не искать же его прямо в DOM. Не нужно, для этого есть специальный инструмент:
Нажимаете сначала на него, потом наводите курсор на любой элемент на странице. В DOM этот элемент будет отображаться сразу после наведения.
Рядом с этим инструментом расположен переключатель с десктопного вида на мобильный и обратно. Если вы нажмете на него, сайт переключится в мобильный вид. Из полезного, что стоит отметить - в данном режиме можно выбирать различные устройства или вообще установить Responsive режим для изменения размеров окна самому:
Это полезно в случае адаптивной верстки, когда важно оценивать результат как на больших экранах, так и на экранах мобильных устройств.
Думаю, этой информации для начала достаточно. Если кому интересно дальнейшее изучение, смотрите официальную документацию.
Итого
Мы познакомились с таким замечательным инструментом, как Google Chrome Dev Tools, который сильно упрощает верстку сайтов и веб-разработку в принципе. Я посвятил эту статью ему ради дальнейшего погружения в CSS Grid - нам еще не раз понадобится помощь этого инструмента.
Признаюсь, что я сам досконально не знаю Dev Tools, так как пытаться изучить все вдоль и поперек не имеет смысла. Какие-то вещи действительно могут не пригодится на практике, и даже изучив их, со временем все знания улетучатся. Но что точно стоит хорошо изучить, как минимум, для верстки, так это вкладку "Elements", поэтому, не теряйте зря время и беритесь за это.
В следующей статье приступим к изучению CSS Grid с точки зрения HTML и CSS. Не переключайтесь.