10 طرق احتياطية مفيدة لل CSS وجافا سكريبت

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

ولكن لا تدع هذه المزالق تثبطك! في هذا الدليل لقد وضعت بعض من تقنيات الاسترجاع الأكثر شيوعا لمصممي الويب الذين يركزون على CSS و JavaScript / jQuery. عندما يفشل كل شيء آخر ، فأنت تريد تزويد المستخدمين بوظائف الصفحة الأساسية على الأقل. يسود البساطة العليا في مجال تصميم تجربة المستخدم.

راجع دليلنا أدناه وأخبرنا بأفكارك وأسئلتك في قسم التعليقات.

1. تقريب الزوايا مع الصور

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

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

يستخدم الكود القياسي خصائص CSS3 العادية على القسم الرئيسي بينما يستوعب الصور على كل من الزوايا. ستحتاج على الأرجح إلى إعداد بعض div إضافية داخل الحاوية الرئيسية والتي تُستخدم لعرض صور الزاوية في الخلفية.

#mainbox -webkit-border-radius: 5px؛ / * Safari * / -moz-border-radius: 5px؛ / * Firefox \ Gecko Engine * / -o-border-radius: 5px؛ / * Opera * / border-radius: 5px؛  #mainbox .topc background: url ('corner-tl.png') بلا تكرار أعلى اليسار ؛  #mainbox .topc span background: url ('corner-tr.png') بلا تكرار أعلى اليمين ؛  #mainbox .btmc background: url ('corner-bl.png') بلا تكرار أسفل اليسار ؛  #mainbox .btmc span background: url ('corner-br.png') بلا تكرار أسفل اليمين ؛  

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

2. مسج القائمة المنسدلة نظام القائمة

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

المشكلة الوحيدة في هذا الحل هي أن برنامج Internet Explorer 6 لا يدعم محددات التحويم في CSS. ومع ذلك IE7 + يعمل كبيرة. وبالطبع ستعمل جميع المتصفحات بشكل جيد إذا تم تمكين JavaScript في المقام الأول. الشفرة من هذا البرنامج التعليمي على CSS Plus هي واحدة من أفضل الموارد التي وجدتها. إنه يوفر ليس فقط حلاً مع jQuery ولكن أيضًا CSS الضروري لمشكلات IE.

/ * ستتم إضافة فئة من التيار عبر jQuery * / #nav li.current> a background: # f7f7f7؛  / * CSS fallback * / #nav li: hover> ul.child display: block؛  #nav li: hover> ul.grandchild display: block؛  

مصدر

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

إذا كنت لا تشعر أن برنامج Internet Explorer 6 يثير الكثير من القلق ، فلا تهتم بهذه المشكلة البديلة البديلة. يجب أن يكون البرنامج التعليمي والرمز اللاحق أعلاه كافيين لتحميل قائمة جافا سكريبت لديك حتى مع وجود CSS صارم في جميع المتصفحات الرئيسية.

3. أنماط Internet Explorer المستهدفة

أنا متأكد من أننا جميعًا على دراية بالمشكلات التي تظهر في برنامج Microsoft Internet Explorer. يمكنني إعطاء القليل من الائتمان لآخر IE8 والآفاق المستقبلية مع IE9. ومع ذلك ، لا يزال هناك جمهور صغير يعمل على IE6 / IE7 ولا يمكنك تجاهلها حتى الآن.

(مصدر الصورة: جيثب)

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

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

#nav li position: قريب؛ العرض: 150 بكسل ؛ / * يجب تعيين عرض محدد لـ IE * / #nav li ul / * رموز التنقل الفرعية * / display: block؛ الموقف: مطلق ؛ العرض: السيارات ؛ / * تحديد العرض الخاص بك أو مجموعة في عنصر عنصر * / #nav li ul li width: 100٪؛  

4. تراث IE العتامة / الشفافية

أحد أكثر الأخطاء المزعجة في برنامج Internet Explorer هو التعامل مع العتامة. يمكن تغيير إعدادات الشفافية ألفا في CSS3 من خلال خاصية العتامة. ومع ذلك ، في طريق Microsoft فقط يدعم Internet Explorer 9 هذه الميزة حاليًا.

أفضل حل لاستهداف IE6 + هو من خلال منقي, إعداد الملكية المعترف بها فقط من قبل IE. تحقق من مثال الرمز المختصر أدناه:

.mydiv opacity: 0.55؛ / * CSS3 * / filter: alpha (العتامة = 55) ؛ / * IE6 + * / 

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

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 55)"؛ / * IE8 * / 

5. إنشاء أزرار CSS3 مع الصور الاحتياطية

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

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

البديل هو الرجوع إلى لون خلفية عادي وأنماط CSS أبسط. أستخدم بعضًا من أمثلة التعليمات البرمجية من منشور CSS-Tricks الرائع في تدرجات CSS3. جميع المتصفحات الرئيسية بما في ذلك Safari و Firefox و Chrome وحتى Opera تدعم هذه الخصائص. المنطقة التي ستواجه فيها المشكلات هي دعم المتصفحات القديمة: محركات Mozilla الأقدم ، IE6 / 7 ، وربما حتى Mobile Safari.

