Фронтенд и мобильные

Инструменты для HTML и CSS

Вёрстка и стили ломаются сразу и визуально, и структурно: неотформатированный HTML или CSS, который сложно ревьюить, макет Grid или Flexbox, который проще нарисовать, чем написать по памяти, два селектора, спорящих за специфичность, или CSS-переход, которому нужна собственная кривая easing вместо ease-in-out. Инструменты здесь делятся на форматирование уже готового кода и визуальную генерацию кода для тех частей, которые тяжело писать руками.

Для форматирования есть форматтер CSS, форматирование HTML и проверка и форматирование JavaScript и TypeScript — они сохраняют смысл исходника и одновременно указывают на синтаксические ошибки, а конвертер HTML и Markdown переносит контент между форматами, не теряя структуру и ссылки. Для макета и визуальной части генератор Grid / Flex макета позволяет нарисовать раскладку и скопировать готовый код, генераторы CSS-градиентов и CSS-эффектов показывают градиенты, тени и фильтры сразу в предпросмотре, а калькулятор специфичности CSS сравнивает селекторы с учётом :is() и :where().

12 инструментов

Форматирование кода и разметки

Построение и расчёт макета

Генерация визуального CSS

Вопросы об инструментах категории «HTML / CSS Dev Tools»

Почему :is() учитывается в специфичности CSS не так, как я ожидал?

Псевдоклассы :is() и :where() обрабатывают специфичность по-разному: :is() берёт специфичность своего самого специфичного аргумента, а :where() всегда считается за ноль независимо от содержимого. Калькулятор специфичности CSS сравнивает баллы селекторов и точно показывает, как учитываются :is() и :where().

Как перевести макет в CSS Grid или Flexbox?

Вместо того чтобы писать grid-template-columns или свойства flex по памяти, генератор Grid / Flex макета позволяет нарисовать раскладку визуально, настроить выравнивание и сразу увидеть мобильный вид, а затем скопировать готовые HTML и CSS — это быстрее, чем подбирать значения вручную.

Как проще всего собрать свою кривую easing для CSS?

Функция времени cubic-bezier() задаётся четырьмя числами, которые сложно представить себе, не увидев саму кривую на графике. Генератор cubic-bezier позволяет перетаскивать точки, формируя нужную кривую, и сразу проверить движение анимации визуально, прежде чем скопировать готовую функцию времени в проект.