هناك عدة طرق يمكنك من خلالها تطبيق أنماط CSS على صفحة ويب ، بما في ذلك أوراق الأنماط الخارجية أو حتى الأنماط المضمنة. إذا كنت تستخدم ورقة أنماط خارجية ، وهي الطريقة الموصى بها لإملاء شكل ومضمون مستند HTML ، فإن أحد الأساليب هو استخدام
@استيراد.
ال
@استيراد تسمح لك القاعدة بأوراق أنماط خارجية مهمة في المستند - إما في صفحة HTML أو حتى إلى مستندات CSS أخرى. إن كسر الكثير من الأنماط في عدد من الملفات الصغيرة والمركزة (واحدة للتخطيط ، وواحد للطباعة ، وواحد للصور ، وما إلى ذلك) يمكن أن يسهل في بعض الأحيان إدارة تلك الملفات والأسلوب المتنوع الذي تحتوي عليه. إذا كنت ترغب في التمتع بهذه الفائدة ، فإن استيراد هذه الملفات المختلفة هو ما ستحتاج إلى القيام به لجعلها تعمل كلها لعرض صفحة الويب الخاصة بك.
استيراد في HTML
لاستخدام ال
@استيراد القاعدة في HTML الخاص بك ، يمكنك إضافة ما يلي إلى
من المستند:
:
سيقوم هذا الرمز الآن باستيراد ورقة الأنماط هذه لاستخدامها في صفحة HTML هذه ويمكنك إدارة كافة الأنماط الخاصة بك في هذا الملف الواحد. الجانب السلبي لأوراق الأنماط المهمة بهذه الطريقة هو أن هذه الطريقة لا تسمح بالتنزيلات المتوازية. يجب أن تقوم الصفحة بتنزيل ورقة أنماط بأكملها قبل الانتقال إلى بقية الصفحة ، بما في ذلك أية ملفات CSS أخرى تقوم باستيرادها باستخدام هذه الطريقة. سيكون لهذا تأثير سلبي على سرعة صفحتك وأداء التنزيل. بالنظر إلى مدى أهمية أداء الصفحة في نجاح موقع الويب ، قد يكون هذا العيب وحده سببًا وراء رغبتك في تجنب استخدامimport.
طريقه بديله
كبديل لاستخدام
@استيراد في HTML ، يمكنك الارتباط بملف CSS هذا مثل:
هذا يعمل بشكل مشابه جدا ل
@استيراد من حيث أنه يسمح لك بإدارة كل CSS لديك من موقع / ملف مركزي واحد ، ولكن هذه الطريقة مفضلة من منظور التنزيل. إذا كنت لا تزال ترغب في تقسيم أنواع مختلفة من الأنماط إلى ملفات منفصلة ، فيمكنك الاستمرار في ذلك واستخدام وظيفةimport داخل ملف CSS الرئيسي. وهذا يعني أنه لا يزال بإمكان إدارة ملفات CSS الخارجية بشكل فردي ، ولكن نظرًا لأن جميعها يتم استيرادها إلى CSS رئيسي واحد ، يتم تحسين الأداء.
استيراد الى المغلق
باستخدام
مثال التعليمة البرمجية أعلاه سيؤدي إلى استخدام ملف "default.css" على صفحة HTML الخاصة بك. داخل ملف CSS هذا ، سيكون لديك أنماط صفحاتك المختلفة. يمكنك الحصول على كل تلك الأنماط المفصلة في تلك الصفحة الواحدة ، أو يمكنك استخدامimport لفصلها عن بعضها البعض لتسهيل الإدارة. مرة أخرى ، لنفترض أننا نستخدم 4 ملفات CSS منفصلة - واحدة للتخطيط وواحدة للطباعة وواحدة للصور. الملف الرابع هو ملفنا "الرئيسي" وهو ما ترتبط به صفحتنا (لهذا المثال ، هذا هو "default.css"). في أعلى ملف CSS الرئيسي ، يمكننا إضافة القواعد الموضحة أدناه:
import url ('/ styles / layout.css')؛ @ import url ('/ styles / type.css')؛ @ import url ('styles / images.css')؛
لاحظ أن هذه القواعد يجب تكون قبل كل المحتويات الأخرى في ملف CSS الخاص بك لكي تعمل. لا يمكنك الحصول على أي نمط CSS آخر قبل قواعد الاستيراد هذه.
أسفل قواعد الاستيراد هذه ، يمكنك إضافة أي أنماط CSS أخرى تريدها في الورقة الافتراضية. عندما يتم تحميل ملف CSS الأساسي هذا ، سيقوم أولاً باستيراد هذه الملفات المنفصلة وإضافة الأنماط الخاصة بها إلى أعلى ورقة الأنماط. ستحصل على جميع الأنماط الأخرى أسفل هذه الأنماط المستوردة ، مما يؤدي إلى إنشاء ملف CSS كامل سيستخدمه متصفح الويب لعرض موقعك. يمكنك الاستفادة من إدارة الملفات الأصغر والأكثر تركيزًا مع استمرار وجود ورقة أنماط واحدة مرتبطة بـ HTML.
باستخدامimport لاستعلامات الوسائط
هناك أمر واحد قد تفكر في تنفيذه يفصل بين استعلامات وسائط موقعك على الويب وأنماط مواقع الويب المتجاوبة في ملف منفصل. نظرًا لأن هذه الأنماط المتجاوبة يمكن أن تكون مربكة عند رؤيتها جنبًا إلى جنب مع قواعد الأنماط الأخرى لموقعك ، فقد يكون امتلاكها بمفردها في ملف مختلف جذابًا. أحد المخاوف من هذا النهج هو أنه منذ
@استيراد يجب أن تكون القواعد أولاً ، وهذا يعني أنه سيتم تحميل استعلامات الوسائط قبل باقي أنماط موقعك. عند إنشاء موقع سريع الاستجابة للجوّال يأخذ الأداء في الاعتبار ، من المحتمل أن يكون هذا مشكلة. لهذا السبب ، يُقترح عدم اقتصار الأنماط المتجاوبة لموقعك بشكل منفصل واستخدامها
@استيراد لإحضارهم إلى موقعك. نعم ، قد يبدو أن هناك فوائد للقيام بذلك ، ولكن العيوب تفوق هذه الفوائد.
هل أحتاج إلى استخدامimport؟
لا لم تفعل. تعرض العديد من المواقع ببساطة كل أنماطها الرئيسية داخل ملف واحد ، وبقدر ما يكون هذا الملف ، تتم إدارته بهذه الطريقة (هكذا أفعل ذلك في عملي الخاص). إذا وجدت
@استيراد مفيد ، إذن يمكن أن يكون جزءًا من سير عملك. خلاف ذلك ، يمكنك بناء صفحات الويب بأمان ورقة أنماط واحدة لكل قواعد CSS الخاصة بك.
دعم المتصفح
تواجه المتصفحات القديمة جدًا مشكلة في بعض قواعدimport هذه ، ولكن من المستبعد أن تكون هذه المتصفحات مشكلة بالنسبة إليك في هذه الأيام. هذا صحيح بشكل خاص الآن بعد انتهاء المهلة الزمنية النهائية للإصدارات القديمة من Internet Explorer. في النهاية ، إذا قررت استخدام
@استيراد القواعد في HTML أو CSS ، يجب ألا تواجه مشكلات في الإصدارات القديمة من متصفحات الويب ما لم تكن هناك حاجة ماسة لدعم إصدارات قديمة جدًا من IE.
حرره جيريمي جيرار
