ক্রোম 133 গুডিজ | সিএসএস-ট্রিকস

আমি প্রায়শই ভাবছি এটি ক্রোম দলের হয়ে কাজ করার মতো কী। সর্বশেষতম ব্রাউজার বিল্ডগুলির জন্য আপনাকে অবশ্যই কোনও ধরণের সরকারী-স্তরের সুরক্ষা ছাড়পত্র জারি করতে হবে যা আপনাকে অন্য সবার আগে তাদের উপর চাপ দেওয়ার অনুমতি দেয় এবং সর্বশেষ বৈশিষ্ট্যগুলি প্রদর্শন করে এই র‌্যাড ডেমো নিয়ে আসে। না, আমি, alous র্ষা করছি না, আপনি কেন জিজ্ঞাসা করছেন?

সম্পূর্ণ সম্পর্কযুক্ত, আপনি কি দেখেছেন? ক্রোম 133 এর জন্য নোট প্রকাশ করুন? এটি বর্তমানে বিটাতে রয়েছে, তবে ক্রোম টিম বেশ কয়েকটি নতুন নিবন্ধ প্রকাশ করছে যা বেশ অবিশ্বাস্য ডেমো সহ উপেক্ষা করা শক্ত। আমি বুঝতে পেরেছিলাম যে আমি তাদের এক জায়গায় ঘুরে দেখি।

attr() জনসাধারণের জন্য!

আমরা কিছু সময়ের জন্য সিএসএসে এইচটিএমএল বৈশিষ্ট্যগুলি ব্যবহার করতে সক্ষম হয়েছি, তবে এটি এর সাথে প্রেরণ করা হয়েছে content সম্পত্তি এবং কেবল পার্সড স্ট্রিং।

<h1 data-color="orange">Some text</h1>

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

ব্রামাস দেখিয়েছেন যে কীভাবে আমরা এখন এটি ক্রোম 133 -এ কাস্টম বৈশিষ্ট্য সহ যে কোনও সিএসএস সম্পত্তিতে এটি ব্যবহার করতে পারি। সুতরাং, উদাহরণস্বরূপ, আমরা বৈশিষ্ট্যের মানটি নিতে পারি এবং এটি উপাদানটিতে ব্যবহার করতে পারি color সম্পত্তি:

