আজকের এবং আগামীকালের ওয়েব স্টাইলিং বৈশিষ্ট্য, যেমনটি Google IO 2022-এ দেখা হয়েছে, এবং কিছু অতিরিক্ত।
2022 সালটি CSS-এর সর্বশ্রেষ্ঠ বছরগুলির মধ্যে একটি হতে সেট করা হয়েছে, উভয় বৈশিষ্ট্য এবং সমবায় ব্রাউজার বৈশিষ্ট্য প্রকাশের ক্ষেত্রে, 14টি বৈশিষ্ট্য বাস্তবায়নের জন্য একটি সহযোগিতামূলক লক্ষ্য নিয়ে!
ওভারভিউ
এই পোস্টটি হল Google IO 2022-এ প্রদত্ত আলোচনার প্রবন্ধ ফর্ম। এটি প্রতিটি বৈশিষ্ট্যের উপর একটি গভীর নির্দেশিকা নয়, বরং একটি ভূমিকা এবং সংক্ষিপ্ত ওভারভিউ যা আপনার আগ্রহকে জাগিয়ে তুলতে, গভীরতার পরিবর্তে প্রশস্ততা প্রদান করে। আপনার আগ্রহ প্রকট হলে, আরও তথ্যের জন্য রিসোর্স লিঙ্কের জন্য একটি বিভাগের শেষে দেখুন।
সুচিপত্র
আগ্রহের বিষয়গুলিতে যেতে নীচের তালিকাটি ব্যবহার করুন:
ব্রাউজার সামঞ্জস্য
ইন্টারপ 2022- এর প্রচেষ্টার কারণে এতগুলি CSS বৈশিষ্ট্য সমবায়ভাবে প্রকাশের জন্য সেট করা প্রাথমিক কারণ। ইন্টারপ প্রচেষ্টা অধ্যয়ন করার আগে, Compat 2021 এর প্রচেষ্টার দিকে নজর দেওয়া গুরুত্বপূর্ণ।
কম্প্যাট 2021
সমীক্ষার মাধ্যমে বিকাশকারীর প্রতিক্রিয়া দ্বারা চালিত 2021-এর লক্ষ্যগুলি ছিল বর্তমান বৈশিষ্ট্যগুলিকে স্থিতিশীল করা, টেস্ট স্যুট উন্নত করা এবং পাঁচটি বৈশিষ্ট্যের জন্য ব্রাউজারগুলির পাসিং স্কোর বাড়ানো:
-
stickyপজিশনিং -
aspect-ratioমাপ -
flexলেআউট -
gridবিন্যাস - অবস্থান এবং অ্যানিমেশন
transform
আপগ্রেড স্থায়িত্ব এবং নির্ভরযোগ্যতা প্রদর্শন করে বোর্ড জুড়ে টেস্ট স্কোর বৃদ্ধি করা হয়েছে। এখানে দলগুলোকে বড় অভিনন্দন!
ইন্টারপ 2022
এই বছর, ব্রাউজারগুলি তাদের প্রচেষ্টাকে একত্রিত করে কাজ করার উদ্দেশ্যে যে বৈশিষ্ট্যগুলি এবং অগ্রাধিকারগুলি নিয়ে আলোচনা করতে একত্রে মিলিত হয়েছিল। তারা বিকাশকারীদের জন্য নিম্নলিখিত ওয়েব বৈশিষ্ট্যগুলি সরবরাহ করার পরিকল্পনা করেছে:
-
@layer - রঙের স্থান এবং ফাংশন
- কন্টেনমেন্ট
-
<dialog> - ফর্ম সামঞ্জস্য
- স্ক্রোলিং
- সাবগ্রিড
- টাইপোগ্রাফি
- ভিউপোর্ট ইউনিট
- ওয়েব কম্প্যাট
এটি একটি উত্তেজনাপূর্ণ এবং উচ্চাভিলাষী তালিকা যা আমি প্রকাশ করার জন্য অপেক্ষা করতে পারি না।
2022 এর জন্য তাজা
আশ্চর্যজনকভাবে, ইন্টারপ 2022-এর কাজ দ্বারা CSS 2022-এর অবস্থা নাটকীয়ভাবে প্রভাবিত হয়েছে।
ক্যাসকেড স্তর
@layer এর আগে, লোড করা স্টাইলশীটগুলির আবিষ্কৃত ক্রমটি খুবই গুরুত্বপূর্ণ ছিল, কারণ শেষ লোড করা শৈলীগুলি পূর্বে লোড করা শৈলীগুলিকে ওভাররাইট করতে পারে। এটি সতর্কতার সাথে পরিচালিত এন্ট্রি স্টাইলশীটগুলির দিকে পরিচালিত করেছিল, যেখানে বিকাশকারীদের প্রথমে কম গুরুত্বপূর্ণ শৈলী এবং পরে আরও গুরুত্বপূর্ণ শৈলী লোড করতে হবে। ITCSS- এর মতো এই গুরুত্ব পরিচালনায় বিকাশকারীদের সাহায্য করার জন্য সম্পূর্ণ পদ্ধতি বিদ্যমান।
@layer এর সাথে, এন্ট্রি ফাইলটি সময়ের আগে স্তরগুলি এবং তাদের ক্রম পূর্ব-সংজ্ঞায়িত করতে পারে। তারপরে, শৈলী লোড হওয়ার সাথে সাথে, লোড করা বা সংজ্ঞায়িত করা হয়, সেগুলিকে একটি স্তরের মধ্যে স্থাপন করা যেতে পারে, যা শৈলী ওভাররাইডের গুরুত্ব সংরক্ষণের অনুমতি দেয় কিন্তু সাবধানে পরিচালিত লোডিং অর্কেস্ট্রেশন ছাড়াই।
ভিডিওটি দেখায় যে কীভাবে সংজ্ঞায়িত ক্যাসকেড স্তরগুলি আরও মুক্ত এবং ফ্রিস্টাইল অথরিং এবং লোডিং প্রক্রিয়ার জন্য অনুমতি দেয়, এখনও প্রয়োজন অনুসারে ক্যাসকেড বজায় রাখে।
কোন স্টাইল কোন স্তর থেকে আসছে তা কল্পনা করার জন্য Chrome DevTools সহায়ক:
সম্পদ
- CSS ক্যাসকেড 5 স্পেসিফিকেশন
- ক্যাসকেড স্তর ব্যাখ্যাকারী
- MDN-এ ক্যাসকেড স্তর
- উনা ক্র্যাভেটস : ক্যাসকেড স্তর
- আহমাদ শাদীদ : হ্যালো, সিএসএস ক্যাসকেড লেয়ারস
সাবগ্রিড
subgrid আগে, অন্য গ্রিডের ভিতরের একটি গ্রিড তার মূল সেল বা গ্রিড লাইনের সাথে নিজেকে সারিবদ্ধ করতে পারে না। প্রতিটি গ্রিড বিন্যাস অনন্য ছিল. অনেক ডিজাইনার তাদের পুরো ডিজাইনের উপর একটি একক গ্রিড স্থাপন করে এবং ক্রমাগত এটির মধ্যে আইটেমগুলি সারিবদ্ধ করে, যা CSS-এ করা যায় না।
subgrid পরে, একটি গ্রিডের একটি শিশু তার পিতামাতার কলাম বা সারিগুলিকে তার নিজস্ব হিসাবে গ্রহণ করতে পারে এবং তাদের সাথে নিজেকে বা শিশুদের সারিবদ্ধ করতে পারে!
নিম্নলিখিত ডেমোতে, বডি এলিমেন্ট তিনটি কলামের একটি ক্লাসিক গ্রিড তৈরি করে: মাঝের কলামটিকে main বলা হয়, এবং বাম এবং ডান কলামগুলি তাদের লাইনগুলিকে fullbleed বলে । তারপর, শরীরের প্রতিটি উপাদান, <nav> এবং <main> , grid-template-columns: subgrid সেট করে বডি থেকে নামকৃত লাইন গ্রহণ করে।
body {
display: grid;
grid-template-columns:
[fullbleed-start]
auto [main-start] min(90%, 60ch) [main-end] auto
[fullbleed-end]
;
}
body > * {
display: grid;
grid-template-columns: subgrid;
}
সবশেষে, <nav> বা <main> এর বাচ্চারা fullbleed এবং main কলাম এবং লাইন ব্যবহার করে নিজেদের সারিবদ্ধ বা আকার দিতে পারে।
.main-content {
grid-column: main;
}
.fullbleed {
grid-column: fullbleed;
}
Devtools আপনাকে লাইন এবং সাবগ্রিড দেখতে সাহায্য করতে পারে (শুধুমাত্র ফায়ারফক্স এই মুহূর্তে)। নিচের ছবিতে, প্যারেন্ট গ্রিড এবং সাবগ্রিড ওভারলেড করা হয়েছে। ডিজাইনাররা লেআউট সম্পর্কে কীভাবে ভাবছিলেন তা এখন অনুরূপ।
devtools এর উপাদান প্যানেলে আপনি দেখতে পারেন কোন উপাদানগুলি গ্রিড এবং সাবগ্রিড, যা ডিবাগিং বা লেআউট বৈধ করার জন্য খুবই সহায়ক।
সম্পদ
ধারক প্রশ্ন
@container এর আগে, একটি ওয়েবপৃষ্ঠার উপাদানগুলি শুধুমাত্র পুরো ভিউপোর্টের আকারে প্রতিক্রিয়া জানাতে পারে। এটি ম্যাক্রো লেআউটের জন্য দুর্দান্ত, কিন্তু মাইক্রো লেআউটের জন্য, যেখানে তাদের বাইরের ধারকটি পুরো ভিউপোর্ট নয়, সেই অনুযায়ী লেআউট সামঞ্জস্য করা অসম্ভব।
@container এর পরে, উপাদানগুলি একটি অভিভাবক কন্টেইনার আকার বা শৈলীতে প্রতিক্রিয়া জানাতে পারে! একমাত্র সতর্কতা হল কন্টেইনারগুলিকে অবশ্যই নিজেদের সম্ভাব্য ক্যোয়ারী টার্গেট হিসাবে ঘোষণা করতে হবে, যা একটি বড় সুবিধার জন্য একটি ছোট প্রয়োজন৷
/* establish a container */
.day {
container-type: inline-size;
container-name: calendar-day;
}
এই স্টাইলগুলিই নিম্নলিখিত ভিডিওতে সোম, মঙ্গল, বুধ, বৃহস্পতি এবং শুক্র কলামগুলিকে ইভেন্ট উপাদানগুলির দ্বারা জিজ্ঞাসা করতে সক্ষম করে৷
calendar-day কন্টেইনারকে এর আকারের জন্য জিজ্ঞাসা করার জন্য এখানে CSS আছে, তারপর একটি বিন্যাস এবং ফন্টের আকার সামঞ্জস্য করুন:
@container calendar-day (max-width: 200px) {
.date {
display: block;
}
.date-num {
font-size: 2.5rem;
display: block;
}
}
এখানে আরেকটি উদাহরণ রয়েছে: একটি বইয়ের উপাদান কলামে উপলব্ধ স্থানের সাথে নিজেকে মানিয়ে নেয় যেখানে এটি টেনে আনা হয়েছে:
নতুন প্রতিক্রিয়াশীল হিসেবে পরিস্থিতি মূল্যায়নে উন সঠিক। @container ব্যবহার করার সময় অনেক উত্তেজনাপূর্ণ এবং অর্থপূর্ণ ডিজাইনের সিদ্ধান্ত নিতে হবে।
সম্পদ
- কন্টেইনার কোয়েরি স্পেসিফিকেশন
- ধারক প্রশ্ন ব্যাখ্যাকারী
- MDN-এ কন্টেইনার কোয়েরি
- web.dev-এ নতুন প্রতিক্রিয়াশীল
- Una দ্বারা ক্যালেন্ডার ডেমো
- সন্ত্রস্ত ধারক প্রশ্ন সংগ্রহ
- কিভাবে আমরা web.dev-এ Designcember তৈরি করি
- আহমদ শাদীদ : CSS কন্টেইনার ক্যোয়ারিদের হ্যালো বলুন
accent-color
accent-color আগে, আপনি যখন ব্র্যান্ড ম্যাচিং রঙের সাথে একটি ফর্ম চান, তখন আপনি জটিল লাইব্রেরি বা CSS সমাধানগুলির সাথে শেষ করতে পারেন যা সময়ের সাথে পরিচালনা করা কঠিন হয়ে পড়ে। যদিও তারা আপনাকে সমস্ত বিকল্প দিয়েছে, এবং আশা করি অ্যাক্সেসযোগ্যতা অন্তর্ভুক্ত করেছে, অন্তর্নির্মিত উপাদানগুলি ব্যবহার করার বা আপনার নিজের গ্রহণ করার পছন্দটি বেছে নেওয়া চালিয়ে যাওয়া ক্লান্তিকর হয়ে ওঠে।
accent-color পরে, CSS-এর একটি লাইন অন্তর্নির্মিত উপাদানগুলিতে একটি ব্র্যান্ড রঙ নিয়ে আসে। একটি আভা ছাড়াও, ব্রাউজারটি বুদ্ধিমত্তার সাথে উপাদানের আনুষঙ্গিক অংশগুলির জন্য উপযুক্ত বিপরীত রং বেছে নেয় এবং সিস্টেমের রঙের স্কিমগুলির (হালকা বা অন্ধকার) সাথে খাপ খায়।
/* tint everything */
:root {
accent-color: hotpink;
}
/* tint one element */
progress {
accent-color: indigo;
}
accent-color সম্পর্কে আরও জানতে, web.dev-এ আমার পোস্ট দেখুন যেখানে আমি এই দরকারী CSS সম্পত্তির আরও অনেক দিক অন্বেষণ করি।
সম্পদ
- অ্যাকসেন্ট-রঙের স্পেসিফিকেশন
- MDN-এ অ্যাকসেন্ট-রঙ
- web.dev-এ accent-color
- ব্রামাস : টিন্ট ইউজার-ইন্টারফেস কন্ট্রোল সিএসএস অ্যাকসেন্ট-কালার সহ
রঙের স্তর 4 এবং 5
গত কয়েক দশক ধরে ওয়েবে sRGB-এর আধিপত্য রয়েছে, কিন্তু OLED বা QLED স্ক্রিন সহ প্রাক-সজ্জিত হাই-ডেফিনিশন ডিসপ্লে এবং মোবাইল ডিভাইসগুলির একটি বিস্তৃত ডিজিটাল জগতে, sRGB যথেষ্ট নয়। তদ্ব্যতীত, গতিশীল পৃষ্ঠাগুলি যা ব্যবহারকারীর পছন্দগুলির সাথে খাপ খাইয়ে নেয় প্রত্যাশিত, এবং রঙ পরিচালনা ডিজাইনার, ডিজাইন সিস্টেম এবং কোড রক্ষণাবেক্ষণকারীদের জন্য একটি ক্রমবর্ধমান উদ্বেগ হয়ে উঠেছে।
যদিও 2022-এ নয়—CSS এর বেশ কয়েকটি নতুন রঙের ফাংশন এবং স্পেস রয়েছে: - যে রঙগুলি ডিসপ্লেগুলির HD রঙের ক্ষমতাগুলিতে পৌঁছায়। - একটি অভিপ্রায়ের সাথে মেলে এমন রঙের স্থান, যেমন উপলব্ধিগত অভিন্নতা। - গ্রেডিয়েন্টের জন্য রঙের স্পেস যা ইন্টারপোলেশন ফলাফলকে ব্যাপকভাবে পরিবর্তন করে। - রঙ ফাংশনগুলি আপনাকে মিশ্রিত এবং বৈসাদৃশ্যে সহায়তা করে এবং আপনি কোন জায়গায় কাজ করবেন তা চয়ন করুন৷
এই সমস্ত রঙের বৈশিষ্ট্যের আগে, সঠিক বিপরীত রঙের প্রাক গণনা করার জন্য এবং যথাযথভাবে প্রাণবন্ত প্যালেটগুলি নিশ্চিত করার জন্য ডিজাইন সিস্টেমের প্রয়োজন ছিল, যদিও প্রিপ্রসেসর বা জাভাস্ক্রিপ্ট ভারী উত্তোলন করেছিল।
এই সমস্ত রঙের বৈশিষ্ট্যগুলির পরে, ব্রাউজার এবং CSS সমস্ত কাজ, গতিশীলভাবে এবং ঠিক সময়ে করতে পারে। থিমিং এবং ডেটা ভিজ্যুয়ালাইজেশন রঙ সক্ষম করতে ব্যবহারকারীদের কাছে CSS এবং JavaScript-এর অনেক KB পাঠানোর পরিবর্তে, CSS অর্কেস্ট্রেটিং এবং গণনা করতে পারে। CSS ব্যবহার করার আগে সমর্থন পরীক্ষা করার জন্য বা ফলব্যাকগুলি সুন্দরভাবে পরিচালনা করার জন্য আরও ভালভাবে সজ্জিত।
@media (dynamic-range: high) {
.neon-pink {
--neon-glow: color(display-p3 1 0 1);
}
}
@supports (color: lab(0% 0 0)) {
.neon-pink {
--neon-glow: lab(150% 160 0);
}
}
hwb()
HWB মানে হল হিউ, শুভ্রতা এবং কালোত্ব। এটি রঙ প্রকাশ করার একটি মানব-বান্ধব উপায় হিসাবে নিজেকে উপস্থাপন করে, কারণ এটি হালকা বা গাঢ় করার জন্য শুধুমাত্র একটি আভা এবং পরিমাণ সাদা বা কালো। শিল্পী যারা সাদা বা কালো রঙের সাথে মিশ্রিত করে তারা নিজেদেরকে এই রঙের সিনট্যাক্স সংযোজনের প্রশংসা করতে পারে।
এই কালার ফাংশন ব্যবহার করার ফলে sRGB কালার স্পেস থেকে রং পাওয়া যায়, HSL এবং RGB এর মতোই। 2022-এর জন্য নতুনত্বের পরিপ্রেক্ষিতে, এটি আপনাকে নতুন রঙ দেয় না, তবে এটি সিনট্যাক্স এবং মানসিক মডেলের অনুরাগীদের জন্য কিছু কাজ সহজ করে তুলতে পারে।
সম্পদ
রঙের স্থান
রঙগুলিকে যেভাবে উপস্থাপন করা হয় তা একটি রঙের স্থান দিয়ে করা হয়। প্রতিটি রঙের স্থান রঙের সাথে কাজ করার জন্য বিভিন্ন বৈশিষ্ট্য এবং ট্রেড-অফ অফার করে। কেউ কেউ একসাথে সব উজ্জ্বল রং প্যাক করতে পারে; কেউ কেউ তাদের হালকাতার উপর ভিত্তি করে প্রথমে তাদের লাইন আপ করতে পারে।
2022 CSS 10টি নতুন রঙের স্থান অফার করতে সেট করা হয়েছে, প্রতিটিতে অনন্য বৈশিষ্ট্য সহ ডিজাইনার এবং ডেভেলপারদের রং প্রদর্শন, বাছাই এবং মিশ্রিত করতে সহায়তা করবে। পূর্বে, রঙের সাথে কাজ করার জন্য sRGBই একমাত্র বিকল্প ছিল, কিন্তু এখন CSS নতুন সম্ভাবনা এবং একটি নতুন ডিফল্ট রঙের স্থান, LCH আনলক করে।
color-mix()
color-mix() এর আগে, ডেভেলপার এবং ডিজাইনারদের ব্রাউজার দেখার আগে রঙগুলি মিশ্রিত করার জন্য Sass- এর মতো প্রিপ্রসেসরের প্রয়োজন ছিল। বেশিরভাগ রঙ-মিশ্রন ফাংশনগুলি কোন রঙের স্থানটি মিশ্রণ করতে হবে তা নির্দিষ্ট করার বিকল্প প্রদান করে না, কখনও কখনও ফলাফল বিভ্রান্তিকর হয়।
color-mix() এর পরে, বিকাশকারীরা এবং ডিজাইনাররা ব্রাউজারে তাদের অন্যান্য সমস্ত শৈলীর পাশাপাশি, বিল্ড প্রসেস না চালিয়ে বা জাভাস্ক্রিপ্ট সহ রঙগুলি মিশ্রিত করতে পারে। অতিরিক্তভাবে, তারা নির্দিষ্ট করতে পারে কোন রঙের স্থানটিতে মিশ্রণটি করতে হবে বা LCH-এর ডিফল্ট মিক্সিং রঙের স্থান ব্যবহার করতে হবে।
প্রায়শই, একটি ব্র্যান্ডের রঙ একটি বেস হিসাবে ব্যবহৃত হয় এবং এটি থেকে বৈকল্পিক তৈরি করা হয়, যেমন হোভার শৈলীগুলির জন্য হালকা বা গাঢ় রং। color-mix() এর সাথে এটি দেখতে কেমন তা এখানে:
.color-mix-example {
--brand: #0af;
--darker: color-mix(var(--brand) 25%, black);
--lighter: color-mix(var(--brand) 25%, white);
}
এবং যদি আপনি এই রংগুলিকে একটি ভিন্ন রঙের জায়গায় মিশ্রিত করতে চান, যেমন srgb, এটি পরিবর্তন করুন:
.color-mix-example {
--brand: #0af;
--darker: color-mix(in srgb, var(--brand) 25%, black);
--lighter: color-mix(in srgb, var(--brand) 25%, white);
}
এখানে color-mix() ব্যবহার করে একটি থিমিং ডেমো অনুসরণ করা হয়েছে। ব্র্যান্ডের রঙ পরিবর্তন করার চেষ্টা করুন এবং থিম আপডেট দেখুন:
2022 সালে আপনার স্টাইলশীটে বিভিন্ন রঙের জায়গায় রং মেশানো উপভোগ করুন!
সম্পদ
- color-mix() স্পেসিফিকেশন
- MDN-এ color-mix()
- থিমিং ডেমো
- আরেকটি থিমিং ডেমো
- Fabio Giolito : এই আসন্ন CSS বৈশিষ্ট্যগুলির সাথে একটি রঙের থিম তৈরি করুন৷
color-contrast()
color-contrast() এর আগে, স্টাইলশীট লেখকদের আগে থেকে অ্যাক্সেসযোগ্য রঙগুলি জানতে হবে। প্রায়শই একটি প্যালেট একটি রঙের সোয়াচের উপর কালো বা সাদা টেক্সট দেখায়, রঙ সিস্টেমের ব্যবহারকারীকে নির্দেশ করতে যে পাঠ্যের রঙটি সেই সোয়াচের সাথে সঠিকভাবে বৈসাদৃশ্য করতে হবে।
color-contrast() এর পরে, স্টাইলশীট লেখকরা কার্যটি সম্পূর্ণরূপে ব্রাউজারে অফলোড করতে পারেন। আপনি শুধুমাত্র একটি কালো বা সাদা রঙ স্বয়ংক্রিয়ভাবে বাছাই করার জন্য ব্রাউজারকে নিয়োগ করতে পারেন না, আপনি এটিকে ডিজাইন সিস্টেমের উপযুক্ত রঙের একটি তালিকা দিতে পারেন এবং আপনার পছন্দসই বৈসাদৃশ্য অনুপাতটি পাস করার জন্য এটিকে প্রথমে বেছে নিতে পারেন।
এখানে একটি HWB রঙ প্যালেট সেট ডেমোর একটি স্ক্রিনশট রয়েছে যেখানে টেক্সট রঙগুলি স্বয়ংক্রিয়ভাবে ব্রাউজার দ্বারা সোয়াচ রঙের উপর ভিত্তি করে বেছে নেওয়া হয়:
সিনট্যাক্সের মূল বিষয়গুলি এইরকম দেখায়, যেখানে ধূসর ফাংশনে পাস করা হয় এবং ব্রাউজার নির্ধারণ করে যে কালো বা সাদা সবচেয়ে বেশি বৈসাদৃশ্য আছে কিনা:
color: color-contrast(gray);
ফাংশনটি রঙের একটি তালিকা দিয়েও কাস্টমাইজ করা যেতে পারে, যেখান থেকে এটি নির্বাচন থেকে সর্বোচ্চ বিপরীত রঙ বেছে নেবে:
color: color-contrast(gray vs indigo, rebeccapurple, hotpink);
সবশেষে, যদি তালিকা থেকে সর্বোচ্চ বৈপরীত্য রঙ না বাছাই করা বাঞ্ছনীয় হয়, একটি লক্ষ্য বৈসাদৃশ্য অনুপাত প্রদান করা যেতে পারে, এবং এটি পাস করার জন্য প্রথম রঙটি বেছে নেওয়া হয়:
color: color-contrast(
var(--bg-blue-1)
vs
var(--text-lightest), var(--text-light), var(--text-subdued)
to AA /* 4.5 could also be passed */
);
এই ফাংশনটি কেবল পাঠ্য রঙের চেয়ে বেশি ব্যবহার করা যেতে পারে, যদিও আমি অনুমান করি যে এটি এর প্রাথমিক ব্যবহারের ক্ষেত্রে হবে। সিএসএস ভাষার মধ্যেই সঠিক বৈপরীত্য রঙ বেছে নেওয়ার পরে অ্যাক্সেসযোগ্য এবং সুস্পষ্ট ইন্টারফেসগুলি সরবরাহ করা কতটা সহজ হবে সে সম্পর্কে চিন্তা করুন।
সম্পদ
আপেক্ষিক রঙ সিনট্যাক্স
আপেক্ষিক রঙের সিনট্যাক্সের আগে, রঙের উপর গণনা করতে এবং সামঞ্জস্য করতে, রঙের চ্যানেলগুলিকে স্বতন্ত্রভাবে কাস্টম বৈশিষ্ট্যগুলিতে স্থাপন করতে হবে। এই সীমাবদ্ধতাটি এইচএসএল-কে রঙ পরিচালনার জন্য প্রাথমিক রঙের ফাংশনও তৈরি করেছে কারণ রঙ, স্যাচুরেশন বা হালকাতা সবই calc() দিয়ে সোজা উপায়ে সামঞ্জস্য করা যেতে পারে।
আপেক্ষিক রঙের সিনট্যাক্সের পরে, যে কোনও স্থানের যে কোনও রঙকে ডিকনস্ট্রাক্ট, পরিবর্তন এবং একটি রঙ হিসাবে ফেরত দেওয়া যেতে পারে, সমস্তই CSS-এর এক লাইনে। এইচএসএল-এর আর কোনো সীমাবদ্ধতা নেই—কাঙ্খিত যে কোনো রঙের জায়গায় ম্যানিপুলেশন করা যাবে, এবং এটির সুবিধার্থে অনেক কম কাস্টম বৈশিষ্ট্য তৈরি করতে হবে।
নিম্নলিখিত সিনট্যাক্স উদাহরণে, একটি বেস হেক্স প্রদান করা হয়েছে এবং এটির সাপেক্ষে দুটি নতুন রঙ তৈরি করা হয়েছে। প্রথম রঙ --absolute-change বেস রঙ থেকে LCH-এ একটি নতুন রঙ তৈরি করে, তারপর ক্রোমা ( c ) এবং hue ( h ) বজায় রেখে বেস রঙের হালকাতা 75% দিয়ে প্রতিস্থাপন করে। দ্বিতীয় রঙ --relative-change বেস কালার থেকে এলসিএইচ-এ একটি নতুন রঙ তৈরি করে, কিন্তু এই সময় ক্রোমা ( c ) 20% কমিয়ে দেয়।
.relative-color-syntax {
--color: #0af;
--absolute-change: lch(from var(--color) 75% c h);
--relative-change: lch(from var(--color) l calc(c-20%) h);
}
এটি রং মিশ্রিত করার অনুরূপ, তবে এটি মিশ্রণের চেয়ে পরিবর্তনের সাথে আরও বেশি মিল। আপনি অন্য রঙ থেকে একটি রঙ কাস্ট করতে পারবেন, সেই চ্যানেলগুলি সামঞ্জস্য করার সুযোগ সহ ব্যবহৃত রঙ ফাংশন দ্বারা নাম অনুসারে তিনটি চ্যানেলের মানগুলিতে অ্যাক্সেস পাচ্ছেন। সর্বোপরি, এটি রঙের জন্য একটি খুব দুর্দান্ত এবং শক্তিশালী সিনট্যাক্স।
নিম্নলিখিত ডেমোতে আমি একটি বেস রঙের হালকা এবং গাঢ় রূপগুলি তৈরি করতে আপেক্ষিক রঙের সিনট্যাক্স ব্যবহার করেছি এবং লেবেলগুলির যথাযথ বৈসাদৃশ্য রয়েছে তা নিশ্চিত করতে color-contrast() ব্যবহার করেছি:
এই ফাংশনটি রঙ প্যালেট তৈরির জন্যও ব্যবহার করা যেতে পারে। এখানে একটি ডেমো রয়েছে যেখানে সম্পূর্ণ প্যালেটগুলি একটি প্রদত্ত বেস রঙ থেকে তৈরি করা হয়। CSS-এর এই এক সেট সমস্ত বিভিন্ন প্যালেটকে ক্ষমতা দেয়, প্রতিটি প্যালেট কেবল একটি ভিন্ন ভিত্তি প্রদান করে। বোনাস হিসেবে, যেহেতু আমি এলসিএইচ ব্যবহার করেছি, তাই দেখুন প্যালেটগুলোও কতটা বোধগম্য—কোনও গরম বা মৃত দাগ দেখা যাবে না, এই রঙের জায়গার জন্য ধন্যবাদ।
:root {
--_color-base: #339af0;
--color-0: lch(from var(--_color-base) 98% 10 h);
--color-1: lch(from var(--_color-base) 93% 20 h);
--color-2: lch(from var(--_color-base) 85% 40 h);
--color-3: lch(from var(--_color-base) 75% 46 h);
--color-4: lch(from var(--_color-base) 66% 51 h);
--color-5: lch(from var(--_color-base) 61% 52 h);
--color-6: lch(from var(--_color-base) 55% 57 h);
--color-7: lch(from var(--_color-base) 49% 58 h);
--color-8: lch(from var(--_color-base) 43% 55 h);
--color-9: lch(from var(--_color-base) 39% 52 h);
--color-10: lch(from var(--_color-base) 32% 48 h);
--color-11: lch(from var(--_color-base) 25% 45 h);
--color-12: lch(from var(--_color-base) 17% 40 h);
--color-13: lch(from var(--_color-base) 10% 30 h);
--color-14: lch(from var(--_color-base) 5% 20 h);
--color-15: lch(from var(--_color-base) 1% 5 h);
}
আশা করি এখন পর্যন্ত আপনি দেখতে পাচ্ছেন কিভাবে রঙের স্থান এবং বিভিন্ন রঙের ফাংশনগুলি তাদের শক্তি এবং দুর্বলতার উপর ভিত্তি করে বিভিন্ন উদ্দেশ্যে ব্যবহার করা যেতে পারে।
সম্পদ
- আপেক্ষিক রঙ সিনট্যাক্স স্পেসিফিকেশন
- আপেক্ষিক রঙের সিনট্যাক্স সহ রঙের প্যালেট তৈরি করা
- আপেক্ষিক রঙের সিনট্যাক্স সহ রঙের বৈকল্পিক তৈরি করা
গ্রেডিয়েন্ট কালার স্পেস
গ্রেডিয়েন্ট কালার স্পেসের আগে, sRGB ছিল ডিফল্ট কালার স্পেস ব্যবহৃত। sRGB সাধারণত নির্ভরযোগ্য, তবে ধূসর মৃত অঞ্চলের মতো কিছু দুর্বলতা রয়েছে।
গ্রেডিয়েন্ট কালার স্পেস করার পর, ব্রাউজারকে বলুন কালার ইন্টারপোলেশনের জন্য কোন কালার স্পেস ব্যবহার করতে হবে। এটি ডেভেলপার এবং ডিজাইনারদের তাদের পছন্দের গ্রেডিয়েন্ট বেছে নেওয়ার ক্ষমতা দেয়। ডিফল্ট রঙের স্থানটিও sRGB-এর পরিবর্তে LCH-এ পরিবর্তিত হয়।
সিনট্যাক্স সংযোজন গ্রেডিয়েন্ট দিকনির্দেশের পরে যায়, in নতুন ব্যবহার করে এবং ঐচ্ছিক:
background-image: linear-gradient(
to right in hsl,
black, white
);
background-image: linear-gradient(
to right in lch,
black, white
);
এখানে একটি মৌলিক এবং অপরিহার্য গ্রেডিয়েন্ট কালো থেকে সাদা। প্রতিটি রঙের জায়গায় ফলাফলের পরিসর দেখুন। কেউ কেউ অন্যদের চেয়ে আগে গাঢ় কালো হয়ে যায়, কেউ দেরিতে সাদা হয়ে যায়।
এই পরবর্তী উদাহরণে, কালোকে নীলে রূপান্তরিত করা হয়েছে কারণ এটি গ্রেডিয়েন্টের জন্য একটি পরিচিত সমস্যা স্থান। বেশিরভাগ রঙের স্থানগুলি রঙের প্রসারণের সময় বেগুনি হয়ে যায় বা, যেমনটি আমি ভাবতে চাই, যখন রঙগুলি তাদের রঙের স্থানের মধ্যে বিন্দু A থেকে বি বিন্দুতে ভ্রমণ করে। যেহেতু গ্রেডিয়েন্টটি বিন্দু A থেকে বি বিন্দুতে একটি সরল রেখা নেবে, তাই আকৃতিটি রঙের স্থানের স্টপগুলিকে আমূল পরিবর্তন করে যা পথটি পথ ধরে নেয়।
আরও গভীর অনুসন্ধান, উদাহরণ এবং মন্তব্যের জন্য, এই টুইটার থ্রেডটি পড়ুন।
সম্পদ
- গ্রেডিয়েন্ট ইন্টারপোলেশন স্পেসিফিকেশন
- শূন্যস্থানে গ্রেডিয়েন্টের তুলনামূলক ডেমো
- গ্রেডিয়েন্ট তুলনামূলক পর্যবেক্ষণযোগ্য নোটবুক
inert
inert এর আগে, পৃষ্ঠা বা অ্যাপের যে জায়গাগুলিতে অবিলম্বে মনোযোগের প্রয়োজন ছিল সেগুলির দিকে ব্যবহারকারীর ফোকাসকে গাইড করা ভাল অভ্যাস ছিল৷ এই নির্দেশিত ফোকাস কৌশলটি ফোকাস ট্র্যাপিং হিসাবে পরিচিত হয় কারণ বিকাশকারীরা একটি ইন্টারেক্টিভ স্পেসে ফোকাস স্থাপন করবে, ফোকাস পরিবর্তন ইভেন্টগুলির জন্য শুনবে এবং, যদি ফোকাস ইন্টারেক্টিভ স্থান ছেড়ে যায়, তাহলে এটিকে আবার ফিরে আসতে বাধ্য করা হয়৷ কীবোর্ড বা স্ক্রিন রিডারগুলিতে ব্যবহারকারীদের নির্দেশিত করা হয়৷ এগিয়ে যাওয়ার আগে কাজটি সম্পূর্ণ হয়েছে তা নিশ্চিত করতে ইন্টারেক্টিভ স্পেসে যান।
inert পরে, কোনও ফাঁদে ফেলার প্রয়োজন নেই কারণ আপনি পৃষ্ঠা বা অ্যাপের সম্পূর্ণ অংশগুলিকে হিমায়িত বা রক্ষা করতে পারেন। একটি নথির সেই অংশগুলি নিষ্ক্রিয় থাকা অবস্থায় ক্লিক এবং ফোকাস পরিবর্তনের প্রচেষ্টা সহজভাবে উপলব্ধ নয়৷ কেউ এটাকে ফাঁদের পরিবর্তে রক্ষীদের মতো ভাবতে পারে, যেখানে inert আপনাকে কোথাও থাকতে আগ্রহী করে না, বরং অন্য জায়গাগুলিকে অনুপলব্ধ করে তোলে।
এর একটি ভাল উদাহরণ হল JavaScript alert() ফাংশন:
পূর্ববর্তী ভিডিওতে লক্ষ্য করুন কিভাবে একটি alert() কল না হওয়া পর্যন্ত পৃষ্ঠাটি মাউস এবং কীবোর্ড অ্যাক্সেসযোগ্য ছিল। সতর্কতা ডায়ালগ পপআপ দেখানো হলে, পৃষ্ঠার বাকি অংশ হিমায়িত, বা inert । ব্যবহারকারীদের ফোকাস সতর্কতা ডায়ালগের ভিতরে স্থাপন করা হয় এবং অন্য কোথাও যাওয়ার নেই। একবার ব্যবহারকারী ইন্টারঅ্যাক্ট করে এবং সতর্কতা ফাংশন অনুরোধটি সম্পূর্ণ করে, পৃষ্ঠাটি আবার ইন্টারেক্টিভ হয়। inert বিকাশকারীদের এই একই নির্দেশিত ফোকাস অভিজ্ঞতা সহজে অর্জন করার ক্ষমতা দেয়।
এটি কীভাবে কাজ করে তা দেখানোর জন্য এখানে একটি ছোট কোড নমুনা রয়েছে:
<body>
<div class="modal">
<h2>Modal Title</h2>
<p>...<p>
<button>Save</button>
<button>Discard</button>
</div>
<main inert>
<!-- cannot be keyboard focused or clicked -->
</main>
</body>
একটি ডায়ালগ একটি দুর্দান্ত উদাহরণ, তবে স্লাইড-আউট সাইড মেনু ব্যবহারকারীর অভিজ্ঞতার মতো জিনিসগুলির জন্য inert সহায়ক। যখন একজন ব্যবহারকারী পাশের মেনুটি স্লাইড করে, তখন মাউস বা কীবোর্ডকে পিছনের পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করতে দেওয়া ঠিক নয়; এটি ব্যবহারকারীদের জন্য একটু কঠিন। পরিবর্তে, যখন পাশের মেনুটি দেখা যাচ্ছে, তখন পৃষ্ঠাটিকে নিষ্ক্রিয় করুন, এবং এখন ব্যবহারকারীদের অবশ্যই সেই পাশের মেনুর মধ্যে বন্ধ বা নেভিগেট করতে হবে, এবং খোলা মেনু সহ পৃষ্ঠার অন্য কোথাও নিজেকে হারিয়ে যাবেন না৷
সম্পদ
COLRv1 ফন্ট
COLRv1 ফন্টের আগে, ওয়েবে OT-SVG ফন্ট ছিল, এটি গ্রেডিয়েন্ট এবং অন্তর্নির্মিত রঙ এবং প্রভাব সহ ফন্টগুলির জন্য একটি উন্মুক্ত বিন্যাসও ছিল। যদিও এগুলি খুব বড় হতে পারে, এবং যখন তারা পাঠ্য সম্পাদনা করার অনুমতি দেয়, তখন কাস্টমাইজেশনের জন্য খুব বেশি সুযোগ ছিল না।
COLRv1 ফন্টের পরে, ওয়েবে ছোট ফুটপ্রিন্ট, ভেক্টর-স্কেলেবল, রিপজিশনেবল, গ্রেডিয়েন্ট-ফিচারিং, এবং ব্লেন্ড-মোড চালিত ফন্ট রয়েছে যা প্রতি ব্যবহারের ক্ষেত্রে ফন্ট কাস্টমাইজ করতে বা একটি ব্র্যান্ডের সাথে মেলে প্যারামিটার গ্রহণ করে।
ইমোজি সম্পর্কে Chrome বিকাশকারী ব্লগ পোস্ট থেকে এখানে একটি উদাহরণ দেওয়া হল৷ হয়তো আপনি লক্ষ্য করেছেন যে আপনি যদি একটি ইমোজিতে ফন্টের আকার স্কেল করেন তবে এটি তীক্ষ্ণ থাকে না। এটি একটি চিত্র এবং ভেক্টর শিল্প নয়। প্রায়শই অ্যাপ্লিকেশনগুলিতে যখন একটি ইমোজি ব্যবহার করা হয়, এটি একটি উচ্চ মানের সম্পদের জন্য অদলবদল করা হয়। COLRv1 ফন্ট সহ, ইমোজিগুলি ভেক্টর এবং সুন্দর:
আইকন ফন্টগুলি এই বিন্যাসের সাথে কিছু আশ্চর্যজনক জিনিস করতে পারে, কাস্টম ডু-টোন কালার প্যালেট এবং আরও অনেক কিছু অফার করে। একটি COLRv1 ফন্ট লোড করা অন্যান্য ফন্ট ফাইলের মতোই:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
COLRv1 ফন্ট কাস্টমাইজ করা @font-palette-values দিয়ে করা হয়, একটি বিশেষ CSS এট-রুল গ্রুপিং এবং পরবর্তী রেফারেন্সের জন্য কাস্টমাইজেশন বিকল্পগুলির একটি সেটের নামকরণের জন্য। লক্ষ্য করুন আপনি কীভাবে একটি কাস্টম সম্পত্তির মতো একটি কাস্টম নাম নির্দিষ্ট করেন, এর সাথে শুরু করে -- :
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
কাস্টমাইজেশনের জন্য একটি উপনাম হিসাবে --colorized এর সাথে, শেষ ধাপ হল প্যালেটটি এমন একটি উপাদানে প্রয়োগ করা যা রঙ ফন্ট পরিবার ব্যবহার করছে:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
.spicy {
font-family: "Bungee Spice";
font-palette: --colorized;
}
ক্রমবর্ধমান পরিবর্তনশীল ফন্ট এবং রঙের ফন্ট উপলব্ধ হওয়ার সাথে সাথে, ওয়েব টাইপোগ্রাফি সমৃদ্ধ কাস্টমাইজেশন এবং সৃজনশীল অভিব্যক্তির দিকে একটি দুর্দান্ত পথে রয়েছে।
সম্পদ
ভিউপোর্ট ইউনিট
নতুন ভিউপোর্ট ভেরিয়েন্টের আগে, ওয়েব ভিউপোর্ট ফিট করতে সহায়তা করার জন্য ফিজিক্যাল ইউনিট অফার করেছিল। উচ্চতা, প্রস্থ, ক্ষুদ্রতম আকার (vmin), এবং বৃহত্তম পার্শ্ব (vmax) জন্য একটি ছিল। এগুলি অনেক কিছুর জন্য ভাল কাজ করেছিল, কিন্তু মোবাইল ব্রাউজারগুলি একটি জটিলতা প্রবর্তন করেছিল।
মোবাইলে, একটি পৃষ্ঠা লোড করার সময়, ইউআরএল সহ স্ট্যাটাস বারটি দেখানো হয় এবং এই বারটি ভিউপোর্টের কিছু জায়গা খায়। কয়েক সেকেন্ড এবং কিছু ইন্টারঅ্যাক্টিভিটির পরে, ব্যবহারকারীর জন্য একটি বড় ভিউপোর্ট অভিজ্ঞতা দেওয়ার জন্য স্ট্যাটাস বারটি সরে যেতে পারে। কিন্তু যখন সেই বারটি স্লাইড হয়ে যায়, তখন ভিউপোর্টের উচ্চতা পরিবর্তিত হয় এবং যেকোনও vh ইউনিট তাদের টার্গেট সাইজ পরিবর্তিত হওয়ার সাথে সাথে পরিবর্তন এবং আকার পরিবর্তন করবে। পরবর্তী বছরগুলিতে, vh ইউনিটকে বিশেষভাবে সিদ্ধান্ত নেওয়ার প্রয়োজন ছিল যে এটি দুটি ভিউপোর্ট আকারের মধ্যে কোনটি ব্যবহার করতে চলেছে, কারণ এটি মোবাইল ডিভাইসে ভিজ্যুয়াল লেআউটের সমস্যা সৃষ্টি করছিল। এটি নির্ধারণ করা হয়েছিল যে vh সর্বদা বৃহত্তম ভিউপোর্ট প্রতিনিধিত্ব করবে।
.original-viewport-units {
height: 100vh;
width: 100vw;
--size: 100vmin;
--size: 100vmax;
}
নতুন ভিউপোর্ট ভেরিয়েন্টের পরে, ছোট, বড়, এবং গতিশীল ভিউপোর্ট ইউনিটগুলি উপলব্ধ করা হয়েছে, ভৌতিকগুলির সাথে যৌক্তিক সমতুল্য যোগ করা হয়েছে৷ ধারণাটি হল ডেভেলপার এবং ডিজাইনারদের তাদের প্রদত্ত দৃশ্যের জন্য কোন ইউনিট ব্যবহার করতে চান তা বেছে নেওয়ার ক্ষমতা দেওয়া। স্ট্যাটাস বারটি চলে গেলে একটি ছোট ঝাঁকুনি লেআউট স্থানান্তর করা ঠিক আছে, তাই dvh (ডাইনামিক ভিউপোর্ট উচ্চতা) চিন্তা ছাড়াই ব্যবহার করা যেতে পারে।
নতুন ভিউপোর্ট ভেরিয়েন্টগুলির সাথে উপলব্ধ করা সমস্ত নতুন ভিউপোর্ট ইউনিট বিকল্পগুলির একটি সম্পূর্ণ তালিকা এখানে রয়েছে:
.new-height-viewport-units {
height: 100vh;
height: 100dvh;
height: 100svh;
height: 100lvh;
block-size: 100vb;
block-size: 100dvb;
block-size: 100svb;
block-size: 100lvb;
}
.new-width-viewport-units {
width: 100vw;
width: 100dvw;
width: 100svw;
width: 100lvw;
inline-size: 100vi;
inline-size: 100dvi;
inline-size: 100svi;
inline-size: 100lvi;
}
.new-min-viewport-units {
--size: 100vmin;
--size: 100dvmin;
--size: 100svmin;
--size: 100lvmin;
}
.new-max-viewport-units {
--size: 100vmax;
--size: 100dvmax;
--size: 100svmax;
--size: 100lvmax;
}
আশা করি এটি বিকাশকারী এবং ডিজাইনারদের তাদের ভিউপোর্ট প্রতিক্রিয়াশীল ডিজাইনগুলি অর্জনের জন্য প্রয়োজনীয় নমনীয়তা দেবে।
সম্পদ
:has()
:has() এর আগে, একজন নির্বাচকের বিষয় সর্বদা শেষে ছিল। উদাহরণস্বরূপ, এই নির্বাচকের বিষয় হল একটি তালিকা আইটেম: ul > li । সিউডো নির্বাচকরা নির্বাচককে পরিবর্তন করতে পারে কিন্তু তারা বিষয় পরিবর্তন করে না: ul > li:hover বা ul > li:not(.selected) ।
:has() এর পরে, শিশু: ul:has(> li) সম্পর্কে একটি প্রশ্ন প্রদান করার সময় উপাদান ট্রিতে একটি বিষয় উচ্চতর বিষয় হিসাবে থাকতে পারে। কিভাবে :has() "অভিভাবক নির্বাচক" এর একটি সাধারণ নাম পেয়েছে তা বোঝা সহজ, কারণ নির্বাচকের বিষয় এখন এই ক্ষেত্রে অভিভাবক।
এখানে একটি মৌলিক সিনট্যাক্স উদাহরণ রয়েছে যেখানে ক্লাস .parent বিষয় থাকে কিন্তু শুধুমাত্র যদি একটি শিশু উপাদানের .child ক্লাস থাকে তবেই নির্বাচন করা হয়:
.parent:has(.child) {...}
এখানে একটি উদাহরণ দেওয়া হল যেখানে একটি <section> উপাদান হল বিষয়, কিন্তু নির্বাচক শুধুমাত্র তখনই মেলে যদি বাচ্চাদের একজনের :focus-visible :
section:has(*:focus-visible) {...}
:has() নির্বাচক একটি চমত্কার ইউটিলিটি হয়ে উঠতে শুরু করে যখন আরও ব্যবহারিক ব্যবহারের ঘটনাগুলি স্পষ্ট হয়ে যায়। উদাহরণস্বরূপ, বর্তমানে <a> ট্যাগ নির্বাচন করা সম্ভব নয় যখন তারা চিত্রগুলিকে মোড়ানো হয়, এটি অ্যাঙ্কর ট্যাগকে শেখানো কঠিন করে তোলে কিভাবে এটির শৈলী পরিবর্তন করতে হয় যখন সেই ব্যবহারের ক্ষেত্রে। এটা সম্ভব :has() যদিও:
a:has(> img) {...}
এই সব উদাহরণ যেখানে :has() শুধুমাত্র একটি অভিভাবক নির্বাচক মত দেখায়. চিত্রে <figcaption> থাকলে <figure> এলিমেন্টের ভিতরে ইমেজের ব্যবহার এবং ইমেজের স্টাইল সামঞ্জস্য করার বিষয়টি বিবেচনা করুন। নিম্নলিখিত উদাহরণে, ফিগক্যাপশন সহ পরিসংখ্যান নির্বাচন করা হয়েছে এবং তারপর সেই প্রসঙ্গের মধ্যে ছবিগুলি। :has() ব্যবহার করা হয় এবং বিষয় পরিবর্তন করে না, কারণ আমরা যে বিষয় টার্গেট করছি তা হল চিত্রগুলি নয়:
figure:has(figcaption) img {...}
সংমিশ্রণগুলি আপাতদৃষ্টিতে অন্তহীন। :has() পরিমাণ প্রশ্নের সাথে একত্রিত করুন এবং শিশুদের সংখ্যার উপর ভিত্তি করে CSS গ্রিড বিন্যাস সমন্বয় করুন। ইন্টারেক্টিভ সিউডো ক্লাস স্টেটের সাথে :has() একত্রিত করুন এবং নতুন সৃজনশীল উপায়ে সাড়া দেয় এমন অ্যাপ্লিকেশন তৈরি করুন।
সমর্থনের জন্য চেক করা @supports এবং এর selector() ফাংশন দিয়ে সহজ করা হয়েছে, যা ব্রাউজারটি ব্যবহার করার আগে সিনট্যাক্স বুঝতে পারে কিনা তা পরীক্ষা করে:
@supports (selector(:has(works))) {
/* safe to use :has() */
}
সম্পদ
2022 এবং তার পরেও
2022 সালে এই সমস্ত আশ্চর্যজনক বৈশিষ্ট্যগুলি অবতরণ করার পরে এখনও অনেকগুলি জিনিস রয়েছে যা করা কঠিন হবে৷ পরবর্তী বিভাগে কিছু অবশিষ্ট সমস্যা এবং সেগুলি সমাধান করার জন্য সক্রিয়ভাবে বিকাশ করা হচ্ছে এমন সমাধানগুলিকে দেখে নেওয়া হয়েছে৷ এই সমাধানগুলি পরীক্ষামূলক, যদিও সেগুলি নির্দিষ্ট বা ব্রাউজারে পতাকার পিছনে উপলব্ধ হতে পারে৷
পরবর্তী বিভাগগুলির ফলাফলটি স্বস্তিদায়ক হওয়া উচিত যে তালিকাভুক্ত সমস্যাগুলির সমাধান খুঁজছেন অনেক কোম্পানির অনেক লোক - এমন নয় যে এই সমাধানগুলি 2023 সালে প্রকাশিত হতে চলেছে৷
শিথিলভাবে টাইপ করা কাস্টম বৈশিষ্ট্য
CSS কাস্টম বৈশিষ্ট্য আশ্চর্যজনক. তারা সমস্ত ধরণের জিনিসকে একটি নামযুক্ত ভেরিয়েবলের ভিতরে সংরক্ষণ করার অনুমতি দেয়, যা তারপরে প্রসারিত, গণনা করা, ভাগ করা এবং আরও অনেক কিছু করা যেতে পারে। প্রকৃতপক্ষে, তারা এত নমনীয়, কিছু কম নমনীয় হলে ভাল হবে।
একটি দৃশ্যকল্প বিবেচনা করুন যেখানে একটি box-shadow তার মানগুলির জন্য কাস্টম বৈশিষ্ট্য ব্যবহার করে:
box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);
এটি সব ঠিকঠাক কাজ করে যতক্ষণ না কোনো একটি বৈশিষ্ট্যকে এমন একটি মানতে পরিবর্তন করা হয় যা CSS সেখানে গ্রহণ করে না, যেমন --x: red । নেস্টেড ভেরিয়েবলের যেকোন একটি অনুপস্থিত থাকলে বা একটি অবৈধ মান টাইপ সেট করা থাকলে পুরো ছায়াটি ভেঙে যায়।
এখানেই @property আসে: --x একটি টাইপ করা কাস্টম সম্পত্তি হয়ে উঠতে পারে, এটি আর ঢিলেঢালা এবং নমনীয় নয়, তবে কিছু সংজ্ঞায়িত সীমানা সহ নিরাপদ:
@property --x {
syntax: '<length>';
initial-value: 0px;
inherits: false;
}
এখন, যখন box-shadow var(--x) এবং পরে --x: red চেষ্টা করা হয়, তখন red উপেক্ষা করা হবে কারণ এটি একটি <length> নয়। এর অর্থ হল ছায়াটি কাজ করতে থাকে, যদিও এর কাস্টম বৈশিষ্ট্যগুলির একটিতে একটি অবৈধ মান দেওয়া হয়েছিল। ব্যর্থ হওয়ার পরিবর্তে, এটি 0px এর initial-value ফিরে আসে।
অ্যানিমেশন
টাইপ নিরাপত্তা ছাড়াও, এটি অ্যানিমেশনের জন্য অনেক দরজা খুলে দেয়। সিএসএস সিনট্যাক্সের নমনীয়তা কিছু জিনিস অ্যানিমেটিংকে অসম্ভব করে তোলে, যেমন গ্রেডিয়েন্ট। @property এখানে সাহায্য করে কারণ টাইপ করা CSS প্রপার্টি ব্রাউজারকে অত্যধিক জটিল ইন্টারপোলেশনের ভিতরে একজন ডেভেলপারের অভিপ্রায় সম্পর্কে অবহিত করতে পারে। এটি মূলত সম্ভাবনার সুযোগকে এতটাই সীমিত করে যে একটি ব্রাউজার এমন একটি শৈলীর দিকগুলিকে অ্যানিমেট করতে পারে যা এটি আগে পারেনি।
এই ডেমো উদাহরণটি বিবেচনা করুন, যেখানে একটি রেডিয়াল গ্রেডিয়েন্ট একটি ওভারলের একটি অংশ তৈরি করতে ব্যবহৃত হয়, একটি স্পটলাইট ফোকাস প্রভাব তৈরি করে। জাভাস্ক্রিপ্ট মাউস x এবং y সেট করে যখন alt/opt কী চাপা হয়, এবং তারপর ফোকাল-আকারকে একটি ছোট মান যেমন 25% এ পরিবর্তন করে, মাউসের অবস্থানে স্পটলাইট ফোকাস বৃত্ত তৈরি করে:
.focus-effect {
--focal-size: 100%;
--mouse-x: center;
--mouse-y: center;
mask-image: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
transparent 0%,
transparent var(--focal-size),
black 0%
);
}
গ্রেডিয়েন্ট যদিও অ্যানিমেটেড করা যাবে না। ব্রাউজারের পক্ষে এগুলি অত্যন্ত নমনীয় এবং খুব জটিল যে আপনি কীভাবে তাদের অ্যানিমেট করতে চান তা "শুধু আহরণ" করতে পারেন৷ @property এর সাথে, যদিও, একটি সম্পত্তি বিচ্ছিন্নভাবে টাইপ এবং অ্যানিমেট করা যেতে পারে, যার জন্য ব্রাউজার সহজেই অভিপ্রায় বুঝতে পারে।
যে ভিডিও গেমগুলি এই ফোকাস প্রভাব ব্যবহার করে সেগুলি সর্বদা বৃত্তটিকে অ্যানিমেট করে, একটি বড় বৃত্ত থেকে একটি পিনহোল বৃত্ত পর্যন্ত৷ এখানে আমাদের ডেমোর সাথে @property কীভাবে ব্যবহার করবেন তাই ব্রাউজার গ্রেডিয়েন্ট মাস্ককে অ্যানিমেট করে:
@property --focal-size {
syntax: '<length-percentage>';
initial-value: 100%;
inherits: false;
}
.focus-effect {
--focal-size: 100%;
--mouse-x: center;
--mouse-y: center;
mask-image: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
transparent 0%,
transparent var(--focal-size),
black 0%
);
transition: --focal-size .3s ease;
}
ব্রাউজারটি এখন গ্রেডিয়েন্টের আকারকে অ্যানিমেট করতে সক্ষম কারণ আমরা পরিবর্তনের পৃষ্ঠের ক্ষেত্রফলকে শুধুমাত্র একটি বৈশিষ্ট্যে কমিয়েছি এবং মান টাইপ করেছি যাতে ব্রাউজারটি বুদ্ধিমত্তার সাথে দৈর্ঘ্যগুলিকে ইন্টারপোলেট করতে পারে।
@property আরও অনেক কিছু করতে পারে, কিন্তু এই ছোট সক্ষমতাগুলি অনেক দূর যেতে পারে।
সম্পদ
- @প্রপার্টি স্পেসিফিকেশন
- MDN-এ @property
- web.dev-এ @property
- জুম ফোকাস ডেমো
- CSS কৌশল: @property এবং এর অ্যানিমেটিং ক্ষমতা অন্বেষণ
min-width বা max-width ছিল
মিডিয়া ক্যোয়ারী রেঞ্জের আগে, একটি CSS মিডিয়া ক্যোয়ারী min-width এবং max-width ব্যবহার করে এবং শর্তের অধীনে স্পষ্ট করে। এটি এই মত দেখতে হতে পারে:
@media (min-width: 320px) {
…
}
মিডিয়া ক্যোয়ারী রেঞ্জের পরে, একই মিডিয়া ক্যোয়ারী এইরকম দেখতে পারে:
@media (width >= 320px) {
…
}
min-width এবং max-width উভয়ই ব্যবহার করে একটি CSS মিডিয়া ক্যোয়ারী এইরকম দেখতে পারে:
@media (min-width: 320px) and (max-width: 1280px) {
…
}
মিডিয়া ক্যোয়ারী রেঞ্জের পরে, একই মিডিয়া ক্যোয়ারী এইরকম দেখতে পারে:
@media (320px <= width <= 1280px) {
…
}
আপনার কোডিং ব্যাকগ্রাউন্ডের উপর নির্ভর করে, এর মধ্যে একটি অন্যটির চেয়ে অনেক বেশি সুস্পষ্ট দেখাবে। বিশেষ সংযোজনের জন্য ধন্যবাদ, বিকাশকারীরা তাদের পছন্দের জিনিসগুলি বেছে নিতে সক্ষম হবেন, বা এমনকি তাদের বিনিময়যোগ্যভাবে ব্যবহার করতে পারবেন।
সম্পদ
- মিডিয়া ক্যোয়ারী পরিসীমা সিনট্যাক্স স্পেসিফিকেশন
- MDN-এ মিডিয়া ক্যোয়ারী রেঞ্জ সিনট্যাক্স
- মিডিয়া ক্যোয়ারী পরিসীমা সিনট্যাক্স পোস্টসিএসএস প্লাগইন
কোনো মিডিয়া কোয়েরি ভেরিয়েবল নেই
@custom-media এর আগে, মিডিয়া ক্যোয়ারীগুলোকে বারবার নিজেদের পুনরাবৃত্তি করতে হতো, অথবা বিল্ড টাইমে স্ট্যাটিক ভেরিয়েবলের উপর ভিত্তি করে সঠিক আউটপুট তৈরি করতে প্রিপ্রসেসরের উপর নির্ভর করতে হতো।
@custom-media এর পরে, CSS একটি কাস্টম প্রপার্টির মতই মিডিয়া কোয়েরি এবং সেগুলোর রেফারেন্স করার অনুমতি দেয়।
জিনিসগুলির নামকরণ খুবই গুরুত্বপূর্ণ: এটি সিনট্যাক্সের সাথে উদ্দেশ্য সারিবদ্ধ করতে পারে, জিনিসগুলি ভাগ করা সহজ এবং দলগুলিতে ব্যবহার করা সহজ করে তোলে। এখানে কয়েকটি কাস্টম মিডিয়া প্রশ্ন রয়েছে যা আমাকে প্রকল্পগুলির মধ্যে অনুসরণ করে:
@custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);
@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);
@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);
এখন যেহেতু তারা সংজ্ঞায়িত করা হয়েছে, আমি তাদের মধ্যে একটি ব্যবহার করতে পারি:
@media (--OSdark) {
:root {
…
}
}
আমার CSS কাস্টম প্রপার্টি লাইব্রেরি ওপেন প্রপসের ভিতরে আমি যে কাস্টম মিডিয়া প্রশ্নগুলি ব্যবহার করি তার একটি সম্পূর্ণ তালিকা খুঁজুন।
সম্পদ
নেস্টিং নির্বাচকরা এত সুন্দর
@nest এর আগে, স্টাইলশীটে প্রচুর পুনরাবৃত্তি ছিল। নির্বাচকরা যখন দীর্ঘ ছিল এবং প্রত্যেকে ছোট পার্থক্য লক্ষ্য করে তখন এটি বিশেষভাবে অবাস্তব হয়ে ওঠে। একটি প্রিপ্রসেসর গ্রহণ করার সবচেয়ে সাধারণ কারণগুলির মধ্যে একটি হল নেস্টিংয়ের সুবিধা।
@nest এর পরে, পুনরাবৃত্তি চলে গেছে। প্রিপ্রসেসর-সক্ষম নেস্টিংয়ের প্রায় প্রতিটি বৈশিষ্ট্য সিএসএস-এ অন্তর্নির্মিত উপলব্ধ করা হবে।
article {
color: darkgray;
}
article > a {
color: var(--link-color);
}
/* with @nest becomes */
article {
color: darkgray;
& > a {
color: var(--link-color);
}
}
নেস্টেড নির্বাচকের article পুনরাবৃত্তি না করা ছাড়াও আমার কাছে নেস্টিং সম্পর্কে সবচেয়ে গুরুত্বপূর্ণ বিষয় হল স্টাইলিং প্রসঙ্গটি একটি স্টাইল ব্লকের মধ্যেই থাকে। একটি নির্বাচক এবং এর শৈলী থেকে অন্য নির্বাচকের কাছে স্টাইল সহ বাউন্স করার পরিবর্তে (উদাহরণ 1), পাঠক একটি নিবন্ধের প্রসঙ্গে থাকতে পারেন এবং দেখতে পারেন যে নিবন্ধটি এর ভিতরের লিঙ্কগুলির মালিক। সম্পর্ক এবং শৈলীর অভিপ্রায় একসাথে বান্ডিল করা হয়, তাই article তার নিজস্ব শৈলীর মালিক বলে মনে হয়।
মালিকানাকে কেন্দ্রীকরণ হিসাবেও ভাবা যেতে পারে। প্রাসঙ্গিক শৈলীগুলির জন্য একটি স্টাইলশীট ঘুরে দেখার পরিবর্তে, সেগুলিকে একটি প্রসঙ্গের মধ্যে একসাথে নেস্ট করা যেতে পারে। এটি পিতামাতার সাথে সন্তানের সম্পর্কের সাথে কাজ করে, তবে সন্তানের সাথে পিতামাতার সম্পর্কের সাথেও কাজ করে।
এমন একটি উপাদান বিবেচনা করুন যা কোনও ভিন্ন পিতামাতার প্রসঙ্গে যখন নিজেকে সামঞ্জস্য করতে চায় তখন পিতা -মাতার স্টাইলের মালিকানা এবং একটি শিশুকে পরিবর্তন করার বিপরীতে: নিজেকে সামঞ্জস্য করতে চায়:
/* parent owns this, adjusting children */
section:focus-within > article {
border: 1px solid hotpink;
}
/* with @nest becomes */
/* article owns this, adjusting itself when inside a section:focus-within */
article {
@nest section:focus-within > & {
border: 1px solid hotpink;
}
}
@nest সামগ্রিকভাবে স্বাস্থ্যকর স্টাইল সংস্থা, কেন্দ্রীকরণ এবং মালিকানা নিয়ে সহায়তা করে। উপাদানগুলি অন্যান্য স্টাইলের ব্লকগুলির মধ্যে ছড়িয়ে না দিয়ে তাদের নিজস্ব স্টাইলগুলি গোষ্ঠীভুক্ত করতে এবং মালিক করতে পারে। এই উদাহরণগুলিতে এটি ছোট বলে মনে হতে পারে তবে সুবিধা এবং সুস্পষ্টতা উভয়ের জন্য এটির খুব বড় প্রভাব থাকতে পারে।
সম্পদ
স্কোপিং শৈলীগুলি সত্যিই শক্ত
@scope আগে, অনেকগুলি কৌশল বিদ্যমান ছিল কারণ সিএসএস ক্যাসকেড, উত্তরাধিকারী, এবং বিশ্বব্যাপী ডিফল্টরূপে স্কোপ করা হয়। সিএসএসের এই বৈশিষ্ট্যগুলি অনেক কিছুর জন্য খুব সুবিধাজনক, তবে জটিল সাইটগুলি এবং অ্যাপ্লিকেশনগুলির জন্য, সম্ভাব্য অনেকগুলি উপাদান উপাদানগুলির সাথে, ক্যাসকেডের বৈশ্বিক স্থান এবং প্রকৃতি শৈলীগুলিকে এমনভাবে অনুভব করতে পারে যে তারা ফাঁস হচ্ছে।
@scope পরে, স্টাইলগুলি কেবল একটি ক্লাসের মতো কেবল একটি প্রসঙ্গের মধ্যেই স্কোপ করা যায় না, তারা উচ্চারণ করতে পারে যেখানে স্টাইলগুলি শেষ হয় এবং ক্যাসকেড বা উত্তরাধিকারী হতে থাকে না।
নিম্নলিখিত উদাহরণে, বিইএম নামকরণ কনভেনশন স্কোপিংকে প্রকৃত অভিপ্রায়টিতে বিপরীত করা যেতে পারে। বিইএম নির্বাচক নামকরণের সম্মেলন সহ একটি .card পাত্রে একটি header উপাদানটির রঙ স্কোপ করার চেষ্টা করছেন। এর জন্য লক্ষ্যটি শেষ করে শিরোনামটির এই শ্রেণীর নাম রয়েছে। @scope সহ, শিরোনাম উপাদানটি চিহ্নিত না করে একই লক্ষ্যটি সম্পূর্ণ করার জন্য কোনও নামকরণ কনভেনশন প্রয়োজন নেই:
.card__header {
color: var(--text);
}
/* with @scope becomes */
@scope (.card) {
header {
color: var(--text);
}
}
এখানে আরও একটি উদাহরণ, সিএসএসের বৈশ্বিক সুযোগের প্রকৃতি সম্পর্কে কম উপাদান-নির্দিষ্ট এবং আরও অনেক কিছু। গা dark ় এবং হালকা থিমগুলিকে একটি স্টাইলশিটের অভ্যন্তরে সহাবস্থান করতে হবে, যেখানে একটি বিজয়ী শৈলী নির্ধারণের ক্ষেত্রে অর্ডার গুরুত্বপূর্ণ। সাধারণত এর অর্থ অন্ধকার থিম শৈলীগুলি হালকা থিমের পরে আসে; এটি ডিফল্ট হিসাবে আলো এবং al চ্ছিক স্টাইল হিসাবে অন্ধকার প্রতিষ্ঠা করে। @scope সাথে লড়াই করা ক্রম এবং স্কোপ এড়িয়ে চলুন:
@scope (.light-theme) {
a { color: purple; }
}
@scope (.dark-theme) {
a { color: plum; }
}
গল্পটি এখানে সম্পূর্ণ করতে, @scope স্টাইলের সুযোগটি যেখানে শেষ হয় তা প্রতিষ্ঠার অনুমতি দেয়। এটি কোনও নামকরণ কনভেনশন বা প্রিপ্রোসেসরের সাথে করা যায় না; এটি বিশেষ এবং কেবল ব্রাউজারের অন্তর্নির্মিত সিএসএস কিছু করতে পারে। নিম্নলিখিত উদাহরণে, img এবং .content স্টাইলগুলি যখন একটি .media-block একটি .content ।
@scope (.media-block) to (.content) {
img {
border-radius: 50%;
}
.content {
padding: 1em;
}
}
সম্পদ
রাজমিস্ত্রি বিন্যাসের জন্য কোনও সিএসএস উপায় নেই
গ্রিডের সাথে সিএসএস রাজমিস্ত্রি করার আগে, জাভাস্ক্রিপ্টটি একটি রাজমিস্ত্রি বিন্যাস অর্জনের সর্বোত্তম উপায় ছিল, কারণ কলাম বা ফ্লেক্সবক্স সহ সিএসএস পদ্ধতিগুলির মধ্যে যে কোনও বিষয়বস্তু ক্রমটি ভুলভাবে উপস্থাপন করবে।
গ্রিড সহ সিএসএস রাজমিস্ত্রি পরে, কোনও জাভাস্ক্রিপ্ট লাইব্রেরি প্রয়োজন হবে না এবং সামগ্রীর ক্রমটি সঠিক হবে।
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
পূর্ববর্তী ডেমোটি নিম্নলিখিত সিএসএস দিয়ে অর্জন করা হয়েছে:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
এটি জানতে পেরে স্বাচ্ছন্দ্যময় যে এটি একটি অনুপস্থিত লেআউট কৌশল হিসাবে রাডারে রয়েছে, এছাড়াও আপনি আজ ফায়ারফক্সে এটি চেষ্টা করতে পারেন।
সম্পদ
- রাজমিস্ত্রি লেআউট স্পেসিফিকেশন
- এমডিএন -তে রাজমিস্ত্রি লেআউট
- স্ম্যাশিং ম্যাগাজিন: সিএসএস গ্রিডের সাথে নেটিভ সিএসএস রাজমিস্ত্রি লেআউট
সিএসএস ব্যবহারকারীদের ডেটা হ্রাস করতে সহায়তা করতে পারে না
prefers-reduced-data মিডিয়া ক্যোয়ারির আগে, জাভাস্ক্রিপ্ট এবং একটি সার্ভার কোনও ব্যবহারকারীর অপারেটিং সিস্টেম বা ব্রাউজার "ডেটা সেভার" বিকল্পের ভিত্তিতে তাদের আচরণ পরিবর্তন করতে পারে, তবে সিএসএস পারেনি।
prefers-reduced-data মিডিয়া ক্যোয়ারির পরে, সিএসএস ব্যবহারকারীর অভিজ্ঞতা বর্ধিতকরণে যোগ দিতে পারে এবং ডেটা সংরক্ষণে এর ভূমিকা পালন করতে পারে।
@media (prefers-reduced-data: reduce) {
picture, video {
display: none;
}
}
পূর্ববর্তী সিএসএস এই মিডিয়া স্ক্রোল উপাদানটিতে ব্যবহৃত হয় এবং সঞ্চয়গুলি বিশাল হতে পারে। ভিজিটিং ভিউপোর্টটি কত বড় তার উপর নির্ভর করে পৃষ্ঠা লোডে তত বেশি সঞ্চয় করা উচিত। ব্যবহারকারীরা মিডিয়া স্ক্রোলারদের সাথে যোগাযোগ করার সাথে সাথে সংরক্ষণ অব্যাহত থাকে। চিত্রগুলির সমস্তগুলিতে loading="lazy" বৈশিষ্ট্য রয়েছে এবং এটি সিএসএসের সাথে একত্রে উপাদানটি পুরোপুরি লুকিয়ে রাখার অর্থ, চিত্রটির জন্য একটি নেটওয়ার্ক অনুরোধ কখনও তৈরি হয় না।
আমার পরীক্ষার জন্য, একটি মাঝারি আকারের ভিউপোর্টে, 40 টি অনুরোধ এবং 700 কেবি সংস্থানগুলি প্রাথমিকভাবে লোড করা হয়েছিল। একজন ব্যবহারকারী মিডিয়া নির্বাচনকে স্ক্রোল করার সাথে সাথে আরও অনুরোধ এবং সংস্থানগুলি লোড করা হয়। সিএসএস এবং হ্রাস করা ডেটা মিডিয়া ক্যোয়ারী সহ, 10 টি অনুরোধ এবং 172 কেবি সংস্থান লোড করা হয়। এটি সঞ্চয়গুলির অর্ধেক মেগাবাইট এবং ব্যবহারকারী এমনকি কোনও মিডিয়া স্ক্রোলও করেনি, যেখানে কোনও অতিরিক্ত অনুরোধ করা হয়নি।
এই হ্রাস করা ডেটা অভিজ্ঞতার আরও বেশি সুবিধা রয়েছে কেবল ডেটা সঞ্চয়ের চেয়ে। আরও শিরোনাম দেখা যায় এবং মনোযোগ চুরি করতে কোনও বিভ্রান্তিকর কভার চিত্র নেই। অনেক ব্যবহারকারী ডেটা সেভার মোডে ব্রাউজ করেন কারণ তারা প্রতি মেগাবাইট ডেটা প্রদান করে - সিএসএস এখানে সহায়তা করতে সক্ষম দেখে সত্যিই দুর্দান্ত।
সম্পদ
- পছন্দ-হ্রাস-ডেটা স্পেসিফিকেশন পছন্দ
- এমডিএন-তে-হ্রাস-ডেটা পছন্দ করুন
- জিইউআই চ্যালেঞ্জের মধ্যে হ্রাস-ডেটা পছন্দ করে
- স্ম্যাশিং ম্যাগাজিন: কোর ওয়েব ভিটালস উন্নত করা, একটি স্ম্যাশিং ম্যাগাজিনের কেস স্টাডি
স্ক্রোল স্ন্যাপ বৈশিষ্ট্যগুলি খুব সীমাবদ্ধ
এই স্ক্রোল স্ন্যাপ প্রস্তাবগুলির আগে, সমস্ত পর্যবেক্ষক এবং রাষ্ট্র পরিচালনার সাথে একটি ক্যারোসেল, স্লাইডার বা গ্যালারী পরিচালনা করতে আপনার নিজের জাভাস্ক্রিপ্ট লিখতে দ্রুত জটিল হতে পারে। এছাড়াও, যদি সাবধান না হয় তবে প্রাকৃতিক স্ক্রোলিংয়ের গতি স্ক্রিপ্ট দ্বারা স্বাভাবিক হতে পারে, ব্যবহারকারীর ইন্টারঅ্যাকশনকে কিছুটা অপ্রাকৃত এবং সম্ভাব্য ক্লানকি মনে করে।
নতুন API
snapChanging()
ব্রাউজারটি একটি স্ন্যাপ চাইল্ড প্রকাশ করার সাথে সাথে এই ইভেন্টটি আগুন ধরিয়ে দেয়। এটি ইউআইকে একটি স্ন্যাপ সন্তানের অভাব এবং স্ক্রোলারের অনির্দিষ্ট স্ন্যাপের অবস্থা প্রতিফলিত করতে দেয়, কারণ এটি এখন ব্যবহৃত হচ্ছে এবং কোথাও নতুন জায়গায় অবতরণ করবে।
document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
console.log('Snap is changing', event.snappedTargetsList);
});
snapChanged()
ব্রাউজারটি নতুন বাচ্চার কাছে ছড়িয়ে পড়ার সাথে সাথে স্ক্রোলারটি বিশ্রাম নেয়, এই ইভেন্টটি আগুন লাগে। এটি যে কোনও ইউআইকে সংযোগটি আপডেট করতে এবং প্রতিফলিত করতে নির্ভর করে এমন কোনও ইউআইকে দেয়।
document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
console.log('Snap changed', event.snappedTargetsList);
});
scroll-start
স্ক্রোলিং সর্বদা শুরুতে শুরু হয় না। সোয়াইপেবল উপাদানগুলি বিবেচনা করুন যেখানে বাম বা ডান সোয়াইপ করা বিভিন্ন ইভেন্টকে ট্রিগার করে, বা পৃষ্ঠার লোডে প্রাথমিকভাবে লুকানো থাকে যতক্ষণ না আপনি শীর্ষে স্ক্রোল করেন। এই সিএসএস সম্পত্তি বিকাশকারীদের নির্দিষ্ট করতে দেয় যে একটি স্ক্রোলার একটি নির্দিষ্ট পয়েন্টে শুরু করা উচিত।
:root { --nav-height: 100px }
.snap-scroll-y {
scroll-start-y: var(--nav-height);
}
:snap-target
এই সিএসএস নির্বাচক বর্তমানে ব্রাউজার দ্বারা ছড়িয়ে পড়া একটি স্ক্রোল স্ন্যাপ পাত্রে উপাদানগুলির সাথে মেলে।
.card {
--shadow-distance: 5px;
box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
transition: box-shadow 350ms ease;
}
.card:snapped {
--shadow-distance: 30px;
}
এই স্ক্রোল স্ন্যাপ প্রস্তাবগুলির পরে, একটি স্লাইডার, কারাউসেল বা গ্যালারী তৈরি করা অনেক সহজ কারণ ব্রাউজারটি এখন টাস্কের জন্য সুবিধাগুলি সরবরাহ করে, পর্যবেক্ষককে অপসারণ করে এবং অন্তর্নির্মিত এপিআই ব্যবহারের পক্ষে স্ক্রোল অর্কেস্ট্রেশন কোডটি স্ক্রোল করে।
এই সিএসএস এবং জেএস বৈশিষ্ট্যগুলির জন্য এটি এখনও খুব প্রথম দিন, তবে পলিফিলগুলির সন্ধান করতে হবে যা শীঘ্রই তাদের গ্রহণ এবং পরীক্ষায় সহায়তা করতে পারে।
সম্পদ
পরিচিত রাষ্ট্রগুলির মধ্যে সাইকেল চালানো
toggle() এর আগে, কেবল ব্রাউজারে নির্মিত রাজ্যগুলি ইতিমধ্যে স্টাইলিং এবং মিথস্ক্রিয়াটির জন্য উপকৃত হতে পারে। উদাহরণস্বরূপ, চেকবক্স ইনপুটটিতে রয়েছে :checked , ইনপুটটির জন্য একটি অভ্যন্তরীণভাবে পরিচালিত ব্রাউজার রাজ্য যা সিএসএস দৃষ্টিভঙ্গিভাবে উপাদানটি পরিবর্তনের জন্য ব্যবহার করতে সক্ষম।
toggle() এর পরে, সিএসএসের পরিবর্তন এবং স্টাইলিংয়ের জন্য ব্যবহারের জন্য যে কোনও উপাদানের উপর কাস্টম রাজ্যগুলি তৈরি করা যেতে পারে। এটি গোষ্ঠী, সাইক্লিং, নির্দেশিত টগলিং এবং আরও অনেক কিছু অনুমতি দেয়।
নিম্নলিখিত উদাহরণে, সম্পূর্ণরূপে স্ট্রাইকথ্রু একটি তালিকা আইটেমের একই প্রভাব অর্জন করা হয়েছে তবে কোনও চেকবক্স উপাদান ছাড়াই:
<ul class='ingredients'>
<li>1 banana
<li>1 cup blueberries
...
</ul>
এবং প্রাসঙ্গিক সিএসএস toggle() শৈলী:
li {
toggle-root: check self;
}
li:toggle(check) {
text-decoration: line-through;
}
আপনি যদি রাষ্ট্রীয় মেশিনগুলির সাথে পরিচিত হন তবে আপনি লক্ষ্য করতে পারেন যে toggle() এর সাথে কতটা ক্রসওভার রয়েছে। এই বৈশিষ্ট্যটি বিকাশকারীদের তাদের আরও বেশি রাজ্যের সিএসএসে তৈরি করতে দেয়, আশা করা যায় যে ইন্টারঅ্যাকশন এবং রাষ্ট্রের অর্কেস্ট্রেটিংয়ের আরও পরিষ্কার এবং আরও শব্দার্থক উপায়গুলির ফলস্বরূপ।
সম্পদ
নির্বাচিত উপাদানগুলি কাস্টমাইজ করা
<selectmenu> এর আগে, সিএসএসের ধনী এইচটিএমএল সহ <option> উপাদানগুলি কাস্টমাইজ করার ক্ষমতা বা বিকল্পগুলির একটি তালিকা প্রদর্শন সম্পর্কে অনেক পরিবর্তন করার ক্ষমতা ছিল না। এই বিকাশকারীদের বাহ্যিক গ্রন্থাগারগুলি লোড করতে পরিচালিত করেছিল যা একটি <select> এর কার্যকারিতাটির অনেকটা পুনরায় তৈরি করে, যা প্রচুর কাজ হিসাবে শেষ হয়েছিল।
<selectmenu> এর পরে, বিকাশকারীরা বিকল্প উপাদানগুলির জন্য সমৃদ্ধ এইচটিএমএল সরবরাহ করতে পারে এবং তাদের যতটা প্রয়োজন তাদের স্টাইল সরবরাহ করতে পারে, এখনও অ্যাক্সেসযোগ্যতার প্রয়োজনীয়তাগুলি পূরণ করে এবং শব্দার্থক এইচটিএমএল সরবরাহ করে।
নিম্নলিখিত উদাহরণে, <selectmenu> ব্যাখ্যার পৃষ্ঠা থেকে নেওয়া, কিছু প্রাথমিক বিকল্প সহ একটি নতুন নির্বাচন মেনু তৈরি করা হয়েছে:
<selectmenu>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>
সিএসএস উপাদানটির অংশগুলি লক্ষ্য এবং স্টাইল করতে পারে:
.my-select-menu::part(button) {
color: white;
background-color: red;
padding: 5px;
border-radius: 5px;
}
.my-select-menu::part(listbox) {
padding: 10px;
margin-top: 5px;
border: 1px solid red;
border-radius: 5px;
}
আপনি ওয়েব পরীক্ষা -নিরীক্ষা পতাকা সক্ষম করে ক্যানারিতে ক্রোমিয়ামে <selectmenu> উপাদানটি চেষ্টা করতে পারেন। কাস্টমাইজযোগ্য নির্বাচন করুন মেনু উপাদানগুলির জন্য 2023 এবং এর বাইরেও নজর রাখুন।
সম্পদ
অন্য একটি উপাদান অ্যাঙ্করিং
anchor() এর আগে, পজিশন পরম এবং আত্মীয়ের বিকাশকারীদের পিতামাতার উপাদানগুলির মধ্যে ঘোরাফেরা করার জন্য বিকাশকারীদের জন্য প্রদত্ত অবস্থান কৌশল ছিল।
anchor() এর পরে, বিকাশকারীরা শিশু বা না নির্বিশেষে অন্যান্য উপাদানগুলিতে উপাদানগুলি স্থাপন করতে পারে। এটি বিকাশকারীদের কোন প্রান্তের বিরুদ্ধে অবস্থান করতে এবং উপাদানগুলির মধ্যে অবস্থানের সম্পর্ক তৈরির জন্য অন্যান্য নিসিটিগুলি নির্দিষ্ট করার অনুমতি দেয়।
আপনি যদি আরও শিখতে আগ্রহী হন তবে ব্যাখ্যার কয়েকটি দুর্দান্ত উদাহরণ এবং কোড নমুনা রয়েছে।