نحن نعلم أن هناك طريقتين للإشارة إلى CSS خارجيًا في صفحات الويب، وهما: @import وlink كثيرًا ما نسمع الناس يقولون إنه من الأفضل استخدام الرابط لتقديم CSS، لكن هل تعلم لماذا؟
وصلة مثال لكود المصدر
[www.downcodes.com] الرابط هو توصيل CSS خارجي بصفحة الويب. النموذج المحدد هو <link href="http://www.downcodes.com/styles.css" type="text/css" />.
@يستورد مثال لكود المصدر
[www.downcodes.com] الفرق بين الاستيراد والارتباط هو أنه يمكن إدخال عدة ملفات CSS أخرى في ملف CSS واحد. النموذج المحدد هو <style type="text/css">@import url("http://www.downcodes.com/styles". .css");</style>
لماذا نستخدم @import
يستخدم معظم الأشخاص @import لأن المتصفحات القديمة لا تدعم @import، مما يعني أنه يمكننا استخدام @import لتقديم أنماط CSS التي لا يمكن تحليلها إلا في المتصفحات الحديثة.
استخدم الكود التالي لمنع المتصفحات IE6 والإصدارات الأقدم من تحليل CSS (الطرق الموجودة أدناه IE6 في حالة سيئة وسيتم حذفها هنا)
@import url(../style.css) الشاشة؛
السبب الرئيسي الآخر هو عندما تحتاج صفحة الويب الخاصة بك إلى تقديم عدة ملفات CSS خارجية، فأنت بحاجة إلى استخدام رابط لتقديم CSS، ثم استخدام طريقةimport لإدخال العديد من ملفات CSS الأخرى في ملف CSS هذا.
لماذا استخدام الرابط
أحد الأسباب الرئيسية لاستخدام طريقة الارتباط هو أنه يمكنك السماح للمستخدمين بتبديل أنماط CSS. تدعم المتصفحات الحديثة مثل Firefox وOpera وSafari سمة rel='alternate Stylesheet' (أي أنه يمكنك اختيار أنماط مختلفة). على المتصفح). بالطبع، يمكنك أيضًا استخدام Javascript لتمكين IE من دعم المستخدمين الذين يغيرون الأنماط.
مشاكل صغيرة مع @import. إذا كانت علامة الرأس لصفحة الويب الخاصة بك بسيطة جدًا، مع سمة @import فقط، فعندما يتصفح المستخدم بسرعة إنترنت بطيئة، سيرى صفحة بدون أنماط، وسيظهر ملف CSS يمكنك رؤية النمط المناسب لتجنب هذه المشكلة، عليك التأكد من وجود برنامج نصي أو علامة رابط واحدة على الأقل في الرأس.
ما هي الطريقة التي يجب استخدامها؟ في الوقت الحالي، يبدو أنه من الأفضل (أو الأكثر شيوعًا) استخدام الرابط لمواقع الويب الصغيرة. بالطبع، إذا أردنا تعديل CSS في المستقبل، فسنستخدم بالتأكيد @import.
المقالة مترجمة جزئيًا من ما الفرق بين @import ورابط CSS لأغراض تعليمية، مرحبًا بك للإضافة.