স্টাইলিং ::সার্চ-টেক্সট এবং অন্যান্য হাইলাইট-ওয়াই সিউডো-এলিমেন্ট | css-ট্রিকস

byট্রাম্পআরএক্স
স্টাইলিং ::সার্চ-টেক্সট এবং অন্যান্য হাইলাইট-ওয়াই সিউডো-এলিমেন্ট | css-ট্রিকস


chrome 144 সম্প্রতি পাঠানো হয়েছে ::search-textযা এখন অনেক হাইলাইট-সম্পর্কিত ছদ্ম উপাদানগুলির মধ্যে একটি। এটি পৃষ্ঠার মধ্যে খুঁজে পাওয়া পাঠ্য নির্বাচন করে, এটি সেই পাঠ্য যা আপনি যখন এটি করেন তখন হাইলাইট হয় Ctrl/অনুমতি + চ– একটি পৃষ্ঠায় কিছু অনুসন্ধান করুন এবং একটি মিল পাওয়া যায়।

ডিফল্ট হিসাবে, ::search-text ম্যাচগুলি হলুদ এবং বর্তমান লক্ষ্য (::search-text:current) কমলা, কিন্তু ::search-text আমাদের এটি পরিবর্তন করতে সক্ষম করে।

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

হাইলাইট ছদ্ম উপাদান বিভিন্ন ধরনের

ছদ্ম নির্বাচক নির্বাচন করে… নোট
::search-text পৃষ্ঠায় পৃষ্ঠার মিল খুঁজুন ::search-text:current বর্তমান লক্ষ্য নির্বাচন করে
::target-text টেক্সট টুকরা টেক্সট টুকরা URL প্যারামিটার ব্যবহার করে প্রোগ্রাম্যাটিক হাইলাইট করার অনুমতি দেয়। যদি আপনি একটি সার্চ ইঞ্জিন দ্বারা একটি ওয়েবসাইটে উল্লেখ করা হয়, এটি টেক্সট টুকরা ব্যবহার করতে পারে, এই কারণে ::target-text সহজেই বিভ্রান্ত হয় ::search-text.
::selection পয়েন্টার ব্যবহার করে পাঠ্য হাইলাইট করা হয়েছে
::highlight() জাভাস্ক্রিপ্টের কাস্টম হাইলাইট API দ্বারা সংজ্ঞায়িত কাস্টম হাইলাইট
::spelling-error ভুল বানান শব্দ এটি মূলত শুধুমাত্র সম্পাদনাযোগ্য বিষয়বস্তুর ক্ষেত্রে প্রযোজ্য
::grammar-error ভুল ব্যাকরণ এটি মূলত শুধুমাত্র সম্পাদনাযোগ্য বিষয়বস্তুর ক্ষেত্রে প্রযোজ্য

এবং এর সম্পর্কে ভুলবেন না যাক হয় HTML উপাদান, যা আমি নীচের ডেমোতে ব্যবহার করছি।

ছদ্ম উপাদান হাইলাইট কেমন হওয়া উচিত?

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

আমি নিশ্চিত যে এটি সমাধান করার অনেক উপায় আছে (আমি শুনতে চাই “চ্যালেঞ্জ গৃহীত” মন্তব্যে), কিন্তু আমি যে সেরা সমাধান নিয়ে এসেছি তা হল আপেক্ষিক রঙের সিনট্যাক্স ব্যবহার করা। আমি তাদের উভয়ের সাথে একটি ভুল মোড় নিলাম। background-clip: text এবং backdrop-filter: invert(1) ছদ্ম উপাদানগুলি হাইলাইট করার ক্ষেত্রে কেন অনেক CSS বৈশিষ্ট্য সীমার বাইরে তা বোঝার আগে:

body {
  --background: #38003c;
  background: var(--background);

  mark,
  ::selection,
  ::target-text,
  ::search-text {
    /* Match color to background */
    color: var(--background);

    /* Convert to RGB then subtract channel value from channel maximum (255) */
    background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b));
  }
}

