এই বছর CSS দিবস সম্মেলনে Chrome টিমের একটি বড় উপস্থিতি ছিল। আমরা CSS হেল্পডেস্ক চালিয়েছি, উপস্থিতদের প্রশ্নের উত্তর দিয়েছি, কিন্তু একটি হোয়াইটবোর্ডও ছিল যেখানে আমরা লোকেদের জিজ্ঞাসা করেছি যে তারা এখনও CSS থেকে অনুপস্থিত কি মনে করে। এই পোস্টে আমি সেই প্রশ্ন জিজ্ঞাসা করার ফলাফলগুলি শেয়ার করব, এবং এই সংক্ষিপ্ত সমীক্ষাটি সম্পূর্ণ করার মাধ্যমে আপনি HTML এবং CSS থেকে কী অনুপস্থিত বলে মনে করেন তা আমাদের বলতে বলব৷ আপনি কি CSS দিবসের অংশগ্রহণকারীদের সাথে একমত?
শীর্ষ দশ অনুরোধ
অংশগ্রহণকারীদের স্টিকি নোটে ধারণা লিখতে এবং বোর্ডে যোগ করতে বলা হয়েছিল। মানুষ একটি স্টিকার যোগ করে ধারণার সাথে তাদের ভোট যোগ করতে পারে। শীর্ষ দশ বৈশিষ্ট্য নিম্নরূপ.
স্টাইলিং ইনপুট জন্য সমর্থন
এটি 21 ভোট সহ আমাদের শীর্ষ বৈশিষ্ট্য অনুরোধ ছিল. আপনি সত্যিই এই সাধারণ UI উপাদানগুলিকে ধারাবাহিকভাবে স্টাইল করার উপায় চান৷
এটি এমন একটি ক্ষেত্র যা আমরা Chrome-এ ডেভেলপারদের জন্য একটি শীর্ষ ব্যথার পয়েন্ট হিসাবে ভালভাবে জানি এবং ডেভেলপারদের জন্য আরও ভাল সমাধান তৈরি করার জন্য কাজ চলছে৷ উদাহরণস্বরূপ, কাস্টমাইজযোগ্য নির্বাচনী উপাদানগুলির লক্ষ্য নতুন স্টাইলিং আচরণ বেছে নেওয়ার একটি উপায় প্রদান করা। তারপরে আপনি বিকল্পগুলিতে চিত্র যুক্ত করার বা আরও বিস্তৃত স্টাইলিং করার মতো জিনিসগুলি করতে পারেন। এই পদ্ধতির সুবিধা হল যে এটি একটি নিয়মিত নির্বাচিত মেনুতে ফিরে যাবে, এটি একটি প্রগতিশীল বর্ধন হতে অনুমতি দেয়।
দৃশ্যত লুকানো
CSS দিবসে 19 ভোট পেয়ে, এটি ছিল দ্বিতীয় জনপ্রিয় অনুরোধ। অনুরোধটি শুধুমাত্র স্ক্রিন রিডারদের দ্বারা ব্যবহৃত সামগ্রী যোগ করার একটি উপায়ের জন্য। এটি একটি HTML উপাদান হতে পারে, যেখানে বিষয়বস্তু প্রদর্শিত হয় না এবং শুধুমাত্র একটি স্ক্রিন রিডার দ্বারা পড়া হয়৷
সাধারণত লোকেরা বিষয়বস্তু লুকানোর জন্য একটি .visually-hidden ক্লাস তৈরি করে আজ এটি অর্জন করে কিন্তু তারপরও এটি স্ক্রিন রিডারদের কাছে অ্যাক্সেসযোগ্য করে তোলে।
যদিও এটি একটি জনপ্রিয় অনুরোধ, সেখানে এমন লোক রয়েছে যারা মনে করেন না যে এটি বাস্তবায়ন করা উচিত। বিশদ বিবরণের জন্য পড়ুন দৃশ্যত লুকানো বিষয়বস্তু হল একটি হ্যাক যা সমাধান করা প্রয়োজন, এনশ্রাইন করা নয় এবং CSS WG সমস্যা 560 এর উপর এই আলোচনা।
অবস্থান: স্টিকি ভিতরে ওভারফ্লো: লুকানো
এই অনুরোধটি 16 ভোট পেয়েছে। বর্তমানে, position: sticky শুধুমাত্র তখনই কাজ করে যখন অভিভাবকদের সবাই overflow: visible ।
2017 থেকে এটির অনুরোধ করার জন্য একটি উন্মুক্ত সমস্যা রয়েছে, এবং overflow: hidden আজ কম প্রয়োজন হতে পারে, থ্রেডে আরও অনেক পরিস্থিতি বিশদ রয়েছে।
height: auto
12 ভোটে, অনেক অংশগ্রহণকারী height: auto । আমরা এটা বলতে পেরে খুশি যে এটি CSS interpolate-size প্রপার্টি এবং calc-size() ফাংশন সহ ওয়েব প্ল্যাটফর্মে আসছে। এগুলি Chrome 129 থেকে পাওয়া যাবে৷ এগুলি সম্পর্কে আরও তথ্য সহ ভবিষ্যতের পোস্টের জন্য সন্ধান করুন৷
অতিরিক্ত ইনপুট প্রকার
HTML5 আপনার জন্য <input> উপাদানের জন্য বিভিন্ন ধরনের নিয়ে এসেছে—উদাহরণস্বরূপ একটি ইমেল ঠিকানার জন্য type="email" অথবা একটি রেঞ্জ স্লাইডারের জন্য type="range" । CSS দিবসে আমরা এই ধরনের আরও 10টি ভোট পেয়েছি, উদাহরণস্বরূপ, ডাবল রেঞ্জ, বা কাস্টম ডেটালিস্ট সহ স্বয়ংসম্পূর্ণ।
CSS এ বাস্তব র্যান্ডম সংখ্যা
10 ভোট সহ আরেকটি অনুরোধ ছিল CSS-এ বাস্তব র্যান্ডম সংখ্যার জন্য। এটি একটি এলোমেলো অ্যানিমেশন-সময়কালের জন্য অতীতে অনুরোধ করা হয়েছে এবং কাজ করা হয়েছে।
Mixin শৈলী ক্লাস
CSS পূর্বে CSS প্রিপ্রসেসরে দেখা বেশ কিছু বৈশিষ্ট্য যুক্ত করেছে—কাস্টম বৈশিষ্ট্য সহ ভেরিয়েবল, এবং এখন CSS নেস্টিং। পুনঃব্যবহারযোগ্য মিশ্রণগুলি যদিও এখনও ভাষার অংশ হয়ে ওঠেনি, তবে CSS দিবসের সাতজন অংশগ্রহণকারী সেগুলি দেখতে আগ্রহী ছিলেন।
এই বৈশিষ্ট্যটির জন্য একটি স্পেসিফিকেশন নিয়ে কাজ শুরু করার জন্য একটি CSS ওয়ার্কিং গ্রুপ রেজোলিউশন রয়েছে এবং আপনি আপনার চিন্তাভাবনা যোগ করতে পারেন এবং সেই ইস্যুতে আলোচনায় কেস ব্যবহার করতে পারেন।
ছায়া DOM-এ বিশ্বব্যাপী শৈলী
আরেকটি সমস্যা যেখানে ব্যবহারের ক্ষেত্রে একটি বৃহৎ আলোচনার থ্রেড রয়েছে তা হল একটি ছায়া DOM-এর ভিতরে বিশ্বব্যাপী CSS শৈলী প্রয়োগ করার অনুমতি দেওয়ার অনুরোধ, CSS দিবসে ছয়জন ব্যক্তি এটির জন্য অনুরোধ করেছিলেন। এই ক্ষমতা গ্লোবাল রিসেট শৈলীগুলিকে ওয়েব উপাদানগুলিতেও প্রয়োগ করতে এবং একক CSS ফাইলগুলিকে একটি সাইটের সমস্ত উপাদান জুড়ে কাজ করার অনুমতি দেবে। ব্যবহারের ক্ষেত্রে এই সংক্ষিপ্তসারটি দেখুন এবং আমাদের জানান যে এটি এমন একটি বৈশিষ্ট্য যা আপনিও পেতে চান।
মিশ্র একক বিভাজন
ইন্টারপ 2024-এর জন্য একটি প্রস্তাব ছিল যাতে মিশ্র একক দ্বারা ভাগ করার ক্ষমতার অনুরোধ করা হয়—উদাহরণস্বরূপ calc(100vw / 1px) । ইন্টারপ 2024-এর জন্য এটিকে খুব বিস্তৃত বলে মনে করা হয়েছিল, তবে CSS দিবসে ছয়জন সহ অনেক ডেভেলপার এটি বাস্তবায়িত দেখতে চান।
nth-letter
CSS-এ বেশ কিছু ছদ্ম-উপাদান রয়েছে যেগুলি এমনভাবে কাজ করে যেন আপনি বিষয়বস্তুর কিছু অংশের চারপাশে একটি স্প্যান মুড়েছেন। উদাহরণস্বরূপ, ::first-letter ছদ্ম-উপাদানটি ব্লক কন্টেইনারের প্রথম লাইনের প্রথম অক্ষরটিকে লক্ষ্য করে এটি প্রয়োগ করা হয়েছে।
সেই তালিকা থেকে অনুপস্থিত হল ::nth-letter , এবং আপনি প্রায় বিশ বছর ধরে ::nth-letter এর জন্য জিজ্ঞাসা করছেন, তাই আমরা জানি এটি ওয়েব ডেভেলপারদের কাছ থেকে দীর্ঘ সময়ের চাওয়া। সিএসএস দিবসে ছয়জন ব্যক্তি এটির পক্ষে ভোট দিয়েছেন, এটি আমাদের সেরা দশটি কাঙ্ক্ষিত বৈশিষ্ট্যের মধ্যে শেষ হয়েছে৷
আপনি কি সিএসএস দিবসের শীর্ষ দশের সাথে একমত?
আমরা এই বিষয়গুলি সম্পর্কে বিস্তৃত শ্রোতাদের কাছ থেকে শুনতে চাই, এর মধ্যে কোনটি কি আপনার সেরা দশে পরিণত হয়েছে? যদি না হয়, তাহলে কি আর কিছু আছে যা আপনি CSS এবং HTML এ দেখতে পছন্দ করবেন? এই সংক্ষিপ্ত ফর্মটি পূরণ করে আমাদের জানান এবং আমরা অন্য পোস্টে প্রতিক্রিয়াগুলি সংক্ষিপ্ত করব৷
,
এই বছর CSS দিবস সম্মেলনে Chrome টিমের একটি বড় উপস্থিতি ছিল। আমরা CSS হেল্পডেস্ক চালিয়েছি, উপস্থিতদের প্রশ্নের উত্তর দিয়েছি, কিন্তু একটি হোয়াইটবোর্ডও ছিল যেখানে আমরা লোকেদের জিজ্ঞাসা করেছি যে তারা এখনও CSS থেকে অনুপস্থিত কি মনে করে। এই পোস্টে আমি সেই প্রশ্ন জিজ্ঞাসা করার ফলাফলগুলি শেয়ার করব, এবং এই সংক্ষিপ্ত সমীক্ষাটি সম্পূর্ণ করার মাধ্যমে আপনি HTML এবং CSS থেকে কী অনুপস্থিত বলে মনে করেন তা আমাদের বলতে বলব৷ আপনি কি CSS দিবসের অংশগ্রহণকারীদের সাথে একমত?
শীর্ষ দশ অনুরোধ
অংশগ্রহণকারীদের স্টিকি নোটে ধারণা লিখতে এবং বোর্ডে যোগ করতে বলা হয়েছিল। মানুষ একটি স্টিকার যোগ করে ধারণার সাথে তাদের ভোট যোগ করতে পারে। শীর্ষ দশ বৈশিষ্ট্য নিম্নরূপ.
স্টাইলিং ইনপুট জন্য সমর্থন
এটি 21 ভোট সহ আমাদের শীর্ষ বৈশিষ্ট্য অনুরোধ ছিল. আপনি সত্যিই এই সাধারণ UI উপাদানগুলিকে ধারাবাহিকভাবে স্টাইল করার উপায় চান৷
এটি এমন একটি ক্ষেত্র যা আমরা Chrome-এ ডেভেলপারদের জন্য একটি শীর্ষ ব্যথার পয়েন্ট হিসাবে ভালভাবে জানি এবং ডেভেলপারদের জন্য আরও ভাল সমাধান তৈরি করার জন্য কাজ চলছে৷ উদাহরণস্বরূপ, কাস্টমাইজযোগ্য নির্বাচনী উপাদানগুলির লক্ষ্য নতুন স্টাইলিং আচরণ বেছে নেওয়ার একটি উপায় প্রদান করা। তারপরে আপনি বিকল্পগুলিতে চিত্র যুক্ত করার বা আরও বিস্তৃত স্টাইলিং করার মতো জিনিসগুলি করতে পারেন। এই পদ্ধতির সুবিধা হল যে এটি একটি নিয়মিত নির্বাচিত মেনুতে ফিরে যাবে, এটি একটি প্রগতিশীল বর্ধন হতে অনুমতি দেয়।
দৃশ্যত লুকানো
CSS দিবসে 19 ভোট পেয়ে, এটি ছিল দ্বিতীয় জনপ্রিয় অনুরোধ। অনুরোধটি শুধুমাত্র স্ক্রিন রিডারদের দ্বারা ব্যবহৃত সামগ্রী যোগ করার একটি উপায়ের জন্য। এটি একটি HTML উপাদান হতে পারে, যেখানে বিষয়বস্তু প্রদর্শিত হয় না এবং শুধুমাত্র একটি স্ক্রিন রিডার দ্বারা পড়া হয়৷
সাধারণত লোকেরা বিষয়বস্তু লুকানোর জন্য একটি .visually-hidden ক্লাস তৈরি করে আজ এটি অর্জন করে কিন্তু তারপরও এটি স্ক্রিন রিডারদের কাছে অ্যাক্সেসযোগ্য করে তোলে।
যদিও এটি একটি জনপ্রিয় অনুরোধ, সেখানে এমন লোক রয়েছে যারা মনে করেন না যে এটি বাস্তবায়ন করা উচিত। বিশদ বিবরণের জন্য পড়ুন দৃশ্যত লুকানো বিষয়বস্তু হল একটি হ্যাক যা সমাধান করা প্রয়োজন, এনশ্রাইন করা নয় এবং CSS WG সমস্যা 560 এর উপর এই আলোচনা।
অবস্থান: স্টিকি ভিতরে ওভারফ্লো: লুকানো
এই অনুরোধটি 16 ভোট পেয়েছে। বর্তমানে, position: sticky শুধুমাত্র তখনই কাজ করে যখন অভিভাবকদের সবাই overflow: visible ।
2017 থেকে এটির অনুরোধ করার জন্য একটি উন্মুক্ত সমস্যা রয়েছে, এবং overflow: hidden আজ কম প্রয়োজন হতে পারে, থ্রেডে আরও অনেক পরিস্থিতি বিশদ রয়েছে।
height: auto
12 ভোটে, অনেক অংশগ্রহণকারী height: auto । আমরা এটা বলতে পেরে খুশি যে এটি CSS interpolate-size প্রপার্টি এবং calc-size() ফাংশন সহ ওয়েব প্ল্যাটফর্মে আসছে। এগুলি Chrome 129 থেকে পাওয়া যাবে৷ এগুলি সম্পর্কে আরও তথ্য সহ ভবিষ্যতের পোস্টের জন্য সন্ধান করুন৷
অতিরিক্ত ইনপুট প্রকার
HTML5 আপনার জন্য <input> উপাদানের জন্য বিভিন্ন ধরনের নিয়ে এসেছে—উদাহরণস্বরূপ একটি ইমেল ঠিকানার জন্য type="email" অথবা একটি রেঞ্জ স্লাইডারের জন্য type="range" । CSS দিবসে আমরা এই ধরনের আরও 10টি ভোট পেয়েছি, উদাহরণস্বরূপ, ডাবল রেঞ্জ, বা কাস্টম ডেটালিস্ট সহ স্বয়ংসম্পূর্ণ।
CSS এ বাস্তব র্যান্ডম সংখ্যা
10 ভোট সহ আরেকটি অনুরোধ ছিল CSS-এ বাস্তব র্যান্ডম সংখ্যার জন্য। এটি একটি এলোমেলো অ্যানিমেশন-সময়কালের জন্য অতীতে অনুরোধ করা হয়েছে এবং কাজ করা হয়েছে।
Mixin শৈলী ক্লাস
CSS পূর্বে CSS প্রিপ্রসেসরে দেখা বেশ কিছু বৈশিষ্ট্য যুক্ত করেছে—কাস্টম বৈশিষ্ট্য সহ ভেরিয়েবল, এবং এখন CSS নেস্টিং। পুনঃব্যবহারযোগ্য মিশ্রণগুলি যদিও এখনও ভাষার অংশ হয়ে ওঠেনি, তবে CSS দিবসের সাতজন অংশগ্রহণকারী সেগুলি দেখতে আগ্রহী ছিলেন।
এই বৈশিষ্ট্যটির জন্য একটি স্পেসিফিকেশন নিয়ে কাজ শুরু করার জন্য একটি CSS ওয়ার্কিং গ্রুপ রেজোলিউশন রয়েছে এবং আপনি আপনার চিন্তাভাবনা যোগ করতে পারেন এবং সেই ইস্যুতে আলোচনায় কেস ব্যবহার করতে পারেন।
ছায়া DOM-এ বিশ্বব্যাপী শৈলী
আরেকটি সমস্যা যেখানে ব্যবহারের ক্ষেত্রে একটি বৃহৎ আলোচনার থ্রেড রয়েছে তা হল একটি ছায়া DOM-এর ভিতরে বিশ্বব্যাপী CSS শৈলী প্রয়োগ করার অনুমতি দেওয়ার অনুরোধ, CSS দিবসে ছয়জন ব্যক্তি এটির জন্য অনুরোধ করেছিলেন। এই ক্ষমতা গ্লোবাল রিসেট শৈলীগুলিকে ওয়েব উপাদানগুলিতেও প্রয়োগ করতে এবং একক CSS ফাইলগুলিকে একটি সাইটের সমস্ত উপাদান জুড়ে কাজ করার অনুমতি দেবে। ব্যবহারের ক্ষেত্রে এই সংক্ষিপ্তসারটি দেখুন এবং আমাদের জানান যে এটি এমন একটি বৈশিষ্ট্য যা আপনিও পেতে চান।
মিশ্র একক বিভাজন
ইন্টারপ 2024-এর জন্য একটি প্রস্তাব ছিল যাতে মিশ্র একক দ্বারা ভাগ করার ক্ষমতার অনুরোধ করা হয়—উদাহরণস্বরূপ calc(100vw / 1px) । ইন্টারপ 2024-এর জন্য এটিকে খুব বিস্তৃত বলে মনে করা হয়েছিল, তবে CSS দিবসে ছয়জন সহ অনেক ডেভেলপার এটি বাস্তবায়িত দেখতে চান।
nth-letter
CSS-এ বেশ কিছু ছদ্ম-উপাদান রয়েছে যেগুলি এমনভাবে কাজ করে যেন আপনি বিষয়বস্তুর কিছু অংশের চারপাশে একটি স্প্যান মুড়েছেন। উদাহরণস্বরূপ, ::first-letter ছদ্ম-উপাদানটি ব্লক কন্টেইনারের প্রথম লাইনের প্রথম অক্ষরটিকে লক্ষ্য করে এটি প্রয়োগ করা হয়েছে।
সেই তালিকা থেকে অনুপস্থিত হল ::nth-letter , এবং আপনি প্রায় বিশ বছর ধরে ::nth-letter এর জন্য জিজ্ঞাসা করছেন, তাই আমরা জানি এটি ওয়েব ডেভেলপারদের কাছ থেকে দীর্ঘ সময়ের চাওয়া। সিএসএস দিবসে ছয়জন ব্যক্তি এটির পক্ষে ভোট দিয়েছেন, এটি আমাদের সেরা দশটি কাঙ্ক্ষিত বৈশিষ্ট্যের মধ্যে শেষ হয়েছে৷
আপনি কি সিএসএস দিবসের শীর্ষ দশের সাথে একমত?
আমরা এই বিষয়গুলি সম্পর্কে বিস্তৃত শ্রোতাদের কাছ থেকে শুনতে চাই, এর মধ্যে কোনটি কি আপনার সেরা দশে পরিণত হয়েছে? যদি না হয়, তাহলে কি আর কিছু আছে যা আপনি CSS এবং HTML এ দেখতে পছন্দ করবেন? এই সংক্ষিপ্ত ফর্মটি পূরণ করে আমাদের জানান এবং আমরা অন্য পোস্টে প্রতিক্রিয়াগুলি সংক্ষিপ্ত করব৷