আমার ওয়েবসাইটটি তৈরি করতে আমার কি HTML5 এবং / অথবা CSS3 ব্যবহার করা উচিত?


16

নতুন এইচটিএমএল 5 / সিএসএস 3 (ওয়েব 8!) স্টাফ দুর্দান্ত মনে হচ্ছে! আমি এখনই এটি ব্যবহার করা শুরু করব বা আরও ব্রাউজারগুলি এটি ব্যবহার না করা অবধি CSS / xhtml এর সাথে থাকা উচিত?


আপনি ওয়েব 8 এর অর্থ কী?
হারুন

3
এইচটিএমএল 5 + সিএসএস 3 = ওয়েব 8!
জেসন

HTTP 1.0 এবং ECMAScript 5.0 সম্পর্কে কী?

উত্তর:


13

এইচটিএমএল 5 এখন সমস্ত ব্রাউজার দ্বারা সমর্থিত, এমনকি আই 5! (আপনি যদি এইচটিএমএল 5 শিব স্ক্রিপ্ট ব্যবহার করেন)। আমি http://diveintohtml5.org পড়ার সর্বাধিক সুপারিশ করছি এটি সেখানকার সেরা HTML5 সংস্থানগুলির মধ্যে একটি।

সিএসএস 3 এর ক্ষেত্রে, আপনি যদি এটি ব্যবহার করেন তবে নিয়মিত বাক্য গঠনের শীর্ষে, বিক্রেতা প্রিক্সিক্সও ব্যবহার নিশ্চিত করে নিন। যেমন

সীমান্তে ব্যাসার্ধ

-moz-সীমান্তে ব্যাসার্ধ

-webkit-সীমান্তে ব্যাসার্ধ

আমি প্রগতিশীল বর্ধনে বিশ্বাস করি। আই 9 এর সিএসএস 3 সমর্থনটি খুব আশাব্যঞ্জক মনে হচ্ছে।


2
আমার মনে হয় আপনি সীমানা-ব্যাসার্ধ নীচে রেখে দেবেন, তাই না?
গ্রান্ট পালিন

1
হায়, এইচটিএমএল 5 সাইটে মূল ডাইভটি চলে গেছে। অনেক আয়না উপলব্ধ আছে। এখানে একটি: diveintohtml5.info
এম ডুডলি

12

সম্ভবত।

এইচটিএমএল 5 এর কিছু অংশ রয়েছে যা আপনি এখনই ব্যবহার করতে পারবেন। উদাহরণস্বরূপ ফর্ম। আপনার যদি <input type="email">এমন একটি ব্রাউজার থাকে যা এইচটিএমএল 5 সমর্থন করে না (হ্যাঁ, এমনকি আই 6) আপনি যদি ব্যবহার করেন তবে আপনি একই জিনিসটি দেখতে পাবেন <input type="text">। তবুও এমন একটি ব্রাউজারে যা এইচটিএমএল 5 ফর্ম উপাদানগুলিকে সমর্থন করে, আপনি emailপ্রকারের সুবিধা অর্জন করতে পারেন : ক্লায়েন্ট ত্রুটি করে ত্রুটি করে কোনও অতিরিক্ত জেএসের প্রয়োজনীয়তা ছাড়াই মান পরীক্ষা করবে। হ্যাঁ, অ-এইচটিএমএল 5 ব্রাউজারগুলির জন্য আপনার এখনও জেএস প্রয়োজন, সমর্থনকারী ব্রাউজারগুলিতে আপনার কাছে বৈধতার আরও একটি স্তর থাকবে।