আপনার ব্রাউজার এখনও এটি সমর্থন নাও করতে পারে, তাই এখানে একটি ভিডিও দেখায় যে হাইলাইট করা পাঠ্যটি পটভূমির রঙ পরিবর্তনের সাথে কীভাবে খাপ খায়।

এখানে যা ঘটছে তা হল আমি কন্টেইনারের পটভূমির রঙকে RGB ফর্ম্যাটে রূপান্তর করছি এবং তারপর প্রতিটি চ্যানেলের মান বিয়োগ করছি (r, gএবং b) সর্বাধিক চ্যানেল মান সহ 255প্রতিটি চ্যানেল এবং সামগ্রিক রঙ উল্টানো। এই রঙটি হাইলাইটিংয়ের পটভূমির রঙ হিসাবে সেট করা হয়, এটি নিশ্চিত করে যে কোনও পরিস্থিতিতে এটি আলাদা হয় এবং নতুন CodePen Slideverse-এর জন্য ধন্যবাদ, আপনি এটিকে কার্যকরভাবে দেখতে ডেমোর সাথে তালগোল পাকিয়ে ফেলতে পারেন। আপনি আরজিবি ব্যতীত অন্য রঙের ফর্ম্যাটের সাথে এটি করতে সক্ষম হতে পারেন, তবে আরজিবি সবচেয়ে সহজ।

তাই এই ব্যবহারযোগ্যতা কভার, কিন্তু অ্যাক্সেসিবিলিটি সম্পর্কে কি?

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

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

উল্লেখ্য যে বিভিন্ন ধরনের হাইলাইট ছদ্ম-উপাদানগুলিও সুস্পষ্ট কারণে দৃশ্যমানভাবে স্বতন্ত্র হওয়া উচিত, তবে দুটি ভিন্ন প্রকার একে অপরকে ওভারল্যাপ করলে তা নয় (উদাহরণস্বরূপ, ব্যবহারকারী সার্চ-ইন-পৃষ্ঠার মাধ্যমে বর্তমানে মিলে যাওয়া পাঠ্য নির্বাচন করে)। সুতরাং, নীচের সংশোধিত কোড স্নিপেটে, mark, ::selection, ::target-textএবং ::search-text প্রত্যেকের ব্যাকগ্রাউন্ড একটু আলাদা।

আমি চলে গেছি mark অপরিবর্তিত r এর মান ::selection যেমন ছিল g এর মান ::target-text যেমন ছিল, এবং b এর মান ::search-text যেমনটি ছিল, সেই শেষ তিনটিতে তিনটির পরিবর্তে কেবল দুটি চ্যানেল বিপরীত হয়েছে। তারা এখন রঙে ভিন্ন (কিন্তু এখনও উল্টো দেখা যাচ্ছে), এবং একটি আলফা মান সহ 70% (100% জন্য ::search-text:current), তারা একে অপরের সাথে মিশে যায় যাতে আমরা দেখতে পারি যে প্রতিটি হাইলাইট কোথায় শুরু হয় এবং শেষ হয়:

body {
  --background: #38003c;
  background: var(--background);

  mark,
  ::selection,
  ::target-text,
  ::search-text {
    color: var(--background);
  }

  mark {
    /* Invert all channels */
    background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b) / 70%);
  }

  ::selection {
    /* Invert all channels but R */
    background: rgb(from var(--background) r calc(255 - g) calc(255 - b) / 70%);
  }

  ::target-text {
    /* Invert all channels but G */
    background: rgb(from var(--background) calc(255 - r) g calc(255 - b) / 70%);
  }

  ::search-text {
    /* Invert all channels but B */
    background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 70%);
    
    &:current {
      /* Invert all channels but B, but without transparency */
      background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 100%);
    }
  }
}

::spelling-error এবং ::grammar-error এগুলিকে এগুলি থেকে বাদ দেওয়া হয়েছে কারণ তাদের নিজস্ব চাক্ষুষ বৈশিষ্ট্য রয়েছে (যথাক্রমে লাল আন্ডারলাইন এবং সবুজ আন্ডারলাইন, সাধারণত একটি সম্পাদনাযোগ্য উপাদানের নিরপেক্ষ পটভূমির বিপরীতে যেমন