نحن نعلم أن هناك طريقتين للإشارة إلى CSS خارجيًا في صفحات الويب، وهما: @import وlink كثيرًا ما نسمع الناس يقولون إنه من الأفضل استخدام الرابط لتقديم CSS، لكن هل تعلم لماذا؟
وصلة
الرابط هو توصيل CSS الخارجي بصفحات الويب والنموذج المحدد هو
@يستورد
الفرق بين الاستيراد والارتباط هو أنه يمكن إدخال عدة ملفات CSS أخرى في ملف CSS واحد
لماذا نستخدم @import
يستخدم معظم الأشخاص @import لأن المتصفحات القديمة لا تدعم @import، مما يعني أنه يمكننا استخدام @import لتقديم أنماط CSS التي لا يمكن تحليلها إلا في المتصفحات الحديثة.
استخدم الكود التالي لمنع المتصفحات IE6 والإصدارات الأقدم من تحليل CSS (الطرق الموجودة أدناه IE6 في حالة سيئة وسيتم حذفها هنا)
شاشة @import url(../style.css)؛ سبب رئيسي آخر هو عندما تحتاج صفحة الويب الخاصة بك إلى تقديم العديد من ملفات CSS الخارجية العديد من ملفات CSS الأخرى يبدو أن إدارتها أسهل.
لماذا استخدام الرابط
أحد الأسباب الرئيسية لاستخدام طريقة الارتباط هو أنه يمكنك السماح للمستخدمين بتبديل أنماط CSS. تدعم المتصفحات الحديثة مثل Firefox وOpera وSafari سمة rel='alternate Stylesheet' (أي أنه يمكنك اختيار أنماط مختلفة). على المتصفح). بالطبع، يمكنك أيضًا استخدام Javascript لتمكين IE من دعم المستخدمين الذين يغيرون الأنماط.
إذا لم تفهم، يرجى الدخول إلى هذه الصفحة والنقر على "عرض - نمط الصفحة" في Firefox.
مشاكل صغيرة مع @import
إذا كانت علامة الرأس لصفحة الويب الخاصة بك بسيطة جدًا، مع السمة @import فقط، فعندما يتصفح المستخدم بسرعة إنترنت بطيئة، سيرى صفحة بدون أنماط، وبعد ذلك يمكنه رؤية الصفحة أثناء تنزيل ملف CSS لتجنب مثل هذه المشاكل، عليك التأكد من وجود نص برمجي أو علامة رابط واحدة على الأقل في الرأس.
تحديث 04-11: @import سيجعل وقت التحميل الإجمالي لـ CSS أطول وسيؤدي إلى تغيير ترتيب تنزيل الملف في IE. على سبيل المثال، سيتم تنزيل ملفات البرامج النصية الموضوعة بعد @import قبل CSS.
للحصول على التفاصيل، يرجى الرجوع إلى http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
ما هي الطريقة التي ينبغي استخدامها؟
في الوقت الحاضر، يبدو أن الرابط أكثر ملاءمة (أو أكثر شيوعًا) لمواقع الويب الصغيرة. بالطبع، إذا كنا بحاجة إلى وحدات CSS في المستقبل، فسنستخدم بالتأكيد @import.