شرح تفصيلي للتحسين التدريجي لـ CSS (أوراق الأنماط المتتالية).

هناك العديد من الطرق لدمج التحسين التدريجي في عملك باستخدام أوراق الأنماط المتتالية (CSS). ستناقش هذه المقالة بعض الطرق الأكثر نجاحًا وستنظر في طرق أخرى لتحسين موقعك تدريجيًا.

تنظيم ورقة الأنماط

لا يفكر العديد من مصممي ومطوري الويب كثيرًا في كيفية إدخال أوراق الأنماط في المستندات، ولكنها في الواقع فن. باستخدام النهج الصحيح، يمكنك جني الفوائد العديدة للتحسين التدريجي على الفور.

استخدم أوراق أنماط متعددة

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

يحتوي ملف main.css على جميع قواعد الأنماط الخاصة بالموقع، وفكر في تقسيمه إلى أوراق أنماط مستقلة تحتوي على أسلوب الطباعة والتخطيط واللون، ويتم تسميتها وفقًا لذلك: type.css وlayout.css وcolor.css.


(شكل توضيحي: كيفية تقسيم ورقة أنماط واحدة إلى أوراق أنماط متعددة ذات صلة)

بمجرد اكتمال الفصل أعلاه، يمكنك استخدام بعض الحيل السحرية لتوفير تجربة "منخفضة الدقة" تلقائيًا للمتصفحات القديمة (مثل IE5/Mac) والعديد من المتصفحات التي تفتقر إلى الدعم القوي لتخطيط CSS. كيف تفعل ذلك؟ كل هذا يتوقف على كيفية استيراد الملف. افترض أنه تم تقديم main.css من خلال عنصر الرابط:


أولاً، قم بتقسيم السطر المرجعي أعلاه إلى ثلاث أوراق أنماط ذات صلة:


في الماضي، قام العديد من المطورين بتعيين قيمة الوسائط على "شاشة" أو "عرض"، مما يجعل نمط التخطيط غير صالح تمامًا في Netscape 4.x (تعليق توضيحي: Netscape 4.x لا يدعم التخطيطات المعقدة مثل العائمة وتحديد الموضع). ومع ذلك، هناك حل أفضل. قبل شرح هذه الطريقة بالتفصيل، دعونا نلقي نظرة على أنواع الوسائط البديلة.

أنواع الوسائط الاختيارية

يركز التحسين التدريجي بشكل أساسي على المحتوى، ونريد تقديم تجربة "محسّنة" لجميع الأجهزة التي تدعم عرض المحتوى. لذلك، من المهم مراعاة الأجهزة خارج المتصفح، مثل أجهزة الطباعة والأجهزة المحمولة.

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

عادةً، نحتاج إلى استخدام عنصر رابط آخر لإضافة أنماط الطباعة:


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

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

إذا نظرنا مرة أخرى إلى ورقة الأنماط الخاصة بنا، ففكر في الكود التالي:


لم نقم بالإعلان عن نوع الوسائط، لذا سيقرأ Netscape 4.x كافة الأنماط الموجودة في هذه الملفات الثلاثة. ومع ذلك، فإن متصفح Netscape يفهم أساسيات CSS، ويمكننا الاستفادة من ذلك. يمكننا تنظيم أنماطنا بشكل أكبر عن طريق نقل جميع الأنماط الموجودة في Layout.css إلى ورقة أنماط جديدة - تسمى Screen.css بشكل مناسب. أخيرًا، قم بتحديث المحتوى في Layout.css لاستيراد screen.css، بحيث لم يعد NS4.x والمتصفحات الشقيقة له ذكية (لأنهم لا يفهمون توجيه @import). (ملاحظة الترجمة: ما يتحدث عنه المؤلف هنا هو نقل كل المحتوى في Layout.css إلى Screen.css، ثم تقديم Screen.css من خلال @import في Layout.css. أعتقد أن أفضل طريقة هي إضافته إلى تخطيط.css احتفظ بأنماط التخطيط الأساسية التي يمكن أن يفهمها أيضًا NS4.x، وانقل أنماط التخطيط المتقدمة الأخرى إلى screen.css).


هناك مجال للتحسين - الوسائط التي يجب الإعلان عن أهداف ورقة الأنماط، وهو ما نقوم به عن طريق إضافة نوع الوسائط إلى إعلان @import:


