Руководство по новым и экспериментальным CSS DevTools в Firefox

В течение последних нескольких лет наша команда в Firefox работала над новыми инструментами CSS, которые учитывают как передовые методы, так и вековые разочарования. Мы — команда Layout Tools, подмножество Firefox Developer Tools, и наша цель — улучшить современный рабочий процесс веб-дизайна.

Интернет претерпел невероятную эволюцию за последнее десятилетие: новые функции HTML/CSS, улучшения браузера и методы проектирования. Наша команда занимается созданием инструментов, соответствующих этим инновациям, чтобы дизайнеры и разработчики могли использовать больше эффективности и творчества, которые теперь возможны.

В этом руководстве мы поделимся обзором наших семи новых инструментов с рассказами о процессе проектирования и практическими шагами по опробованию каждого инструмента.

1. Инспектор сетки

Все началось три года назад, когда наш эксперт по компоновке CSS и сторонник разработчиков Джен Симмонс работала с членами Firefox DevTools над созданием инструмента, который помог бы пользователям в изучении макетов CSS Grid.

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

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

Grid Inspector был источником вдохновения для всех последующих инструментов. Это даже послужило источником вдохновения для новой команды: Layout Tools! Созданная в конце 2017 года, мы разбросаны по четырем часовым поясам и сотрудничаем со многими другими в Mozilla, такими как разработчики нашего движка рендеринга и хорошие ребята из MDN.

Попробуйте Инспектор сетки

1. В Firefox посетите наш пример сайта Grid.
2. Откройте инспектор с помощью Cmd + Shift + C.
3. Включите наложение сетки одним из трех способов:
• Панель макета :
  В разделе Grid установите флажок рядом с .content.grid-content ;
• Вид разметки :
  Переключите значок «сетка» рядом с <div class="content grid-content"> ;
• Просмотр правил :
  Нажмите на кнопка рядом с display:grid; внутри #page-intro .grid-content ;
4. Поэкспериментируйте с инспектором сетки:
• Измените фиолетовый цвет наложения на красный;
• Переключить «Номера строк» ​​или «Расширить строки бесконечно»;
• Включите больше наложений сетки;
• Посмотрите, что произойдет, если вы отключите grid-gap: 15px в Правилах.

Начиная с Grid, мы стремились расширить возможности браузерного инструмента CSS.

“

2. Редактор контуров формы

Следующим проектом, над которым мы работали, был Shape Path Editor: наш первый инструмент визуального редактирования.

CSS Shapes позволяет определить формы обтекания текста: круг, треугольник или многоугольник с множеством сторон. Его можно использовать со свойством clip-path , которое позволяет обрезать элементы до любой из этих форм. Эти два метода вместе открывают возможность для некоторых очень уникальных макетов, вдохновленных графическим дизайном.

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

Этот тип функции — визуальное редактирование — был новым для нас и инструментов браузера в целом. Это пример того, как мы можем выйти за рамки проверки и отладки и перейти к сфере дизайна.

Попробуйте редактор контуров фигур

1. В Firefox посетите эту страницу на веб-сайте An Event Apart.
2. Откройте Инспектор с помощью Cmd + Shift + C и выберите первое круглое изображение.
3. В правилах нажмите кнопку значок рядом со свойством shape-outside .
4. На странице щелкните точки фигуры и посмотрите, что произойдет, если вы перетащите ее, чтобы сделать ее большой или маленькой. Измените его на размер, который вам подходит.

Визуальное редактирование — это пример того, как мы можем выйти за рамки проверки и отладки и перейти к сфере дизайна.

“

3. Редактор шрифтов

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

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

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

Попробуйте редактор шрифтов

1. В Firefox посетите этот демонстрационный сайт вариативных шрифтов.
2. Откройте Инспектор с помощью Cmd + Shift + C и выберите слово «переменная» в заголовке (селектор элемента — .title__variable-web__variable ).
3. На третьей панели Инспектора перейдите на панель Шрифты:
• Наведите указатель мыши на название шрифта Output Sans Regular , чтобы увидеть, что будет выделено;
• Попробуйте ползунки веса и наклона ;
• Взгляните на предустановленные варианты шрифта в раскрывающемся меню « Экземпляры ».

4. Инспектор Flexbox

