هل يجب علي استخدام HTML5 و / أو CSS3 لإنشاء موقع الويب الخاص بي؟
تبدو عناصر HTML5/CSS3 (Web8!) الجديدة رائعة! هل يجب أن أبدأ استخدامه الآن أو التمسك css/xhtml بالانتظار حتى يمكن استخدام المزيد من المتصفحات؟
يتم دعم HTML5 من قبل جميع المتصفحات الآن ، حتى IE5! (إذا كنت تستخدم البرنامج النصي html5shiv). أوصي بشدة بقراءة http://diveintohtml5.org إنها واحدة من أفضل موارد HTML5 هناك.
بالنسبة إلى CSS3 ، إذا كنت تستخدمها ، فتأكد من استخدام المزيج السابق للمورد أيضًا ، أعلى بناء الجملة العادي. مثلا.
الحدود بين دائرة نصف قطرها
-moz الحدود نصف قطرها
-webkit الحدود نصف قطرها
أعتقد في تعزيز التدريجي. يبدو دعم css3 الخاص بـ IE9 واعداً للغاية.
وربما
هناك أجزاء من HTML5 يمكنك استخدامها الآن ، اليوم. نماذج على سبيل المثال. إذا كان لديك <input type="email"> في متصفح لا يدعم HTML5 (نعم ، حتى IE6) ، فسترى ببساطة نفس الشيء الذي ستراه إذا كنت تستخدم <input type="text">. ومع ذلك ، في المستعرض الذي يدعم عناصر نموذج HTML5 ، يمكنك الحصول على مزايا النوع email: أي أن العميل سيخطئ في التحقق من القيمة دون الحاجة إلى JS إضافي. بينما نعم ، ستظل بحاجة إلى JS للمتصفحات غير HTML5 ، سيكون لديك طبقة أخرى من التحقق في المتصفحات الداعمة.
آخر سؤال على هذا الموقع يوفر لمحة عامة جيدة عن الميزات الجديدة المتاحة لك من خلال HTML5 و CSS3. هناك الكثير من البيانات الجيدة عن النماذج في هذا السؤال أيضًا.
لأن Internet Explorer (والإصدارات الأقدم من Safari و Firefox ، مهما كانت نادرة) ، لا تدعم العديد من هذه الميزات التي تركتها مع مكتبات JavaScript لملء الفراغ. تتضمن هذه النتائج نجاحًا في الأداء (على الرغم من أنه فقط للمتصفحات التي تحتاج إلى استخدامها) ، لذلك يجب الانتباه إلى المستخدمين عند توظيفهم.
لتخفيف المشكلات التي تفتقر إلى دعم الميزات ، إذا قررت أن هذه الميزات الجديدة تستحق العناء ، فاستخدم الموارد التالية:
- html5shiv: شيف جافا سكريبت لـ IE للتعرف على عناصر HTML5 وتصميمها.
- CSS3 Pie: سلوك مرفق [IE _ (ملف
.htcيجعل الإنترنت Explorer 6-8 قادر على تقديم العديد من ميزات الديكور CSS3 الأكثر فائدة. عند تطبيقه على عنصر ما ، فإنه يسمح IE بالتعرف علىborder-radiusوbox-shadowوborder-imageوصور خلفية متعددة وlinear-gradientكصورة خلفية . - Modernizr: مكتبة Javascript تستخدم ميزة الكشف عن الميزات لاختبار المستعرض الحالي مقابل ميزات CSS3/HTML5 القادمة ، إضافة فئات إلى <html> عنصر لأولئك المدعومين. يقوم أيضًا بإنشاء كائن JavaScript عمومي ذاتيًا والذي يحتوي على خاصية منطقية لكل ميزة ،
trueإذا كانت مدعومة وfalseإن لم تكن كذلك. يضيف دعمًا لتصميم وطباعة عناصر HTML5 حتى تتمكن من استخدام عناصر مثل<section>و<header>و<nav>. - ie-css3.js: يسمح لبرنامج Internet Explorer بتحديد محددات الفئة الزائفة CSS3 وتقديم أي قواعد نمط محددة معهم. يدعم محددات CSS3 المختلفة بناءً على مكتبة JavaScript التي يستخدمها موقعك.
- DD_belatedPNG: مكتبة Javascript تضيف دعم صورة PNG إلى IE6. يمكنك استخدام PNGs باعتبارها
srcلعنصر<img />أو كخاصيةbackground-imageفي CSS. بخلافAlphaImageLoaderوbackground-positionوbackground-repeatالعمل كما هو مقصود ، وسوف تستجيب العناصر للفئةa:hoverالزائفة. - TwinHelix IE PNG Fix: an IE سلوك مرتبط (an
.htcfile) الذي يضيف دعم PNG مع عتامة ألفا إلى IE 6. يتم دعم وضع وتكرار خلفية CSS الكامل (بما في ذلك Sprites CSS) مع جافا سكريبت إضافي (مضمن). - أيًا كان: hover: سلوكًا [IE _ مرتبطًا (ملف
.htc) تلقائيًا patches: hover ،: active و: focus for IE6 و IE7 و IE8 quirks ، مما يتيح لك استخدامها كما تفعل في أي متصفح آخر. يتضمن AJAX support ، مما يعني أن أي html يتم إدراجه في المستند عبر javascript سيؤدي أيضًا إلى تشغيل:hoverو:activeو:focusفي الأنماط IE.
من المثير للاهتمام أن نلاحظ أن DD_belatedPNG يحل كلتا المشكلتين اللتين تعالجهما Whatever: hover و TwinHelix's IE PNG Fix باستخدام JavaScript خالص ، بينما Whatever: hover و TwinHelix's IE PNG Fix يستخدمان مجموعة من JavaScript و IE السلوكيات المرفقة (.htc files).
عمومًا ، يقوم الأشخاص الذين يستخدمون متصفحات غير تابعة لـ IE بترقيتها عند مطالبتك بذلك ، وبالتالي يتحمل IE العبء الأكبر "لكن بعض المتصفحات لا تدعم هذه الميزة!" شكاوي. ستضيف Modernizr القدرة على استخدام HTML5/CSS3 إلى أي متصفح من المحتمل أن تشاهده وليس فقط IE. ستفعل ie-css3.js نفس الشيء ، ما عليك سوى تنفيذه بدون IE تعليق شرطي (يعني جميع المتصفحات ستنتهي في النهاية ما لم تقم بتضمينها مع اختبارات وكيل المستخدم من جانب الخادم - سيؤدي ذلك إلى تقليل الأداء بشكل كبير لجميع زوار موقعك ، بدلاً من المستخدمين IE فقط).
استخدم التكنولوجيا التي تناسب احتياجاتك أكثر.
كتب إريك ماير مقال لطيف حول سبب البدء في استخدام بادئات محددة للبائع في قواعد CSS ليست عرجاء مثل استخدام الاختراقات cSS filter المستخدمة.
أعتقد أن الشيء نفسه ينطبق على HTML5. إذا كان يمكنك التحقق من دعم المتصفح لميزات مختلفة ، فلماذا لا تستخدمه. طالما يتدهور الموقع بأمان ، فاستمر في تحسينه.
بعض الروابط المفيدة الأخرى ، عند تحديد ميزات CSS3 التي قد ترغب في استخدامها: http://caniuse.com/ (يعطي تفصيلًا جيدًا للعناصر والمحددات التي يمكن استخدامها عبر الأنظمة الأساسية)
http://css3please.com/ (ملعب قابل للتحرير في الصفحة للتعبير عن ميزات CSS3 ، وهذا يقدم أيضًا بعض النصائح حول التقنيات والميزات التي يتم دعمها بواسطة الأنظمة الأساسية للأحجار التي يتم طلبها بشكل شائع ، مثل الزوايا الدائرية والخلفيات المتدرجة وما إلى ذلك)
أستخدمها لتحسين التجربة على المتصفحات الحديثة حتى يحصل المستخدمون الذين يتمتعون بمتصفح جيد على "مكافأة" من أجمل مظهر واجهة المستخدم (الأركان الدائرية والظلال وأشياء من نوع kinda). أعتقد أنه يجب عليك عدم استخدامه كبديل ، دعنا نقول التحقق من صحة نموذج العملاء الحالي الخاص بك ، إلا إذا حصلت على نوع من JS احتياطي لذلك.
إذا كنت تبدأ مشروعًا جديدًا باستخدام HTML5 والذي يجب دعمه أيضًا في المتصفحات القديمة ، فإن الخيار الأفضل هو استخدام Initializr -
يستخدم HTML5 Boilerplate في الواجهة الخلفية ، ويضيف بعض الخيارات الخاصة به لمنحك قالبًا يمكنك نشره على موقعك. ويشمل مكتبات Javascript (مثل HTML Shiv أو Modernizr) ، والتي ستجعل موقعك متوافقًا مع المتصفحات القديمة.
يعتمد على ماهية الجمهور والميزات التي تريد استخدامها. أتوقع أن تمر عدة سنوات أخرى قبل أن يسقط المشروع المتوسط الدعم لـ ie6 :(
إذا كان موقعك عبارة عن إنترانت خاصة ويمكنك التحكم في المستعرض ، أو لديك نطاق محدود من المتصفحات للتعامل معه ، فلا تتردد في العمل على حافة التكنولوجيا المتقدمة.
إذا لم يكن الأمر كذلك ، بغض النظر عن ما تستخدمه ، فسيتعين عليك دائمًا مراعاة القاسم المشترك الأدنى. في هذه الحالة ، ربما تكون مجموعة من IE 6 ومجموعة من متصفحات الجوال. لذلك ، إذا مضت قدما في HTML 5 ، فلديك مشكلة إضافية تتمثل في التأكد من أن موقعك "يحط" بشكل جيد.