Chrome 118-এ নতুন

Adriana Jara

আপনার যা জানা দরকার তা এখানে:

• @scope css নিয়মের সাথে একটি উপাদানের মধ্যে নির্দিষ্ট শৈলী ঘোষণা করুন।
• একটি নতুন মিডিয়া বৈশিষ্ট্য আছে: prefers-reduced-transparency .

• DevTools-এর সোর্স প্যানেলে উন্নতি হয়েছে।

• এবং আরো অনেক আছে.

আমি আদ্রিয়ানা জারা। চলুন ডুব দিয়ে দেখি Chrome 118-এ ডেভেলপারদের জন্য নতুন কী রয়েছে৷

CSS @scope নিয়ম।

@scope অ্যাট-রুল ডেভেলপারদের একটি প্রদত্ত স্কোপিং রুটে শৈলীর নিয়ম এবং সেই স্কোপিং রুটের নৈকট্য অনুযায়ী শৈলীর উপাদানগুলিকে সুযোগ দেয়।

@scope সাহায্যে আপনি প্রক্সিমিটির উপর ভিত্তি করে শৈলীগুলিকে ওভাররাইড করতে পারেন, যা সাধারণ সিএসএস শৈলী থেকে ভিন্ন যা শুধুমাত্র উৎসের ক্রম এবং নির্দিষ্টতার উপর নির্ভর করে প্রয়োগ করা হয়। নিম্নলিখিত উদাহরণে, দুটি থিম আছে।

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

সুযোগ ছাড়াই, প্রয়োগ করা শৈলীটি শেষ ঘোষিত।

.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

সুযোগের সাথে আপনার নেস্টেড উপাদান থাকতে পারে এবং যে শৈলীটি প্রযোজ্য তা হল নিকটতম পূর্বপুরুষের জন্য।

@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

স্কোপ আপনাকে দীর্ঘ, জটিল শ্রেণির নাম লেখা থেকে বাঁচায় এবং বড় প্রকল্পগুলি পরিচালনা করা এবং নামকরণের দ্বন্দ্ব এড়ানো সহজ করে তোলে।

<div class="first-container">
  <h1 class="first-container__main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1>
</div>

.first-container__main-title {
  color: grey;
}

.second-container__main-title {
  color: mediumturquoise;
}

<div class="first-container">
  <h1 class="main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="main-title"> I'm the main title, but somewhere else</h1>
</div>

@scope(.first-container){
  .main-title {
   color: grey;
  }
}
@scope(.second-container){
  .main-title {
   color: mediumturquoise;
  }
}

স্কোপের সাথে আপনি নির্দিষ্ট কিছু জিনিস স্টাইল না করেও একটি উপাদানকে স্টাইল করতে পারেন যা ভিতরে নেস্ট করা আছে। একটি উপায়ে আপনার "গর্ত" থাকতে পারে যেখানে স্কোপড শৈলী প্রযোজ্য নয়।

নিম্নলিখিত উদাহরণের মত, আমরা পাঠ্যের জন্য শৈলী প্রয়োগ করতে পারি এবং নিয়ন্ত্রণগুলি বাদ দিতে পারি বা এর বিপরীতে।

<div class="component">
  <div class="purple">
    <h1>Drink water</h1>
    <p class="purple">hydration is important</p>
  </div>
  <div class="click-here">
    <p>not in scope</p>
    <button>click here</button>
  </div>

  <div class="purple">
    <h1 class="purple">Exercise</h1>
    <p class="purple">move it move it</p>
  </div>

  <div class="link-here">
    <p>Excluded from scope</p>
    <a href="#"> link here </a>
  </div>
</div>

@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

আরও তথ্যের জন্য CSS @scope at-rule দিয়ে আপনার নির্বাচকদের নাগালের সীমাবদ্ধ নিবন্ধটি দেখুন।

prefers-reduced-transparency মিডিয়া বৈশিষ্ট্য

আমরা ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে মিডিয়া কোয়েরি ব্যবহার করি যা ব্যবহারকারীর পছন্দ এবং ডিভাইসের অবস্থার সাথে খাপ খায়। এই ক্রোম সংস্করণটি একটি নতুন মান যুক্ত করে যা ব্যবহারকারীর অভিজ্ঞতাকে মানিয়ে নিতে ব্যবহার করা যেতে পারে: prefers-reduced-transparency .

