Web Analytics Made Easy - StatCounter
Главная Блог Руководство по новым и экспериментальным CSS DevTools в Firefox

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

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

Введение

С момента выпуска Grid Inspector команда разработчиков Firefox DevTools вдохновлялась на создание нового набора инструментов для решения проблем современного Интернета. В этой статье мы узнаем обо всех 7 инструментах и взглянем на потенциальные будущие проекты.

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

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

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

Сетка Инспектор

инспектор Firefox

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

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

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

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

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

Shape Path Editor

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

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

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

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

Редактор Шрифтов

Редактор Шрифтов

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

Движущей силой этого проекта была наша цель поддерживать переменные шрифты в то время, когда команда движка рендеринга Firefox добавляла поддержку для него.

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

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

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

Инспектор Flexbox

Инспектор Flexbox

Наши инструменты Grid, Shapes и Variable Fonts могут совместно использовать некоторые очень продвинутые графические разработки в Интернете, но они все еще несколько передовые, основанные на поддержке браузера. (Они почти у цели , но все еще требуют откатов.) Мы не хотели работать только над новыми функциями - мы были привлечены к проблемам, с которыми большинство веб-разработчиков сталкиваются ежедневно.

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

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

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

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

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

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

Панель Изменений

Панель Изменений

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

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

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

Неактивный CSS

Неактивный CSS

Наша функция неактивного CSS решает одну из главных проблем нашего опроса по отладке макета для определенных ошибок CSS: «Почему это свойство CSS ничего не делает?»

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

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

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

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

Панель Доступности

Auditing in the Accessibility Panel

По ходу дела у нас были специальные возможности, разработанные отдельной командой, состоящей в основном из одного человека - Юры Зеневича , в этом году со своим стажером Малихой Исламом . Вместе они превратили новую панель «Специальные возможности» в Firefox в мощный инструмент проверки и аудита. Помимо отображения дерева специальных возможностей и свойств, теперь вы можете запускать различные типы проверок на странице. До сих пор проверки включали цветовой контраст, текстовые метки и стилизацию фокуса клавиатуры.

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

Дальнейшее

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

Будущее

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

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

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

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

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

Visual Element Selector

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

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

Shape Path Editor

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

источник
иллюстрация