Реклама мешает? Идти Без рекламы Сегодня 

Конвертер CSS в объект стиля JavaScript

ДанныеРазработчик

РЕКЛАМА · УДАЛЯТЬ?

ВХОД

Автоматический процесс

ВЫХОД

Клиентская сторона

РЕКЛАМА · УДАЛЯТЬ?

Гид

Конвертер CSS в объект стиля JavaScript

Мгновенно преобразуйте CSS-правила в объекты стилей JavaScript или наоборот, чтобы перейти от JS к CSS. Поддерживает пять выходных форматов, включая React inline styles, React Native StyleSheet, styled-components, Emotion и обычные JS-объекты. Обрабатывает вендорные префиксы, CSS-переменные, определение числовых значений и полные блоки CSS-правил с удалением селекторов — все на стороне клиента в вашем браузере.

Как использовать

Вставьте ваши CSS-правила в поле ввода и выберите целевой выходной формат. Конвертер автоматически преобразует имена свойств в camelCase, обрабатывает вендорные префиксы и соответствующим образом форматирует значения для выбранной цели. Переключитесь в режим JS-to-CSS, чтобы преобразовать объекты стилей JavaScript обратно в стандартный CSS. Скопируйте результат в буфер обмена одним щелчком мыши.

Функции

Двунаправленное преобразование – Преобразование CSS в JS-объекты стилей или JS-объекты обратно в CSS
5 выходных форматов – React inline styles, React Native StyleSheet, styled-components, Emotion css prop и обычные JavaScript-объекты
Обработка вендорных префиксов – Корректно преобразует -webkit-transform к WebkitTransform, -moz-appearance к MozAppearance, и другие свойства с вендорными префиксами
Умные числовые значения – Оставляет безразмерные числа как целые ('margin: 0 остается 0'), удаляет px для React Native, сохраняет строковые значения с единицами измерения для React
Поддержка CSS-переменных – Обрабатывает пользовательские свойства ('--custom-propи var() ссылки
Удаление селекторов – Вставьте полные блоки CSS-правил, и конвертер извлечет только декларации
Подсветка синтаксиса – Цветовая индикация вывода как для CSS, так и для JavaScript с копированием в буфер обмена

РЕКЛАМА · УДАЛЯТЬ?

 Часто задаваемые вопросы

Почему CSS-свойства должны быть camelCased в JavaScript?

Ключи объектов JavaScript не могут содержать дефисы как идентификаторы. Свойство, такое как background-color, будет интерпретировано как background минус color. Общепринятым в React и других JS-фреймворках является использование эквивалентов camelCase: backgroundColor, fontSize, borderRadius. Этот конвертер автоматически выполняет преобразование, включая специальные правила капитализации для вендорных префиксов.
В чем разница между обработкой стилей React и React Native?

React inline styles используют свойства camelCase со строковыми значениями, включающими CSS-единицы измерения, поэтому font-size: 16px становится fontSize: '16px'. React Native использует API StyleSheet, где пиксельные значения представлены простыми числами без единиц измерения, поэтому то же свойство становится fontSize: 16. React Native также не поддерживает все CSS-свойства, особенно сокращенные свойства, такие как margin с несколькими значениями.
Как преобразуются вендорные префиксы в JavaScript?

Вендорные префиксы следуют определенному правилу капитализации в JavaScript. Префикс теряет ведущий дефис и становится заглавным: -webkit-transform становится WebkitTransform, -moz-appearance становится MozAppearance, а -ms-grid-columns становится msGridColumns. Обратите внимание, что префикс ms по традиции является строчным, тогда как webkit, moz и o — заглавными.
Могу ли я преобразовать styled-components или Emotion CSS обратно в обычный CSS?

Да. При использовании режима JS-to-CSS вставьте объект стилей JavaScript, и конвертер преобразует свойства camelCase обратно в CSS-свойства с дефисами, раскроет строковые значения и отформатирует вывод как стандартные CSS-декларации. Это работает независимо от того, для какого JS-фреймворка были написаны исходные стили, поскольку все они используют одно и то же соглашение camelCase.