একটি নতুন মান যা আপনি মিডিয়া প্রশ্নের সাথে পরীক্ষা করতে পারেন তা হল prefers-reduced-transparency যা ডেভেলপারদের OS-তে স্বচ্ছতার হ্রাসের জন্য ব্যবহারকারী-নির্বাচিত পছন্দগুলির সাথে ওয়েব সামগ্রী মানিয়ে নিতে দেয়, যেমন macOS-এ স্বচ্ছতা হ্রাস করুন৷ বৈধ বিকল্পগুলি reduce বা no-preference ।

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

এবং, আপনি DevTools এর সাথে এটি দেখতে কেমন তা পরীক্ষা করতে পারেন:

আরও তথ্যের জন্য prefers-reduced-transparency ডকুমেন্টেশন চেকআউট করুন।

সংশোধন: এই নিবন্ধের একটি পূর্ববর্তী সংস্করণ এই রিলিজে থাকা একটি নতুন scripting মিডিয়া বৈশিষ্ট্য উল্লেখ করেছে। এটি আসলে 120 সংস্করণে থাকবে।

DevTools-এ সোর্স প্যানেলের উন্নতি

সোর্স প্যানেলে DevTools-এর নিম্নলিখিত উন্নতিগুলি রয়েছে: ওয়ার্কস্পেস বৈশিষ্ট্যটি ধারাবাহিকতা উন্নত করেছে, সবচেয়ে উল্লেখযোগ্যভাবে, অন্যান্য UI টেক্সটের সাথে Sources > Filesystem pane-এর নাম পরিবর্তন করে Workspace- এ, Sources > Workspace এছাড়াও আপনি DevTools-এ করা পরিবর্তনগুলিকে সরাসরি আপনার সাথে সিঙ্ক করতে দেয় উৎস ফাইল।

এছাড়াও, আপনি এখন সোর্স প্যানেলের বাম দিকে প্যানগুলিকে টেনে এবং ড্রপ করে পুনরায় সাজাতে পারেন, এবং উত্স প্যানেলটি এখন নিম্নলিখিত স্ক্রিপ্ট প্রকারের মধ্যে ইনলাইন জাভাস্ক্রিপ্ট প্রিন্ট-প্রিন্ট করতে পারে: module , importmap , speculationrules এবং importmap এবং speculationrules এর সিনট্যাক্স হাইলাইট করতে পারে স্ক্রিপ্ট প্রকার, উভয়ই JSON ধারণ করে।

Chrome 118 DevTools আপডেটে আরও জানতে DevTools-এ নতুন কী আছে তা দেখুন।

এবং আরো!

অবশ্যই আরো অনেক আছে.

• WebUSB API এখন ব্রাউজার এক্সটেনশন দ্বারা নিবন্ধিত পরিষেবা কর্মীদের কাছে উন্মুক্ত হয়েছে যা ডেভেলপারদের এক্সটেনশন ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে API ব্যবহার করার অনুমতি দেয়৷

• বিকাশকারীদের অর্থপ্রদানের অনুরোধের প্রবাহে ঘর্ষণ কমাতে সহায়তা করার জন্য, আমরা Payment Request এবং Secure Payment Confirmation ব্যবহারকারী সক্রিয়করণের প্রয়োজনীয়তা সরিয়ে দিচ্ছি।

• Chrome এর রিলিজ চক্র ছোট হয়ে আসছে , স্থিতিশীল সংস্করণগুলি প্রতি তিন সপ্তাহে প্রকাশ করা হবে, Chrome 119 থেকে শুরু করে যা এখানে তিন সপ্তাহের মধ্যে থাকবে৷

আরও পড়া

এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। Chrome 118-এ অতিরিক্ত পরিবর্তনের জন্য নীচের লিঙ্কগুলি দেখুন৷

• Chrome DevTools এ নতুন কি আছে (118)
• Chrome 118 অপসারণ এবং অপসারণ
• Chrome 118-এর জন্য ChromeStatus.com আপডেট
• Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা
• ক্রোম রিলিজ ক্যালেন্ডার

সদস্যতা

আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷

Yo soy Adriana Jara, এবং Chrome 119 রিলিজ হওয়ার সাথে সাথে, Chrome-এ নতুন কী আছে তা বলতে আমি এখানেই থাকব!

