সম্ভাব্য একটি ব্রাউজারে আসছে :near() you | css-ট্রিকস

2025 শেষ হওয়ার ঠিক আগে, আমি এই প্রস্তাবটি দেখেছি :near()একটি ছদ্ম-শ্রেণি যা পয়েন্টারটিকে উপাদানে পাস করার সময় মিলবে৷ কত দ্বারা? ওয়েল, এটা এর মান উপর নির্ভর করবে <length> যুক্তি প্রদান করেছেন। টমাস ওয়ালিচিউইচ, যিনি প্রস্তাব করেছিলেন :near()এটি এই মত কাজ করার পরামর্শ দেয়:

button:near(3rem) {
  /* Pointer is within 3rem of the button */
}

যারা ভাবছেন তাদের জন্য, হ্যাঁ, আমরা জাভাস্ক্রিপ্ট ব্যবহার করে দুটি উপাদানের মধ্যে সরল-রেখার দূরত্ব পরিমাপ করতে পাইথাগোরিয়ান থিওরেম (“ইউক্লিডীয় দূরত্ব” একটি গাণিতিক শব্দ) ব্যবহার করতে পারি, তাই আমি ধরে নিচ্ছি যে এখানে পর্দার পিছনে ব্যবহার করা হবে। আপনার সাথে শেয়ার করার জন্য আমার কাছে কিছু ব্যবহারের কেস আছে, কিন্তু ডেমো শুধুমাত্র একটি সিমুলেশন হবে :near() যেহেতু এটি দৃশ্যত কোনো ওয়েব ব্রাউজারে সমর্থিত নয়। আমরা খনন করা উচিত?

চাক্ষুষ প্রভাব

কোন প্রশ্ন না করে, :near() প্রায় অসীম (দুঃখিত) সংখ্যক ভিজ্যুয়াল এফেক্টের জন্য ব্যবহার করা যেতে পারে:

div {
  /* Div is wow */

  &:near(3rem) {
    /* Div be wowzer */
  }

  &:near(1rem) {
    /* Div be woahhhh */
  }
}

উপাদানগুলি ম্লান না হওয়া পর্যন্ত :near()

ভিজ্যুয়াল বিশৃঙ্খলতা কমাতে, ব্যবহারকারীরা তাদের কাছাকাছি না আসা পর্যন্ত আপনি কিছু উপাদান ম্লান করতে চাইতে পারেন। :near() এর চেয়ে বেশি কার্যকর হতে পারে :hover এই পরিস্থিতিতে এটি কারণ ব্যবহারকারীদের সীমিত দৃশ্যমানতা থাকলে উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করতে সমস্যা হতে পারে, এবং তাই “আগে” ট্রিগার করতে সক্ষম হওয়া কিছু পরিমাণে এটির জন্য ক্ষতিপূরণ দিতে পারে। যাইহোক, আমাদের অ্যাক্সেসযোগ্য রঙের বৈসাদৃশ্য নিশ্চিত করতে হবে, তাই আমি নিশ্চিত নই যে এটি কতটা কার্যকর। :near() এ অবস্থায় ঘটতে পারে।

button:not(:near(3rem)) {
  opacity: 70%; /* Or...something */
}

লুকান উপাদান পর্যন্ত :near()

উপাদানগুলিকে ঝাপসা করার পাশাপাশি, আমরা উপাদানগুলিও লুকাতে পারি (যদি না সেগুলি গুরুত্বপূর্ণ হয়)। আমি মনে করি এটি একটি ভাল ব্যবহারের ক্ষেত্রে :near()কারণ আমাদের রঙের বৈসাদৃশ্য সম্পর্কে চিন্তা করতে হবে না, যদিও, এটি একটি ভিন্ন অ্যাক্সেসিবিলিটি চ্যালেঞ্জ নিয়ে আসে।

সুতরাং, আপনি জানেন যখন আপনি একটি চিত্রের উপর হোভার করেন এবং একটি শেয়ার বোতাম প্রদর্শিত হয় তখন কী ঘটে? জ্ঞান করে, ডান? যেহেতু আমরা ছবিটি অস্পষ্ট হতে চাই না, এটি প্রাথমিকভাবে লুকানো হয়। এটি UX এর ক্ষেত্রে সর্বোত্তম নয়, তবে এটি এখনও একটি প্যাটার্ন যা লোকেরা পরিচিত, উদাহরণস্বরূপ Pinterest-এ।

