css - weschool - www w3schools com html5




الفرق بينimport والرابط في CSS (5)

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

استخدامimport

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

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

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

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


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



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

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

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

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


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

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

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

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


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

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





hyperlink