Adriana Jara

আপনার যা জানা দরকার তা এখানে:

• @scope css নিয়মের সাথে একটি উপাদানের মধ্যে নির্দিষ্ট শৈলী ঘোষণা করুন।
• একটি নতুন মিডিয়া বৈশিষ্ট্য আছে: prefers-reduced-transparency .

• DevTools-এর সোর্স প্যানেলে উন্নতি হয়েছে।

• এবং আরো অনেক আছে.

আমি আদ্রিয়ানা জারা। চলুন ডুব দিয়ে দেখি Chrome 118-এ ডেভেলপারদের জন্য নতুন কী রয়েছে৷

CSS @scope নিয়ম।

@scope অ্যাট-রুল ডেভেলপারদের একটি প্রদত্ত স্কোপিং রুটে শৈলীর নিয়ম এবং সেই স্কোপিং রুটের নৈকট্য অনুযায়ী শৈলীর উপাদানগুলিকে সুযোগ দেয়।

@scope সাহায্যে আপনি প্রক্সিমিটির উপর ভিত্তি করে শৈলীগুলিকে ওভাররাইড করতে পারেন, যা সাধারণ সিএসএস শৈলী থেকে ভিন্ন যা শুধুমাত্র উৎসের ক্রম এবং নির্দিষ্টতার উপর নির্ভর করে প্রয়োগ করা হয়। নিম্নলিখিত উদাহরণে, দুটি থিম আছে।

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

সুযোগ ছাড়াই, প্রয়োগ করা শৈলীটি শেষ ঘোষিত।

.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

সুযোগের সাথে আপনার নেস্টেড উপাদান থাকতে পারে এবং যে শৈলীটি প্রযোজ্য তা হল নিকটতম পূর্বপুরুষের জন্য।

@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

স্কোপ আপনাকে দীর্ঘ, জটিল শ্রেণির নাম লেখা থেকে বাঁচায় এবং বড় প্রকল্পগুলি পরিচালনা করা এবং নামকরণের দ্বন্দ্ব এড়ানো সহজ করে তোলে।

<div class="first-container">
  <h1 class="first-container__main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1>
</div>

.first-container__main-title {
  color: grey;
}

.second-container__main-title {
  color: mediumturquoise;
}

<div class="first-container">
  <h1 class="main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="main-title"> I'm the main title, but somewhere else</h1>
</div>

@scope(.first-container){
  .main-title {
   color: grey;
  }
}
@scope(.second-container){
  .main-title {
   color: mediumturquoise;
  }
}

স্কোপের সাথে আপনি নির্দিষ্ট কিছু জিনিস স্টাইল না করেও একটি উপাদানকে স্টাইল করতে পারেন যা ভিতরে নেস্ট করা আছে। একটি উপায়ে আপনার "গর্ত" থাকতে পারে যেখানে স্কোপড শৈলী প্রযোজ্য নয়।

নিম্নলিখিত উদাহরণের মত, আমরা পাঠ্যের জন্য শৈলী প্রয়োগ করতে পারি এবং নিয়ন্ত্রণগুলি বাদ দিতে পারি বা এর বিপরীতে।

<div class="component">
  <div class="purple">
    <h1>Drink water</h1>
    <p class="purple">hydration is important</p>
  </div>
  <div class="click-here">
    <p>not in scope</p>
    <button>click here</button>
  </div>

  <div class="purple">
    <h1 class="purple">Exercise</h1>
    <p class="purple">move it move it</p>
  </div>

  <div class="link-here">
    <p>Excluded from scope</p>
    <a href="#"> link here </a>
  </div>
</div>

@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

আরও তথ্যের জন্য CSS @scope at-rule দিয়ে আপনার নির্বাচকদের নাগালের সীমাবদ্ধ নিবন্ধটি দেখুন।

prefers-reduced-transparency মিডিয়া বৈশিষ্ট্য

আমরা ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে মিডিয়া কোয়েরি ব্যবহার করি যা ব্যবহারকারীর পছন্দ এবং ডিভাইসের অবস্থার সাথে খাপ খায়। এই ক্রোম সংস্করণটি একটি নতুন মান যুক্ত করে যা ব্যবহারকারীর অভিজ্ঞতাকে মানিয়ে নিতে ব্যবহার করা যেতে পারে: prefers-reduced-transparency .

