И вот почему

Да, вы правильно прочитали. Прекратите использовать Chrome или любой другой браузер. Многие из вас могут обидеться, но я знаю, о чем говорю. Chrome - лучший выбор, когда дело касается JavaScript и прочего. Даже я пишу эту статью с помощью Chrome. Итак, почему вы должны прекратить использовать Chrome? Что ж, обычно я очень страдаю, когда CSS не работает так, как я хочу. Это полностью моя вина, но как мне получить помощь? или как я могу узнать, что применяемый мной CSS недействителен? Иногда эти небольшие хитрости CSS могут заставить вас сильно пострадать.

После долгих поисков я нашел ценный ресурс, который поможет мне разобраться в этих настройках CSS. Я нашел браузер Firefox. Я объясню вам, почему вы должны пересмотреть свой браузер и начать использовать Firefox во время изучения CSS.

Если что-то не работает, он расскажет, почему.

Изучая CSS, вы можете экспериментировать с CSS. Иногда что-то не работало, и вы не понимаете, почему это не сработало. Пусть на помощь придет Firefox. Позвольте мне показать вам, как это сделать.

Выше показан инструмент разработчика Chrome, и вы можете видеть, что я применил свойство vertical-align к кнопке, и оно не сработало. Как вы, наверное, знаете, почему это не сработало. А как насчет новичков, которые сейчас только учатся? Для них это может быть нелегко. Теперь давайте посмотрим на снимок экрана инструмента разработчика Firefox.

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

Какие шрифты использует сайт?

Как начинающий веб-разработчик, вы можете задаться вопросом о разных шрифтах на разных веб-сайтах. Когда я только начинал, мне было так любопытно узнать о различных типах шрифтов, которые используют некоторые известные веб-сайты. К сожалению, все напрасно, пока не нашел Firefox. В инструментах разработчика Firefox вы можете использовать шрифты. Вот как.

Перейдите на веб-сайт, затем откройте инструмент разработчика Firefox. Перейдите к «Шрифты» и затем выберите «Все шрифты на странице». Там вы сможете увидеть список шрифтов.

Если вы хотите увидеть шрифт определенного заголовка или любого абзаца, выберите этот абзац и затем повторите тот же процесс.

Инспектор FlexBox

Модель гибкого ящика CSS обычно известна как модель flexbox, это модель макета CSS. Макет flexbox позволяет автоматически размещать адаптивные элементы внутри гибкого контейнера в зависимости от размера экрана.

Если вы работаете с flexbox и хотите проверить контейнер flexbox, тогда инспектор Firefox FlexBox может быть вашим другом.

Вам просто нужно открыть инспектор и перейти к гибкому элементу. Перейдите на вкладку Styles, и вы можете увидеть свойство display flex. Перед гибкостью вы можете увидеть небольшой значок сетки, просто щелкните по нему, и вы увидите, что гибкий контейнер был выделен. Это очень полезно, когда вы работаете со свойствами flexbox, такими как flex-wrap и т. Д.

Инспектор CSS Grid

Насколько важно отслеживать строки и столбцы в CSS Grid, и инспектор CSS Firefox поможет вам сделать это очень легко. Чтобы открыть инспектор CSS, вам просто нужно выполнить процесс, как и при открытии инспектора Flexbox. После открытия инспектора сетки вы можете увидеть выделенные строки и столбцы.

Инспектор доступности

Один из лучших способов исправить доступность вашего веб-сайта - проверить его с помощью инспектора доступности Firefox. Откройте инструмент разработчика и перейдите к специальным возможностям или воспользуйтесь сочетанием клавиш (shift + F12). Где вы можете сканировать на наличие проблем, и он также сообщит вам, как вы можете исправить эти проблемы.

Заключение

Как видите, насколько полезным может быть Firefox при изучении CSS. Этих функций гораздо больше, но я полагаю, что эти функции в значительной степени используются каждый раз. Это, конечно, только мое мнение. Если вы согласны или не согласны, обязательно сообщите мне об этом в комментариях.