اضافة صفحة لتنسيق ادوات CSS علي مدونتك
هذا الكود هو أداة بسيطة لتنسيق أكواد CSS مباشرة في المتصفح. هذه الأداة مفيدة للمطورين والمدونين الذين يعملون مع أكواد CSS ويحتاجون إلى تنسيقها بشكل صحيح لتحسين قراءتها وفهمها.
(1) الهيكل العام (HTML)
<!DOCTYPE html>: يحدد نوع المستند كـ HTML5.<html lang="ar" dir="rtl">: يحدد لغة الصفحة كالعربية (ar) ويجعل اتجاه النص من اليمين إلى اليسار (rtl).<head>: يحتوي على معلومات تعريفية حول الصفحة، مثل ترميز الأحرف (<meta charset="UTF-8">) وإعدادات العرض للأجهزة المختلفة (<meta name="viewport" content="width=device-width, initial-scale=1.0">).<style>: يحتوي على أنماط CSS لتنسيق الصفحة.<body>: يحتوي على المحتوى الرئيسي للصفحة.
(2) الأنماط (CSS)
body: يتم تخصيص خلفية الصفحة ولون النص والاتجاه (RTL)..container: يُستخدم لتنسيق المنطقة الرئيسية التي تحتوي على الأدوات. يتم تحديد عرضها الأقصى (max-width) وإضافة حواف مستديرة وظل.textarea: يتم تخصيص مربع النص الذي يُدخل فيه المستخدم كود CSS. يتم تحديد اتجاه النص من اليسار إلى اليمين (direction: ltr) لأن أكواد CSS تكتب عادةً بهذا الاتجاه..fdry: تنسيق زر "تنسيق الكود" مع لون خلفية أحمر..buttons: يتم استخدامflexboxلترتيب الأزرار (تنسيق، نسخ، تنظيف) بشكل متساوٍ.preوcode: يتم تخصيص منطقة عرض الكود المنسق مع خلفية داكنة ونص أبيض لتحسين القراءة.
(3) الوظائف (JavaScript)
formatCSS(): وظيفة لتنسيق كود CSS الذي يُدخله المستخدم:- يتم استبدال الأقواس
{و}بأسطر جديدة ومسافات لتحسين التنسيق. - يتم إضافة أسطر جديدة بعد الفواصل
;والنقطتين:. - يتم إزالة المسافات الزائدة.
- يتم عرض الكود المنسق في منطقة
preوcode.
- يتم استبدال الأقواس
copyCode(): وظيفة لنسخ الكود المنسق إلى الحافظة:- يتم استخدام
navigator.clipboard.writeTextلنسخ النص. - إذا تم النسخ بنجاح، تظهر رسالة تأكيد (
alert).
- يتم استخدام
clearCode(): وظيفة لتنظيف مربع النص ومنطقة عرض الكود المنسق:- يتم مسح محتوى
textareaوpre.
- يتم مسح محتوى
أهمية هذا الكود في المدونة
- تحسين تجربة المستخدم (UX): يوفر أداة بسيطة وسريعة لتنسيق أكواد CSS مباشرة في المتصفح دون الحاجة إلى استخدام أدوات خارجية.
- توفير الوقت: بدلاً من تنسيق الكود يدويًا، يمكن للمستخدمين استخدام هذه الأداة لتنسيق الكود تلقائيًا في ثوانٍ.
- تعزيز التفاعل: إذا كانت مدونتك تستهدف مطورين أو مهتمين بتصميم الويب، فإن هذه الأداة ستجذب انتباههم وتجعل مدونتك أكثر فائدة.
- تعليمي: يمكن استخدام هذه الأداة كجزء من دروس أو مقالات تعليمية حول CSS، حيث يمكن للقراء تجربة تنسيق الكود مباشرة.
- تحسين جودة المحتوى: إذا كنت تشارك أكواد CSS في مدونتك، يمكنك استخدام هذه الأداة لتنسيقها بشكل صحيح قبل نشرها، مما يجعل المحتوى أكثر احترافية.
كيف يمكن استخدام هذا الكود في المدونة؟
- أداة تفاعلية: يمكنك تضمين هذا الكود في صفحة مدونتك كأداة تفاعلية لزوارك لتنسيق أكواد CSS.
- مشاركة الأكواد: إذا كنت تكتب مقالات تقنية أو دروسًا حول CSS، يمكنك استخدام هذه الأداة لعرض أمثلة من الأكواد المنسقة.
- تحسين SEO: يمكن أن تجذب هذه الأداة زوارًا جددًا إلى مدونتك، خاصة إذا كانت تستهدف مطورين أو مصممي ويب.
- تخصيص الأداة: يمكنك تطوير هذه الأداة لإضافة ميزات إضافية، مثل تنسيق أكواد JavaScript أو HTML، أو إضافة خيارات تنسيق إضافية.
مثال على استخدام الأداة
لنفترض أن لديك كود CSS غير منسق مثل هذا:
body {
background-color: #f4f4f4;
color: #333;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
بعد استخدام الأداة، سيصبح الكود المنسق كالتالي:
body{background-color:#f4f4f4;color:#333;padding:20px;} .container{max-width:800px;margin:0 auto;background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.1);}
الخلاصة
هذا الكود هو أداة بسيطة ولكنها قوية لتنسيق أكواد CSS، وهي مفيدة جدًا للمدونات والمواقع التي تستهدف مطورين أو مهتمين بتصميم الويب. يمكن أن تحسن تجربة المستخدم، وتوفر الوقت، وتجعل مدونتك أكثر تفاعلية واحترافية.
تابعنا في المقالة القادمة لتعرف كيفية التركيب