.gradient-bg background-colour: # 1a82f7؛ / * يستخدم لونًا صلبًا في أسوأ الأحوال * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png') ؛ background-image: -webkit-gradient (خطي ، 0٪ 0٪ ، 0٪ 100٪ ، من (# 2F2727) ، إلى (# 1a82f7)) ؛ خلفية الصورة: -تدرج-خطي-التدرج (أعلى ، # 2F2727 ، # 1a82f7) ؛ خلفية الصورة: -moz-linear-gradient (top، # 2F2727، # 1a82f7)؛ background-image: -ms-linear-gradient (top، # 2F2727، # 1a82f7)؛ خلفية الصورة: -o-linear-gradient (top، # 2F2727، # 1a82f7)؛  

مصدر

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

6. التحقق من محتوى المحمول

هناك اتجاه آخر كبير في عام 2012 وهو شعبية تصفح الإنترنت عبر الهاتف النقال. الهواتف الذكية موجودة في كل مكان ، وأصبحت البيانات المتوفرة عبر شبكة 3G / Wi-Fi متاحة أكثر فأكثر. وبالتالي سيتطلع العديد من المصممين إلى توفير تصميم احتياطي لمستخدمي الهواتف المحمولة.

سيعرض بضع متصفحات الويب المحمولة الشائعة صفحات مشابهة لبيئة سطح المكتب. تشتهر Safari Mobile و Opera بذلك ، حتى أنها تدعم العديد من البرامج النصية الشائعة للمنسوجات. لكن هذه الصفحات ليست دائمًا صديقة للجوال ، وهناك مجال للتوسع في UX.

هناك طريقتان يمكنك من خلالهما اكتشاف متصفحات المحمول وعرض تخطيط بديل أو ورقة أنماط. الأول هو من خلال JavaScript والتي تعمل بشكل رائع كأداة للواجهة الأمامية. البرنامج النصي الذي أضفته أدناه بسيط للغاية ويتحقق فقط من مستخدمي iPhone / iPod Touch. Detect Mobile Browsers هو موقع ويب رائع يوفر نصًا أكثر تفصيلًا يمكنك تشغيله بدلاً من ذلك.

// Redirect iPhone / iPod Touch isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1))؛  if (isiPhone ()) window.location = "m.yourdomain.com"؛  

الآن البديل الآخر هو التحقق من خلال لغة الواجهة الخلفية مثل PHP. يمكنك التحقق من وجود متغير يعرف باسم HTTP_USER_AGENT. ستظهر العشرات من مواقع الويب في حالة استخدامك لهذه الشروط. ومع ذلك ، ما زلت أوصي بـ الارتباط Detect Mobile Browsers الذي أضفته في الفقرة السابقة.

يحتوي الموقع على نصوص قابلة للتنزيل مجانًا للتحليل ليس فقط بلغة PHP ، ولكن أيضًا بالعديد من اللغات الخلفية الشائعة الأخرى. وتشمل هذه ASP.NET ، ColdFusion ، Rails ، Perl ، Python ، وحتى الكود القائم على الخادم مثل IIS و Apache.

7. Slicebox المتزلج مع رشيقة تراجع

من المحتمل أن يكون الهدية الترويجية المفضلة من CSS3 الخاصة بي لعام 2011 هي Slicebox 3D Image Slider التي أصدرتها Codrops. يستخدم التحولات الجميلة للرسوم المتحركة في CSS في المتصفحات التي تدعمها ، حاليًا في Google Chrome والأحدث في Safari. من الغريب أنه حتى أحدث إصدار من Firefox أو IE9 لا يزال يتعذر عليه استخدام هذه التحولات.

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

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

8. jQuery Script CDN Failsafe Method

أصبحت مكتبة jQuery ضرورية تقريبًا لتطوير JavaScript على الويب. أنشأ العديد من مزودي CDN البديل عناوين URL ثابتة حيث يستضيفون جميع إصدارات إصدار jQuery. قامت Google و Microsoft وحتى jQuery أنفسهم بإنشاء بوابة CDN للمطورين ، من بين بعض المواقع الأخرى الأقل شهرة.

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

مصدر

9. خانات HTML5 الفريدة

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

لقد واجهت هذا البرنامج التعليمي الرائع CSS / jQuery الذي تم نشره مرة أخرى في أوائل ربيع عام 2011. وهو يوفر طريقة بسيطة لإنشاء مفاتيح على غرار Apple لخانات الاختيار الخاصة بك والتي تتحلل بشكل رائع في المتصفحات القديمة. يستخدم الرمز صور الخلفية لاستبدال أنماط التشغيل / الإيقاف بين تفاعلات المستخدم.

يتم إخفاء عناصر مربع الإدخال الأصلي افتراضيًا ويتم تحديد قيمتها من خلال مكالمات JavaScript. هذا يعني أنه يمكنك سحب القيمة في أي وقت بشكل ديناميكي عبر jQuery ، ولكن سيتم أيضًا تمريرها في النموذج عند النقر فوق “خضع” زر.

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

10. HTML5 الفيديو المدعومة

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

يدعم Mozilla Firefox بشكل عام فيديو .OGG الذي يمكنك استخدام VLC كمحول. يبحث Google Chrome & Safari عن ملفات .MP4 أو H.264 المشفرة. بسبب هذه الاختلافات ، عادة ما يتعين عليك تضمينها ثلاثة تنسيقات الفيديو المختلفة - وهما المذكورة أعلاه جنبا إلى جنب مع احتياطي .FLV.

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

مصدر

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

استنتاج

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

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