এবং এখানে কিভাবে :near() বাড়াতে পারে। লোকেরা জানে বা সন্দেহ করে যে বোতামটি আছে, তাই না? সম্ভবত নীচের-ডান কোণে? তারা মোটামুটি জানে কোথায় ক্লিক করতে হবে, কিন্তু জানে না একেবারে যেখানে, কারণ তারা বোতামের আকার বা অফসেট জানে না। ঠিক আছে, আমি কখন আপনাকে বোতামটি দেখাতে যাচ্ছি? :near() এর অর্থ হল বোতামগুলি প্রদর্শিত হওয়ার জন্য তাদের এত সুনির্দিষ্টভাবে ঘোরানো দরকার নেই। এই দৃশ্যটি উপরের দৃশ্যের সাথে খুব মিল, সম্ভবত হ্রাস দৃশ্যমানতার জন্য বিভিন্ন কারণে।

যাইহোক, অ্যাক্সেসযোগ্য হওয়ার জন্য আমাদের এই বোতামটি প্রয়োজন (হোভারেবল, ফোকাসযোগ্য এবং পেজ-ইন-পেজযোগ্য)। এটি হওয়ার জন্য, আমরা ব্যবহার করতে পারি না:

• display: hidden (হভারযোগ্য, ফোকাসযোগ্য, বা পৃষ্ঠা-ইন-পৃষ্ঠা নয়)
• visibility: hidden (হভারযোগ্য, ফোকাসযোগ্য, এমনকি পৃষ্ঠা-ইন-পৃষ্ঠা-সক্ষম নয়)
• opacity: 0 (ফাইন্ড-ইন-পেজে একবার পাওয়া গেলে এটি দেখানোর কোন উপায় নেই)

তিনি আমাদের ছেড়ে চলে যান content-visibility: hiddenকিন্তু বিষয়বস্তু ব্যবহার করে লুকানোর সমস্যা content-visibility: hidden (বা উপাদান সহ display: none) হল যে তারা আক্ষরিক অর্থে অদৃশ্য হয়ে গেছে, এবং আপনি সেখানে নেই এমন কিছুর কাছাকাছি যেতে পারবেন না। এর মানে হল যে আমাদের এটির জন্য জায়গা সংরক্ষণ করতে হবে, যদিও আমরা জানি না কত স্থান

এখন, :near() কোনও ওয়েব ব্রাউজারে সমর্থিত নয়, তাই নীচের ডেমোতে, আমি একটি পাত্রে বোতামটি মোড়ানো করেছি৷ 3rem এর paddingএবং যখন যে পাত্রে ঘটছে :hoverএড, বোতাম দেখানো হয়. এটি প্রকৃত বোতামের পরিবর্তে ঘোরানো অঞ্চলের আকার বৃদ্ধি করে (যা আমি লাল করেছি, তাই আপনি এটি দেখতে পারেন)। এটা মূলত simulates button:near(3rem).

কিন্তু একটা জায়গা রিজার্ভ করার সময় আমরা কিভাবে কিছু লুকাতে পারি?

প্রথমত, আমরা ঘোষণা করি contain-intrinsic-size: auto none লুকানো লক্ষ্যবস্তুতে। এটি নিশ্চিত করে যে এটি একটি নির্দিষ্ট আকৃতি থেকে যায় এমনকি যখন কিছু পরিবর্তন হয় (এই ক্ষেত্রে, এমনকি যখন এর বিষয়বস্তু লুকানো থাকে)। আপনি একটি নির্দিষ্ট করতে পারেন <length> যে কোনো মূল্যের জন্য, কিন্তু এই ক্ষেত্রে auto এর মানে উপস্থাপিত আকার যাই হোক না কেন। noneযা একটি প্রয়োজনীয় ফলব্যাক মান, এছাড়াও একটি হতে পারে <length>কিন্তু আমাদের একেবারেই দরকার নেই, তাই “none“

সমস্যা হল, প্রদত্ত আকার “কিছুই না”, কারণ বোতামটি content-visibility: hiddenমুখস্থ? এর মানে আমাদের এটি শুধুমাত্র একটি মিলিসেকেন্ডের জন্য রেন্ডার করতে হবে, এবং এই অ্যানিমেশনটি তাই করে:

<div id="image">
  <div id="simulate-near">
    <button hidden="until-found">Share</button>
  </div>
</div>

