سؤال

أنا أبحث عن احتياطي جيد لكل من HTML5 و CSS3 حتى أتمكن من استخدامه وسيظل يبدو جيدًا في المتصفحات الأخرى.

هل كانت مفيدة؟

المحلول

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

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

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

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

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

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

نصائح أخرى

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

ما هو Modernizr؟

Modernizr هي مكتبة JavaScript صغيرة وبسيطة تساعدك على الاستفادة من تقنيات الويب الناشئة (CSS3 ، HTML 5) مع الحفاظ على مستوى جيد من السيطرة على المتصفحات القديمة التي قد لا تدعم هذه التقنيات الجديدة بعد.

يستخدم Modernizr الكشف عن الميزات لاختبار المتصفح الحالي مقابل الميزات القادمة مثل RGBA () ، و Radius ، و CSS التحولات وغيرها الكثير. يتم تنفيذها حاليًا عبر المتصفحات ومع Modernizr ، يمكنك البدء في استخدامها الآن ، مع طريقة سهلة للتحكم في الاحتياجات الخاصة بالمتصفحات التي لا تدعمها بعد.

بالإضافة إلى ذلك ، يخلق Modernizr كائن JavaScript العالمي الذي يحمل عنوانًا ذاتيًا يحتوي على خصائص لكل ميزة ؛ إذا كان المتصفح يدعمه ، فسيتم تقييم العقار true وإذا لم يكن كذلك ، فسيكون ذلك false.

أخيرًا ، يضيف Modernizr أيضًا دعمًا لتصميم عناصر HTML 5. يتيح لك ذلك استخدام عناصر أكثر دلالية وتطلعية مثل <section>, <header> و <dialog> دون الحاجة إلى القلق بشأن عدم العمل في Internet Explorer.

ما لا يفعله Modernizr

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

أنا أقرا حوله في الغوص في HTML5

بعض العينات:

if (Modernizr.canvas) {
  // let's draw some shapes!
} else {
  // no native canvas support available :(
}

if (Modernizr.video) {
  // let's play some video!
} else {
  // no native video support available :(
  // maybe check for QuickTime® or Flash® instead
}

if (Modernizr.localstorage) {
  // window.localStorage is available!
} else {
  // no native support for local storage :(
  // maybe try Gears or another third-party solution
}

if (Modernizr.webworkers) {
  // window.Worker is available!
} else {
  // no native support for web workers :(
  // maybe try Gears or another third-party solution
}

if (Modernizr.applicationcache) {
  // window.applicationCache is available!
} else {
  // no native support for offline :(
  // maybe try Gears or another third-party solution
}

if (Modernizr.geolocation) {
  // let's find out where you are!
} else {
  // no native geolocation support available :(
  // maybe try Gears or another third-party solution
}
...

في بعض الأحيان يقترح الموقع تقنيات السقوط مثل explorercanvas (excanvas.js) ل IE أو Geo.js للوجود الجغرافي

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top