এইচটিএমএল 5 / সিএসএস 3 এ নতুন কী?


23

আমি এই সাইটটি এবং এই সাইটটি দেখেছি তবে এটি হজম করার মতো অনেক কিছুই। এইচটিএমএল 5 সম্পর্কিত প্রধান জিনিসগুলি কী কী এটি নিয়মিত পুরানো (এক্স) এইচটিএমএল / সিএসএসের চেয়ে আলাদা / ভাল করে তোলে?

উত্তর:


33

এইচটিএমএল 5 বিশাল , তবে দুর্দান্ত

আমার দৃষ্টিতে এটি বেশিরভাগ আন্তঃআকক্ষীয়তার বিষয়ে । স্পেকটি গিয়েছে এবং চেষ্টা করে এমনকি ব্রাউজারগুলি একইভাবে মার্কআপ পড়ে কিনা তা নিশ্চিত করার জন্য এমনকি প্রান্তের কেসগুলি নির্দিষ্ট করে ।

দ্বিতীয় স্থানে, এইচটিএমএল 5 এর ভিডিও এবং অডিও রয়েছে, যা নামটি যা বলে তা ঠিক তাই করে। আপনি যদি ভিডিও বা অডিও অন্তর্ভুক্ত করতে চান তবে এইচটিএমএল 5 এর আপনার প্লাগইন প্রয়োজনীয়তা হ্রাস করা উচিত।

তৃতীয় স্থানে, এইচটিএমএল 5 এ প্রচুর অ্যাক্সেসযোগ্যতা এবং শব্দার্থক সহায়তা অন্তর্ভুক্ত রয়েছে। উদাহরণস্বরূপ, উপাদানগুলির মতো <section>এবং <article>সহায়তা মেশিনগুলি সামগ্রীটি কী হিসাবে অনুমিত হবে তা নির্ধারণ করে। নতুন ইনপুট ধরণের মতো <input type=email>একই কারণে কার্যকরও হতে পারে, যদিও নতুন ইনপুট ধরণের কাস্টম ইউআই রয়েছে যা এগুলি "সাধারণ" মানব পাঠকদের জন্যও কার্যকর করে তোলে।

মনে রাখবেন যে নতুন ফর্ম বৈশিষ্ট্যগুলি নতুন ইনপুট ধরণের চেয়ে অনেক বেশি। এটিতে স্থানধারক পাঠ্য এবং আরও কয়েকটি অন্যান্য গুণাবলী সমর্থন support

এইচটিএমএল 5 এর অন্তর্ভুক্ত রয়েছে <canvas>, যা 2D অঙ্কন করতে (এবং, WebGL, 3 ডি সহ) চার্টের মতো আকার এমনকি গেমস সরবরাহ করতে দেয়।

পুরানো আচরণ এখন মানক করা হয়েছে যেমন ইন্টারনেট এক্সপ্লোরারের প্রাচীন contentEditable

ডক্টইপিই অবশেষে শালীন! আপনি এখন এটি মুখস্ত করতে পারেন!<!DOCTYPE html>

এনকোডিং নির্দিষ্টকরণও সহ, সহজ <meta charset=utf-8>

আপনি যদি ক্লায়েন্টের কাছে ডেটা প্রেরণ করতে এবং উপাদানগুলির সাথে এটি যুক্ত করতে চান, আপনি এখন এটি কাস্টম বৈশিষ্ট্যের সাথে করতে পারেন। উদাহরণস্বরূপ, <div data-status=open>Open</div>এখন অবশেষে অনুমোদিত। নোট করুন যে কাস্টম বৈশিষ্ট্যের নামগুলি অবশ্যই উপসর্গ করা উচিত data-

আপনি এখন এইচটিএমএল নথিগুলিতে এসভিজি এবং ম্যাথএমএল অন্তর্ভুক্ত করতে পারেন। পূর্বে, আপনি এটি কেবল এক্সএইচটিএমএল ডকুমেন্ট দিয়েই করতে পারতেন।

