استخدامimport في صفحات الأنماط المتتالية (CSS)

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

تسمح لك القاعدةimport بأوراق أنماط خارجية مهمة في المستند - إما في صفحة HTML أو حتى في مستندات CSS أخرى. إن كسر الكثير من الأنماط في عدد من الملفات الصغيرة والمركزة (واحدة للتخطيط ، وواحد للطباعة ، وواحد للصور ، وما إلى ذلك) يمكن أن يسهل في بعض الأحيان إدارة تلك الملفات والأسلوب المتنوع الذي تحتوي عليه. إذا كنت ترغب في التمتع بهذه الفائدة ، فإن استيراد هذه الملفات المختلفة هو ما ستحتاج إلى القيام به لجعلها تعمل كلها لعرض صفحة الويب الخاصة بك.

استيراد في HTML

لاستخدام قاعدةimport في HTML الخاص بك ، يمكنك إضافة ما يلي إلى من المستند:
:
<نمط>
import url ("/ styles / default.css")؛

سيقوم هذا الرمز الآن باستيراد ورقة الأنماط هذه لاستخدامها في صفحة HTML هذه ويمكنك إدارة كافة الأنماط الخاصة بك في هذا الملف الواحد. الجانب السلبي لأوراق الأنماط المهمة بهذه الطريقة هو أن هذه الطريقة لا تسمح بالتنزيلات المتوازية. يجب أن تقوم الصفحة بتنزيل ورقة أنماط بأكملها قبل أن تنتقل إلى باقي الصفحة ، بما في ذلك أية ملفات CSS أخرى تقوم باستيرادها باستخدام هذه الطريقة. سيكون لذلك تأثير سلبي على سرعة صفحتك وأداء التنزيل. بالنظر إلى مدى أهمية أداء الصفحة في نجاح موقع الويب الحالي ، قد يكون هذا العيب وحده سببًا وراء رغبتك في تجنب استخدامimport.

طريقه بديله

كبديل لاستخدامimport في HTML ، يمكنك الارتباط بملف CSS هذا مثل:

يعمل هذا بشكل مشابه تمامًا لـimport في أنه يسمح لك بإدارة كل 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.

استخدام & # 64؛ استيراد لاستعلامات الوسائط

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

هل أحتاج إلى استخدام & # 64؛ استيراد؟

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

دعم المتصفح

تواجه المتصفحات القديمة جدًا مشكلة في بعض قواعدimport هذه ، ولكن من المستبعد أن تكون هذه المتصفحات مشكلة بالنسبة إليك في هذه الأيام. هذا صحيح بشكل خاص الآن بعد انتهاء المهلة الزمنية النهائية للإصدارات القديمة من Internet Explorer. في النهاية ، إذا قررت استخدام قواعدimport في HTML أو CSS ، يجب ألا تواجه مشكلات في الإصدارات القديمة من متصفحات الويب ما لم تكن هناك حاجة ماسة لدعم إصدارات قديمة جدًا من IE.

المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرار.