GrabCSS: استخراج HTML و CSS نظيفين من أي عنصر ويب
GrabCSS، بواسطة شنييدر دامين، هو ملحق لمتصفح كروم لاستخراج كود المكونات بسرعة من صفحات الويب الحية. يقوم بنسخ HTML وCSS نظيفين ومنسقين عند تمرير المؤشر فوق عنصر، مع حل متغيرات CSS والقواعد الموروثة بحيث يعمل الناتج بشكل مستقل للنمذجة، والتدقيق، والتعلم. تشمل القدرات CSS المخصصة، الأنماط المضمنة، ناتج Tailwind، التقاط الرسوم المتحركة والحالات الزائفة، التنقل عبر DOM باستخدام لوحة المفاتيح، وفحوصات تباين WCAG. تستهدف الأداة مطوري الواجهة الأمامية، ومصممي واجهة المستخدم/تجربة المستخدم، ومدققي الويب، والطلاب الذين يحتاجون إلى كود مكونات قابل للقراءة بسرعة.
ينتج CSS مختصر وقابل للقراءة البشرية عن طريق حذف الضوضاء المحسوبة
GrabCSS يستخرج القواعد المركزة بدلاً من القائمة الطويلة من الخصائص المحسوبة المعروضة في لوحات فحص المتصفح. يقوم الامتداد بحل متغيرات CSS والإعلانات الموروثة بحيث تعمل المقاطع بشكل مستقل، ويقوم بتنسيق المخرجات لتناسب سير العمل الشائعة. تشمل متغيرات المخرجات خيار CSS محدود يستخدم أسماء فئات نظيفة، وخيار الأنماط المضمنة، وخيار فئات Tailwind CSS، مما يجعل المكونات الملصقة أسهل في التكيف من الأنماط المحسوبة الخام.
يدعم الاختيار الدقيق والتقاط الكود السريع من خلال التحكم بالتحويم ولوحة المفاتيح
يعرض المحدد لوحة عائمة عند تنشيطها، مما يتيح لك فحص العناصر عن طريق التحويم ونسخ الكود المنسق بنقرة واحدة. يستخدم التنقل في DOM المدفوع بلوحة المفاتيح الأسهم لأعلى وأسفل للتحرك بين العناصر الأبوية والطفلية لاستهداف دقيق. يقوم المستخرج بالتقاط الرسوم المتحركة، والانتقالات، والحالات الزائفة مثل :hover، وتُجرى فحوصات تباين WCAG على عناصر النص المحوّمة للمساعدة في مراجعة الوصول الأساسية.
يعالج محليًا، ويتناسب مع سير عمل Chromium، ويعمل كبديل خفيف لـ DevTools
تحدث جميع المعالجة في المتصفح دون جمع بيانات خارجية ودون الحاجة إلى حساب، لذا تبقى اللقطات على الجهاز. يتم تثبيت الامتداد على Chrome ومتصفحات أخرى قائمة على Chromium مثل Microsoft Edge وBrave، مما يجعل من السهل إضافته إلى إعدادات التطوير الحالية. يضع المطور الأداة كبديل خفيف للبحث في DevTools، وقد تم الإشادة بها لإخراجها السريع والنظيف. يعني عدم وجود مزامنة قائمة على الحساب أن مشاركة المقاطع المركزية تتطلب خطوات منفصلة.
اختيار عملي لتدفقات العمل الفردية، مع تنازلات لمشاركة الفريق
GrabCSS هو خيار عملي لممارسي الواجهة الأمامية الأفراد والطلاب الذين يحتاجون إلى مقتطفات مكونة مضغوطة وقابلة للتعديل على جهاز واحد. تصميمه المعتمد على المتصفح يفضل التحكم المحلي والاستخراج السريع، على الرغم من أن نفس التصميم يعني أنه لا يوفر مزامنة قائمة على الحساب لمكتبات الفريق أو الأجهزة المتعددة. اختره للاحتجاز السريع واليدوي؛ اعتمد على مكتبة مشتركة منفصلة عندما تكون التوزيع التعاوني مطلوبًا.
