নতুন ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলির জন্য কয়েক সপ্তাহ অপেক্ষা করা সত্ত্বেও, আমাদের কাছে নতুন কী আছে একটি সমস্যা রয়েছে! এই গুরুত্বপূর্ণ জ্যাম বস্তাবন্দী. দেখে মনে হচ্ছে ওয়েব সম্প্রদায়ের অনেক কিছু বলার আছে, তাই আপনার সিট বেল্ট বেঁধে রাখুন!
@keyframes অ্যানিমেশন স্ট্রিং হতে পারে
পিটার ক্রোনার একটি আকর্ষণীয় তথ্য শেয়ার করেছেন @keyframes অ্যানিমেশন – যে তারা স্ট্রিং হতে পারে:
@keyframes "@animation" {
/* ... */
}
#animate-this {
animation: "@animation";
}ওহ মাই গড, #CSS ফান ফ্যাক্ট টাইম: কীফ্রেমের নাম স্ট্রিং হতে পারে। কেন? আচ্ছা, আপনি যদি চান আপনার কীফ্রেমের নাম “@keyframes” হোক, স্পষ্টতই! #webdev
[image or embed]
– পিটার ক্রোনার (@sirpepe.bsky.social) ফেব্রুয়ারী 18, 2026 সকাল 10:33 এ
আমি জানি না আপনি কেন এটি করতে চান, তবে এটি অবশ্যই একটি আকর্ষণীয় বিষয় যা শিখতে হবে। @keyframes 11 বছর পর ক্রস ব্রাউজার সমর্থন!
: বনাম = শৈলী প্রশ্নে
আরেকটি লুকানো কৌশল, তেমানি আফিফের এই কৌশলটি দেখায় যে আমরা একটি স্টাইল প্রশ্নে একটি সমান চিহ্ন দিয়ে কোলন প্রতিস্থাপন করতে পারি। তেমানি পার্থক্যগুলি ব্যাখ্যা করার জন্য একটি দুর্দান্ত কাজ করেছে, তবে এটিকে সংক্ষিপ্ত করার জন্য এখানে একটি দ্রুত কোড স্নিপেট রয়েছে:
.Jay-Z {
--Problems: calc(98 + 1);
/* Evaluates as calc(98 + 1), color is blueivy */
color: if(style(--Problems: 99): red; else: blueivy);
/* Evaluates as 99, color is red */
color: if(style(--Problems = 99): red; else: blueivy);
}সংক্ষেপে, = মূল্যায়ন করে --Problems একটি ভিন্ন উপায়ে :যদিও জে-জেড নিঃসন্দেহে তাদের মধ্যে 99টি রয়েছে (তিনি নিজেই বলেছেন)।
আখ্যান .visually-hidden)
ডেভিড বুশেল দেখান কিভাবে তৈরি করতে হয় ইনভোকার কমান্ডগুলি ঘোষণামূলকভাবে ব্যবহার করে, একটি দরকারী বৈশিষ্ট্য যা আমাদেরকে HTML এর পক্ষে কিছু J’Script এড়িয়ে যেতে দেয় এবং সাম্প্রতিক সমস্ত ওয়েব ব্রাউজারে কাজ করে।
এছাড়াও, আনা টিউডরের একটি কৌতূহলী প্রশ্নের জন্য ধন্যবাদ, নিবন্ধটি একটি ভিউ-হিডেন ইউটিলিটি ক্লাসের জন্য প্রয়োজনীয় ন্যূনতম সংখ্যক শৈলী সম্পর্কে একটি স্পিন-অফ তৈরি করেছে। এখনো কি সাতটা বাজে?
হয়তো না…
মাঝখান থেকে কিভাবে টেক্সট ছেঁটে ফেলা যায়
Wes Bos শুধুমাত্র CSS ব্যবহার করে পাঠ্যকে মাঝখানে ছেঁটে ফেলার জন্য একটি চতুর কৌশল ভাগ করেছে:
Reddit-এ কেউ একটি ডেমো পোস্ট করেছে যেখানে CSS মাঝখান থেকে পাঠ্য ছেঁটে ফেলে। তারা কোড পোস্ট করেনি, তাই এখানে flexbox সহ আমার শট
[image or embed]
– Wes Bos (@wesbos.com) ফেব্রুয়ারী 9, 2026, 17:31
Donnie D’Amato একটি আরো স্থানীয় সমাধান ব্যবহার করার চেষ্টা করেছে ::highlight()কিন্তু ::highlight() দুর্ভাগ্যক্রমে, এর কিছু সীমাবদ্ধতা রয়েছে। হেনরি উইলকিনসন যেমন উল্লেখ করেছেন, দেশীয় সমাধানের জন্য হ্যাজেল বাচারাচের 2019 সালের আহ্বান এখনও একটি উন্মুক্ত টিকিট, তাই আঙ্গুলগুলি অতিক্রম করা হয়েছে!
আপেক্ষিক রঙ সিনট্যাক্স সহ রঙের ভেরিয়েবলগুলি কীভাবে পরিচালনা করবেন
থিও সোটি আপেক্ষিক রঙের সিনট্যাক্সের সাথে রঙের ভেরিয়েবলগুলি কীভাবে পরিচালনা করতে হয় তা প্রদর্শন করেছেন। যদিও এটি একটি নতুন বৈশিষ্ট্য বা ধারণা নয়, এটি স্পষ্টতই আমি এখন পর্যন্ত পড়েছি সেরা এবং সবচেয়ে ব্যাপক ওয়াকথ্রু যা এই জটিলতাগুলিকে সমাধান করে৷
কিভাবে তালিকা অপ্টিমাইজ করবেন (আধুনিক উপায়)
Piccalilli-এর জন্য অনুরূপ একটি নিবন্ধে, রিচার্ড রাটার ব্যাপকভাবে আমাদের দেখিয়েছেন যে কীভাবে তালিকাগুলি কাস্টমাইজ করা যায়, যদিও আমি কেবল আধুনিক সিএসএস বলে অনুমান করতে পারি তার মধ্যে কিছু অদ্ভুততা রয়েছে। কি? symbols()? কি? @counter-style এবং extends? রিচার্ড তোমার মধ্য দিয়ে হেঁটে যাচ্ছে সবকিছু.
কাউন্টার যথেষ্ট পেতে পারেন না? জুয়ান দিয়েগো এখানে CSS-ট্রিক্সের উপর একটি বিস্তারিত নির্দেশিকা তৈরি করেছেন।
কিভাবে ব্যবহার করে টাইপস্কেল তৈরি করবেন :heading
সাফারি টেকনোলজি প্রিভিউ 237-এর পরীক্ষা সম্প্রতি শুরু হয়েছে :heading/:heading()স্টুয়ার্ট রবসন যেমন ব্যাখ্যা করেছেন। তবে ফলো আপ আরও ভাল, কারণ এটি আমাদের দেখায় কিভাবে pow() ক্লিনার টাইপস্কেল লজিক লিখতে ব্যবহার করা যেতে পারে, যদিও আমি শেষ পর্যন্ত পুরানো স্কুলে বসতি স্থাপন করেছি –
:heading আর না sibling-index()::
:root {
--font-size-base: 16px;
--font-size-scale: 1.5;
}
:heading {
/* Other heading styles */
}
/* Assuming only base/h3/h2/h1 */
body {
font-size: var(--font-size-base);
}
h3 {
font-size: calc(var(--font-size-base) * var(--font-size-scale));
}
h2 {
font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 2));
}
h1 {
font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 3));
}উনা ক্র্যাভেটস পরিচয় করিয়ে দিলেন border-shape
নতুন বৈশিষ্ট্য সম্পর্কে কথা বলা, border-shape এটা আমার কাছে অবাক লাগে যে আমরা ইতিমধ্যেই আছে – বা ইচ্ছা পাস করতে – corner-shape. তবে, border-shape ভিন্ন, যেমন উনা উল্লেখ করেছেন। এটি সীমাবদ্ধতার সাথে সমস্যার সমাধান করে (কারণ এটি হয় সীমানা), আরও আকার এবং এমনকি অনুমতি দেয় shape() কাজ, এবং সামগ্রিকভাবে এটি পর্দার আড়ালে ভিন্নভাবে কাজ করে।
Modern.CSS চায় আপনি 2015 এর মত CSS লেখা বন্ধ করুন
এখন আপনার সমস্ত আধুনিক CSS ব্যবহার শুরু করার সময় এসেছে, এবং আধুনিক.css আপনাকে সাহায্য করতে চায়। সেই সমস্ত আশ্চর্যজনক বৈশিষ্ট্য যা আপনি ভুলে গেছেন যখন আপনি প্রথম পড়েছিলেন যে সেগুলি সমর্থিত ছিল না? অথবা যেগুলি আপনি মিস করেছেন বা সম্পূর্ণভাবে এড়িয়ে গেছেন? ঠিক আছে, Modern.css-এ 75টি কোড স্নিপেট এবং গণনা রয়েছে এবং আপনাকে যা করতে হবে তা হল সেগুলি অনুলিপি করা।
কেভিন পাওয়েল আপনার জন্য কিছু CSS স্নিপেটও আছে
আর ভাষ্যকার? তাদেরও কিছু আছে!
সত্যি কথা বলতে কি, কেভিনই একমাত্র ওয়েব ডেভ টীকার যাকে আমি আসলে ইউটিউবে অনুসরণ করি এবং সেটাই তাই এই মুহূর্তে প্রায় এক মিলিয়ন ফলোয়ার রয়েছে, তাই ‘Ol K-Po’-এর “সাবস্ক্রাইব” বোতামটি চাপতে ভুলবেন না।
ক্ষেত্রে আপনি এটা মিস
আসলে, তুমি এতটুকুও ছাড়োনি! ফায়ারফক্স 148 প্রকাশিত হয়েছে shape() ফাংশন, যা একটি পতাকা দ্বারা ক্যাপচার করা হত, কিন্তু এখন একটি ডিফল্ট বৈশিষ্ট্য। Safari প্রযুক্তি প্রিভিউ 237 পরীক্ষা করার জন্য প্রথম হয়ে উঠেছে :heading. গত কয়েক সপ্তাহ ধরে আমরা আমাদের প্রিয় ব্রাউজারগুলিতে এটিই দেখেছি (অবশ্যই ছোট আপডেটের স্বাভাবিক ঝাপসা থেকে বিয়োগ)।
বলা হচ্ছে, ক্রোম, সাফারি এবং ফায়ারফক্স ইন্টারপ 2026-এর জন্য তাদের লক্ষ্য ঘোষণা করেছে, যা প্রকাশ করে যে তারা এই বছর সমস্ত ওয়েব ব্রাউজার জুড়ে কোন ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলিকে সামঞ্জস্য করতে চায়। এর চেয়ে বেশি এই সপ্তাহে চকচকে বৈশিষ্ট্যের অভাব পূরণ করে।
এটিও আসছে (তবে এখন ক্রোম ক্যানারিতে পরীক্ষাযোগ্য)। border-shape) হয় scrolled স্ক্রোল-স্টেট কন্টেইনার প্রশ্নের জন্য কীওয়ার্ড। ব্রামাস সম্পর্কে কথা বলা যাক scrolled স্ক্রোল-স্টেট প্রশ্ন এখানে।
মনে রাখবেন, আপনি যদি কিছু মিস করতে না চান, তাহলে খবরটি ব্রেক হওয়ার সাথে সাথে আপনি css-tricks.com সাইডবারে এই দ্রুত হিটগুলি ধরতে পারেন।
এক পাক্ষিক মধ্যে দেখা হবে!
