আপনার যা জানা দরকার তা এখানে:
- তিনটি নতুন 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. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. 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;
}
/* 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 Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷
Yo soy Adriana Jara, এবং Chrome 117 রিলিজ হওয়ার সাথে সাথে, Chrome-এ নতুন কী আছে তা জানাতে আমি এখানেই থাকব!