এই সাইটের অন্য একটি প্রশ্ন আপনাকে এইচটিএমএল 5 এবং সিএসএস 3 এর মাধ্যমে উপলব্ধ নতুন বৈশিষ্ট্যগুলির একটি ভাল ওভারভিউ সরবরাহ করে। সেই প্রশ্নে ফর্মগুলিতে প্রচুর ভাল ডেটা রয়েছে।

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

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

  • এইচটিএমএল 5 শিব : এইচটিএমএল 5 উপাদানগুলি সনাক্ত করতে এবং স্টাইল করার জন্য একটি জাভাস্ক্রিপ্ট শিব।
  • CSS3 পাই: একটি IE সংযুক্ত আচরণ (একটি.htcফাইল) যা ইন্টারনেট এক্সপ্লোরারকে 6-8 সর্বাধিক দরকারী CSS3 সজ্জা বৈশিষ্ট্যগুলির বেশ কয়েকটি রেন্ডার করতে সক্ষম করে। একটি উপাদান প্রয়োগ করা হলে, তা ইন্টারনেট চিনতে এবং প্রদর্শন করতে দেয়border-radius,box-shadow,border-image, একাধিক ব্যাকগ্রাউন্ড ইমেজ, এবংlinear-gradientব্যাকগ্রাউন্ড ইমেজ হিসাবে।
  • মডার্নিজার: একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা আসন্ন সিএসএস 3 / এইচটিএমএল 5 বৈশিষ্ট্যের বিপরীতে বর্তমান ব্রাউজারটি পরীক্ষা করতে বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করে, সমর্থিতদের জন্য <html> উপাদানটিতে ক্লাস যুক্ত করে। স্ব-শিরোনামযুক্ত বৈশ্বিক জাভাস্ক্রিপ্ট অবজেক্ট তৈরি করে যা প্রতিটি বৈশিষ্ট্যের জন্য বুলিয়ান সম্পত্তি রাখে,trueযদি সমর্থন করে এবংfalseনা থাকে। HTML5 উপাদানগুলিকে স্টাইলিং এবং মুদ্রণের জন্য সমর্থন যুক্ত করে যাতে আপনি<section>,<header>এবং এরমতো উপাদান ব্যবহার করতে পারেন<nav>
  • ie-css3.js: ইন্টারনেট এক্সপ্লোরারকে সিএসএস 3 সিউডো-ক্লাস সিলেক্টর সনাক্ত করতে এবং তাদের সাথে সংজ্ঞায়িত কোনও স্টাইলের নিয়ম রেন্ডার করতে দেয়। আপনার সাইট জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে যার ভিত্তিতে বিভিন্ন CSS3 নির্বাচনকারীকে সমর্থন করে।
  • ডিডি_বেলেটেড পিএনজি: একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা আইএন 6 এ পিএনজি চিত্র সমর্থন যোগ করে। আপনি পিএনজি গুলিsrcকোনও<img />উপাদান হিসাবে বাসিএসএসেএকটিbackground-imageসম্পত্তিহিসাবেব্যবহার করতে পারেন। ভিন্নAlphaImageLoader,background-positionএবংbackground-repeatকাজ দেয়ার উদ্দেশ্যে করা, এবং উপাদান দ্বারা জবাব দেবে যেমনa:hoverসিউডো-বর্গ।
  • টুইনহেলিক্স IE পিএনজি ফিক্স: একটি আইই সংযুক্ত আচরণ (একটি.htcফাইল) যা আইএন-তে আলফা ধূলিকণা সহ পিএনজি সমর্থন যুক্ত করে Full. সম্পূর্ণ সিএসএস ব্যাকগ্রাউন্ড পজিশনিং এবং পুনরাবৃত্তি অতিরিক্ত (অন্তর্ভুক্ত) জাভাস্ক্রিপ্ট সহ (সিএসএস স্প্রাইটস সহ) সমর্থন করছে।
  • যাই হোক না কেন: হোভার: একটি আইই সংযুক্ত আচরণ (একটি.htcফাইল) যা স্বয়ংক্রিয়ভাবে প্যাচ করে: হোভার,: অ্যাক্টিভ এবং:আই 6, আই 7 এবং আই 8কিরকগুলিকে ফোকাস করে, আপনাকে অন্য কোনও ব্রাউজারে যেমন ব্যবহার করতে দেয় সেগুলি আপনাকে দেয়। , AJAX এর সমর্থন সহ যার অর্থ কোনো HTML যে পায় জাভাস্ক্রিপ্ট-এর মাধ্যমে নথিতে সন্নিবেশ হবে এছাড়াও ট্রিগার:hover,:activeএবং:focusআইই মধ্যে শৈলী।

