আপনার যা জানা দরকার তা এখানে:
- ভিউ ট্রানজিশন এপিআই দিয়ে আপনার একক পৃষ্ঠা অ্যাপে পালিশ ট্রানজিশন তৈরি করুন।
- CSS কালার লেভেল 4 এর জন্য সমর্থন সহ রঙগুলিকে পরবর্তী স্তরে আনুন।
- নতুন রঙের কার্যকারিতা সবচেয়ে বেশি করতে স্টাইল প্যানেলে নতুন টুল আবিষ্কার করুন।
- এবং আরো অনেক আছে.
আমি আদ্রিয়ানা জারা। চলুন ডুব দিয়ে দেখি Chrome 111-এ ডেভেলপারদের জন্য নতুন কী রয়েছে৷
ট্রানজিশন API দেখুন।
ওয়েবে মসৃণ রূপান্তর তৈরি করা একটি জটিল কাজ। ভিউ ট্রানজিশন এপিআই এখানে স্ন্যাপশট ভিউ করে এবং DOM-কে রাজ্যের মধ্যে কোনো ওভারল্যাপ ছাড়াই পরিবর্তন করার অনুমতি দিয়ে পালিশ ট্রানজিশন তৈরি করাকে সহজ করে তোলে।
ডিফল্ট ভিউ ট্রানজিশন একটি ক্রস ফেইড, নিম্নলিখিত স্নিপেট এই অভিজ্ঞতা বাস্তবায়ন করে।
function spaNavigate(data) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// With a transition:
document.startViewTransition(() => updateTheDOMSomehow(data));
}
যখন .startViewTransition() কল করা হয়, API পৃষ্ঠার বর্তমান অবস্থা ক্যাপচার করে।
একবার এটি সম্পূর্ণ হলে, .startViewTransition() -এ পাস করা callback বলা হয়। যে যেখানে DOM পরিবর্তন করা হয়. তারপর, API পৃষ্ঠার নতুন অবস্থা ক্যাপচার করে।
উল্লেখ্য যে API একক-পৃষ্ঠা অ্যাপস (এসপিএ) এর জন্য চালু করা হয়েছে কিন্তু অন্যান্য মডেলের জন্যও সমর্থন প্রয়োগ করা হচ্ছে।
এই API-তে অনেক বিশদ বিবরণ রয়েছে, নমুনা এবং বিশদ বিবরণ সহ আমাদের নিবন্ধে আরও জানুন, অথবা MDN-এ ভিউ ট্রানজিশন ডকুমেন্টেশন অন্বেষণ করুন৷
CSS কালার লেভেল 4।
CSS কালার লেভেল 4 এর সাথে, CSS এখন হাই ডেফিনিশন ডিসপ্লে সমর্থন করে, HD gamuts থেকে রং নির্দিষ্ট করে এবং স্পেশালাইজেশন সহ কালার স্পেস অফার করে।
সংক্ষেপে এর অর্থ হল 50% বেশি রং বাছাই করা! আপনি ভেবেছিলেন 16 মিলিয়ন রঙ অনেকের মতো শোনাচ্ছে। আমিও তাই ভেবেছিলাম।
নিজের জন্য এটি চেষ্টা করুন
বাস্তবায়নে color() ফাংশন অন্তর্ভুক্ত রয়েছে; এটি যেকোন রঙের স্থানের জন্য ব্যবহার করা যেতে পারে যা R, G, এবং B চ্যানেলগুলির সাথে রঙ নির্দিষ্ট করে। color() প্রথমে একটি কালার স্পেস প্যারামিটার নেয়, তারপর আরজিবি এবং ঐচ্ছিকভাবে কিছু আলফার জন্য চ্যানেল মানগুলির একটি সিরিজ।
এখানে বিভিন্ন রঙের স্থানগুলির সাথে রঙ ফাংশন ব্যবহার করার কিছু উদাহরণ রয়েছে।
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
CSS ব্যবহার করে হাই ডেফিনেশন রঙের সম্পূর্ণ সুবিধা নিতে আরও ডকুমেন্টেশনের জন্য এই নিবন্ধটি দেখুন।
নতুন রঙের devtools.
CSS কালার লেভেল 4 স্পেসিফিকেশন সমর্থন করার জন্য Devtools-এর নতুন বৈশিষ্ট্য রয়েছে।
শৈলী ফলকটি এখন 12টি নতুন রঙের স্পেস এবং 7টি নতুন গ্যামুটকে সমর্থন করে যা স্পেকে উল্লেখ করা হয়েছে। এখানে color(), lch(), oklab() এবং color-mix() সহ CSS রঙের সংজ্ঞার উদাহরণ রয়েছে।
color-mix() ব্যবহার করার সময়, যা একটি রঙের শতাংশের সাথে অন্য রঙের মিশ্রণ করতে সক্ষম করে, আপনি কম্পিউটেড প্যানে চূড়ান্ত রঙের আউটপুট দেখতে পারেন 
এছাড়াও রঙ চয়নকারী আরও বৈশিষ্ট্য সহ সমস্ত নতুন রঙের স্থান সমর্থন করে। উদাহরণস্বরূপ, রঙের কালার সোয়াচে ক্লিক করুন (display-p3 1 0 1)। আপনার নির্বাচিত রঙের স্বরগ্রামের স্পষ্ট বোঝার জন্য sRGB এবং ডিসপ্লে-p3 গ্যামুটের মধ্যে পার্থক্য করে একটি স্বরগ্রাম সীমারেখাও যোগ করা হয়েছে। 
কালার পিকার রঙের ফরম্যাটের মধ্যে রং রূপান্তর করতেও সমর্থন করে।
ডিবাগিং রঙ এবং devtools-এ অন্যান্য নতুন বৈশিষ্ট্য সম্পর্কে আরও তথ্যের জন্য এই পোস্টটি দেখুন।
এবং আরো!
অবশ্যই আরো অনেক আছে.
- CSS ত্রিকোণমিতিক ফাংশন, অতিরিক্ত রুট ফন্ট ইউনিট যোগ করেছে এবং n-ম চাইল্ড সিউডো সিলেক্টরকে প্রসারিত করেছে ।
- ডকুমেন্ট পিকচার ইন পিকচার এপিআই অরিজিন ট্রায়ালে রয়েছে
-
previousslideএবংnextslideঅ্যাকশনগুলি এখন মিডিয়া সেশন API এর অংশ। এখানে ডেমো চেকআউট করুন.
আরও পড়া
এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। Chrome 111-এ অতিরিক্ত পরিবর্তনের জন্য নীচের লিঙ্কগুলি দেখুন৷
- Chrome DevTools এ নতুন কি আছে (111)
- Chrome 111 অপসারণ এবং অপসারণ
- Chrome 111-এর জন্য ChromeStatus.com আপডেট
- Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা
- ক্রোম রিলিজ ক্যালেন্ডার
সদস্যতা
আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷
আমি আদ্রিয়ানা জারা, এবং Chrome 112 রিলিজ হওয়ার সাথে সাথে, Chrome-এ নতুন কী আছে তা জানাতে আমি এখানেই থাকব!