Chrome 90 এ নতুন

পিট লেপেজ

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

  • CSS overflow সম্পত্তির জন্য একটি নতুন মান আছে।
  • বৈশিষ্ট্য নীতি API এর নাম পরিবর্তন করে অনুমতি নীতিতে রাখা হয়েছে৷
  • এবং সরাসরি HTML এ Shadow DOM প্রয়োগ এবং ব্যবহার করার একটি নতুন উপায় আছে।
  • 1990-এর দশকে আমি প্রায় ঠিক এইরকম বেশ কয়েকটি জ্যাকেটের মালিক ছিলাম।
  • এবং, আরও অনেক কিছু আছে।

আমি পিট লেপেজ , এবং আমি Chrome 90-এ ডেভেলপারদের জন্য 411 পেয়েছি, এটি 1990 এর স্টাইলে করছি!

overflow: clip

CSS অসাধারণ

সিএসএস হল সব এবং চিপস একটি ব্যাগ! কিন্তু, আমি মনে করি প্রত্যেক ওয়েব ডেভেলপার এমন কিছু দেখেছেন এবং অনুভব করেছেন যা কিছু সময়ে বিশ্রীভাবে উপচে পড়ে। ওভারফ্লো পরিচালনা করার বিভিন্ন উপায় সম্পর্কে সিএসএস ট্রিক্সের একটি দুর্দান্ত পোস্ট রয়েছে, উদাহরণস্বরূপ, overflow: hidden , বা auto ।

সিএসএস ওভারফ্লো স্পেকে , একটি নতুন clip প্রপার্টি রয়েছে যা hidden মতোই কাজ করে। 

.overflow-clip {
  overflow: clip;
}
টেক্সট CSS সহ বর্গাকার বক্সটি দুর্দান্ত, যেখানে বাক্সের বাইরে দুর্দান্ত উপচে পড়ে

overflow: clip আপনার জন্য প্রোগ্রাম্যাটিক স্ক্রোলিং সহ বাক্সের জন্য যেকোনো ধরনের স্ক্রলিং প্রতিরোধ করা সম্ভব করে তোলে। তার মানে বাক্সটিকে একটি স্ক্রোল পাত্র হিসাবে বিবেচনা করা হয় না; এটি একটি নতুন বিন্যাস প্রসঙ্গ শুরু করে না। আপনার যদি এটির প্রয়োজন হয়, আপনি overflow-x এবং overflow-y মাধ্যমে একটি একক অক্ষে ক্লিপিং প্রয়োগ করতে পারেন।

ওহ, এবং FYI - overflow-clip-margin রয়েছে, যা আপনাকে ক্লিপ সীমানা প্রসারিত করতে দেয়। এটি এমন ক্ষেত্রে কার্যকর যেখানে কালি ওভারফ্লো আছে যা দৃশ্যমান হওয়া উচিত। 

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
টেক্সট CSS সহ বর্গাকার বক্সটি দুর্দান্ত, যেখানে বাক্সের বাইরে দুর্দান্ত উপচে পড়ে

overflow: clip ইন অ্যাকশন https://petele-css-is-awesome.glitch.me/ এ

বৈশিষ্ট্য নীতি এখন অনুমতি নীতি

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

যদি আপনার কোড, বা আপনি যে কোনো তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করেন তা আপনার পূর্বনির্বাচিত নিয়ম লঙ্ঘন করে, ব্রাউজারটি আরও ভাল UX দিয়ে আচরণটিকে ওভাররাইড করে বা শুধু বলে, "হাতে কথা বলুন", APIকে সম্পূর্ণভাবে ব্লক করে।

Chrome 90 থেকে শুরু করে, বৈশিষ্ট্য নীতি API-এর নাম পাল্টানো হবে অনুমতি নীতি , এবং HTTP শিরোনামের সাথে এর নামকরণ করা হয়েছে। একই সময়ে, সম্প্রদায়টি HTTP এর জন্য স্ট্রাকচার্ড ফিল্ড ভ্যালুর উপর ভিত্তি করে একটি নতুন সিনট্যাক্সে স্থির হয়েছে।

Chrome 90 এবং পরবর্তী 

Permissions-Policy: geolocation=()

Chrome 89 এবং তার আগের 

Feature-Policy: geolocation 'none'

আপনি যদি আপনার সাইটে এটি কীভাবে ব্যবহার করতে আগ্রহী হন, তাহলে বৈশিষ্ট্য নীতির ভূমিকা দেখুন।

ঘোষণামূলক ছায়া DOM

