تحسين تدريجي

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

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

كيفية استخدام التحسين التدريجي

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

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

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

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

.المحتوى الرئيسي {
الخلفية: # 999؛
الخلفية: rgba (153،153،153، .75)؛
}

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

باستخدام ميزة استعلامات

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

supports (display: flex) {}

لن تعمل أي أنماط قمت بإضافتها داخل هذه القاعدة إلا إذا كان هذا المتصفح يدعم "flex" ، وهو الأنماط الخاصة بـ Flexbox. يمكنك تعيين مجموعة واحدة من القواعد للجميع ثم استخدام استعلامات الميزات لإضافة المزيد من المتصفحات المحددة فقط.

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