একাধিক নতুন ফাংশন এবং ক্ষেত্র এইচটিএমএল 5 সংজ্ঞায়িত করেছে, এর মধ্যে সবচেয়ে চিত্তাকর্ষকগুলির মধ্যে একটি হ'ল ক্লাসলিস্ট, যা আপনাকে আরও সহজে ক্লাসের বৈশিষ্ট্যটি পরিচালনা করতে সক্ষম করে। কোন উপাদানটি কোন শ্রেণীর রয়েছে তা নির্ধারণ করতে এবং সেই উপাদানটি থেকে একটি নির্দিষ্ট শ্রেণীর অপসারণ করার জন্য জটিল হ্যাকগুলি ব্যবহার ও অ্যাট্রিবিউট / সেটঅ্যাট্রিবিউট পাওয়ার পরিবর্তে ক্লাসলিস্টগুলি এই কঠিন পরিস্থিতিগুলি খুব সহজ করে তোলে।

এছাড়াও একাধিক সম্পর্কিত চশমা রয়েছে যেমন ওয়েব ওয়ার্কার্স, ওয়েব সকেটস এবং ইনডেক্সডডিবি, যা সত্যই এইচটিএমএল 5 এর অংশ নয় তবে সকলেই সেগুলি সম্পর্কে এমনভাবে কথা বলে। মাল্টি-কোর কম্পিউটারগুলির সুবিধা নেওয়ার জন্য, সার্ভারের সাথে যোগাযোগ করার এবং স্থানীয়ভাবে ডেটা সঞ্চয় করার জন্য এগুলি খুব কার্যকর।

সিএসএস 3 এর হিসাবে এটিতে অ্যানিমেশন , ট্রানজিশনগুলি , বৃত্তাকার সীমানা এবং নমনীয় বক্স মডেলের সমর্থন অন্তর্ভুক্ত রয়েছে ।

সিএসএস 3-তে নতুন নতুন নির্বাচকও রয়েছে যা কোনও পৃষ্ঠায় নির্দিষ্ট উপাদানগুলির (যেমন কেবলমাত্র টেবিলের মধ্যে বিজোড় বা এমনকি সারিগুলির সাথে) মিলানোর জন্য সহজ করে তোলে।

অস্বচ্ছতা, নতুন ইউনিট, মার্কি এবং রুবিও CSS3 এর অংশ।

আমি মনে করি যে প্রায় সমস্ত গুরুত্বপূর্ণ অংশ জুড়ে।


1
দুর্দান্ত রান ডাউন।
জর্জ এডিসন

সমস্ত প্রধান পয়েন্ট হিট ভাল কাজ।
অনুদান পালিন

1
এটি উল্লেখ করার মতো যে এইচটিএমএল 5 বর্তমানে কেবল একটি ওয়ার্কিং ড্রাফ্ট এবং এটি এখনও সম্পূর্ণ চূড়ান্ত হয়নি।
জাজানো রাইনহার্ট

1
@ জাজানো রেইনহার্ট যেমন WHATWG বলেছেন, সমস্ত এইচটিএমএল 5 বৈশিষ্ট্য একই পর্যায়ে নেই। কিছু ইতিমধ্যে ব্যাপকভাবে প্রয়োগ করা হয়েছে, অন্যরা আরও কিছু সময় নেবে। বাস্তবায়ন হ'ল ওয়েব সাইটগুলি বিকাশ করার সময় সত্যিকার অর্থে গুরুত্বপূর্ণ, এবং অনুমিতের স্থিতি এটির জন্য ভাল পরিমাপ নয়। আপনি WHATWG এফএকিউ দেখতেও চাইতে পারেন।
লুস্কুবাল

1
তারা কী বৈধ এক্সএইচটিএমএল বৈশিষ্ট্যের জন্য উদ্ধৃতি চিহ্নের প্রয়োজন থেকে মুক্তি পেয়েছে?
লোটাস নোটস

18