মজার বিষয় লক্ষণীয় যে ডিডি_বেলেটেড পিএনজি দু'টিই সমস্যার সমাধান করে যা যা সমাধান করে: হোভার এবং টুইনহেলিক্সের আই পিএনজি ফিক্সটি খাঁটি জাভাস্ক্রিপ্ট সহ, যদিও যাই হোক: হোভার এবং টুইনহেলিক্সের আই পিএনজি ফিক্স জাভাস্ক্রিপ্ট এবং আইই সংযুক্ত আচরণের সংমিশ্রণ ব্যবহার করে ( .htc files)।

সাধারণত যারা আই-নন ব্রাউজার ব্যবহার করেন তারা যখন তাদের জিজ্ঞাসা করা হয় তারা এগুলিকে আপগ্রেড করে এবং তাই "" তবে কিছু ব্রাউজার এই বৈশিষ্ট্যটিকে সমর্থন করে না! " অভিযোগ। মডার্নিজার আপনি যে কোনও ব্রাউজারই দেখতে পাচ্ছেন এবং কেবল আইই নয়, এটি এইচটিএমএল 5 / সিএসএস 3 ব্যবহার করার ক্ষমতা যুক্ত করবে। ie-css3.js একই জিনিস করবে, আপনাকে কেবল কোনও আইআই শর্তযুক্ত মন্তব্য ছাড়াই এটি বাস্তবায়ন করতে হবে (যার অর্থ সার্ভার-পাশের ব্যবহারকারী-এজেন্ট চেক সহ আপনি যদি এটি অন্তর্ভুক্ত না করেন তবে সমস্ত ব্রাউজারগুলি এটি অর্জন করবে) এটি কার্যকারিতা হ্রাস করবে কেবলমাত্র আপনার আইআই ব্যবহারকারীদের চেয়ে আপনার সমস্ত দর্শকের জন্য))


দুঃখিত ব্রাইসন কিন্তু সেই বিষয়গুলি যা ইন্টারনেট এক্সপ্লোরারটিতে এইচটিএমএল 5 সমর্থন যুক্ত করে সেগুলি ব্যবহারিক উদ্দেশ্যে সম্পূর্ণ দুঃস্বপ্ন।

1
আমি আরও কয়েকটি বিটের তথ্যের সাথে আমার পোস্ট আপডেট করেছি এবং এই জেএস লাইব্রেরিগুলি ব্যবহার করে পারফরম্যান্সের হিটগুলি স্বীকার করেছি। তবে আমি আপনার সাথে একমত নই যে তাদের ব্যবহারটি দুঃস্বপ্ন। আমি এই সমস্তগুলি অন্তত একবার ব্যবহার করেছি এবং তারা সকলেই একটি উদ্দেশ্য করে। তারা আমার কোনও অতিরিক্ত মাথাব্যথাও করেনি। কী বলে যে এগুলি দুঃস্বপ্ন?
ব্রাইসন

ঠিক আছে, "স্বপ্নের স্বপ্নগুলি" জিনিসগুলিকে বাক্য বলার খুব শক্তিশালী উপায় হতে পারে তবে পারফরম্যান্সটি প্রায়শই এতটা খারাপভাবে ভোগ করে যে পৃষ্ঠাটি ব্যবহারযোগ্য না হয়ে যায়, তাই আমি মনে করি আপনি কেসটিকে অতিরিক্ত বিবেচনা করছেন।

5

প্রযুক্তি আপনার প্রয়োজন অনুসারে যে কোনও প্রযুক্তি ব্যবহার করুন।

এরিক মায়ার কেন সিএসএস বিধিগুলিতে বিক্রেতার-নির্দিষ্ট উপসর্গগুলি ব্যবহার শুরু করা সিএসএস ফিল্টার হ্যাক ব্যবহারের মতো খোঁড়া নয় বলে একটি দুর্দান্ত নিবন্ধ লিখেছিলেন ।

