it-swarm.asia

ما الجديد في HTML5 / CSS3؟

لقد رأيت هذا الموقع و هذا الموقع ، ولكن هذا كثيرٌ للهضم. ما هي الأشياء الرئيسية حول HTML5 التي تجعلها مختلفة/أفضل من HTML/CSS القديمة العادية (X)؟

23
Jason

HTML5 ضخم ، ولكن أيضًا رائع .

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

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

في المركز الثالث ، يتضمن HTML5 الكثير من إمكانية الوصول والمساعدة الدلالية. على سبيل المثال ، تساعد عناصر مثل <section> و <article> آلات المساعدة في تحديد المحتوى الذي من المفترض أن يكون. يمكن أن تكون أنواع المدخلات الجديدة مثل <input type=email> مفيدة أيضًا لنفس الأسباب ، على الرغم من أن أنواع المدخلات الجديدة تشتمل على واجهات مستخدم مخصصة تجعلها مفيدة حتى للقراء البشريين "المشتركين".

لاحظ أن ميزات النماذج الجديدة أكثر بكثير من أنواع المدخلات الجديدة. ويشمل أيضًا دعمًا لنص العنصر النائب والعديد من السمات الأخرى.

يتضمن HTML5 <canvas> ، الذي يسمح برسم الأشكال ثنائية الأبعاد (و ، مع WebGL ، ثلاثية الأبعاد) مثل الرسوم البيانية أو حتى عرض الألعاب.

أصبح السلوك القديم الآن موحدًا ، مثل الإصدار القديم لـ [Internet Explorer] contentEditable.

و DOCTYPE هو لائق أخيرا! يمكنك الآن حفظها بالفعل! <!DOCTYPE html>

تحديد الترميز أسهل أيضًا ، مع <meta charset=utf-8>.

إذا كنت ترغب في إرسال البيانات إلى العميل وربطها بالعناصر ، يمكنك الآن القيام بذلك مع السمات المخصصة. على سبيل المثال ، <div data-status=open>Open</div> أصبح الآن مسموحًا به أخيرًا. لاحظ أن أسماء السمات المخصصة يجب أن تكون مسبوقة بـ data-.

يمكنك الآن تضمين SVG و MathML في مستندات HTML. في السابق ، كان يمكنك فقط القيام بذلك مع مستندات XHTML.

من بين العديد من الوظائف والحقول الجديدة التي يعرفها HTML5 ، واحدة من أكثرها إثارة للإعجاب هي classList ، والتي تمكنك من التعامل مع السمة class بسهولة أكبر. بدلاً من الاضطرار إلى getAttribute/setAttribute واستخدام الاختراقات المعقدة لمعرفة الفئات التي يحتوي عليها العنصر وإزالة فئة معينة من هذا العنصر ، تجعل classList تلك المواقف الصعبة في غاية البساطة.

هناك أيضًا العديد من المواصفات ذات الصلة ، مثل Web Workers و Web Sockets و IndexedDB ، وهي ليست جزءًا من HTML5 حقًا ولكن الجميع يتحدثون عنها كما لو كانوا كذلك. إنها مفيدة جدًا للاستفادة من أجهزة الكمبيوتر متعددة النواة والتواصل مع الخوادم وتخزين البيانات محليًا.

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

الجديد أيضًا في CSS3 هو المحددون الجدد ، مما يجعل من الأسهل مطابقة عناصر محددة في الصفحة (مثل الصفوف الفردية أو الزوجية فقط في الجدول).

تعد العتامة والوحدات الجديدة و Marquee و Ruby جزءًا أيضًا من CSS3.

أعتقد أن ذلك يغطي جميع الأجزاء المهمة.

33
luiscubal

لتتبع الميزات والمواصفات الدعم ، يمكنك التحقق متى يمكنني استخدام . ويشمل ميزات HTML5 و CSS3 وأشياء مثل SVG و PNG و CSS2.1 و CSS2. كما يتتبع حالة الموافقة (التوصية ، التوصية المقترحة ، توصية المرشح ، مسودة العمل ، معيار IETF). FindMeByIP يحتفظ بمصفوفات ميزات CSS3 المدعومة فقط ، عن طريق المتصفح.

حدثت بعض إعادة صياغة وتبسيط بناء الجملة في الصواميل والمسامير:

  • سلسلة النمط المبسط: <!DOCTYPE html>
  • السمة المبسطة language للعلامة <html>: <html lang="en">
    (لا يزال بإمكانك تضمين xmlns و xml:lang إذا كنت تريد توافق XML)
  • علامة <meta> مخصصة لـ charset: <meta charset="utf-8" />
  • script لم تعد تقبل type السمة ، تتطلب charset للبرامج النصية عن بعد:
    <script src="/media/js/jquery.js" charset="utf-8"></script> (لا تحتاج النصوص المضمنة إلى سمات إضافية على الإطلاق)