বৈশিষ্ট্য এবং নির্দিষ্টকরণের সহায়তা ট্র্যাক রাখতে আপনি কখন ব্যবহার করতে পারবেন তা পরীক্ষা করতে পারেন । এটিতে HTML5 এবং CSS3 বৈশিষ্ট্য এবং এসভিজি, পিএনজি, CSS2.1 এবং CSS2 এর মতো জিনিস রয়েছে। এটি তাদের অনুমোদনের স্থিতিও ট্র্যাক করে (প্রস্তাবনা, প্রস্তাবিত প্রস্তাবনা, প্রার্থী সুপারিশ, কার্য খসড়া, আইইটিএফ স্ট্যান্ডার্ড)। FindMeByIP কেবলমাত্র ব্রাউজার দ্বারা সমর্থিত CSS3 বৈশিষ্ট্যের ম্যাট্রিকগুলি বজায় রাখে।

বাদাম এবং বল্টিতে সিনট্যাক্সের কিছু পুনরায় উদ্দীপনা এবং সরলীকরণ হয়েছে:

  • সরলিকৃত ডক্টাইপ স্ট্রিং: <!DOCTYPE html>
  • ট্যাগের সরলিকৃত languageবৈশিষ্ট্য <html>: <html lang="en">
    (এখনও অন্তর্ভুক্ত থাকতে পারে xmlnsএবং xml:langযদি আপনি এক্সএমএল সম্মতি চান)
  • এর জন্য উত্সর্গীকৃত <meta>ট্যাগ charset:<meta charset="utf-8" />
  • scriptআর typeঅ্যাট্রিবিউট গ্রহণ করে না , charsetদূরবর্তী স্ক্রিপ্টগুলির জন্য প্রয়োজন :
    <script src="/media/js/jquery.js" charset="utf-8"></script>(ইনলাইন স্ক্রিপ্টগুলির কোনও অতিরিক্ত বৈশিষ্ট্যের প্রয়োজন নেই)

এইচটিএমএল 5 আপনার মার্কআপের জন্য আরও বেশি শব্দার্থক হওয়ার ক্ষমতা রাখে এবং সামগ্রিকভাবে পড়তে / লিখতে এবং ফাইলের আকার ছোট করতে পারে brings থাকার পরিবর্তে <div id="nav">, আপনি ঠিক আছে <nav>। অনেকটা মনে হচ্ছে না তবে এটি জুড়েছে।

এক্সএইচটিএমএল 1 এবং এইচটিএমএল 4 এর অনেক উপাদানকে হ্রাস করা হয়েছে। নিম্নলিখিত উপাদানের HTML5 এর সমর্থিত নয়: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>এবং <xmp>

এইচটিএমএল 5-এ বেশ কয়েকটি নতুন উপাদান বোঝানো হয়েছে কেবলমাত্র আরও শব্দার্থক মার্কআপ যুক্ত করা, এবং এর অর্থপূর্ণ বিকল্প প্রদান ছাড়া কিছুই করবে না <div>। এই নতুন উপাদান অন্তর্ভুক্ত: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>, এবং <figcaption>

এইচটিএমএল 5 ফর্মগুলি ব্যাপকভাবে উন্নত হয়।

নতুন ইনপুট প্রকার

নতুন বৈশিষ্ট্য:

নতুন উপাদানসমূহ

আমরা সারাদিন ফর্মগুলিতে যেতে পারি, তবে এই সমস্ত নতুন জিনিসকে আরও ভালভাবে ব্যাখ্যা করার জন্য এখানে কিছু সংস্থান রয়েছে।

CSS3 মিডিয়া ক্যোয়ারীগুলির দুর্দান্ত আনাচ্ছে । মিডিয়া প্রশ্নগুলি তাই, তাই, তাই দুর্দান্ত। আইই 8 এবং এর নীচে পাওয়া যায় না তবে এটি আইই 9 দ্বারা সমর্থিত হবে।

CSS3 এর ইনক্রিমেন্টিং কাউন্টার রয়েছে । আপনি :beforeসিউডো-সিলেক্টর এবং contentশৈলীর অর্ডার-তালিকা বা শৈলী ব্যবহার করে অর্ডার-তালিকা ছাড়াই অটো-নম্বর উপাদানগুলিতে এগুলি ব্যবহার করতে পারেন যখন অর্ডার-তালিকা বা নম্বরগুলি শব্দার্থগতভাবে ভুল হবে। (উদাহরণস্বরূপ, ফর্ম ক্ষেত্রগুলি পূরণের পদক্ষেপগুলি নম্বর দিন))