আমি মনে করি এটি HTML5 তেও প্রযোজ্য। আপনি যদি বিভিন্ন বৈশিষ্ট্যের জন্য ব্রাউজার সমর্থন পরীক্ষা করতে পারেন তবে এটি কেন ব্যবহার করবেন না। সাইটটি যতক্ষণ না কৃপণভাবে অবনতি হয় ততক্ষণ এটি বেঁচে থাকুন।


2

সিএসএস 3 বৈশিষ্ট্যগুলি কী কী আপনি ব্যবহার করতে চাইতে পারেন তা সিদ্ধান্ত নেওয়ার সময় কয়েকটি অন্যান্য দরকারী লিঙ্কগুলি: http://caniuse.com/ (কোন প্ল্যাটফর্মগুলি জুড়ে কোন উপাদান এবং নির্বাচকগুলি ব্যবহারযোগ্য of

http://css3p कृपया.com/ (CSS3 বৈশিষ্ট্যগুলির সাথে জগাখিচু করার জন্য একটি ইন-পৃষ্ঠা-সম্পাদনাযোগ্য খেলার মাঠ, এটি সাধারণভাবে অনুরোধ করা স্টাইলিংগুলির জন্য কোন প্ল্যাটফর্মগুলি যেমন বৃত্তাকার কোণ, গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড, ইত্যাদি)


1

আমি এটি আধুনিক ব্রাউজারগুলিতে অভিজ্ঞতা বাড়াতে ব্যবহার করি যাতে ভাল ব্রাউজারের ব্যবহারকারীরা সুন্দর ইউআই এর (বৃত্তাকার কোণ, ছায়া, সেই কিন্ডা স্টাফ) সাথে "পুরস্কৃত" হয়। আমি অনুমান করি যে আপনি এটির জন্য কোনও ধরণের জেএস ফ্যালব্যাক না পেয়ে আপনার বর্তমান ক্লায়েন্টসাইডের ফর্ম বৈধতা বলার জন্য এটি প্রতিস্থাপন হিসাবে ব্যবহার করবেন না।


1

যদি আপনি এইচটিএমএল 5 ব্যবহার করে কোনও নতুন প্রকল্প শুরু করেন যা পুরানো ব্রাউজারগুলিতেও সমর্থন করা উচিত, তবে ইনিশিয়ালাইজার ব্যবহার করা সবচেয়ে ভাল বিকল্প -

http://www.initializr.com/

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


0

শ্রোতা কী এবং আপনি কী বৈশিষ্ট্য ব্যবহার করতে চান তার উপর নির্ভর করে। আমি আশা করি গড় প্রকল্পের পক্ষে সমর্থন ছাড়ার আগে এটি আরও কয়েক বছর হবে :(


0

যদি আপনার সাইটটি একটি ব্যক্তিগত ইন্ট্রানেট হয় এবং আপনি হয় ব্রাউজারটি নিয়ন্ত্রণ করেন বা মোকাবেলা করার জন্য ব্রাউজারের সীমিত পরিসীমা রয়েছে তবে প্রযুক্তির রক্তক্ষরণ প্রান্তে নির্দ্বিধায় কাজ করুন।

যদি তা না হয় তবে আপনি যা ব্যবহার করেন না কেন, আপনাকে সর্বদা সর্বনিম্ন সাধারণ ডিনোমিনেটরকে বিবেচনা করতে হবে। এই ক্ষেত্রে এটি সম্ভবত আই 6 এর কিছু সংমিশ্রণ এবং মোবাইল ব্রাউজারগুলির একটি ব্যাপ্তি। সুতরাং, আপনি যদি এইচটিএমএল 5 দিয়ে এগিয়ে যান তবে আপনার সাইটটি সুন্দরভাবে 'অবনমিত' হয়েছে কিনা তা নিশ্চিত করার যুক্ত সমস্যা রয়েছে।

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