كيف تكتب HTML5 متوافقة مع الخلف؟

Question

أرغب في البدء في استخدام الميزات الأساسية لـ HTML5 ، ولكن في نفس الوقت ، حافظ على الكود الخاص بي متوافقًا مع المتصفحات القديمة (تدهور رشيق). على سبيل المثال ، أود استخدام خصائص CSS3 الرائعة لصنع زوايا مستديرة. هل هناك أي برنامج تعليمي متاح لكتابة HTML5 القابلة للتحلل بأمان؟

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

Answer 1

عند الحديث عن HTML5 أو CSS3 ، يجب عليك التوجه إلى:

متى يمكنني استخدام ...

كما يمكن أن نرى ، ما زلنا بعيدًا عن استخدام ذلك.

أيضًا ، نظرًا لأن الإصدارات القديمة من المتصفحات لن تدعم HTML5 أو CSS3 ، يمكنك القيام بما يعرف باسم:

التعزيز التدريجي والتدهور الرشيق

إليك بعض الموارد أيضًا:

• معرض مواقع HTML5 (يمكنك التعلم والحصول على الفكرة منهم)
• قم بإنشاء مواقع ويب حديثة باستخدام HTML5 و CSS3

Answer 2

المتصفحات التي ، بشكل جماعي ، تغطي 95 ٪ من العالم: Firefox ، Chrome ، IE6/7/8. أفضل طريقة لاختبارها هي تثبيتها على جهاز الكمبيوتر الخاص بك.

Answer 3

تريد استخدام علامات HTML و CSS متوافقة مع متصفحات الهاتف المحمول.

لأي شيء CSS3 لفه في JavaScript الشرطية. أتأكد دائمًا من أن عرض الجهاز على الأقل 240 بكسل ، ثم أي شيء أدناه هو المظهر القديم والكربي والمتنقل.

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

للحصول على دليل شامل ، تحقق من إرشادات W3 Mobile CSS2: http://www.w3.org/tr/2000/wd-css-mobile-20001013

مورد جيد آخر هو جدول التوافق هذا: http://www.quirksmode.org/m/css.html

Answer 4

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

Answer 5

خدمة مثل متصفح من المفيد للغاية التحقق من كيفية قيام موقعك بإعداد متصفحات وأنظمة تشغيل مختلفة. عليك الانتظار في قائمة انتظار لفترة من الوقت ولكن الأمر يستحق القيام بذلك.

Answer 6

كنت سأجعل هذا تعليقًا ، لكن بعد ذلك ، انتقلت ..

W3Schools لديه اقتراحات لاستخدام عناصر الويب الدلالية على موقعك. يقترح استخدام مكتبة JavaScript تسمى html5shiv.js لإضافة دعم التصميم إلى IE8 وأسفل حتى تتمكن من العثور على ملفات JavaScript التي تحاكي وظائف محددة مدمجة في HTML5 مثل JSON2.JS و WebForms2.JS.

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

بالنسبة لبناء الموقع ، أوصي ببناء موقع HTML4 أولاً باستخدام العناصر الدلالية بحرية (مع HTML5SHIV) واختبار IE7. ثم أثناء قيامك ببناء أجزاء من الموقع تتطلب ميزات جديدة ، ابحث عن ملف JavaScript الذي يوفر للمتصفحات القديمة نفس الوظيفة ، على سبيل المثال: عندما يحين الوقت لإضافة الزاوية أو التدرج الأول ربما تضيف CSS3PIE. تذكر دائمًا أن نموذج الصندوق الخاص بك ؛ يتم دعم الحدود والتدرجات في WebKit وكذلك واجهة برمجة تطبيقات Mozilla الكثير من سمات CSS3 التي ستحتاجها لإضافة 3 مرات:

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

لسوء الحظ ، ليس لدي مورد جيد لكيفية مقارنة واجهات برمجة تطبيقات WebKit/Mozilla مع وظائف HTML5.

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

ربما في يوم من الأيام سيكون هناك موقع يمكنك تحميل الكود الخاص بك إلى أن يخبرك بأشياء مثل "Chrome 20.xyz لا يدعم الزوايا المستديرة ، أضف -webkit-border-radius لإضافة الدعم "ولكن حتى ذلك الحين ، سيكون إضافة توافق للخلف بعد الحقيقة شبه مستحيل للمواقع المعقدة.