আপনি যদি সিএসএস রিসেটের ভক্ত হন তবে এইচটিএমএল 5 ডাক্তার থেকে একটি HTML5 সিএসএস রিসেট উপলব্ধ। আমি আমার ব্যক্তিগত পৃষ্ঠাগুলির জন্য এই রিসেটটিতে তিনটি সংযোজন করেছি:

  • text-rendering: optimizeLegibility; সংজ্ঞা মধ্যে শৈলী যুক্ত <body>
  • labelসংজ্ঞাটি অন্তর্ভুক্ত করা হয়েছে inputএবং selectযেহেতু এটির প্রয়োজন রয়েছেvertical-align: middle;
  • এরিক মেয়ারের সিএসএস রিসেটের জন্য insএবং :focusথেকে আসা শৈলীগুলি আবার যুক্ত হয়েছে

নামক একটি প্রতিদ্বন্দ্বী রিসেট reset5 পাওয়া যাচ্ছে, কিন্তু আমি এখনো এটা ব্যক্তিগতভাবে মূল্যায়ন করেন নি। এটি এরিক মায়ার এবং এইচটিএমএল 5 ডাক্তার রিসেট উভয়ের উপর ভিত্তি করে ।

HTML5 এর সিকিউরিটি Cheatsheet বাগ ট্র্যাক করে HTML5 এর অতিরিক্ত বৈশিষ্ট্যগুলিও উপস্থিত রয়েছে বিভিন্ন ব্রাউজারে বাস্তবায়িত, এবং এছাড়াও ভাল হয় বিদ্যমান বৈশিষ্ট্যগুলিতে বাগ অন্তর্ভুক্ত হিসাবে ভাল ট্র্যাক রাখতে হবে।

এইচটিএমএল 5 উপাদান ব্যবহার করা আপনার কোডটি স্বয়ংক্রিয়ভাবে তৈরি করে না। WHATWG <section> নামে একটি নিবন্ধ লিখেছেন এটি কেবল একটি "শব্দার্থক <ডিভি>" নয় যা ব্যাখ্যা করে যে এটি কেবল একটি ধারক উপাদান নয়।

এইচটিএমএল 5 এ নথির একটি বাহ্যরেখা ভিউ নির্মাণের জন্য একটি অ্যালগরিদম রয়েছে। এটি ব্যবহার করা যেতে পারে উদাহরণস্বরূপ এটি দ্বারা, কোনও নথির মাধ্যমে ব্যবহারকারীকে নেভিগেট করতে সহায়তা করতে। এবং <সেকশন> এবং বন্ধুরা এই অ্যালগরিদমের একটি গুরুত্বপূর্ণ অঙ্গ। প্রতিবার যখন আপনি কোনও <সেকশন> নেস্ট করেন, আপনি বাহ্যরেখার গভীরতা 1 দ্বারা বৃদ্ধি করেন (যদি আপনি ভাবছেন যে এই মডেলটির সুবিধাগুলি প্রচলিত <h1> - <h6> মডেলের সাথে তুলনা করা হয় তবে একটি ওয়েব ভিত্তিক ফিড্রেডার বিবেচনা করুন যা চায় আশেপাশের সাইটের সাথে সিন্ডিকেটযুক্ত সামগ্রীর নথির কাঠামো একীভূত করুন HTML এইচটিএমএল 4 এ এর ​​অর্থ সমস্ত বিষয়বস্তু বিশ্লেষণ করা এবং সমস্ত শিরোনাম পুনর্নির্মাণ করা HTML এইচটিএমএল 5 এ শিরোনামগুলি নিখরচায় গভীর গভীরতায় শেষ হয়)।

...

যদি আপনি কেবল আপনার পৃষ্ঠাগুলির সমস্ত <ডিভি> গুলি অন্ধভাবে <সেকশনস> এ রূপান্তর করেন তবে আপনার পৃষ্ঠায় আপনার প্রত্যাশিত রূপরেখাটি সম্ভবত পাওয়া সম্ভব নয়। এবং, শব্দার্থক ভুল-পাস ছাড়াও, এটি নেভিগেশনের শিরোনামগুলির উপর নির্ভর করে এমন লোকদের মধ্যে নরকে বিভ্রান্ত করবে।