HTML5 يجلب القدرة على أن تكون علاماتك أكثر بكثير الدلالية ، وعموما أسهل بكثير للقراءة/الكتابة وأن يكون لها أحجام ملفات أصغر. بدلاً من <div id="nav"> ، لديك فقط <nav>. لا يبدو مثل الكثير لكنه يضيف ما يصل.

تم إهمال العديد من العناصر من XHTML1 و HTML4. لا يتم دعم العناصر التالية في HTML5: <acronym> و <applet> و <basefont> و <big> و <center> و <dir> و <font> و <frame> و <frameset> و <noframes> و <s> و <strike> و <tt> و <u> و <xmp>.

تهدف العديد من العناصر الجديدة في HTML5 إلى إضافة المزيد من العلامات الدلالية ، ولن تفعل شيئًا سوى توفير بديل أكثر جدوى لـ <div>. تتضمن هذه العناصر الجديدة: <article> و <section> و <aside> و <hgroup> و <header> و <footer> و <nav> و <time> و <mark> و <figure> و <figcaption> و <keygen> و.

يتم تحسين نماذج HTML5 بشكل كبير .

أنواع المدخلات الجديدة

سمات جديدة:

عناصر جديدة

يمكن أن نذهب إلى النماذج طوال اليوم ، ولكن هنا بعض الموارد لشرح كل هذه الأشياء الجديدة بشكل أفضل.

CSS3 يجلب رائعة استفسارات وسائل الإعلام . استعلامات الوسائط كبيرة ، لذا ، كبيرة رائعة. غير متاح في IE8 وتحت ، ولكن سيتم دعمه بواسطة IE9.

يحتوي CSS3 على زيادة العدادات . يمكنك استخدام هذه العناصر للرقم التلقائي بدون قائمة مرتبة باستخدام محدد _seome_code__ المحدد الزائف ونمط content عندما تكون القائمة المرتبة أو الترقيم غير صحيحة بشكل صحيح. (على سبيل المثال ، ترقيم خطوات ملء حقول النموذج.)

إذا كنت من محبي إعادة تعيين CSS ، فهناك HTML5 CSS Reset متوفرة من HTML5 Doctor. لقد قمت بإضافة ثلاث إضافات إلى إعادة التعيين هذه لصفحاتي الشخصية:

  • تمت إضافة text-rendering: optimizeLegibility; إلى الأنماط في تعريف <body>
  • label مضمن في التعريف مع input و select لأنه يحتاج إلى vertical-align: middle;
  • أنماط ins و :focus من إريك ماير CSS Reset أضيفت مرة أخرى في

تتوفر إعادة تعيين منافسة تسمى reset5 ، لكنني لم أقم بتقييمها شخصيًا. يعتمد على إعادة تعيين كل من Eric Meyer و HTML5 Doctor.

HTML5 Security Cheatsheet يتتبع الأخطاء في ميزات HTML5 كما هو مطبق في العديد من المتصفحات ، ويتضمن أيضًا أخطاء في الميزات الموجودة التي هي جيدة لتتبعها أيضًا.

لا يؤدي استخدام عناصر HTML5 تلقائيًا إلى جعل الكود الخاص بك دلاليًا. قامت WHATWG بكتابة مقال يسمى <section> ليست مجرد "دلالي <div>" موضحة أنها ليست مجرد عنصر حاوية.

في HTML 5 ، هناك خوارزمية لإنشاء عرض تفصيلي للمستندات. يمكن استخدام هذا ، على سبيل المثال بواسطة AT ، لمساعدة المستخدم على التنقل خلال مستند. و <القسم> والأصدقاء جزء مهم من هذه الخوارزمية. في كل مرة تعشش فيها <section> ، تزيد من عمق المخطط التفصيلي بمقدار 1 (في حالة ما إذا كنت تتساءل عن مزايا هذا النموذج مقارنةً بالنموذج <h1> - <h6> التقليدي ، ففكِّر في وحدة تغذية تعتمد على الويب تريد دمج بنية مستند المحتوى المشترك مع المحتوى الموجود في الموقع المحيط. في HTML 4 ، يعني هذا تحليل كل المحتوى وإعادة ترقيم جميع العناوين. في HTML5 ، تنتهي العناوين بالعمق الصحيح مجانًا).

...

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

مثل كل شيء آخر في هذا العالم ، يوجد إطار لتطبيقات الويب HTML5 يسمى SproutCore ، تم إنشاؤه بواسطة مهندس سابق من Apple اسمه Charles Jolley.