@keyframes show-content {
  from {
    content-visibility: visible;
  }
}

button {
  /* Hide it by default */
  &:not([hidden="until-found"]) {
    content-visibility: hidden;
  }

  /* But make it visible for 1ms */
  animation: 1ms show-content;

  /* Save the size while visible */
  contain-intrinsic-size: auto none;
}

উল্লেখ্য যে বাটন থাকলে hidden=until-found অ্যাট্রিবিউট-মান, যা এটিকে ফোকাসযোগ্য এবং পেজ-ইন-পেজ-সক্ষম করে তোলে, content-visibility: hidden কারণ ঘোষণা করা হয়নি hidden=until-found তিনি এটি স্বয়ংক্রিয়ভাবে করেন। যাইহোক, অ্যানিমেশন ঘোষণা করে content-visibility: visible জন্য 1ms যেদিকে contain-intrinsic-size: auto none এটির আকৃতি ধরে রাখে এবং এটির স্থানটি সুরক্ষিতভাবে ধরে রাখে, এটি দৃশ্যমান না হলেও আমাদের এটির উপর ঘোরাতে সক্ষম করে।

এখন আপনি বুঝতে পেরেছেন যে এটি কীভাবে কাজ করে, এখানে সম্পূর্ণ কোড (আবার, সিমুলেটেড, কারণ :near() এখনও সমর্থিত নয়):

<div id="image">
  <div id="simulate-near">
    <button hidden="until-found">Share</button>
  </div>
</div>

@keyframes show-content {
  from {
    content-visibility: visible;
  }
}

#simulate-near {
  /* Instead of :near(3rem) */
  padding: 3rem;

  button {
    /* Unset any styles */
    border: unset;
    background: unset;

    /* But include size-related styles */
    padding: 1rem;

    /* Hide it by default */
    &:not([hidden="until-found"]) {
      content-visibility: hidden;
    }

    /* But make it visible for 1ms */
    animation: 1ms show-content;

    /* Save the size while visible */
    contain-intrinsic-size: auto none;
  }

  &:where(:hover, :has(:focus-visible)) button {
    color: white;
    background: black;
    content-visibility: visible;
  }
}

আপনি যদি ভাবছেন কেন আমরা বিরক্ত করছি border এবং backgroundএটা কারণ content-visibility: hidden শুধুমাত্র বিষয়বস্তু লুকায়, উপাদান নয়, কিন্তু আমরা এটি অন্তর্ভুক্ত করেছি padding এখানে কারণ এটি আকৃতিকে প্রভাবিত করে যা আমরা উপস্থাপন এবং মনে রাখার চেষ্টা করছি। এর পরে আমরা সেই শৈলীগুলিও প্রয়োগ করি content-visibility: visible র‍্যাপার থাকলে বোতামে ক্লিক করুন :hovered বা :has(:focus-visible).

এবং এখানে একই জিনিস কিন্তু অসমর্থিত সঙ্গে :near()::

<div id="image">
  <button hidden="until-found">Share</button>
</div>

@keyframes show-content {
  from {
    content-visibility: visible;
  }
}

button {
  /* Unset any styles */
  border: unset;
  background: unset;

  /* But include size-related styles */
  padding: 1rem;

  /* Hide it by default */
  &:not([hidden="until-found"]) {
    content-visibility: hidden;
  }

  /* But make it visible for 1ms */
  animation: 1ms show-content;

  /* Save the size while visible */
  contain-intrinsic-size: auto none;

  &:where(:near(3rem), :hover, :focus-visible) {
    color: white;
    background: black;
    content-visibility: visible;
  }
}

সংক্ষেপে, :near() অতিরিক্ত মার্কআপ এবং সৃজনশীল নির্বাচক ছাড়াই সিমুলেটেড প্রযুক্তি যা করে তা করতে আমাদের সক্ষম করে এবং যদি অ্যাক্সেসের প্রয়োজন হয় তবে আমাদের এটি রয়েছে। animation/contain-intrinsic-size সরানো

প্রিফেচ/প্রি-রেন্ডার যখন কাছাকাছি

