আপনার যা জানা প্রয়োজন তা এখানে দেওয়া হল:
- তিনটি নতুন CSS ফিচার মসৃণ এন্ট্রি ও এক্সিট অ্যানিমেশন যোগ করা সহজ করে তোলে।
- অ্যারে গ্রুপিং-এর মাধ্যমে আরও উন্নত ডেটাসেট গণনা করুন।
- DevTools লোকাল ওভাররাইডকে আরও সহজ করে।
- এবং আরও অনেক কিছু আছে।
আমি আদ্রিয়ানা জারা। আসুন, Chrome 117-এ ডেভেলপারদের জন্য নতুন কী কী আছে তা দেখে নেওয়া যাক।
এন্ট্রি ও এক্সিট অ্যানিমেশনের জন্য নতুন CSS ফিচার।
এই তিনটি নতুন CSS ফিচার, এন্ট্রি ও এক্সিট অ্যানিমেশন সহজে যোগ করার সেট সম্পূর্ণ করে, এবং ডায়ালগ ও পপওভারের মতো টপ লেয়ার ডিসমিস করা যায় এমন এলিমেন্টকে মসৃণভাবে অ্যানিমেট করে।
প্রথম ফিচারটি হল transition-behavior। display-এর মতো ডিসক্রিট প্রপার্টি ট্রানজিশন করতে, transition-behavior-এর জন্য allow-discrete ভ্যালু ব্যবহার করুন।
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
তারপর, @starting-style নিয়মটি display: none থেকে টপ-লেয়ারে এন্ট্রি এফেক্ট অ্যানিমেট করতে ব্যবহার করা হয়। পৃষ্ঠায় এলিমেন্ট খোলার আগে ব্রাউজার যাতে স্টাইল খুঁজে দেখতে পারে, তার জন্য @starting-style ব্যবহার করুন।
/* 0. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 1. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
সবশেষে, সবচেয়ে উপরের লেয়ার থেকে popover বা dialog ফেড-আউট করতে, ট্রানজিশনের তালিকায় overlay প্রপার্টি যোগ করুন। ট্রানজিশন বা অ্যানিমেশনে ওভারলে অন্তর্ভুক্ত করুন যাতে অন্যান্য ফিচারের সাথে ওভারলে অ্যানিমেট করা যায় এবং অ্যানিমেট করার সময় এটি যেন সবচেয়ে উপরের লেয়ারে থাকে তা নিশ্চিত করুন। এটি অনেক বেশি মসৃণ দেখাবে।
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
মোশন ব্যবহার করে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে কীভাবে এইসব ফিচার ব্যবহার করবেন সেই বিষয়ে বিস্তারিত জানতে স্মুথ এন্ট্রি ও এক্সিট অ্যানিমেশনের জন্য চারটি নতুন CSS ফিচার দেখুন।
অ্যারে গ্রুপিং
প্রোগ্রামিংয়ে, অ্যারে গ্রুপিং হল অত্যন্ত সাধারণ অপারেশন, যা SQL-এর GROUP BY ক্লজ এবং MapReduce প্রোগ্রামিং (যেটিকে ম্যাপ-গ্রুপ-রিডিউস হিসেবে ভাবলে ভাল হয়) ব্যবহার করার সময় সবচেয়ে বেশি দেখা যায়।
ডেটা গ্রুপে একত্রিত করার ক্ষমতা ডেভেলপারদের আরও উন্নত ডেটাসেট গণনা করতে সাহায্য করে। যেমন, কোনও কোহর্টের গড় বয়স বা কোনও ওয়েবপেজের দৈনিক LCP ভ্যালু।
Object.groupBy ও Map.groupBy স্ট্যাটিক মেথড যোগ করার মাধ্যমে অ্যারে গ্রুপিং এইসব পরিস্থিতিকে সম্ভব করে তোলে।
groupBy একটি করে ইটারেবলের প্রতিটি এলিমেন্টের জন্য একবার করে প্রদত্ত কলব্যাক ফাংশনকে কল করে। কলব্যাক ফাংশনটি একটি স্ট্রিং বা সিম্বল রিটার্ন করবে যা সংশ্লিষ্ট এলিমেন্টের গ্রুপকে নির্দেশ করে।
MDN ডকুমেন্টেশন থেকে নেওয়া নিম্নলিখিত উদাহরণে, প্রোডাক্টের একটি অ্যারে আছে যেগুলি groupBy মেথড ব্যবহার করে তাদের ধরন অনুযায়ী গ্রুপ করে ফেরত দেওয়া হয়েছে।
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish">;, type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ type }) = type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
আরও বিবরণের জন্য groupBy ডকুমেন্টেশন দেখুন।
DevTools-এ লোকাল ওভাররাইড স্ট্রিমলাইন করা হয়েছে।
লোকাল ওভাররাইড ফিচার এখন স্ট্রিমলাইন করা হয়েছে, তাই আপনি নেটওয়ার্ক প্যানেল থেকে সহজেই রিমোট রিসোর্সের রেসপন্স হেডার ও ওয়েব কন্টেন্ট মক করতে পারবেন, এর জন্য আপনাকে সেগুলি অ্যাক্সেস করতে হবে না।
ওয়েব কন্টেন্ট ওভাররাইড করতে, নেটওয়ার্ক প্যানেল খুলুন, কোনও অনুরোধে ডানদিকের বোতামে ক্লিক করুন এবং কন্টেন্ট ওভাররাইড করুন বিকল্প বেছে নিন।
আপনার লোকাল ওভাররাইড সেট-আপ করা থাকলেও সেটি বন্ধ করা থাকলে, DevTools সেটি চালু করে দেয়। আপনি এখনও সেগুলি সেট-আপ না করে থাকলে, DevTools উপরের অ্যাকশন বারে আপনাকে প্রম্পট করবে। ওভাররাইড সেভ করার জন্য একটি ফোল্ডার বেছে নিন এবং DevTools-কে সেটি অ্যাক্সেস করার অনুমতি দিন।
ওভাররাইড সেট-আপ করা হয়ে গেলে, DevTools আপনাকে ওয়েব কন্টেন্ট ওভাররাইড করার জন্য সোর্স > ওভাররাইড > এডিটরে নিয়ে যায়।
মনে রাখবেন, ওভাররাইড করা রিসোর্স নেটওয়ার্ক প্যানেলে 
চিহ্ন দিয়ে দেখানো হয়। ওভাররাইড করা আইটেম দেখতে আইকনের উপরে মাউস নিয়ে যান।
Chrome 117-এ DevTools-এর সমস্ত বিবরণ ও আরও তথ্যের জন্য DevTools-এ নতুন কী আছে তা চেক করে দেখুন।
এবং আরও অনেক কিছু!
অবশ্যই আরও অনেক কিছু আছে।
grid-template-columnsওgrid-template-rows-এর জন্য অনেক প্রতীক্ষিতsubgridভ্যালু এখন Chrome-এ প্রয়োগ করা হয়েছে।unloadইভেন্ট ডেপ্রিকেশনের জন্যWebSQLডেপ্রিকেশন ট্রায়াল ও ডেভেলপার ট্রায়াল আছে।
আরও পড়ুন
এতে শুধু কিছু গুরুত্বপূর্ণ হাইলাইট কভার করা হয়েছে। Chrome 117-এ অতিরিক্ত পরিবর্তনের জন্য নিচে দেওয়া লিঙ্ক চেক করুন।
- Chrome DevTools (117)-এ নতুন কী কী আছে
- Chrome 117-এ বাতিল ও সরিয়ে দেওয়া আইটেম
- Chrome 117-এর জন্য ChromeStatus.com আপডেট
- Chromium সোর্স রিপোজিটরি পরিবর্তন তালিকা
- Chrome রিলিজ ক্যালেন্ডার
সাবস্ক্রাইব করুন
আপ-টু-ডেট থাকতে, Chrome Developers YouTube চ্যানেল-এ সাবস্ক্রাইব করুন এবং আমরা নতুন ভিডিও লঞ্চ করলেই আপনি ইমেল বিজ্ঞপ্তি পাবেন।
আমি হলাম Adriana Jara এবং Chrome 117 রিলিজ হওয়ার সাথে সাথেই Chrome-এ নতুন কী কী ফিচার আছে তা জানাতে আমি এখানে হাজির হব!