بالإضافة إلى html5rocks.com يمكنك مواكبة html5doctor.com و html5gallery.com .

18
Bryson

يوجد الشيء الأساسي للتخطيط مثل حدود القطر والظلال (المربع/النص) ودعم rgba وما إلى ذلك ؛ هذا هو ما يشتهر به CSS3. الأكثر إثارة للاهتمام هي العلامة القماشية ، وعلامة الفيديو ، والتخزين المحلي ، وسكويت الويب وما إلى ذلك ، مما سيخلق الكثير من تجارب المستخدم الأكثر ثراءً في HTML/JS/CSS العادي. هذه الميزات لديها القدرة على أن تكون بديلاً رائعًا لـ Flash على الويب دون الحاجة إلى مكونات إضافية.

4
D4V360

أجد عناصر HTML الجديدة مثيرة للاهتمام إلى حد ما ... بعضها بدائل بديلة واعدة لـ divs العامة. تتضمن العناصر الجديدة الواعدة article و section و aside و figure و nav و header و footer ، من بين أمور أخرى. أنا حقا أحب فكرة العناصر الدلالية استبدال الحاويات التي لا معنى لها.

أوه نعم ، عنصر ذو صلة: doctype المبسط كثيرًا - أخيرًا شيء يمكنني الكتابة من الذاكرة!

4
Grant Palin

( هذا هو إجابتي لسؤال مماثل على webapps.stackexchange.com )

تعد Canvas و مؤشرات ويب الخاصة بعمال الويب أكثر الجوانب إثارة في HTML5 إلى أنا. لقد كتبت بعض تطبيقات الويب التي تستخدم هذه الميزات:

يستفيد GioAUTHor [sic] على نطاق واسع من اللوحة القماشية للسماح لك برسم المسارات على خريطة ثم العثور على أقصر الطرق من البداية إلى النهاية (عبر خوارزمية ديكسترا في JavaScript).

JavaScript Thread Demo يجعل الاستخدام المحدود للقماش ولكن يعرض استخدام مؤشرات ترابط العمال ، مع استكمال رمز العرض التوضيحي. كما أنه يستخدم عنصر تحكم منزلق HTML5 = "range" .


دعم متصفح HTML5 متنوع مثل المتصفحات نفسها. هناك موقع لطيف (في HTML5 ، natch) حول استعداد HTML5 يوضح من هو مستعد لما.

4
Alan

فيما يتعلق بـ CSS3 - ألجأ إلى http://css3please.com/ لمعرفة ما يمكنك القيام به.

في وقت لاحق المتصفح الخاص بك ، والأرجح أنك سوف تكون قادرا على رؤية الآثار.

2
Sniffer

لا يقدم هذا رأيًا حول الأهمية ، لكنه دلتا مفيدة بين HTMLs 4 و 5.

بلدي 2 ¢ على التحسينات الرئيسية:

  • <section> والرأس الجديد يحدد خوارزمية (قلت أنها كانت فقط my 2 ¢)
  • عناصر النموذج الجديدة ، على سبيل المثال <input type=email>
  • data-* سمات
  • التخزين من جانب العميل
  • أصلي <audio> و <video>
1
Paul D. Waite

تسمح علامات الصوت والفيديو بتقديم الوسائط دون الحاجة إلى مكون إضافي مثل Flash أو Silverlight ، والأهم من ذلك يعمل على متصفحات iPhone و iPad. هناك بعض المشكلات التي تحتاج إلى حل بشأن برامج الترميز وإدارة الحقوق الرقمية.

1
Steve Tranby

أصدر جيريمي كيث مؤخرًا كتابًا جيدًا عن الموضوع ، "HTML5 لمصممي الويب". قد ترغب في التحقق من ذلك.

هذا هو الكتاب الأول من كتاب A وبصرف النظر. نوصي بشدة أن المصممين المتوسطة إلى المتقدمة. A ++

http://books.alistapart.com/

NOTE: قد تضطر إلى الانتظار للحصول على نسخة ورقية

1
Kevin

لأن لا أحد وضع هذا بعد:

يُعد HTML5 أمرًا رائعًا بالنسبة لما ذكره الجميع ، لكنه يتضمن أيضًا تحديد الموقع الجغرافي القياسي ، وعمال الويب ، ومأخذ الويب ، والقماش ، و localStorage. جميع هذه الأدوات هي أجزاء من مواصفات HTML5 ، والتي تستخدم الكثير من جافا سكريبت وراء الكواليس لتحقيق ذلك.

0
Ilan Biala