لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

محول CSS إلى كائن نمط JavaScript

بياناتمطور

إعلان · حذف؟

مدخل

عملية تلقائية

انتاج

جانب العميل

إعلان · حذف؟

مرشد

محول CSS إلى كائن نمط JavaScript

قم بتحويل إعلانات CSS إلى كائنات نمط JavaScript على الفور، أو اعكس العملية للانتقال من JS مرة أخرى إلى CSS. يدعم خمسة تنسيقات إخراج بما في ذلك أنماط React المضمنة، وReact Native StyleSheet، وstyled-components، وEmotion، وكائنات JS العادية. يتعامل مع بادئات البائع، ومتغيرات CSS، واكتشاف القيم الرقمية، وكتل قواعد CSS الكاملة مع إزالة المحددات - كل ذلك من جانب العميل في متصفحك.

كيفية استخدام

الصق إعلانات CSS الخاصة بك في منطقة الإدخال وحدد تنسيق الإخراج المستهدف. يقوم المحول تلقائيًا بتحويل أسماء الخصائص إلى camelCase، ويتعامل مع بادئات البائع، وينسق القيم بشكل مناسب للهدف الذي اخترته. قم بالتبديل إلى وضع JS-to-CSS لتحويل كائنات نمط JavaScript مرة أخرى إلى CSS قياسي. انسخ النتيجة إلى الحافظة الخاصة بك بنقرة واحدة.

خصائص

تحويل اتجاهي – تحويل CSS إلى كائنات نمط JS أو كائنات JS مرة أخرى إلى CSS
5 تنسيقات إخراج – أنماط React المضمنة، و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 إلى التحويل إلى camelCase في JavaScript؟

لا يمكن أن تحتوي مفاتيح كائن JavaScript على شرطات كمعرفات عادية. الخاصية مثل background-color سيتم تفسيرها على أنها background ناقص color. العرف في React وأطر عمل JS الأخرى هو استخدام مكافئات camelCase: backgroundColor، وfontSize، وborderRadius. يقوم هذا المحول بمعالجة التحويل تلقائيًا، بما في ذلك قواعد الكتابة الخاصة لبادئات البائع.
ما الفرق بين معالجة الأنماط في React و React Native؟

تستخدم أنماط React المضمنة خصائص camelCase مع قيم نصية تتضمن وحدات CSS، لذا يصبح font-size: 16px هو fontSize: '16px'. يستخدم React Native واجهة برمجة تطبيقات 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.