Shadow DOM , ওয়েব কম্পোনেন্ট স্ট্যান্ডার্ডের অংশ, একটি নির্দিষ্ট DOM সাবট্রিতে CSS শৈলী স্কোপ করার একটি উপায় প্রদান করে এবং সেই সাবট্রিটিকে নথির বাকি অংশ থেকে বিচ্ছিন্ন করে। এখন পর্যন্ত, Shadow DOM ব্যবহার করার একমাত্র উপায় ছিল জাভাস্ক্রিপ্ট ব্যবহার করে একটি শ্যাডো রুট তৈরি করা।

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

এটি ক্লায়েন্ট-সাইড রেন্ডারিংয়ের জন্য ভাল কাজ করে, তবে সার্ভার সাইড রেন্ডারিংয়ের ক্ষেত্রে এতটা ভাল নয় যেখানে সার্ভার জেনারেটেড এইচটিএমএলে শ্যাডো রুট প্রকাশ করার উপায় নেই। কিন্তু, ক্রোম 90 থেকে শুরু করে, ঘোষণামূলক ছায়া DOM-এর সাথে, আপনি যেতে পারেন। আপনি শুধুমাত্র HTML ব্যবহার করে শ্যাডো রুট তৈরি করতে পারেন।

একটি ঘোষণামূলক শ্যাডো রুট হল একটি <template> উপাদান যার একটি shadowroot বৈশিষ্ট্য রয়েছে। এটি এইচটিএমএল পার্সার দ্বারা সনাক্ত করা হয়েছে এবং অবিলম্বে এর মূল উপাদানের ছায়া রুট হিসাবে প্রয়োগ করা হয়েছে।

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

এই DOM ট্রিতে বিশুদ্ধ HTML মার্কআপ লোড করার ফলাফল:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

এটি আমাদেরকে স্থির HTML-এ Shadow DOM এর এনক্যাপসুলেশন এবং স্লট প্রজেকশনের সুবিধা দেয়। শ্যাডো রুট সহ পুরো ট্রি তৈরি করতে কোনো জাভাস্ক্রিপ্টের প্রয়োজন নেই।

আরও বিশদ বিবরণের জন্য web.dev-এ ঘোষণামূলক ছায়া DOM দেখুন।

এবং আরো

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

এইচটিটিপিএস সমর্থন করে এমন সাইটগুলি পরিদর্শনকারী ব্যবহারকারীদের জন্য গোপনীয়তা এবং এমনকি লোডিং গতি উন্নত করতে, Chrome এর ঠিকানা বার ডিফল্টরূপে https:// ব্যবহার করবে ৷ এবং আপনি যদি HTTP থেকে HTTPS-এ একটি স্বয়ংক্রিয় পুনঃনির্দেশ সেট আপ না করে থাকেন তবে এটি করার জন্য এখন একটি দুর্দান্ত সময় হবে।

এবং একটি AV1 এনকোডার Chrome ডেস্কটপে শিপিং করছে যা WebRTC ইন্টিগ্রেশনের সাথে ভিডিও কনফারেন্সিংয়ের জন্য বিশেষভাবে অপ্টিমাইজ করা হয়েছে।

আরও পড়া

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

সদস্যতা

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

আমি পিট লেপেজ, এবং ক্রোম 91 রিলিজ হওয়ার সাথে সাথে, আমি আপনাকে বলতে এখানে থাকব যে Chrome-এ নতুন কী আছে!

একটি বিশেষ চিৎকার

ক্রোমে নিউ-এর এই 1990-এর থিমযুক্ত পর্বের শুটিং করতে আমি অনেক মজা পেয়েছি। এই ধারণাটির জন্য এবং 1990-এর সময়কে উন্মুক্ত করতে সাহায্যকারী আশ্চর্যজনক লোকদের একত্রিত করার জন্য শন মীহানকে অনেক ধন্যবাদ।

জিডিএস ডিজাইন

  • ফোলা আকিনোলা
  • ডেরেক বাস
  • ক্রিস্টোফার বোডেল
  • নিক ক্রুসিক
  • ক্রিস ওয়াকার

সাউন্ড ডিজাইন এবং অতিরিক্ত সঙ্গীত

  • ব্রায়ান গর্ডন

এবং অবশ্যই, Loren Borja, Lee Carruthers, এবং Lukas Holcek যারা আমার Chrome-এর সমস্ত নতুন ভিডিওতে কাজ করে এবং আমাকে বাস্তবে আমার থেকে আরও ভালো দেখায়। ধন্যবাদ!