সিএসএস :has() অনেক ব্রাউজারে ছদ্ম ক্লাস চালু হচ্ছে ক্রৌমিয়াম এবং Safari ইতিমধ্যে এটি সম্পূর্ণরূপে সমর্থন করে। এটিকে প্রায়শই "অভিভাবক নির্বাচক" হিসাবে উল্লেখ করা হয় - যেমন, আমরা একটি শিশু নির্বাচক থেকে একটি অভিভাবক উপাদান শৈলী নির্বাচন করতে পারি - তবে আরও অনেক কিছু রয়েছে :has() আমাদের সমাধান করতে সাহায্য করতে পারেন। এই জিনিসগুলির মধ্যে একটি হল ক্লিকযোগ্য কার্ডের প্যাটার্নটি পুনরায় উদ্ভাবন করা যা আমাদের মধ্যে অনেকেই সময়ে সময়ে ব্যবহার করতে পছন্দ করে।
আমরা কিভাবে তা দেখে নেব :has() লিঙ্ক করা কার্ডগুলি পরিচালনা করতে আমাদের সাহায্য করতে পারে, কিন্তু প্রথমে...
এটা কি :has() ছদ্ম ক্লাস?
ইতিমধ্যে একটি আছে গুচ্ছ of মহান পোস্ট ভেসে বেরাছহে যে একটি চমৎকার কাজ কি ব্যাখ্যা :has() এবং এটি কিসের জন্য ব্যবহার করা হয়েছে, কিন্তু এটি এখনও যথেষ্ট নতুন যে আমাদের এখানেও এটি সম্পর্কে কয়েকটি শব্দ বলা উচিত।
:has() একটি রিলেশনাল সিউডো ক্লাস যা এর অংশ W3C নির্বাচক লেভেল 4 ওয়ার্কিং ড্রাফ্ট. বন্ধনীগুলি এই বিষয়েই রয়েছে: মিলিত উপাদান যা সম্পর্কিত — বা, আরও সঠিকভাবে, ধারণ করে — নির্দিষ্ট শিশু উপাদান৷
/* Matches an article element that contains an image element */
article:has(img) { }
/* Matches an article element with an image contained immediately within it */
article:has(> img) { }সুতরাং, আপনি দেখতে পাচ্ছেন কেন আমরা এটিকে "অভিভাবক" নির্বাচক বলতে চাই। তবে আমরা এটিকে আরও নির্দিষ্ট করার জন্য অন্যান্য কার্যকরী সিউডো ক্লাসের সাথে একত্রিত করতে পারি। বলুন যে আমরা নিবন্ধগুলিকে স্টাইল করতে চাই যা করে না যে কোন ছবি আছে। আমরা এর আপেক্ষিক শক্তিগুলিকে একত্রিত করতে পারি :has() এর নেতিবাচক ক্ষমতা সহ :not() এটা করতে:
/* Matches an article without images */
article:not(:has(img)) { }কিন্তু এটি কেবলমাত্র আমরা কীভাবে আরও কিছু করার জন্য শক্তিগুলিকে একত্রিত করতে পারি তার শুরু :has(). আমরা বিশেষভাবে ক্লিকযোগ্য কার্ডের সমস্যা সমাধানের দিকে যাওয়ার আগে, আসুন আমরা বর্তমানে ব্যবহার না করে তাদের কাছে যাওয়ার কয়েকটি উপায় দেখি :has().
আমরা বর্তমানে ক্লিকযোগ্য কার্ডগুলি কীভাবে পরিচালনা করি
আজকাল লোকেরা কীভাবে একটি সম্পূর্ণ ক্লিকযোগ্য কার্ড তৈরি করে এবং এই ছদ্ম শ্রেণীর শক্তিকে সম্পূর্ণরূপে বোঝার জন্য তিনটি প্রধান পন্থা রয়েছে, কিছুটা রাউন্ড-আপ করা ভাল।
"একটি মোড়ক হিসাবে লিঙ্ক" পদ্ধতি
এই পদ্ধতিটি বেশ ঘন ঘন ব্যবহৃত কিছু। আমি কখনই এই পদ্ধতিটি ব্যবহার করি না তবে আমি এটি প্রদর্শন করার জন্য একটি দ্রুত ডেমো তৈরি করেছি:
এখানে অনেক উদ্বেগ রয়েছে, বিশেষ করে যখন এটি অ্যাক্সেসযোগ্যতার ক্ষেত্রে আসে। ব্যবহারকারীরা ব্যবহার করে আপনার ওয়েবসাইট নেভিগেট যখন রটার ফাংশন, তারা যে ভিতরে সম্পূর্ণ টেক্সট শুনতে হবে উপাদান — শিরোনাম, পাঠ্য এবং লিঙ্ক। কেউ হয়তো এই সব দিয়ে বসতে চাইবে না। আমরা আরও ভালো করতে পারি। HTML5 থেকে, আমরা একটি এর ভিতরে উপাদান ব্লক করতে পারি উপাদান কিন্তু এটা আমার কাছে কখনই ঠিক মনে হয় না, বিশেষ করে এই কারণে।
পেশাদাররা:
- দ্রুত বাস্তবায়ন
- শব্দার্থগতভাবে সঠিক
কনস:
- প্রবেশযোগ্যতা উদ্বেগ
- পাঠ্য নির্বাচনযোগ্য নয়
- আপনি আপনার ডিফল্ট লিঙ্কগুলিতে ব্যবহার করা শৈলীগুলিকে ওভাররাইট করতে অনেক ঝামেলা
জাভাস্ক্রিপ্ট পদ্ধতি
জাভাস্ক্রিপ্ট ব্যবহার করে, আমরা মার্কআপে লেখার পরিবর্তে আমাদের কার্ডের সাথে একটি লিঙ্ক সংযুক্ত করতে পারি। আমি এই মহান CodePen ডেমো খুঁজে পেয়েছি খরচদেব যারা এই প্রক্রিয়ায় কার্ডের পাঠ্য নির্বাচনযোগ্য করে তুলেছে:
এই পদ্ধতির অনেক সুবিধা আছে। আমাদের লিঙ্কগুলি ফোকাসে অ্যাক্সেসযোগ্য এবং আমরা পাঠ্য নির্বাচনও করতে পারি। কিন্তু স্টাইলিংয়ের ক্ষেত্রে কিছু ত্রুটি রয়েছে। আমরা যদি সেই কার্ডগুলিকে অ্যানিমেট করতে চাই, উদাহরণস্বরূপ, আমাদের যোগ করতে হবে :hover আমাদের প্রধান শৈলী .card লিঙ্কের পরিবর্তে মোড়ক। কীবোর্ড ট্যাবিং থেকে লিঙ্কগুলি ফোকাসে থাকলে আমরা অ্যানিমেশনগুলি থেকেও উপকৃত হব না।
পেশাদাররা:
- নিখুঁতভাবে অ্যাক্সেসযোগ্য করা যেতে পারে
- পাঠ্য নির্বাচন করার ক্ষমতা
কনস:
- জাভাস্ক্রিপ্ট প্রয়োজন
- ডান ক্লিক করা সম্ভব নয় (যদিও কিছু অতিরিক্ত স্ক্রিপ্টিং দিয়ে ঠিক করা যেতে পারে)
- কার্ডে অনেক স্টাইলিং প্রয়োজন যা লিঙ্ক ফোকাস করার সময় কাজ করবে না
সার্জারির ::after নির্বাচক পদ্ধতি
এই পদ্ধতিতে আমাদেরকে আপেক্ষিক অবস্থানের সাথে কার্ড সেট করতে হবে, তারপর লিঙ্কের উপর পরম অবস্থান সেট করতে হবে ::after একটি লিঙ্কের ছদ্ম নির্বাচক। এটির জন্য কোন জাভাস্ক্রিপ্টের প্রয়োজন নেই এবং এটি বাস্তবায়ন করা বেশ সহজ:
এখানে কয়েকটি ত্রুটি রয়েছে, বিশেষ করে যখন এটি পাঠ্য নির্বাচনের ক্ষেত্রে আসে। আপনি আপনার কার্ড-বডিতে একটি উচ্চতর z-সূচক প্রদান না করলে, আপনি পাঠ্য নির্বাচন করতে সক্ষম হবেন না তবে আপনি যদি তা করেন তবে সতর্ক থাকুন যে পাঠ্যটিতে ক্লিক করলে আপনার লিঙ্কটি সক্রিয় হবে না। আপনি নির্বাচনযোগ্য পাঠ্য চান কিনা তা আপনার উপর নির্ভর করে। আমি মনে করি এটি একটি UX সমস্যা হতে পারে, তবে এটি ব্যবহারের ক্ষেত্রে নির্ভর করে। পাঠ্যটি এখনও স্ক্রিন পাঠকদের কাছে অ্যাক্সেসযোগ্য তবে পদ্ধতির সাথে আমার প্রধান সমস্যা হল অ্যানিমেশন সম্ভাবনার অভাব।
পেশাদাররা:
- কার্যকর করা সহজ
- প্রস্ফুটিত টেক্সট ছাড়া অ্যাক্সেসযোগ্য লিঙ্ক
- হোভার এবং ফোকাসে কাজ করে
কনস:
- পাঠ্য নির্বাচনযোগ্য নয়
- আপনি শুধুমাত্র লিঙ্কটিকে অ্যানিমেট করতে পারেন কারণ এটি হল সেই উপাদান যা আপনি ঘোরাফেরা করছেন৷
একটি নতুন পদ্ধতি: ব্যবহার করা ::after সঙ্গে :has()
এখন যেহেতু আমরা ক্লিকযোগ্য কার্ডগুলির জন্য বিদ্যমান পন্থাগুলি প্রতিষ্ঠা করেছি, আমি দেখাতে চাই যে এটি কতটা পরিচিত :has() মিশ্রণটি সেই ত্রুটিগুলির বেশিরভাগ সমাধান করে।
প্রকৃতপক্ষে, আসুন আমরা ব্যবহার করার দিকে তাকিয়ে শেষ একের উপর এই পদ্ধতির ভিত্তি করি ::after লিঙ্ক উপাদানে। আমরা আসলে ব্যবহার করতে পারেন :has() সেখানে যে পদ্ধতির অ্যানিমেশন সীমাবদ্ধতা অতিক্রম করতে.
মার্কআপ দিয়ে শুরু করা যাক:
Some Heading
Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.
আমি ক্লাসের পরিবর্তে সিএসএসে উপাদানগুলিকে লক্ষ্য করে জিনিসগুলি যতটা সম্ভব সহজ রাখব।
এই ডেমোর জন্য, আমরা হোভারে কার্ডে একটি ইমেজ জুম এবং শ্যাডো যোগ করতে যাচ্ছি এবং লিঙ্কের টেক্সট রঙ পরিবর্তন করার সময় একটি তীর দিয়ে লিঙ্কটিকে অ্যানিমেট করব। এটি সহজ করার জন্য, আমরা আমাদের কার্ডে কিছু কাস্টম বৈশিষ্ট্য যুক্ত করতে যাচ্ছি। এখানে মৌলিক স্টাইলিং আছে:
/* The card element */
article {
--img-scale: 1.001;
--title-color: black;
--link-icon-translate: -20px;
--link-icon-opacity: 0;
position: relative;
border-radius: 16px;
box-shadow: none;
background: #fff;
transform-origin: center;
transition: all 0.4s ease-in-out;
overflow: hidden;
}
/* The link's ::after pseudo */
article a::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline: 0;
cursor: pointer;
}দারুণ! আমরা ছবির জন্য একটি প্রাথমিক স্কেল যোগ করেছি (--img-scale: 1.001), কার্ড শিরোনামের প্রাথমিক রঙ (--title-color: black) এবং কিছু অতিরিক্ত বৈশিষ্ট্য আমরা আমাদের তীর লিঙ্ক থেকে পপ আউট করতে ব্যবহার করব। আমরা একটি খালি অবস্থা সেট করেছি box-shadow ঘোষণা পরে এটি অ্যানিমেট করার জন্য। এটি এখনই ক্লিকযোগ্য কার্ডের জন্য আমাদের যা প্রয়োজন তা সেট আপ করে, তাই আসুন আমরা যে উপাদানগুলিকে অ্যানিমেট করতে চাই সেই উপাদানগুলিতে সেই কাস্টম বৈশিষ্ট্যগুলি যোগ করে এটিতে কিছু রিসেট এবং স্টাইলিং যোগ করি:
article h2 {
margin: 0 0 18px 0;
font-family: "Bebas Neue", cursive;
font-size: 1.9rem;
letter-spacing: 0.06em;
color: var(--title-color);
transition: color 0.3s ease-out;
}
article figure {
margin: 0;
padding: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}
article img {
max-width: 100%;
transform-origin: center;
transform: scale(var(--img-scale));
transition: transform 0.4s ease-in-out;
}
article a {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #28666e;
}
article a:focus {
outline: 1px dotted #28666e;
}
article a .icon {
min-width: 24px;
width: 24px;
height: 24px;
margin-left: 5px;
transform: translateX(var(--link-icon-translate));
opacity: var(--link-icon-opacity);
transition: all 0.3s;
}
.article-body {
padding: 24px;
}আসুন মানুষের প্রতি সদয় হই এবং একটি যোগ করি স্ক্রিন রিডার ক্লাস লিঙ্কের পিছনে লুকানো:
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}আমাদের কার্ডটি বেশ মিষ্টি দেখাতে শুরু করেছে। এটা যাদু একটি বিট যোগ করার সময়. সঙ্গে :has() সিউডো ক্লাস, আমরা এখন আমাদের লিঙ্কটি হোভার বা ফোকাস করা কিনা তা পরীক্ষা করতে পারি, তারপর আমাদের কাস্টম বৈশিষ্ট্যগুলি আপডেট করুন এবং একটি যুক্ত করুন box-shadow. CSS-এর এই সামান্য অংশ দিয়ে আমাদের কার্ড সত্যিই প্রাণবন্ত হয়ে ওঠে:
/* Matches an article element that contains a hover or focus state */
article:has(:hover, :focus) {
--img-scale: 1.1;
--title-color: #28666e;
--link-icon-translate: 0;
--link-icon-opacity: 1;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}দেখুন সেখানে কি হয়? এখন আমরা যদি আপডেট শৈলী পেতে কোন কার্ডে চাইল্ড এলিমেন্ট হোভার বা ফোকাস করা হয়। এবং যদিও লিঙ্ক উপাদান একমাত্র জিনিস যা একটি হোভার বা ফোকাস অবস্থা ধারণ করতে পারে ::after ক্লিকযোগ্য কার্ড পদ্ধতিতে, আমরা প্যারেন্ট উপাদানের সাথে মেলে এবং ট্রানজিশন প্রয়োগ করতে এটি ব্যবহার করতে পারি।
এবং সেখানে আপনি এটা আছে। জন্য শুধু আরেকটি শক্তিশালী ব্যবহারের ক্ষেত্রে :has() নির্বাচক অন্য উপাদানগুলিকে আর্গুমেন্ট হিসাবে ঘোষণা করে আমরা শুধুমাত্র একটি অভিভাবক উপাদানকে মেলাতে পারি না, তবে আমরা অভিভাবকদের সাথে মেলাতে এবং স্টাইল করার জন্য ছদ্ম ব্যবহারও মেলাতে পারি।
পেশাদাররা:
- প্রবেশযোগ্য
- অ্যানিমেটেবল
- কোন জাভাস্ক্রিপ্ট প্রয়োজন
- ব্যবহারসমূহ
:hoverসঠিক উপাদানের উপর
কনস:
- পাঠ্য সহজে নির্বাচনযোগ্য নয়।
- ব্রাউজার সমর্থন ক্রোম এবং সাফারিতে সীমাবদ্ধ (এটি একটি পতাকার পিছনে ফায়ারফক্সে সমর্থিত)।
এই কৌশলটি ব্যবহার করে এখানে একটি ডেমো রয়েছে। আপনি কার্ডের চারপাশে একটি অতিরিক্ত মোড়ক লক্ষ্য করতে পারেন, কিন্তু যে শুধু আমি সঙ্গে খেলার ধারক প্রশ্ন, যা সমস্ত প্রধান ব্রাউজারে রোল আউট হওয়া অন্যান্য চমত্কার জিনিসগুলির মধ্যে একটি।
কিছু নাও অন্যান্য উদাহরণ আপনি ভাগ করতে চান? অন্যান্য সমাধান বা ধারনা মন্তব্য বিভাগে স্বাগত জানাই বেশী.