h1 {
  color: attr(data-color type(<color>), #fff)
}

এটি অবশ্যই একটি ট্রাইট উদাহরণ। তবে এটি এখানে তিনটি চলমান টুকরো রয়েছে তা চিত্রিত করতে সহায়তা করে:

1. বৈশিষ্ট্য (data-color)
2. প্রকার (type(<color>))
3. ফলব্যাক মান (#fff)

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

<div data-size="20">Some text</div>

এখন আমরা into ুকতে পারি data-size উপাদানটির সেট করতে নির্ধারিত মানটি বৈশিষ্ট্যযুক্ত এবং ব্যবহার করুন font-size সম্পত্তি, ভিত্তিক px ইউনিট:

h1 {
  color: attr(data-size px, 16);
}

ফ্যালব্যাক মানটি al চ্ছিক এবং আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে প্রয়োজনীয় নাও হতে পারে।

এটি একটি মন-ফুঁকানো এক। আপনি যদি কখনও কোনও “আটকে” অবস্থায় থাকে তখন যদি আপনি কোনও স্টিকি উপাদানটি স্টাইল করার কোনও উপায় চান তবে আপনি ইতিমধ্যে জানেন যে এরকম কিছু পাওয়া কতটা শীতল। অ্যাডাম আরগিল একটি বর্ণানুক্রমিক তালিকার ক্লাসিক প্যাটার্ন নেয় এবং যখন এটি ভিউপোর্টের শীর্ষে লেগে থাকে তখন চিঠিটি শিরোনামে শৈলীগুলি প্রয়োগ করে। স্ক্রোল স্ন্যাপিং এবং কনটেইনারগুলি স্ক্রোলিংকারী উপাদানগুলির সাথে উপাদানগুলির ক্ষেত্রেও একই কথা।

অন্য কথায়, আমরা যখন উপাদানগুলি “আটকে” থাকে তখন আমরা স্টাইল করতে পারি, যখন সেগুলি “ছিটকে” থাকে এবং যখন তারা “স্ক্রোলেবল” থাকে।

দ্রুত সামান্য উদাহরণ যে আপনি ক্রোমিয়াম ব্রাউজারে খুলতে চান:

সাধারণ ধারণা (এবং এটিই আমি এখনই জানি) হ’ল আমরা একটি ধারক নিবন্ধন করি … আপনি জানেন, একটি ধারক যা আমরা জিজ্ঞাসা করতে পারি। আমরা যে ধারক একটি container-type এটি আমরা যে ধরণের স্ক্রোলিংয়ের সাথে কাজ করছি তার ধরণের সেট করা আছে। এই ক্ষেত্রে, আমরা স্টিকি পজিশনিংয়ের সাথে কাজ করছি যেখানে উপাদানটি পৃষ্ঠার শীর্ষে “লাঠি”।

.sticky-nav {
  container-type: scroll-state;
}

একটি ধারক নিজেই জিজ্ঞাসা করতে পারে না, যাতে মূলত আমরা যে উপাদানটি আটকে রাখতে চাই তার চারপাশে একটি মোড়ক হতে হয়। মেনুগুলি কিছুটা মজার কারণ আমাদের আছে <nav> উপাদান এবং সাধারণত এটি লিঙ্কগুলির একটি আনর্ডার্ড তালিকা দিয়ে স্টাফ করে। সুতরাং, আমাদের <nav> আমরা যে ধারকটি ক্যোয়ারী হতে পারি যেহেতু আমরা কার্যকরভাবে পৃষ্ঠার শীর্ষে একটি আনর্ডার্ড তালিকাটি স্টিক করছি।

<nav class="sticky-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

আমরা সরাসরি স্টিকি যুক্তি রাখতে পারি <nav> যেহেতু এটি প্রযুক্তিগতভাবে আটকে যায় তা ধরে রেখেছে:

.sticky-nav {
  container-type: scroll-state; /* set a scroll container query */
  position: sticky; /* set sticky positioning */
  top: 0; /* stick to the top of the page */
}

আমার ধারণা আমরা ব্যবহার করতে পারি container শর্টহ্যান্ড যদি আমরা একাধিক পাত্রে নিয়ে কাজ করি এবং একটির সাথে একে অপরের থেকে আলাদা করার প্রয়োজন হয় container-name। যেভাবেই হোক না কেন, এখন আমরা একটি ধারক সংজ্ঞায়িত করেছি, আমরা এটি ব্যবহার করে জিজ্ঞাসা করতে পারি @containerআর! এই ক্ষেত্রে, আমরা যে ধরণের ধারকটি আমরা জিজ্ঞাসা করছি তা ঘোষণা করি:

@container scroll-state() { }

এবং আমরা এটি যে রাষ্ট্রটি খুঁজছি তা বলি:

@container scroll-state(stuck: top) {

আমরা যদি মেনুর পরিবর্তে স্টিকি পাদচরণ নিয়ে কাজ করছিলাম তবে আমরা বলতে পারি stuck: bottom পরিবর্তে। তবে কিকারটি একবারে <nav> উপাদান শীর্ষে লেগে থাকে, আমরা এতে শৈলী প্রয়োগ করতে পারি @container ব্লক, এর মতো:

.sticky-nav {
  border-radius: 12px;
  container-type: scroll-state;
  position: sticky;
  top: 0;

  /* When the nav is in a "stuck" state */
  @container scroll-state(stuck: top) {
    border-radius: 0;
    box-shadow: 0 3px 10px hsl(0 0 0 / .25);
    width: 100%;
  }
}

এটি সেখানে অন্য নির্বাচকদের বাসা বাঁধার সময় কাজ করে বলে মনে হয়। সুতরাং, উদাহরণস্বরূপ, নেভিগেশনটি আটকে থাকা অবস্থায় আমরা মেনুতে থাকা লিঙ্কগুলি পরিবর্তন করতে পারি:

.sticky-nav {
  /* Same as before */

  a {
    color: #000;
    font-size: 1rem;
  }

  /* When the nav is in a "stuck" state */
  @container scroll-state(stuck: top) {
    /* Same as before */

    a {
      color: orangered;
      font-size: 1.5rem;
    }
  }
}

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