এই বিশ্বের অন্যান্য কিছুর মতো, স্প্রাউটকোর নামে পরিচিত HTML5 ওয়েব অ্যাপ্লিকেশনগুলির জন্য একটি কাঠামো রয়েছে , এটি চার্লস জোলি নামে প্রাক্তন-অ্যাপল ইঞ্জিনিয়ার দ্বারা নির্মিত ।

এইচটিএমএল 5 আরকস.কম ছাড়াও আপনি এইচটিএমএল 5 ডক্টর ডট কম এবং এইচটিএমএল 5 ਗਲ ারি ডটকমের সাথে রাখতে পারেন ।


+1 ভাল উত্তর! ভাবেন আপনি কোথাও কোথাও আপনার কোড বিভাগের একটিতে নিখোঁজ রয়েছেন।
জেসনবার্চ

+1 ব্রাউজারের সামঞ্জস্যতা টেবিলের লিঙ্কগুলির জন্য ধন্যবাদ! FindMeByIP বিশেষভাবে ঝরঝরে ছিল। এছাড়াও, স্প্রাউটকোর ছাড়াও, এক্স্টজেএস কেবল সঞ্চা হিসাবে পুনরায় চালু হয়েছে এবং তারা তাদের ওজন এইচটিএমএল 5 এর পিছনে ফেলে দিবে বলে মনে হচ্ছে
শার্পি

4

সীমানা-ব্যাসার্ধ, ছায়া (বাক্স / পাঠ্য), আরজিবা সমর্থন, এবং এর মতো বেসিক লেআউট জিনিস রয়েছে; সিএসএস 3 এটির জন্য সবচেয়ে বেশি পরিচিত। আরও আকর্ষণীয় হ'ল ক্যানভাস ট্যাগ, ভিডিও ট্যাগ, স্থানীয় স্টোরেজ, ওয়েবসকেটস এবং আরও অনেকগুলি যে সমতল এইচটিএমএল / জেএস / সিএসএসে আরও সমৃদ্ধ ব্যবহারকারীর অভিজ্ঞতা তৈরি করবে। এই বৈশিষ্ট্যগুলির অতিরিক্ত প্লাগইনগুলির প্রয়োজন ছাড়াই ওয়েবে ফ্ল্যাশের জন্য দুর্দান্ত বিকল্প হওয়ার সম্ভাবনা রয়েছে।


4

আমি নতুন এইচটিএমএল উপাদানগুলিকে বরং আকর্ষণীয় বলে মনে করি ... এর মধ্যে কিছু জেনেরিকের জন্য অর্থপূর্ণ প্রতিস্থাপনের প্রতিশ্রুতি দিচ্ছে div। প্রতিশ্রুতি নতুন উপাদান অন্তর্ভুক্ত article, section, aside, figure, nav, header, এবং footerঅন্যান্যের মধ্যে। অর্থহীন পাত্রে প্রতিস্থাপনের অর্থপূর্ণ উপাদানগুলির ধারণাটি আমি সত্যিই পছন্দ করি।

ওঁ হ্যাঁ, সম্পর্কিত আইটেম: অতি সরল doctype- শেষ পর্যন্ত আমি স্মৃতি থেকে টাইপ করতে পারি!


4

( এটি ওয়েবঅ্যাপস.স্ট্যাকেক্সেঞ্জঞ্জ ডটকম এ একইরকম প্রশ্নের আমার উত্তর )

ক্যানভাস এবং ওয়েব ওয়ার্কার টপিক আমার কাছে HTML5 এর অধিকাংশ উত্তেজনাপূর্ণ দিক আছে। আমি কিছু ওয়েব অ্যাপ্লিকেশন লিখেছি যা এই বৈশিষ্ট্যগুলি ব্যবহার করে:

GioAUTHor [sic] আপনাকে কোনও মানচিত্রে পাথ আঁকতে এবং তারপরে শুরু থেকে শেষের (জাভাস্ক্রিপ্টে ডিজকস্ট্রার অ্যালগরিদমের মাধ্যমে) সবচেয়ে সংক্ষিপ্ততম পথটি খুঁজে পেতে ক্যানভাসের ব্যাপক ব্যবহার করে।