Наши инструменты «Сетка», «Фигуры» и «Переменные шрифты» вместе могут обеспечить очень продвинутый графический дизайн в Интернете, но они все еще являются передовыми благодаря поддержке браузеров. (Они почти готовы, но по-прежнему требуются запасные варианты.) Мы не хотели работать только над новыми функциями — нас привлекали проблемы, с которыми ежедневно сталкивается большинство веб-разработчиков.

Итак, мы начали работу над Flexbox Inspector. С точки зрения дизайна, это был наш самый амбициозный проект, и он породил некоторые новые стратегии исследования пользователей для нашей команды.

Как и Grid, CSS Flexbox имеет довольно крутую кривую обучения, когда вы только начинаете. Требуется время, чтобы действительно понять это, и многие из нас прибегают к пробам и ошибкам, чтобы добиться желаемых макетов. В начале проекта наша команда даже не была уверена, что мы сами разбираемся во Flexbox, и мы не знали, в чем заключались основные трудности. Поэтому мы углубили наше понимание и провели опрос, чтобы узнать, что людям больше всего нужно, когда дело доходит до Flexbox.

Результаты оказали большое влияние на наши планы, сделав необходимыми сложные визуализации, такие как увеличение/уменьшение и мин/макс. Мы продолжали работать с сообществом на протяжении всего проекта, включая отзывы в развивающиеся визуальные прототипы и ночные сборки.

Инструмент включает в себя две основные части: подсветку, которая работает так же, как Инспектор сетки, и подробный инструмент Flexbox внутри Инспектора. Ядром инструмента является гибкая диаграмма элементов с информацией о размерах.

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

Примечание . Узнайте всю историю нашего процесса проектирования в разделе «Проектирование инспектора Flexbox».

Попробуйте инспектор Flexbox

1. В Firefox посетите Bugzilla Mozilla.
2. Откройте Инспектор с помощью Cmd + Shift + C и выберите элемент div.inner (прямо внутри панели заголовка).
3. Включите оверлей Flexbox одним из трех способов:
• Панель макета :
  В разделе Flex Container включите переключатель;
• Вид разметки :
  Переключите значок «flex» рядом с <div class="inner"> ;
• Просмотр правил :
  Нажмите на кнопка рядом с display:flex .
4. Используйте панель Flex Container для перехода к элементу Flex с именем nav#header-nav .
• Обратите внимание на размеры, указанные на схеме и в таблице размеров;
• Увеличивайте и уменьшайте ширину браузера и смотрите, как меняется диаграмма.

Интерлюдия: удвоение усилий в исследованиях

Как небольшая команда, не имеющая формальной поддержки исследований пользователей, мы часто прибегали к методу «дизайн через тестирование»: основывая свое мнение на собственном опыте использования инструментов. Но после нашего успеха с опросом Flexbox мы поняли, что хотим лучше собирать данные, которые помогут нам. Мы провели новый опрос, чтобы помочь определить наши следующие шаги.

Мы собрали список из 20 самых больших проблем, с которыми сталкиваются веб-разработчики, и попросили наше сообщество ранжировать их, используя формат max-diff.

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

Мы также попросили людей оценить свое недовольство инструментами разработчика браузера. Очевидной главной проблемой было перемещение изменений CSS обратно в редактор. Это стало нашим следующим проектом.

5. Панель изменений

Сложность переноса работы из браузерного инструмента разработчика в редактор — одна из тех извечных проблем, к которым мы все только что привыкли. Мы были рады сделать простое и сразу же применимое решение.

Edge и Chrome DevTools первыми выпустили варианты этого инструмента. Наше приложение ориентировано на поддержку широкого спектра рабочих процессов CSS: запустите DevTools, измените любые стили, которые хотите, а затем экспортируйте свои изменения, либо скопировав полный набор изменений (для совместной работы), либо только одно измененное правило (для вставки в код).

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

Попробуйте панель изменений

1. В Firefox перейдите на любой веб-сайт.
2. Откройте Инспектор с помощью Cmd + Shift + C и выберите элемент.
3. Внесите некоторые изменения в CSS:
• Измените стили на панели «Правила»;
• Настройте шрифты на панели «Шрифты».
4. На правой панели Инспектора перейдите на вкладку «Изменения» и выполните следующие действия:
• Нажмите « Копировать все изменения » и вставьте его в текстовый редактор, чтобы просмотреть результат.
• Наведите указатель мыши на имя селектора и нажмите « Копировать правило» , затем вставьте его, чтобы просмотреть результат.

