تبدو عناصر 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 لملء الفراغ. تتضمن هذه النتائج نجاحًا في الأداء (على الرغم من أنه فقط للمتصفحات التي تحتاج إلى استخدامها) ، لذلك يجب الانتباه إلى المستخدمين عند توظيفهم.
لتخفيف المشكلات التي تفتقر إلى دعم الميزات ، إذا قررت أن هذه الميزات الجديدة تستحق العناء ، فاستخدم الموارد التالية:
.htc
يجعل الإنترنت Explorer 6-8 قادر على تقديم العديد من ميزات الديكور CSS3 الأكثر فائدة. عند تطبيقه على عنصر ما ، فإنه يسمح IE بالتعرف على border-radius
و box-shadow
و border-image
وصور خلفية متعددة و linear-gradient
كصورة خلفية .true
إذا كانت مدعومة و false
إن لم تكن كذلك. يضيف دعمًا لتصميم وطباعة عناصر HTML5 حتى تتمكن من استخدام عناصر مثل <section>
و <header>
و <nav>
.src
لعنصر <img />
أو كخاصية background-image
في CSS. بخلاف AlphaImageLoader
و background-position
و background-repeat
العمل كما هو مقصود ، وسوف تستجيب العناصر للفئة a:hover
الزائفة..htc
file) الذي يضيف دعم PNG مع عتامة ألفا إلى IE 6. يتم دعم وضع وتكرار خلفية CSS الكامل (بما في ذلك Sprites CSS) مع جافا سكريبت إضافي (مضمن)..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 ، فلديك مشكلة إضافية تتمثل في التأكد من أن موقعك "يحط" بشكل جيد.