www الفرق بينimport والرابط في CSS




www w3schools com html5 (6)

عندما أستخدم قاعدةimport ، فإنه عادةً ما يتم استيراد ورقة أنماط في ورقة أنماط موجودة (على الرغم من أنني لا أحب القيام بها للبدء بها). لكن للإجابة عن سؤالك ، لا أعتقد أن هناك أي اختلاف. ما عليك سوى التأكد من وضع عنوان URL في علامات اقتباس مزدوجة للتوافق مع XHTML الصالحة.

أتعلم بعض CSS لضبط قالب مشروعي. لقد جئت إلى هذه المشكلة ولم أجد إجابة واضحة على الويب. هل هناك فرق بين استخدامimport أو الرابط في CSS؟

استخدامimport

<style>@import url(Path To stylesheet.css)</style>

استخدام الرابط

<link rel="stylesheet" href="Path To stylesheet.css">

ما هي أفضل طريقة للقيام بذلك؟ و لماذا؟ شكر!


يمكنك استخدام الأمر import لاستيراد CSS آخر داخل ملف css غير ممكن باستخدام الأمر link. لا يمكن للمتصفح القديم حقا (IE4 ، IE5 جزئيا) التعامل مع وظائف الاستيراد. بالإضافة إلى ذلك ، قد تفشل بعض مكتبات تحليل xhtml / html في الحصول على استيراد ورقة الأنماط. يرجى العلم بأن الاستيراد الخاص بك يجب أن يأتي قبل جميع إعلانات CSS الأخرى.


يُقصد بالمصطلح "import" بشكل عام لاستخدامه في ورقة أنماط خارجية بدلاً من مضمنة مثل في المثال الخاص بك. إذا كنت تريد إخفاء ورقة أنماط من المتصفحات القديمة جدًا ، يمكنك استخدام ذلك كاختراق لمنعها من استخدام ورقة الأنماط تلك.

بشكل عام ، تتم معالجة العلامة <link> بسرعة أكبر من القاعدةimport (التي يبدو أنها بطيئة نوعًا ما بقدر ما يتعلق الأمر بمحرك معالجة css).


يمكن أن يسمح التوجيه <link> بتحميل عدة وحدات css وتفسيرها بشكل غير متزامن.

يفرض توجيهimport المستعرض * الانتظار حتى يتم تحميل البرنامج النصي المدرج في سطر إلى البرنامج النصي الأصل قبل أن تتم معالجته بشكل صحيح من قبل المحرك الخاص به ، حيث أنه تقني واحد فقط.

الكثير من البرامج النصية للتقليل من css (واللغات مثل أقل أو sass) ستقوم تلقائيًا بتوصيل النصوص البرمجية المرتبطة في النص الرئيسي حيث أنها تتسبب في نقل أقل للتحميل.

* (يعتمد على المتصفح)


من الناحية النظرية ، الفرق الوحيد بينهما هو أن @import هي آلية CSS لتضمين ورقة أنماط و <link> آلية HTML. ومع ذلك ، فإن المتصفحات تتعامل معها بشكل مختلف ، مما يعطي <link> ميزة واضحة من حيث الأداء.

كتب ستيف سويدرز مشاركة مدونة واسعة النطاق تقارن تأثير كل من <link> و @import (وجميع أنواع التوليفات منها) التي تسمى " لا تستخدمimport ". هذا العنوان يتحدث إلى حد كبير عن نفسه.

ياهو! يذكرها أيضًا كأحد أفضل ممارسات أدائها (شارك في تأليفها ستيف سويدرز): اختر <link> فوقimport

أيضًا ، يتيح لك استخدام العلامة <link> تحديد أوراق الأنماط "المفضلة" أو البديلة . لا يمكنك فعل ذلك بـ @import .






hyperlink