আমি প্রস্তাব করছি না যে প্রিফেচ/প্রিরেন্ডার ব্যবহার করার একটি উপায় আছে। :near() বা এমনকি কার্যকারিতা :near() এটি প্রসারিত করা উচিত, তবে এটিও যাতে স্পেকুলেশন রুলস API এর অন্তর্নির্মিত কার্যকারিতার সুবিধা নিতে পারে। ইতিমধ্যে বেটিং নিয়ম API ব্যবহার করে mousedown, touchstartপয়েন্টার দিক এবং বেগ, ভিউপোর্ট উপস্থিতি, এবং স্ক্রোল স্টপ সংকেত হিসাবে লিঙ্ক করা সংস্থান প্রিফেচিং/প্রি-রেন্ডারিং শুরু করার জন্য, তাহলে কেন কাছাকাছি নয়?

আসলে, আমি মনে করি “কাছের” একটি ধারণা হিসাবে ব্যবহার করা যেতে পারে খুব এর চেয়ে বেশি :near()এবং প্রয়োজন সেই কাস্টম হিট-টেস্ট ব্যবহার করে বিবেচনা করুন pointermove এটির উচ্চ কর্মক্ষমতা ব্যয় এবং বাস্তবায়ন জটিলতা রয়েছে (থমাস উল্লেখ করেছেন)। আরেকটি উদাহরণ দেখা যাক।

আগ্রহ কলার মিথস্ক্রিয়া উন্নত করুন

হোভার-ট্রিগার করা ওভারলেগুলির সাথে ইন্টারঅ্যাক্ট করার সময়, ঘটনাক্রমে পয়েন্টারটিকে ট্রিগার বা লক্ষ্য থেকে দূরে সরিয়ে নেওয়ার ঝুঁকি থাকে। ইন্টারেস্ট ইনভোকার এপিআই ব্যবহার করে, যা হোভার-ট্রিগার করা ইন্টারঅ্যাকশনের সুবিধা দেয় interest-show-delay এবং interest-hide-delay CSS বৈশিষ্ট্য যথাক্রমে দুর্ঘটনাজনিত সক্রিয়করণ এবং নিষ্ক্রিয়করণ প্রতিরোধ করে, কিন্তু ব্যবহারকারীর অভিজ্ঞতার দৃষ্টিকোণ থেকে, বিলম্ব এবং সময়-সংবেদনশীলতার সাথে জড়িত কিছু মজাদার নয়।

কিছু উদাহরণ:

• আগ্রহের ট্রিগার (উদাহরণস্বরূপ, একটি লিঙ্ক বা বোতাম) এবং আগ্রহের লক্ষ্য (উদাহরণস্বরূপ, একটি পপওভার) এর মধ্যে ব্যবধানে পড়া একটি সূচক
• পয়েন্টারটি তার প্রান্তের কাছাকাছি উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করার চেষ্টা করার সময় আগ্রহের লক্ষ্যের সীমার বাইরে চলে যায়।

তাই, বিলম্ব দেখানো এবং লুকানোর পরিবর্তে, ইন্টারেস্ট ইনভোকার এপিআই “কাছের” ধারণার সুবিধা নিতে পারে যাতে ভুল মিথস্ক্রিয়াগুলির কারণে ওভারলেগুলি অদৃশ্য হয়ে না যায়। এটি CSS বৈশিষ্ট্যগুলির সাথে কনফিগার করা যেতে পারে (উদাহরণস্বরূপ, near-radius: 3rem বা বাস near: 3rem), যা বিপরীত :near() কার্যকারিতা আহ্বান করবে (interest এবং loseinterest এই ক্ষেত্রে জাভাস্ক্রিপ্ট ইভেন্ট)।

থমাস তার প্রস্তাবে অন্য একটি ব্যবহার-কেস প্রস্তাব করেছেন: একটি টেনে নেওয়া যায় এমন উপাদানের কাছাকাছি ঘোরাঘুরি করার সময় “পুনর্বিন্যাস করতে টেনে আনুন” প্রম্পট দেখানো। এটি একটি দুর্দান্ত ব্যবহারের ক্ষেত্রে কারণ মাত্র কয়েক মিলিসেকেন্ড আগে টুলটিপ দেখানো টাস্ক টাইমকে কমিয়ে দেবে।

দুর্ভাগ্যবশত, বৈধ এইচটিএমএল (আমার মনে হয়?) দিয়ে এগুলিকে অনুকরণ করতে আপনার অসুবিধা হবে, বেশিরভাগ কারণ <a>বালি <button>s শুধুমাত্র কিছু উপাদান থাকতে পারে।

এর নেতিবাচক দিক :near()