تكمن المشكلة في أن المتصفحات IE7 والإصدارات الأقدم لا تفهم بناء الجملة هذا وبالتالي تتجاهل ورقة الأنماط أعلاه. إذا كنت تريد تقديم ورقة الأنماط أعلاه لهذه المتصفحات (وهو ما يكون مطلوبًا غالبًا)، فيمكنك القيام بذلك بسهولة باستخدام التعليقات الشرطية. سوف يتم تفصيلها أدناه. إذا كانت لديك عين حادة مثل النسر، فربما لاحظت أنه يتم استخدام علامات الاقتباس المفردة (') بدلاً من علامات الاقتباس المزدوجة (") على جانبي اسم ورقة الأنماط. تسمح هذه الخدعة الصغيرة لـ IE5/Mac بتجاهل النمط إن إمكانيات تخطيط IE5/Mac CSS ضعيفة للغاية (خاصة دعم التعويم وتحديد المواقع)، ومن المقبول تمامًا إخفاء قواعد التخطيط عنها، ففي النهاية، لا يزال بإمكانهم الحصول على معلومات اللون والتخطيط، وهو ما يكفي في بعض الحالات .

باستخدام نفس التقنية، يمكنك استيراد ملف print.css (الذي، كما قد تتخيل، يحتوي على قواعد محددة لتخطيط الطباعة).


الآن، ليس لدينا فقط ورقة أنماط منظمة بشكل جميل، بل لدينا أيضًا طريقة فعالة لتحسين تصميم موقعك بشكل متزايد.


(توضيح لكيفية ارتباط أوراق الأنماط المتعددة ببعضها البعض وكيفية تطبيقها على مستند)

كيفية التعامل مع IE6؟

بالنسبة للعديد من الأشخاص، يعد Internet Explorer 6 بمثابة Netscape 4 الجديد، ويريد الجميع التخلص منه.

دعونا نتخطى العزف على مشكلات IE6. إن مشاكل IE6 موثقة جيدًا، وبصراحة، ليس من الصعب إصلاحها. علاوة على ذلك، فإن اعتماد IE7 سريع جدًا (خاصة في السوق الاستهلاكية)، كما أن IE8 موجود بالفعل في النسخة التجريبية العامة. وهذا يعني أنه في يوم من الأيام، يمكننا حقًا أن نقول وداعًا لـ IE6 القديم.

سواء عن قصد أو عن غير قصد، عندما أطلقت Microsoft IE5، فقد قدمت أداة جيدة للتحسين التدريجي: التعليقات المشروطة. لا تسمح هذه الأجزاء المنطقية الذكية (المنقولة إلى تعليقات HTML في جميع المتصفحات الأخرى) بمقتطفات معينة من التعليمات البرمجية الترميزية بالعمل فقط بالنسبة لـ IE فحسب، بل تسمح أيضًا بمقتطفات التعليمات البرمجية هذه بالعمل فقط على إصدارات محددة من IE.

باعتبارنا مطورين مدركين لمعايير الويب، يجب علينا دائمًا اختبار تصميماتنا أولاً على غالبية المتصفحات الحالية المتوافقة مع المعايير، ثم توفير تصحيحات لتلك المتصفحات التي يمكنها العودة إلى المسار الصحيح مع تغييرات طفيفة. يختلف سير العمل من شخص لآخر، ولكنني أجد أنه من الأفضل أن نبدأ كل مشروع بمجموعة قياسية من المستندات. يتضمن جناحي الأساسي الملفات التالية:


ثم، اعتمادًا على احتياجات المشروع، قم بإضافة ملفات CSS خاصة بالمتصفح لتضمين تلك "التعديلات الطفيفة". في معظم المشاريع الآن، هذه الملفات هي ie7.css وie6.css. إذا كان المشروع يتطلب دعمًا للإصدارات قبل IE6، فسوف أقوم أيضًا بإنشاء ملفات مقابلة له (مثل ie5.5.css، وما إلى ذلك). بعد وضع هذه الملفات في مكانها الصحيح، بدأت بإضافة قواعد الأنماط إلى أوراق الأنماط المناسبة.

أبدأ اختبار CSS الخاص بي في Mozilla Firefox لأن معظم CSS الخاص بي مكتوب باستخدام الشريط الجانبي لمحرر CSS الخاص بـ Firefox. بمجرد الانتهاء من تصميم الصفحة في Firefox، قمت على الفور بفتح متصفح آخر لاختبارها وعرضها. يعمل معظمهم بشكل مثالي لأنهم يلتزمون بمعايير الويب. ثم افتح IE7 للاختبار. في معظم الحالات، لا توجد مشكلات كثيرة. في بعض الأحيان، يلزم تشغيل hasLayout أو تصحيح أخطاء تخطيط بسيطة أخرى. بدلاً من كتابة هذه الإصلاحات في ملف ورقة أنماط المجموعة الأساسية، أضفتها إلى ie7.css وقدمتها عبر التعليقات الشرطية في رأس المستند:


التعليقات الشرطية المذكورة أعلاه تمكن IE7 وما دونه (ملاحظة الترجمة: lte هو اختصار أقل من أو يساوي) للتعرف على النمط المقدم. لذلك، عند تصفح الصفحة باستخدام IE7، سيتم الحصول على هذه التصحيحات. ولكن إذا كنت تستخدم إصدارًا جديدًا من IE - والذي ربما يكون قد أصلح هذه المشكلات، على سبيل المثال، تخلى IE8 عن hasLayout ولم يعد به هذه المشكلات - فسيتم تجاهل هذه الأنماط. ومن ناحية أخرى، يمكن الحصول على هذه الأنماط باستخدام IE6. يعد هذا أمرًا جيدًا لأن أخطاء العرض في IE7 تميل إلى التواجد في IE6 أيضًا. كما هو مذكور أعلاه، لا يمكن لـ IE7 والإصدارات الأقدم فهم @import مع نوع الوسائط. إن تقديم screen.css بهذه الطريقة غير صالح لـ IE7 والإصدارات الأقدم. ولذلك، تحتاج أيضًا إلى إضافة عبارة @import بدون نوع الوسائط في الجزء العلوي من الملف ie7.css لتقديم screen.css.

بمجرد أن أقوم بتصحيح IE7، سأفتح IE6 وأرى ما إذا كنت بحاجة إلى تصحيح أي شيء. إذا لزم الأمر، أود إضافة تعليق شرطي آخر إلى المستند، واستيراده إلى ie6.css:


بعد ذلك، ما عليك سوى إضافة التصحيحات المطلوبة بواسطة IE6 إلى أوراق الأنماط المقابلة. سيتم تجاهل أوراق الأنماط هذه بواسطة IE7، ولكنها ستظل تؤثر على الإصدارات مثل IE5.5.

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

اعتبارات أخرى

لا يقتصر التحسين التدريجي لـ CSS على كيفية ربط أوراق الأنماط بالمستندات، ولكن يمكن تطبيقه أيضًا على كيفية كتابة CSS.

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

خذ نموذج اتصال بسيط كمثال:


(شكل توضيحي: نموذج HTML المستخدم في هذا المثال (سيتم إعطاء الكود أدناه))

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


الطريقة الأكثر ملاءمة هي إضافة النقطتين مرة أخرى إلى المستند عن طريق إنشاء محتوى:


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

ربما اكتشفت أنه باستخدام محددات CSS المتقدمة (الترجمة: محدد، تُترجم أيضًا كمحدد، ولكن أعتقد أن المحددات يمكن أن تعكس المعنى الأصلي بشكل أفضل، مثل ترجمة عامل التشغيل كعامل تشغيل بدلاً من عامل التشغيل)، يمكنك تغيير نمط معين المتصفحات الأكثر تقدمًا، وهذا يساعد على تحسين الموقع بمرور الوقت. وخير مثال على ذلك هو محدد السمات، الذي لم يتم فهمه (وبالتالي تم تجاهله) في متصفح IE6 ومعاصريه والمتصفحات السابقة. استخدم إيجور كلوس هذا المفهوم بشكل جميل في تقديمه الذي يحمل عنوان "Geminating" على CSS Zen Garden:


(شكل توضيحي: مقارنة عرض عمل CSS Zen Garden الخاص بـ Egor Kloos ("Double Double") في المتصفحات القياسية وIE6)

كيف فعل ذلك؟ فيما يلي رمز المثال المعدل قليلاً:


الفرق واضح وهو مثال جميل لكيفية استخدام التحسين التدريجي في CSS.

وبالمثل، يحتوي موقع آندي كلارك على بعض الحكايات المتعلقة بـ IE6. باستخدام مرشحات IE وإضافة بعض التعليقات التوضيحية المشروطة، تمكن Andy من إزالة كل الألوان من الموقع وتوفير بعض الصور القابلة للاستبدال والتي توفر تجربة "lo-fi" حقيقية.


(شكل توضيحي: مقارنة موقع آندي كلارك في المتصفحات القياسية وIE6)

التقنية الرمادية في الصورة أعلاه هي كما يلي: في ورقة أنماط IE6 (وأدناه) التي تمت إضافتها بواسطة التعليق الشرطي، أضف العبارة التالية:


على الرغم من أن المثالين أعلاه قد يحتويان على الكثير من التقنيات التي لا يتم استخدامها في العمل اليومي، إلا أنهما يقومان بعمل رائع في توضيح مفهوم كيفية تطبيق التحسين التدريجي لـ CSS عمليًا.

تلخيص

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

مسلحًا بهذه المعرفة، ستكون في طريقك لتصبح خبيرًا في التحسين التدريجي.