2024 হল CSS-এর জন্য সেরা বছরগুলির মধ্যে একটি: ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন, স্ক্রোল-চালিত অ্যানিমেশন, অ্যাঙ্কর পজিশনিং, অ্যানিমেট করতে height: autoএবং আরো অনেক। এটা জিজ্ঞাসা করা স্পর্শের বাইরে মনে হচ্ছে, কিন্তু আমরা CSS থেকে আর কি চাই? আচ্ছা, অনেক কিছু!
আমরা আমাদের মাথা একত্রিত করেছি এবং কয়েকটি ধারনা নিয়ে এসেছি… আপনার কয়েকটি সহ।
জিওফের পছন্দের তালিকা
আমি মনে করি যে আমাদের কাছে এই দিনগুলিতে ইতিমধ্যেই একগুচ্ছ বিস্ময়কর CSS গুডিজ রয়েছে। আমরা অনেক বিস্ময়কর আছে – এবং নতুন! — যে জিনিসগুলি আমি এখনও তাদের অনেকের চারপাশে আমার মাথা মোড়ানো।
কিন্তু! আরও একটি ভাল জিনিসের জন্য সবসময় জায়গা আছে, তাই না? বা হয়তো জন্য রুম চার নতুন জিনিস আমি যদি কোন নতুন CSS বৈশিষ্ট্যের জন্য জিজ্ঞাসা করতে পারি, এইগুলিই আমি চাই।
1. একটি শর্তসাপেক্ষ if() বিবৃতি
এটা আসছে! অথবা এটি ইতিমধ্যে এখানে আছে যদি আপনি বিবেচনা করেন যে CSS ওয়ার্কিং গ্রুপ (CSSWG) একটি যোগ করার সিদ্ধান্ত নিয়েছে if() শর্তাধীন CSS মান মডিউল লেভেল 5 স্পেসিফিকেশনে। এটি একটি বড় ধাপ এগিয়ে, এমনকি যদি এটি একটি আনুষ্ঠানিক সংজ্ঞা পেতে এবং ব্রাউজারে প্রবেশ করতে এক বা দুই বছর (বা তার বেশি?!) সময় নেয়।
সম্পর্কে আমার উপলব্ধি if() এটি অর্জনের জন্য একটি মূল উপাদান ধারক শৈলী প্রশ্নযা আমি শেষ পর্যন্ত এই থেকে চাই. অন্য উপাদানের শৈলীর উপর ভিত্তি করে শর্তসাপেক্ষে শৈলী প্রয়োগ করতে সক্ষম হওয়া হল CSS-এর সাদা তিমি, তাই কথা বলতে। আমরা ইতিমধ্যেই অন্য উপাদানের উপর ভিত্তি করে একটি উপাদান স্টাইল করতে পারি :has() তাই এটি শর্তসাপেক্ষ শৈলীও অন্তর্ভুক্ত করার জন্য সেই জাদুটিকে প্রসারিত করবে।
2. CSS মিক্সন
এটি একটি “সুন্দর-থাকা” বৈশিষ্ট্য কারণ আমি এটিকে সিএসএস প্রিপ্রসেসর টেরিটরিতে বর্ধিতভাবে অনুভব করি এবং বিশ্বাস করি যে হালকা বিমূর্তকরণের জন্য কিছু টুলিং করা ভালো, যেমন সিএসএস-এ ফাংশন বা মিক্সন লেখা। কিন্তু আমি অবশ্যই “না” বলব না যদি কেউ আমাকে এটি অফার করে তবে সিএসএসে মিক্সিন বেক করা হয়। এটি সেই স্ট্র হতে পারে যা সিএসএস প্রিপ্রসেসরকে ফিরিয়ে দেয় এবং আমাকে 100% সময় প্লেইন সিএসএস লিখতে দেয় কারণ এই মুহুর্তে আমি যখন একটি মিক্সিন বা ফাংশন প্রয়োজন তখন আমি সাসের কাছে পৌঁছানোর প্রবণতা রাখি।
আমি মিক্সিন প্রস্তাব এবং স্পেসিফিকেশনে এর প্রাথমিক খসড়া সম্পর্কে একগুচ্ছ নোট লিখেছি আমি কেন এই বৈশিষ্ট্যটি চাই সে সম্পর্কে আপনাকে ধারণা দিতে।
হ্যাঁ, দয়া করে! এটি একটি ছোটখাট ডেভেলপার সুবিধা যা CSS কে অন্যান্য ভাষায় মন্তব্য লেখার সমান করে তোলে। আমি মোটামুটি নিশ্চিত যে আমার সিএসএসে জাভাস্ক্রিপ্ট মন্তব্য লিখতে হবে আমার বোবা CSS ভুলের তালিকা (যদিও আমি সেখানে না রাখি)।
4. font-size: fit
আমি শুধু গণিত করতে ঘৃণা করি, ঠিক আছে?! কখনও কখনও আমি শুধু একটি শব্দ বা ছোট শিরোনাম চাই যে পাত্রে এটি আছে। আমরা যেমন জিনিস ব্যবহার করতে পারেন clamp() তরল টাইপসেটিং জন্যকিন্তু আবার, যে গণিত আমি বিরক্ত করা যাবে না. আপনি ভাবতে পারেন কন্টেইনার কোয়েরি এবং এর সাথে একটি সম্ভাব্য সমাধান আছে কন্টেইনার ক্যোয়ারী ইউনিট ব্যবহার করে জন্য font-size কিন্তু যে কোন ভাল কাজ করে না ভিউপোর্ট ইউনিট.
রায়ান এর ইচ্ছা তালিকা
আমি একজন সাধারণ, ছোট-শহরের CSS ডেভেলপার, এবং আমি গত কয়েক বছরে ব্রাউজারে আসা সমস্ত নতুন বৈশিষ্ট্য নিয়ে বেশ সন্তুষ্ট, আমি আর কী চাইতে পারি?
5. আরও ব্রাউজারে অ্যাঙ্কর পজিশনিং!
সিএসএস অ্যাঙ্কর পজিশনিং নিয়ে আমার আর বিশ্বাস করার দরকার নেই, আমি বিক্রি! নভেম্বর মাসের অনেকটা সময় কাটানোর পর এটা কিভাবে কাজ করে তা শেখাআমি জানি না আমি ডিসেম্বরে গিয়েছিলাম সত্যিই কিছুক্ষণের জন্য এটি ব্যবহার করতে পান।
আমরা 2024 বন্ধ করার সাথে সাথে, শুধুমাত্র ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলির সমর্থন রয়েছে এবং দুর্ভাগ্যবশত ফলব্যাক এবং প্রগতিশীল উন্নতি সহজ নয়। একটি পলিফিল উপলব্ধ রয়েছে (যা দুর্দান্ত), তবে, এর অর্থ জাভাস্ক্রিপ্টের আরেকটি অংশ যোগ করা, অ্যাঙ্কর পজিশনিং যা সমাধান করে তার বিপরীতে।
যদিও আমি ধৈর্যশীল, আমি দীর্ঘ সময়ের জন্য অপেক্ষা করেছি :has ব্রাউজারে আসতে, যা হয়েছে “নতুন উপলব্ধ“এখন এক বছরের জন্য বেসলাইনে (আপনি এটা বিশ্বাস করতে পারেন?)
6. উপাদান প্রচার #top-layer ছাড়া পপওভার?
আমি অ্যাঙ্কর পজিশনিং পছন্দ করি, আমি পপোভার পছন্দ করি এবং তারা একসাথে খুব ভাল যায়!
popovers সঙ্গে ঝরঝরে জিনিস তারা প্রদর্শিত হয় কিভাবে #top-layerতাই আপনি স্ট্যাকিং সম্পর্কিত সমস্যাগুলি এড়াতে পারেন z-index. এটি সম্ভবত এটির সাথে সবচেয়ে বেশি প্রয়োজন, তবে একটি উপাদান সরানোর জন্য অন্য কোনও উপায় থাকা আকর্ষণীয় হবে। এছাড়াও, এখন আমি জানি যে #top-layer বিদ্যমান, আমি করতে চাই আরো এর সাথে – আমি জানতে চাই সেখানে কি আছে। আসলে কি হচ্ছে?
ওয়েল, আমি সম্ভবত চশমা শুরু করা উচিত ছিল. এটি সক্রিয় আউট হিসাবে, CSS পজিশন লেআউট মডিউল লেভেল 4 খসড়া সম্পর্কে আলোচনা #top-layerএটি কিসের জন্য উপযোগী, এবং এটির মধ্যে থাকা স্টাইলিং উপাদানগুলির সাথে যোগাযোগ করার উপায়। মজার ব্যাপার হল, দ #top-layer ব্যবহারকারী এজেন্ট দ্বারা নিয়ন্ত্রিত এবং এর একটি উপজাত বলে মনে হয় ফুলস্ক্রিন API.
ডায়ালগ এবং পপোভারগুলি এখন যাওয়ার উপায় কিন্তু, আশাবাদীভাবে বলতে গেলে, এই বৈশিষ্ট্যগুলি বিদ্যমান পারে মানে উপাদানগুলিকে উন্নীত করা সম্ভব #top-layer ভবিষ্যতের উপায়ে। এটি একটি কোয়োট/রোডরানার-টাইপ পরিস্থিতি হতে পারে, কারণ আমি এটি পেয়ে গেলে আমি এটির সাথে কী করব তা নিশ্চিত নই।
7. একটি স্তর বৈশিষ্ট্য যোগ করা <link> ট্যাগ
ব্যক্তিগতভাবে বলতে গেলে, ক্যাসকেড স্তর আমি কিভাবে CSS লিখি তা পরিবর্তন করেছি। এক জিনিস আমি মনে করি টেক্কা হবে যদি আমরা একটি অন্তর্ভুক্ত করতে পারে layer একটি উপর বৈশিষ্ট্য <link> ট্যাগ আপনার প্রকল্পে একটি CSS রিসেট অন্তর্ভুক্ত করতে সক্ষম হওয়ার কল্পনা করুন যেমন:
<link rel="stylesheet" href="https://cdn.com/some/reset.css" layer="reset">অথবা, পরিদর্শন করা পৃষ্ঠার উপর নির্ভর করে, গতিশীলভাবে আপনার ক্যাসকেড স্তরগুলিতে মিশ্রিত CSS-এর অংশগুলি যোগ করুন:
<!--
Global styles with layers defined, such as:
@layer reset, typography, components, utilities;
-->
<link rel="stylesheet" href="https://css-tricks.com/styles/main.css">
<!-- Add only to pages using card components -->
<link rel="stylesheet" href="https://css-tricks.com/components/card.css" layer="components">এই বৈশিষ্ট্য ছিল CSSWG এর রেপোতে প্রস্তাবিতএবং জীবনের বেশিরভাগ জিনিসের মতো: এটা জটিল.
ব্রাউজারগুলি বিশেষ করে এমন বৈশিষ্ট্যগুলির সাথে চটকদার যেগুলি তারা জানে না, এছাড়াও ফলব্যাকগুলি পরিচালনার বিষয়ে নির্দিষ্ট উদ্বেগ রয়েছে৷ বিষয়টি W3C টেকনিক্যাল আর্কিটেকচার গ্রুপ (TAG) এর জন্যও আনা হয়েছিল পাশাপাশি আলোচনাতাই এখনও আশা আছে!
জুয়ান্ডির উইশলিস্ট
আমাকে এটা স্বীকার করতেই হবে, আমি তখন ছিলাম না যখন ওয়েব বন্য ছিল এবং লোকেরা কাউন্টারে আঘাত করেছিল। আসলে, আমি মনে করি আপনার গড় ওয়েবের তুলনায় আমি বেশ তরুণ গুণগ্রাহী. যদিও আমি জানি কিভাবে ব্যবহার করে একটি লেআউট তৈরি করতে হয় float (প্রথম ওয়েব কোর্সটি আমি তুলেছিলাম সুন্দর পুরানো), ফ্লেক্সবক্স বা সিএসএস গ্রিডের মতো জিনিসগুলি ব্যবহার করার আগে আমাকে বেশি কষ্ট করতে হয়নি এবং IE এবং ব্রাউজার সমর্থনের বিরুদ্ধে কখনও দাঁত পিষেনি।
সুতরাং, অতীতে ওয়েবের প্রয়োজনীয় বৈশিষ্ট্যগুলির তুলনায় নিম্নলিখিত ইচ্ছাগুলি ক্ষুদ্র অনুরোধের মতো মনে হতে পারে — এমনকি কিছু বর্তমানেরও৷ নির্বিশেষে, এখানে আমার তিনটি ক্ষুদ্র অনুরোধ রয়েছে যা আমি 2025 সালে দেখতে চাই:
8. শিশুদের একটি পূর্ণসংখ্যা হিসাবে গণনা এবং সূচক পান
এটি সেই জিনিসগুলির মধ্যে একটি যা আপনি শপথ করেন যে এটি কেবল সিএসএস দিয়ে ইতিমধ্যেই সম্ভব হওয়া উচিত। পরিস্থিতি নিম্নরূপ: আমি নিজেকে তার ভাইবোন বা মোট সন্তানের সংখ্যার মধ্যে একটি উপাদানের সূচক জানতে চাই। আমি ব্যবহার করতে পারি না counter() ফাংশন থেকে কখনও কখনও আমি একটি স্ট্রিং পরিবর্তে একটি পূর্ণসংখ্যা প্রয়োজন. বর্তমান পদ্ধতিটি হয় এইচটিএমএলে একটি সূচক হার্ডকোডিং করা হয়:
<ul>
<li style="--index: 0">Milk</li>
<li style="--index: 1">Eggs</li>
<li style="--index: 2">Cheese</li>
</ul>অথবা বিকল্পভাবে, CSS-এ প্রতিটি সূচক লিখুন:
li:nth-child(1) { --index: 0; }
li:nth-child(2) { --index: 1; }
li:nth-child(3) { --index: 2; }যেভাবেই হোক, আমি সবসময় এই অনুভূতির সাথে চলে যাই যে এই নম্বরটি উল্লেখ করা সহজ হওয়া উচিত; ব্রাউজারে ইতিমধ্যেই এই তথ্য রয়েছে, এটি লেখকদের কাছে প্রকাশ করার বিষয় মাত্র। এটি বিস্ময়কর অ্যানিমেশনের জন্য সুন্দর এবং ক্লিনার কোড তৈরি করবে, বা মোট গণনার উপর ভিত্তি করে শৈলী পরিবর্তন করবে।
সৌভাগ্যক্রমে, এর জন্য ওয়ার্কিং ড্রাফটে ইতিমধ্যেই একটি প্রস্তাব রয়েছে sibling-count() এবং sibling-index() ফাংশন যদিও সিনট্যাক্স পরিবর্তন হতে পারে, আমি 2025 সালে তাদের সম্পর্কে আরও শুনতে আশা করি।
ul > li {
background-color: hsl(sibling-count() 50% 50%);
}
ul > li {
transition-delay: calc(sibling-index() * 500ms);
}9. ভারসাম্য বজায় রাখার একটি উপায় flex-wrap
আমি এটা থেকে চুরি করছি অ্যাডাম আর্গিলকিন্তু আমি ভারসাম্য বজায় রাখার একটি ভাল উপায় চাই flex-wrap বিন্যাস যখন উপাদানগুলি তাদের ধারক সঙ্কুচিত হওয়ার সাথে সাথে একের পর এক মোড়ানো হয়, তখন তারা হয় খালি স্থান (যা আমি অপছন্দ করি না) দিয়ে একা ছেড়ে দেওয়া হয় বা এটি পূরণ করতে বড় হয় (যা আমার আত্মাকে আঘাত করে):
আমি মোড়ক উপাদান ভারসাম্য একটি আরো নেটিভ উপায় চাই:
এটা অবশ্যই বিরক্তিকর.
10. CSSWG আলোচনা পড়ার/গবেষণা করার একটি সহজ উপায়
আমি CSSWG এবং তারা যা কিছু করে তার একজন বড় ভক্ত, তাই আমি তাদের কাজের খসড়া, GitHub সমস্যা বা তাদের মিটিং সম্পর্কে নোট পড়তে অনেক সময় ব্যয় করেছি। যাইহোক, আমি তাদের গিটহাবে লিঙ্ক থেকে লিঙ্কে ঝাঁপ দিতে যতটা পছন্দ করি, একটি নির্দিষ্ট আলোচনার সাথে সম্পর্কিত সমস্ত সমস্যা খুঁজে পাওয়া কঠিন হতে পারে।
আমি মনে করি এটি কিছু বিষয়ে আপনার মতামত দেওয়ার ক্ষেত্রে প্রবেশের বাধা তৈরি করে। আপনি যদি কোনো ইস্যুতে অংশ নিতে চান, তাহলে আপনার কাছে সমস্ত আলোচনার বড় ছবি থাকা উচিত (কী বলা হয়েছে, কেন কিছু জিনিস কাজ করে না, অন্যগুলি বিবেচনা করার মতো, ইত্যাদি) তবে এটি সাধারণত বিভিন্ন বিষয় বা মিটিং জুড়ে ছড়িয়ে ছিটিয়ে থাকে৷ যদিও সমস্যাগুলি দীর্ঘ হতে পারে, তবে এটি সমস্যা নয় (আমি সেগুলি পড়তে পছন্দ করি), তবে আলোচনার অংশ না জেনে প্রথম স্থানে কোথাও বিদ্যমান ছিল।
সুতরাং, যদিও এটি সরাসরি একটি CSS ইচ্ছা নয়, আমি আশা করি আলোচনার সম্পূর্ণ ছবি পাওয়ার আগে একটি সহজ উপায় থাকত।
আপনার ইচ্ছার তালিকায় কি আছে?
আমরা জিজ্ঞেস করলাম! আপনি উত্তর দিয়েছেন! এখানে ভিড় থেকে কয়েকটি পছন্দের নির্বাচন রয়েছে:
- সরাসরি ঘোরান
background-imagesপছন্দbackground-rotate: 180deg - সিএসএস
random()জন্য params সঙ্গেrange,spreadএবংtype - একটি CSS অ্যাঙ্কর পজিশন মোড যা মাউস কার্সার, পয়েন্টার, বা টাচ পয়েন্ট পজিশনকে টার্গেট করার অনুমতি দেয়
- একটি স্ট্রিং নির্বাচক পাঠ্যের একটি ব্লকে একটি নির্দিষ্ট শব্দকে জিজ্ঞাসা করতে এবং প্রতিবার সেই শব্দটি ঘটলে স্টাইলিং প্রয়োগ করতে
- একজন দেশীয়
.visually-hiddenক্লাস position: stickyসঙ্গে a:stuckছদ্ম
আপনাকে একটি মহান 2025 কামনা করছি…
CSS-ট্রিকস ট্র্যাজেক্টোরি এই গত বছরগুলিতে সবচেয়ে মসৃণ ছিল না, তাই 2025 এর জন্য আমাদের সবচেয়ে বড় ইচ্ছা হল ওয়েব সম্পর্কে লেখালেখি করা এবং আলোচনার জন্ম দেওয়া। শুভ 2025!