একটি নতুন মান যা আপনি মিডিয়া প্রশ্নের সাথে পরীক্ষা করতে পারেন তা হল prefers-reduced-transparency যা ডেভেলপারদের OS-তে স্বচ্ছতার হ্রাসের জন্য ব্যবহারকারী-নির্বাচিত পছন্দগুলির সাথে ওয়েব সামগ্রী মানিয়ে নিতে দেয়, যেমন macOS-এ স্বচ্ছতা হ্রাস করুন৷ বৈধ বিকল্পগুলি reduce বা no-preference ।

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

এবং, আপনি DevTools এর সাথে এটি দেখতে কেমন তা পরীক্ষা করতে পারেন:

আরও তথ্যের জন্য prefers-reduced-transparency ডকুমেন্টেশন চেকআউট করুন।

সংশোধন: এই নিবন্ধের একটি পূর্ববর্তী সংস্করণ এই রিলিজে থাকা একটি নতুন scripting মিডিয়া বৈশিষ্ট্য উল্লেখ করেছে। এটি আসলে 120 সংস্করণে থাকবে।

DevTools-এ সোর্স প্যানেলের উন্নতি

সোর্স প্যানেলে DevTools-এর নিম্নলিখিত উন্নতিগুলি রয়েছে: ওয়ার্কস্পেস বৈশিষ্ট্যটি ধারাবাহিকতা উন্নত করেছে, সবচেয়ে উল্লেখযোগ্যভাবে, অন্যান্য UI টেক্সটের সাথে Sources > Filesystem pane-এর নাম পরিবর্তন করে Workspace- এ, Sources > Workspace এছাড়াও আপনি DevTools-এ করা পরিবর্তনগুলিকে সরাসরি আপনার সাথে সিঙ্ক করতে দেয় উৎস ফাইল।

এছাড়াও, আপনি এখন সোর্স প্যানেলের বাম দিকে প্যানগুলিকে টেনে এবং ড্রপ করে পুনরায় সাজাতে পারেন, এবং উত্স প্যানেলটি এখন নিম্নলিখিত স্ক্রিপ্ট প্রকারের মধ্যে ইনলাইন জাভাস্ক্রিপ্ট প্রিন্ট-প্রিন্ট করতে পারে: module , importmap , speculationrules এবং importmap এবং speculationrules এর সিনট্যাক্স হাইলাইট করতে পারে স্ক্রিপ্ট প্রকার, উভয়ই JSON ধারণ করে।

Chrome 118 DevTools আপডেটে আরও জানতে DevTools-এ নতুন কী আছে তা দেখুন।

এবং আরো!

অবশ্যই আরো অনেক আছে.

• WebUSB API এখন ব্রাউজার এক্সটেনশন দ্বারা নিবন্ধিত পরিষেবা কর্মীদের কাছে উন্মুক্ত হয়েছে যা ডেভেলপারদের এক্সটেনশন ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে API ব্যবহার করার অনুমতি দেয়৷

• বিকাশকারীদের অর্থপ্রদানের অনুরোধের প্রবাহে ঘর্ষণ কমাতে সহায়তা করার জন্য, আমরা Payment Request এবং Secure Payment Confirmation ব্যবহারকারী সক্রিয়করণের প্রয়োজনীয়তা সরিয়ে দিচ্ছি।

• Chrome এর রিলিজ চক্র ছোট হয়ে আসছে , স্থিতিশীল সংস্করণগুলি প্রতি তিন সপ্তাহে প্রকাশ করা হবে, Chrome 119 থেকে শুরু করে যা এখানে তিন সপ্তাহের মধ্যে থাকবে৷

আরও পড়া

এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। Chrome 118-এ অতিরিক্ত পরিবর্তনের জন্য নীচের লিঙ্কগুলি দেখুন৷

• Chrome DevTools এ নতুন কি আছে (118)
• Chrome 118 অপসারণ এবং অপসারণ
• Chrome 118-এর জন্য ChromeStatus.com আপডেট
• Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা
• ক্রোম রিলিজ ক্যালেন্ডার

সদস্যতা

আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷

Yo soy Adriana Jara, এবং Chrome 119 রিলিজ হওয়ার সাথে সাথে, Chrome-এ নতুন কী আছে তা বলতে আমি এখানেই থাকব!