it-swarm.asia

هل يجب علي استخدام HTML5 و / أو CSS3 لإنشاء موقع الويب الخاص بي؟

تبدو عناصر HTML5/CSS3 (Web8!) الجديدة رائعة! هل يجب أن أبدأ استخدامه الآن أو التمسك css/xhtml بالانتظار حتى يمكن استخدام المزيد من المتصفحات؟

16
Jason

يتم دعم HTML5 من قبل جميع المتصفحات الآن ، حتى IE5! (إذا كنت تستخدم البرنامج النصي html5shiv). أوصي بشدة بقراءة http://diveintohtml5.org إنها واحدة من أفضل موارد HTML5 هناك.

بالنسبة إلى CSS3 ، إذا كنت تستخدمها ، فتأكد من استخدام المزيج السابق للمورد أيضًا ، أعلى بناء الجملة العادي. مثلا.

الحدود بين دائرة نصف قطرها

-moz الحدود نصف قطرها

-webkit الحدود نصف قطرها

أعتقد في تعزيز التدريجي. يبدو دعم css3 الخاص بـ IE9 واعداً للغاية.

13
Jin

وربما

هناك أجزاء من 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 .htc file) الذي يضيف دعم 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 فقط).

12
Bryson

استخدم التكنولوجيا التي تناسب احتياجاتك أكثر.

كتب إريك ماير مقال لطيف حول سبب البدء في استخدام بادئات محددة للبائع في قواعد CSS ليست عرجاء مثل استخدام الاختراقات cSS filter المستخدمة.

أعتقد أن الشيء نفسه ينطبق على HTML5. إذا كان يمكنك التحقق من دعم المتصفح لميزات مختلفة ، فلماذا لا تستخدمه. طالما يتدهور الموقع بأمان ، فاستمر في تحسينه.

5
jessegavin

بعض الروابط المفيدة الأخرى ، عند تحديد ميزات CSS3 التي قد ترغب في استخدامها: http://caniuse.com/ (يعطي تفصيلًا جيدًا للعناصر والمحددات التي يمكن استخدامها عبر الأنظمة الأساسية)

http://css3please.com/ (ملعب قابل للتحرير في الصفحة للتعبير عن ميزات CSS3 ، وهذا يقدم أيضًا بعض النصائح حول التقنيات والميزات التي يتم دعمها بواسطة الأنظمة الأساسية للأحجار التي يتم طلبها بشكل شائع ، مثل الزوايا الدائرية والخلفيات المتدرجة وما إلى ذلك)

2
Jason M. Batchelor

أستخدمها لتحسين التجربة على المتصفحات الحديثة حتى يحصل المستخدمون الذين يتمتعون بمتصفح جيد على "مكافأة" من أجمل مظهر واجهة المستخدم (الأركان الدائرية والظلال وأشياء من نوع kinda). أعتقد أنه يجب عليك عدم استخدامه كبديل ، دعنا نقول التحقق من صحة نموذج العملاء الحالي الخاص بك ، إلا إذا حصلت على نوع من JS احتياطي لذلك.

1
D4V360

إذا كنت تبدأ مشروعًا جديدًا باستخدام HTML5 والذي يجب دعمه أيضًا في المتصفحات القديمة ، فإن الخيار الأفضل هو استخدام Initializr -

http://www.initializr.com/

يستخدم HTML5 Boilerplate في الواجهة الخلفية ، ويضيف بعض الخيارات الخاصة به لمنحك قالبًا يمكنك نشره على موقعك. ويشمل مكتبات Javascript (مثل HTML Shiv أو Modernizr) ، والتي ستجعل موقعك متوافقًا مع المتصفحات القديمة.

1
Mozan Sykol

يعتمد على ماهية الجمهور والميزات التي تريد استخدامها. أتوقع أن تمر عدة سنوات أخرى قبل أن يسقط المشروع المتوسط ​​الدعم لـ ie6 :(

0
theotherreceive

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

إذا لم يكن الأمر كذلك ، بغض النظر عن ما تستخدمه ، فسيتعين عليك دائمًا مراعاة القاسم المشترك الأدنى. في هذه الحالة ، ربما تكون مجموعة من IE 6 ومجموعة من متصفحات الجوال. لذلك ، إذا مضت قدما في HTML 5 ، فلديك مشكلة إضافية تتمثل في التأكد من أن موقعك "يحط" بشكل جيد.

0
Gary.Ray