একটি সম্ভাব্য নেতিবাচক দিক হল যে :near() যে ক্ষেত্রে ভাল UI ডিজাইন সঠিক কল হত, সেখানে বিকাশকারীরা দৃশ্যমান বিশৃঙ্খলা কমাতে অলসভাবে জিনিসগুলি লুকিয়ে রাখে, বা বাড়ছে ভিজ্যুয়াল বিশৃঙ্খল (উদাহরণস্বরূপ, অপ্রয়োজনীয় আইকন সহ) কারণ এটি আরও শর্তসাপেক্ষে লুকানো যেতে পারে।

অন্যান্য সম্ভাব্য অপব্যবহারের মধ্যে রয়েছে হিটম্যাপিং, ফিঙ্গারপ্রিন্টিং এবং আক্রমণাত্মক বিজ্ঞাপনের ধরণ। এটি এমনভাবে ব্যবহার করা যেতে পারে যা নেতিবাচকভাবে কর্মক্ষমতা প্রভাবিত করবে। থমাসের প্রস্তাবটি এই অপব্যবহার এবং তাদের পদ্ধতিগুলি নির্দেশ করার জন্য একটি দুর্দান্ত কাজ করে। :near() তাদের ঠেকাতে এটি বাস্তবায়ন করা যেতে পারে।

:near() অ্যাক্সেসিবিলিটি উদ্বেগ

:near() মানে উচিত নয় :hover বা :focus/:focus-visible. আমি মনে করি আপনি যখন সত্যিই এটি সম্পর্কে চিন্তা করেন তখন এটির অনেক কিছুই স্পষ্ট, কিন্তু আমি এখনও সীমানা অতিক্রম করা দেখতে পাচ্ছি। ব্যবহার করার আগে জিজ্ঞাসা করার জন্য একটি ভাল প্রশ্ন :near() হল: “আমরা কি পূর্বনির্ধারিত নাকি অনুমানমূলক?” Preemptive ভাল হতে পারে কিন্তু অনুমান দ্বারা প্রমাণিত এটি সর্বদা খারাপ হবে, কারণ আমরা কখনই চাই না যে ব্যবহারকারীরা ভাবুক যে তারা একটি ইন্টারেক্টিভ উপাদানের উপর নড়াচড়া করছে বা ফোকাস করছে যখন তারা নয় (বা এখনও নয়)। এটি ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি নির্দেশিকাগুলির বিভিন্ন অংশে উল্লেখ করা হয়েছে, তবে বিশেষ করে সাফল্যের মানদণ্ড 2.4.7: ফোকাস ভিজিবল (লেভেল AA)।

একইভাবে, সাফল্যের মানদণ্ড 2.5.8: লক্ষ্য আকার (লেভেল AA) বলে যে ইন্টারেক্টিভ উপাদানগুলি এর চেয়ে ছোট 24ｘ24px তাদের চারপাশে অতিরিক্ত দূরত্ব থাকা উচিত, যা হিসাবে গণনা করা হয় 24px - target width/24px - target heightকিন্তু মান আছে বা নেই :near() কারণগুলি কী হবে তা একটু অস্পষ্ট।

উপসংহারে

এখানে চিন্তা করার জন্য অনেক কিছু আছে, কিন্তু শেষ পর্যন্ত আমি থমাসের প্রস্তাব অনুযায়ী এটি বাস্তবায়িত দেখতে চাই। একথা বলে ডব্লিউসিএজি নির্দেশিকা নিশ্চিত কোনো বাস্তবায়ন শুরু করার আগে কংক্রিট পদক্ষেপ নিন, বিশেষ করে আমরা ইতিমধ্যে যা অর্জন করতে পারি তা বিবেচনা করে :near() করবে (যদিও আরও মার্কআপ এবং সম্ভবত কিছু CSS চালাকি সহ)।

এবং আবার, আমি মনে করি আমাদের “কাছের” ধারণাটিকে একটি ধারণা হিসাবে উপভোগ করা উচিত, যেখানে অন্তর্নিহিত কার্যকারিতাটি Speculative Rules API এবং Interest Invoker API (পরেরটি একটি CSS সম্পত্তি সহ) দ্বারা লাভ করা যেতে পারে। near-radius)

আপনার চিন্তা দয়া করে!

সম্ভবত একটি ব্রাউজারে আসছে :near() আপনি মূলত CSS-Tricks-এ প্রকাশ করেছেন, DigitalOcean পরিবারের অংশ। আপনি নিউজলেটার গ্রহণ করা উচিত.