ما هو التحسين التدريجي؟

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

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

كيف يعمل التحسين التدريجي؟

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

تكمن لغة HTML في قلب كل شيء. نظرًا لأنها لغة "متسامحة" ، ستعرض المتصفحات HTML كما يفهمونها. عادة ، سيتجاهلون أي شيء لا يدعمونه.

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

نهج تدريجي للتصميم

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

خذ شريط القوائم ، على سبيل المثال ؛ يمكنك هيكلة ذلك على النحو التالي:

<التنقل>
<أ href ="/register">يسجل</أ>
<أ href ="/login">تسجيل الدخول</أ>
<أ href ="/about">معلومات عنا</أ>
<أ href ="/contact">اتصال</أ>
</nav>

لعرض قائمة أفقية ، بحيث يبدو كل رابط على شكل زر ، يمكنك تصميمه باستخدام CSS:

التنقل في {
زخرفة النص: لا شيء ؛
عرض: مضمنة كتلة ؛
حشوة: 0.5em 1م;
الحدود: 1 بكسل صلبة ؛
نصف قطر الحدود: 8 بكسل ؛
الهامش الأيمن: 1em ؛
}

عندما يعرض المتصفح هذا بشكل كامل ، يجب أن يبدو كما يلي:

ومع ذلك ، إذا لم يكن CSS متاحًا ، فستظهر القائمة على النحو التالي:

لاحظ كيف أن هذا لا يبدو كقائمة كما أنه ليس من السهل جدًا استخدامه لأن الروابط مدمجة في قائمة واحدة.

يمكنك استخدام هيكل بديل لجعل التصميم أكثر قوة:

<التنقل>
<ماي>
<لي><أ href ="/register">يسجل</أ></li>
<لي><أ href ="/login">تسجيل الدخول</أ></li>
<لي><أ href ="/about">معلومات عنا</أ></li>
<لي><أ href ="/contact">اتصال</أ></li>
</ul>
</nav>

نظرًا لأن هذا الترميز يستخدم عنصر قائمة غير مرتب ، فإنه يكون أكثر قابلية للاستخدام في حالة عدم وجود CSS:

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

التنقللي { عرض: في النسق؛ }

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

إدخال الوظائف بشكل تدريجي

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

من الناحية العملية ، ينطبق هذا عادةً على JavaScript. إذا قمت بتقديم سلوك من جانب العميل ، فيجب أن تقوم بطبقة الوظائف أعلى موقع أو تطبيق يعمل بالفعل بدونه.

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

<جسم>
<!--... -->
<زر onclick ="تحميل المزيد()؛">
حمولة أكثر
</button>
<!--... -->
</body>

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

<جسم>
<!--... -->
<معرف ="ص 2" href ="/page/2">الصفحة 2</أ>

<النصي>
وظيفةتحميل المزيد() { وحدة التحكم.سجل("!")؛ }

/ * استبدال الرابط بالزر * /
فار ارتباط = وثيقة.getElementById ("p2") ؛
فار زر = وثيقة.createElement ("زر") ؛
button.innerText = "تحميل المزيد";
button.addEventListener ("انقر"، تحميل المزيد)؛
وثيقة.جسم.insertBefore(زر, وصلة);
وصلة.عقدة الأم.removeChild(وصلة);
</script>
</body>

هذا الرمز يحول الرابط الأساسي إلى زر مع معالج الحدث. من خلال إدخال التبعية على JavaScript باستخدام JavaScript نفسها ، يمكنك التأكد من أنها ستعمل. وهناك سلوك افتراضي وظيفي يعمل ، في شكل الرابط القياسي لـ /page/2.

هل التعزيز التدريجي ضروري حقًا؟

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

1. أولاً ، ليس كل من يزور موقع الويب الخاص بك يستخدم متصفحًا. سيكون بعض الزائرين روبوتات ، مثل مفهرس محرك البحث ، وقد لا يفهم هؤلاء CSS أو JavaScript على الإطلاق.
2. ثانيًا ، لن يستخدم كل شخص يزور موقعك متصفحًا به CSS وجافا سكريبت. قد يستخدم بعض الزائرين متصفحًا قائمًا على المحطة الطرفية ، والذي يعرض نصًا عاديًا بأقل قدر من التنسيق. قد يستخدم الآخرون قارئ الشاشة.
3. ثالثًا ، حتى إذا كان المستعرض يدعم CSS و JavaScript ، فإن الأمور تسوء. قد يؤدي الارتباط المعطل أو الاتصال السيئ بالشبكة إلى فقدان ملف .css أو .js. قد يتسبب خطأ في JavaScript في عدم تشغيل تعليمات برمجية أخرى على الإطلاق.
4. أخيرًا ، قد يقرر بعض الزوار بنشاط تعطيل CSS أو JavaScript. قد يفعلون ذلك بسبب مخاوف تتعلق بالخصوصية أو لأنهم على اتصال بطيء أو الدفع عن طريق الاستخدام.

العقلية التقدمية تصنع العجائب

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

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