সিএসএস এবং এইচটিএমএল সমীক্ষার অবস্থা আমাদের কী বলে?

রাচেল অ্যান্ড্রু

প্রকাশিত: ডিসেম্বর 6, 2024

স্টেট অফ CSS 2024 এবং স্টেট অফ HTML 2024- এর ফলাফল এখন লাইভ। এই পোস্টটি সেই সমীক্ষার সবচেয়ে আকর্ষণীয় ফলাফলগুলির একটি প্রাথমিক চেহারা নেয়৷

ওয়েব প্ল্যাটফর্ম সম্পর্কে আশাবাদ

এইচটিএমএল এবং সিএসএস নিয়ে লোকজনের কিছু সমস্যা দেখার আগে, সমীক্ষাগুলি প্ল্যাটফর্ম সম্পর্কে অনেক আশাবাদ প্রকাশ করে। যখন জিজ্ঞাসা করা হয়েছিল যে ওয়েব প্ল্যাটফর্মটি সামগ্রিকভাবে সঠিক দিকে যাচ্ছে কিনা, স্টেট অফ HTML গ্রহণকারী 58% লোক সেই বিবৃতিটির সাথে একমত, 18% দৃঢ়ভাবে একমত।

CSS-এর জন্য, :has() পছন্দের নতুন CSS বৈশিষ্ট্য হিসেবে 36% লোক এটিকে সেরা নতুন বৈশিষ্ট্য হিসেবে র‌্যাঙ্ক করেছে। দ্বিতীয় প্রিয় হল @container 17% এ CSS নেস্টিং এর সাথে বাঁধা।

আপনি কি ব্যবহার করছেন?

CSS ডেটাতে কিছু চমক ছিল। উদাহরণস্বরূপ, 75% এরও বেশি লোক CSS ফিল্টার প্রভাবগুলি ব্যবহার করেছে যা এটিকে শীর্ষ ব্যবহৃত বৈশিষ্ট্য হিসাবে তৈরি করেছে। বছরের পর বছর ধরে ক্যাসকেড সম্পর্কে অভিযোগের সংখ্যা বিবেচনা করে, এটি আকর্ষণীয় যে ক্যাসকেড স্তরগুলি শুধুমাত্র 18.9% লোক ব্যবহার করে। সম্ভবত এখানে টেইলউইন্ডের মতো সরঞ্জামগুলি গ্রহণ করার জন্য একটি লিঙ্ক রয়েছে যা প্রায়শই ক্যাসকেড সম্পর্কিত সমস্যায় লোকেদের শেষ হতে বাধা দেয়।

ল্যান্ডমার্ক উপাদান যেমন <main> এবং <nav> আপনার ব্যবহার করা জিনিসগুলির জন্য HTML সমীক্ষার উপরে উঠে আসে। অলস লোডিং এবং প্রতিক্রিয়াশীল চিত্র কৌশলগুলি ব্যবহার করে অনেক লোককে দেখে এটি দুর্দান্ত।

শীর্ষ ব্রাউজার সমর্থন সমস্যা

আমরা যখন ডেভেলপারদের সাথে কথা বলি তখন আন্তঃঅপারেবিলিটি বা বৈশিষ্ট্যগুলির জন্য ব্রাউজার সমর্থনের সমস্যাগুলি সর্বদা আসে৷ সমীক্ষাগুলি সরাসরি আপনাকে জিজ্ঞাসা করেছে যে আপনি যে সমস্যার সম্মুখীন হয়েছেন। শীর্ষ 10টি সমস্যাযুক্ত বৈশিষ্ট্যগুলি নিম্নরূপ, সেই বৈশিষ্ট্যটি নির্বাচন করা লোকেদের শতাংশের ভিত্তিতে র‌্যাঙ্ক করা হয়েছে৷

  • Popover API
  • অ্যাঙ্কর পজিশনিং
  • ধারক প্রশ্ন
  • :has()
  • CSS নেস্টিং ভিউ
  • ট্রানজিশন API
  • সাবগ্রিড
  • গ্রিড
  • <dialog>
  • প্রগতিশীল ওয়েব অ্যাপস