6. Неактивный CSS

Наша функция неактивного CSS решает одну из главных проблем нашего опроса по отладке макета по конкретным ошибкам CSS:

«Почему это свойство CSS ничего не делает?»

С точки зрения дизайна эта функция очень проста — она затеняет CSS, который не влияет на страницу, и показывает всплывающую подсказку, объясняющую, почему свойство не имеет эффекта. Но мы знаем, что это может повысить эффективность и сократить разочарование. Нас поддержало исследование Сары Лим и ее коллег, которые создали аналогичный инструмент. В своих исследованиях они обнаружили, что начинающие разработчики на 50 % быстрее строили с помощью CSS, когда использовали инструмент, позволяющий игнорировать нерелевантный код.

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

Неактивный CSS запускается в Firefox 70, но теперь его можно использовать в предварительных версиях Firefox, включая Developer Edition, Beta и Nightly.

Попробуйте неактивный CSS

1. Загрузите версию для разработчиков Firefox;
2. Откройте Firefox и перейдите на wikipedia.org;
3. Откройте Инспектор с помощью Cmd + Shift + C и выберите центральную область содержимого, называемую center central-featured ;
4. Обратите внимание на выделенное серым цветом объявление vertical-align ;
5. Наведите указатель мыши на значок информации и нажмите «Подробнее», если вам интересно.

7. Панель специальных возможностей

Попутно у нас были специальные возможности, разработанные отдельной командой, состоящей в основном из одного человека — Юры Зеневича, в этом году со своим стажером Малихой Ислам.

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

Теперь в Nightly вы можете попробовать новый симулятор дальтонизма, который использует нашу будущую технологию WebRender.

Попробуйте панель специальных возможностей

1. Загрузите версию для разработчиков Firefox;
2. Перейдите на сайт «meetup.com»;
3. В инструментах разработчика перейдите на вкладку «Специальные возможности» и нажмите кнопку «Включить специальные возможности»;
4. Щелкните раскрывающееся меню рядом с «Проверить наличие проблем» и выберите «Все проблемы»;
5. Взгляните на различные проблемы с контрастностью, клавиатурой и текстовыми метками и щелкните ссылку «Подробнее», если вам это интересно.

Следующий

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

Будущее

Мы стремимся поддерживать современный Интернет, а это означает постоянное изменение и рост.

Производители браузеров постоянно внедряют новые спецификации. Руководящие принципы и передовой опыт в области прогрессивного улучшения, оперативности и доступности постоянно совершенствуются. Нам, производителям инструментов, тоже нужно развиваться.

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

Как насчет лучшего способа навигации по дереву DOM страницы? Эта часть DevTools практически не изменилась со времен Firebug.

Мы экспериментировали с такими функциями, как кнопки «назад» и «вперед», которые упростили бы навигацию между недавно посещенными элементами.

Более серьезное изменение, которое мы обсуждаем, — это добавление компактного представления DOM, использующего синтаксис, аналогичный механизмам шаблонов HTML. Основное внимание будет уделено наиболее распространенному варианту использования — переходу к CSS, а не просмотру/редактированию исходного кода.

Мы также думали о лучшем селекторе элементов. Мы знаем, как можно повысить продуктивность работы внутри страницы и меньше прыгать туда-сюда в DevTools. Мы могли бы сделать селектор элементов более мощным и постоянным. Возможно, он мог бы выбрать пустое место на странице и сказать вам, чем вызвано это пространство, или пролить свет на взаимосвязь между различными элементами.

Это всего лишь две из многих идей, которые мы надеемся исследовать дальше с помощью сообщества.

Нам нужен ваш вклад!

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

Вот простой способ помочь: загрузите Firefox Developer Edition и попробуйте использовать его в своей работе на следующей неделе.

Затем расскажите нам, что вы думаете, приняв участие в нашем одностраничном опросе.

Нам всегда интересно услышать идеи по улучшению, особенно любые легко висящие плоды, которые могли бы спасти нас всех от некоторого регулярного разочарования. Мы делаем свою работу открыто, так что вы можете следить за новостями и присоединяться к нам. Мы будем держать вас в курсе событий на @FirefoxDevTools.

Спасибо Патрику Броссе за его вклад в эту статью.