أيهما أفضل لأكواد css هل وضعه في أم في رابط خارجي بامتداد .css
أيهما أفضل لأكواد css هل وضعها في <style> أم في رابط خارجي بامتداد .css
تختار ما يناسبك لانه توجد 3 طرق لوضع التنسيق
-1) inline style وهنا يتم وضع التنسيقات داخل عنصر div او p او span ....
-2) interner style هنا يتم وضع التنسيق بين وسمي style في الصفحة
-3 referense style ملف تنسيقات خارجي بامتداد .css
وانت ستختار على حسب القوة لان
inline style قيمتة في الصفحة كبيرة ولن تؤتر عليه اي تنسيقات اخي يعني لو عندك عنصر p عملت له تنسيق داخل الوسم وليكن لون احمر حتى لو دهبت وعملت في ملف ستايل خارجي p {color: blue فانه لن يتاتر ابداا
لان
inline style يساوي 100 نقطة
interner style يساوي 10 نقطة
referense style يساوي 1 نقطة
هدا متال بسيط لكي تفهم اليه عمل التانسيقات اتمنى انني افدتك يمكنك التعمق في البحت في هدا الموضوع
هناك سببين :
الاول للتنظيم .
و الثاني هو الاهم : السرعة ، لان المتصفح يقوم بتخزين الملفات على الحاسوب ، و بمجرد طلب الملف مرة اخرى ، سيتحقق المتصفح اذا كان الملف سبق و ان تم تحميله ، اذا كان كذلك سيتحقق من تاريخ اخر تعديل على الملف و ان ظهر للمتصفح ان الملف الموجود على الحاسوب هو نفسه الموجود على استضافة الموقع ، فسيتجاهل تحميله من جديد .
و بالتالي زيادة سرعة التصفح و ذلك بتقليل الملفات التي يتم تحميلها سواء كانت صور ، ملفات ستايل او ملفات الجافاسكربت .
اما في حالة كتابة الملف داخل وسم ال style. فالمتصفح لن يكون قادرا على تتبع الستايل و بالتالي سيقوم بتحميله من جديد كما يتم تحيمل ملفات ال html .
لا ، لسي كذلك ، لا يتم تحيم الملفات كل مرة ،
و للتاكد قم بفتح نافدة netwotk على متصفحك و اعد تحيمل الصفحة و ستظهر اغلب الملفات بكود 304 . يعني ملف لم يتم التعديل عليه و هو طبق الاصل للملف الموجود على الحاسوب ،
ابحث اكثر عن ( 304 Not Modified )
المتصفح يقوم بتخزين الملفات في حالة اذا كان المسئول عن الموقع مفعل خاصية التخزين"Cache" في موقعة او الاستضافة توفر ذلك ، لو لم يتم تفعيل الخاصية عند زيارة المستخدم للموقع في كل مرة سيتم تحميل الملفات من جديد.
- لن يؤثر على السرعة، بعد الإنتهاء من التطوير ستقوم بعمل نسخ مُصغرة min من ملفات التنسيق وملفات js توجد أدوات ومواقع تقوم بهذه المهمة بالنيابة عنك لتصغير حجم الملفات لأقصى حد.
هذا يتوقف علي حجم ملف الـCSS ، اذا كان حجم الملف صغير فان وضع الملف داخل وسم style في صفحة الـHTML أفضل لانه لن يمنع الصفحة من التحميل او عرقلتها ، بينما اذا كان الملف كبير فانه يتوجب عليك وضعه في ملف خارجي ويمكنك ايضا ان تقوم بتقسيم الملف الي جزئين الجزء الظاهر علي الشاشه للمستخدم عند طلب الصفحة وتضعه في وسم style بينما بقية الملف تضعها في ملف خارجي.
هذه النقطة بسبب الحفاظ علي اداء وسرعة الموقع يمكنك الأطلاع علي هذه المقالة لمزيد من العلومات عن عرقله ملفات CSS لشجرة العرض:
من جهه اخري كتابة الخصائص داخل وسم Style اقوي من كتابتها في ملف خارجي وتختلف قوة العناصر من مكان للاخر وهذا يسمي CSS Specifity يمكنك الأطلاع علي هذه المقالة لمعلومات أكثر :
ولكن من حيث قابلية التعديل و الحفاظ علي ملفات الـCSS مستقلة بذاتها من الأفضل كتابتها في ملف خارجي.
الفرق ليس كبيرا لكن عموما الرابط الخارجي أفضل بسبب أمور لا نتطرق إليها.
أما بخصوص أولوية الرمز فيمكنك استعمال !important إذا واجهتك مشاكل في تغيير شيء ماعلى عنصر له اولوية أكبر كداخل العنصر أو برمز أسفي امتداد CSS
يفضل عملها فى ملف خارجى بامتداد .css
والسبب :
الكود الذى سيستهلك عبارة عن سطر الإستيراد فقط لا غير .
يعمل على تسريع فتح الموقع وتسريع التصفح .
جيد بالنسبة لتنسيق الأكواد داخل الملف لتسهيل قرائتها والتعديل عليها .
تحياتى
كيف يتم التحكم في مدة التخزين المؤقت لمثل هذه الملفات ، لأنني عندما أفحص موقعي بأداة غوغل لقياس السرعة أجد أن من بين الأخطاء ، أو النصائح هو تحسين التخزين المؤقت لملفات css أو js
يمكن ذلك اذا كنت تستخدم اباتشي سيرفر وذلك بإضافة بعض الاكواد في ملف htaccess
مثل
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 86400 seconds"
ExpiresByType application/x-javascript "access plus 86400 seconds"
التعليقات