উভয় সমীক্ষায় অ্যাঙ্কর পজিশনিং 11% স্কোর করেছে, ভিউ ট্রানজিশন API 9% স্টেট অফ CSS এবং 8% স্টেট অফ HTML এ দেখায় যে এই বৈশিষ্ট্যগুলি বিকাশকারীদের দ্বারা কতটা মূল্যবান হতে দেখা যায়৷

মজার বিষয় হল, বেশ কিছু বৈশিষ্ট্য ইন্টারঅপারেবল। কন্টেইনার কোয়েরি, :has() , CSS নেস্টিং, এবং সাবগ্রিড হল বেসলাইন নতুনভাবে উপলব্ধ, Popover API হবে, কিন্তু iOS-এ হালকা খারিজ সংক্রান্ত সমস্যার জন্য। <dialog> উপাদানটি এখন ব্যাপকভাবে উপলব্ধ, যেমন CSS গ্রিড লেআউট। লোকেদের কী সমস্যা হচ্ছে তা খুঁজে বের করার জন্য এই ফলাফলগুলি খনন করা মূল্যবান হতে পারে। গ্রিডের জন্য প্রতিক্রিয়াগুলি, উদাহরণস্বরূপ, প্রায়শই একটি প্রকৃত আন্তঃব্যবহারযোগ্য সমস্যা উদ্ধৃত করার পরিবর্তে এটি শেখা কঠিন বলে উল্লেখ করে।

আমরা আশা করি যে বেসলাইন ডেভেলপারদের জিনিসের স্থিতি বুঝতে এবং ব্রাউজার সামঞ্জস্যের অভাবের কারণে বা অন্য কিছুর কারণে কোন সমস্যা দেখছে তা জানতে সাহায্য করবে। এই সমীক্ষাগুলি বৈশিষ্ট্যগুলির বেসলাইন স্ট্যাটাস হাইলাইট করে তা দেখে খুব ভাল লাগছে৷ এছাড়াও আপনি webstatus.dev- এ শীর্ষ CSS সমস্যার জন্য ব্রাউজার জুড়ে উপলব্ধতার অবস্থা দেখতে পারেন।

অনুপস্থিত বৈশিষ্ট্য

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

এইচটিএমএল উত্তরদাতাদের রাজ্যের যে প্রশ্নটি জিজ্ঞাসা করা হয়েছিল তা হল, "আপনি যদি এইচটিএমএলে 3টি উপাদান যোগ করতে পারেন তবে সেগুলি কী হবে?" 51% লোক ডেটা টেবিলের জন্য জিজ্ঞাসা করেছে, অন্যান্য জনপ্রিয় পছন্দগুলির মধ্যে ট্যাব এবং টগল উপাদান রয়েছে৷

আপনি কি সম্পর্কে আরো জানতে চান?

সমীক্ষাগুলির একটি বৈশিষ্ট্য রয়েছে যেখানে আপনি একটি পড়ার তালিকায় আইটেমগুলি যোগ করতে পারেন, যদি আপনি জরিপ শেষ করার পরে সেগুলি সম্পর্কে আরও জানতে চান। এটি মূল্যবান ডেটা—বিশেষ করে যদি আপনি বিকাশকারী সামগ্রী তৈরির ব্যবসায় নিযুক্ত হন৷ নিম্নলিখিত তালিকা হল দুটি সমীক্ষা জুড়ে শীর্ষ দশটি বৈশিষ্ট্য, জরিপ গ্রহণকারীদের শতাংশের ভিত্তিতে স্থান দেওয়া হয়েছে যারা তাদের তালিকায় যুক্ত করেছে।

  • CSS hanging-punctuation
  • CSS offset-path
  • @scope
  • অ্যাঙ্কর পজিশনিং
  • কাস্টমাইজযোগ্য নির্বাচন
  • view-timeline
  • scroll-timeline
  • focusgroup অ্যাট্রিবিউট
  • বিচ্ছিন্ন বৈশিষ্ট্য অ্যানিমেশন
  • image()

CSS রিডিং লিস্ট এবং HTML রিডিং লিস্ট সহ সম্পূর্ণ ফলাফল দেখুন।

ওয়েব সম্প্রদায় থেকে একটি সংকেত

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