জাভাস্ক্রিপ্ট থ্রেড ডেমো ক্যানভাসের সীমিত ব্যবহার করে তবে ডেমো কোড দিয়ে সম্পূর্ণ ওয়ার্কার থ্রেডের ব্যবহার দেখায়। এটি এইচটিএমএল 5 ইনপুট টাইপ = "রেঞ্জ" স্লাইডার নিয়ন্ত্রণ ব্যবহার করে।


এইচটিএমএল 5 ব্রাউজার সমর্থন ব্রাউজারগুলির নিজের মতোই বৈচিত্র্যযুক্ত। এইচটিএমএল 5 প্রস্তুতি সম্পর্কে একটি দুর্দান্ত সাইট আছে (এইচটিএমএল 5, ন্যাচ) যা দেখায় কে কী জন্য প্রস্তুত।


আমি এইচটিএমএল 5 প্রস্তুতি সাইটটি আগে দেখেছি, তবে কোথায় তা মনে করতে পারিনি - লিঙ্কটির জন্য ধন্যবাদ! সত্যিই ঝরঝরে, সাইটের দ্বৈত উদ্দেশ্য পরিবেশন করে।
অনুদান পালিন

2

সিএসএস 3 এর প্রতি শ্রদ্ধা জানায় - আপনি কী করতে পারেন তা দেখতে http://css3please.com এ দেখুন।

পরে আপনার ব্রাউজার, আপনি প্রভাবগুলি দেখতে সক্ষম হবেন সম্ভবত।


1

অডিও এবং ভিডিও ট্যাগ ফ্ল্যাশ বা সিলভারলাইটের মতো প্লাগইনের প্রয়োজন ছাড়াই মিডিয়া উপস্থাপনের অনুমতি দেয় এবং সর্বাধিক গুরুত্বপূর্ণভাবে আইফোন এবং আইপ্যাড ব্রাউজারগুলিতে কাজ করে। কোডেক এবং ডিজিটাল রাইটস ম্যানেজমেন্ট সম্পর্কিত কিছু বিষয় রয়েছে যা নিয়ে কাজ করা দরকার।


1

জেরেমি কাইথ "ওয়েব ডিজাইনারদের জন্য এইচটিএমএল 5" বিষয়টিতে সবেমাত্র একটি ভাল বই প্রকাশ করেছেন। আপনি যে চেক আউট করতে পারেন.

এটি অ্যা বুক অ্যাপার্টমেন্টের প্রথম বই। উন্নত ডিজাইনারদের মধ্যবর্তী করার জন্য এটির উচ্চ প্রস্তাব দিন। একজন ++,

http://books.alistapart.com/

দ্রষ্টব্য : আপনার হার্ড কপি পেতে অপেক্ষা করতে হতে পারে


1

এটি গুরুত্বের বিষয়ে কোনও মতামত দেয় না, তবে এটি HTML এবং 4 এবং 5 এর মধ্যে একটি দরকারী ব-দ্বীপ।

মূল উন্নতিতে আমার 2:

  • <section>এবং নতুন শিরোনামটির রূপরেখা অ্যালগরিদম (আমি বললাম এটি কেবল আমার 2 ¢)
  • নতুন ফর্ম উপাদানসমূহ, যেমন <input type=email>
  • data-* বৈশিষ্ট্যাবলী
  • ক্লায়েন্ট-পার্শ্ব স্টোরেজ
  • নেটিভ <audio>এবং<video>

0

কারণ এটি এখনও কেউ রাখেনি:

এইচটিএমএল 5 প্রত্যেকটি তালিকাবদ্ধ করেছে তার জন্য দুর্দান্ত তবে এটিতে স্ট্যান্ডার্ড জিওলোকেশন, ওয়েব কর্মী, ওয়েব সকেট, ক্যানভাস এবং স্থানীয় স্টোরেজ অন্তর্ভুক্ত রয়েছে। এই সমস্ত সরঞ্জামগুলি এইচটিএমএল 5 অনুচ্ছেদের অংশ, যা ঘটনাক্রমে পিছনে প্রচুর জাভাস্ক্রিপ্ট ব্যবহার করে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.