هل هناك أي احتياجات جيدة لـ HTML5 و CSS3؟
سؤال
أنا أبحث عن احتياطي جيد لكل من HTML5 و CSS3 حتى أتمكن من استخدامه وسيظل يبدو جيدًا في المتصفحات الأخرى.
المحلول
عند الحديث عن HTML5 أو CSS3 ، يجب عليك التوجه إلى:
كما يمكن أن نرى ، ما زلنا بعيدًا عن استخدام ذلك.
أيضًا ، نظرًا لأن الإصدارات القديمة من المتصفحات لن تدعم HTML5 أو CSS3 ، يمكنك القيام بما يعرف باسم:
التعزيز التدريجي والتدهور الرشيق
إليك بعض الموارد أيضًا:
- معرض مواقع HTML5 (يمكنك التعلم والحصول على الفكرة منهم)
- قم بإنشاء مواقع ويب حديثة باستخدام 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 للوجود الجغرافي