Chrome 106-এ নতুন

পিট লেপেজ
আদ্রিয়ানা জারা

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

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

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

নতুন Intl APIs

Intl APIs একটি স্থানীয় বিন্যাসে বিষয়বস্তু প্রদর্শন করতে সাহায্য করে।

অন্যান্য Intl API-এর মতো, এটি সিস্টেমে বোঝা স্থানান্তরিত করে-তাই আপনাকে প্রতিটি ব্যবহারকারীর কাছে জটিল স্থানীয়করণ কোড পাঠাতে বা বজায় রাখতে হবে না।

এপিআই জানে যে মুদ্রার প্রতীক কোথায় যায়, তারিখ এবং সময় কীভাবে ফর্ম্যাট করতে হয় বা একটি তালিকা কম্পাইল করে।

Chrome 106 নতুন সংখ্যা বিন্যাসের কার্যকারিতা যোগ করে।

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

একটি মূল্য পরিসীমা প্রদর্শন করা প্রয়োজন? formatRange আপনাকে কভার করেছে।

একটি নতুন numberFormat অবজেক্ট তৈরি করুন, style এবং অন্যান্য বিকল্পগুলি এবং কতগুলি সংখ্যা দেখাতে হবে তা প্রদান করুন।

তারপর ফরম্যাট করা স্ট্রিং পেতে formatRange() কল করুন।

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

দুই দশমিক স্থানের নির্ভুলতার সাথে একটি সংখ্যাকে পাঁচের নিকটতম বৃদ্ধিতে রাউন্ড করতে চান? কোন সমস্যা নেই।

minimumFractionDigits , এবং roundingIncrement নির্দিষ্ট করুন, তারপর format() কল করুন।

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

এমনকি আপনি ব্রাউজারকে trailingZeroDisplay এর সাথে trailing zeros অন্তর্ভুক্ত করতে বলতে পারেন, দামের জন্য খুবই সহায়ক।

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

আরও তথ্যের জন্য MDN-এ Intl নম্বর ফর্ম্যাট ডক্স দেখুন।

পপ-আপ API UI গুলিকে সহজ করে তোলে, সেই সময়গুলির জন্য যখন আপনাকে কেবলমাত্র আপনার ব্যবহারকারীর সামনে তথ্য রাখতে হবে৷

popup অ্যাট্রিবিউট, স্বয়ংক্রিয়ভাবে উপাদানটিকে সাইটের শীর্ষ স্তরে নিয়ে আসে এবং দৃশ্যমানতা টগল করতে সহজ নিয়ন্ত্রণ প্রদান করে। আপনার জন্য পজিশনিং, স্ট্যাকিং এলিমেন্ট, ফোকাস বা কীবোর্ড ইন্টারঅ্যাকশন নিয়ে আর উদ্বিগ্ন হবেন না। সর্বোপরি এটির জন্য শূন্য জাভাস্ক্রিপ্ট প্রয়োজন।

শুধুমাত্র নিম্নলিখিত স্নিপেটের সাথে API অন্যান্য সমস্ত সামগ্রীর উপরে উপাদান রেন্ডার করার যত্ন নেয় এবং ব্যবহারকারীর ইনপুট এবং ফোকাস পরিচালনা পরিচালনা করে।

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

ডিফল্টরূপে, ব্যবহারকারীরা ESC কী বা অন্যান্য উপাদানে ক্লিক করার মতো অঙ্গভঙ্গি দিয়ে পপআপ বন্ধ করতে পারে।

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

আরও উদাহরণ এবং API বিকল্পগুলির জন্য Jhey এর নিবন্ধটি দেখুন।

সহজে আপনার ব্যবহারকারীদের সময়মত তথ্য দিতে মূল পরীক্ষার জন্য সাইন আপ করুন . আপনি কি মনে করেন তা আমাদের জানান।

নতুন CSS বৈশিষ্ট্য

দুটি নতুন CSS বৈশিষ্ট্য রয়েছে যা ইন্টারপকে উন্নত করে এবং আশা করি আপনার জীবনকে একটু সহজ করে তুলবে।

শহরে একটি নতুন দৈর্ঘ্য ইউনিট আছে: ic পার্টিতে যোগ দিচ্ছে। ic ch এর অনুরূপ। কিন্তু ic বিশেষভাবে ব্যবহৃত হয় ভাষাগুলিতে লেখা পাঠ্যের জন্য যেগুলি আইডিওগ্রাম ব্যবহার করে, মূলত এটি এই অক্ষরের প্রস্থ বা উচ্চতার উপর ভিত্তি করে দৈর্ঘ্য পরিমাপ করে [বিন্দু কোথাও] যার অর্থ জল।

এটি পাঠ্যের আকারের জন্য ডিজাইন করা একটি ইউনিট, যা আপনাকে পাঠযোগ্যতা উন্নত করতে প্রস্থ সীমিত করার অনুমতি দেয় এবং এটি পাঠ্যের আকার নির্বিশেষে অনুমানযোগ্য নিয়ন্ত্রণ দেয়।

উদাহরণস্বরূপ আপনি যদি একটি কন্টেইনারের max-width নির্ধারণ করেন, আসুন 10ic-কে বলি, আপনি জানেন যে কন্টেইনারে সর্বাধিক 10টি পূর্ণ প্রস্থের গ্লিফ থাকবে, ফন্ট-সাইজ যাই হোক না কেন। নিম্নলিখিত উদাহরণে এটি পরীক্ষা করে দেখুন:

grid-template-columns এবং grid-template-rows জন্য ইন্টারপোলেশনের জন্য CSS গ্রিড সমর্থন আসছে, এটি 106-এর জন্য পরিকল্পনা করা হয়েছিল, কিন্তু বিলম্বিত হয়েছে এবং Chrome 107-এ চালু হবে, আপনি এখনও Chrome বিটাতে এটি ব্যবহার করে দেখতে পারেন। এখানে একটি উদাহরণ হিসাবে Bramus এর কোড আছে:

এবং আরো!

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

  • আমরা ব্যবহারকারী এজেন্ট হ্রাস পরিকল্পনার পঞ্চম ধাপ শুরু করছি।
  • HTTP2 পুশ এবং স্থায়ী কোটা প্রকারের সমর্থন বাতিল করা হচ্ছে।
  • এবং CSS প্রপার্টি hyphenate-character এখন উপসর্গবিহীন উপলব্ধ।

আরও পড়া

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

সদস্যতা

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

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

,

পিট লেপেজ
আদ্রিয়ানা জারা

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

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

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

নতুন Intl APIs

Intl APIs একটি স্থানীয় বিন্যাসে বিষয়বস্তু প্রদর্শন করতে সাহায্য করে।

অন্যান্য Intl API-এর মতো, এটি সিস্টেমে বোঝা স্থানান্তরিত করে-তাই আপনাকে প্রতিটি ব্যবহারকারীর কাছে জটিল স্থানীয়করণ কোড পাঠাতে বা বজায় রাখতে হবে না।

এপিআই জানে যে মুদ্রার প্রতীক কোথায় যায়, তারিখ এবং সময় কীভাবে ফর্ম্যাট করতে হয় বা একটি তালিকা কম্পাইল করে।

Chrome 106 নতুন সংখ্যা বিন্যাসের কার্যকারিতা যোগ করে।

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

একটি মূল্য পরিসীমা প্রদর্শন করা প্রয়োজন? formatRange আপনাকে কভার করেছে।

একটি নতুন numberFormat অবজেক্ট তৈরি করুন, style এবং অন্যান্য বিকল্পগুলি এবং কতগুলি সংখ্যা দেখাতে হবে তা প্রদান করুন।

তারপর ফরম্যাট করা স্ট্রিং পেতে formatRange() কল করুন।

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

দুই দশমিক স্থানের নির্ভুলতার সাথে একটি সংখ্যাকে পাঁচের নিকটতম বৃদ্ধিতে রাউন্ড করতে চান? কোন সমস্যা নেই।

minimumFractionDigits , এবং roundingIncrement নির্দিষ্ট করুন, তারপর format() কল করুন।

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

এমনকি আপনি ব্রাউজারকে trailingZeroDisplay এর সাথে trailing zeros অন্তর্ভুক্ত করতে বলতে পারেন, দামের জন্য খুবই সহায়ক।

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

আরও তথ্যের জন্য MDN-এ Intl নম্বর ফর্ম্যাট ডক্স দেখুন।

পপ-আপ API UI গুলিকে সহজ করে তোলে, সেই সময়গুলির জন্য যখন আপনাকে কেবলমাত্র আপনার ব্যবহারকারীর সামনে তথ্য রাখতে হবে৷

popup অ্যাট্রিবিউট, স্বয়ংক্রিয়ভাবে উপাদানটিকে সাইটের শীর্ষ স্তরে নিয়ে আসে এবং দৃশ্যমানতা টগল করতে সহজ নিয়ন্ত্রণ প্রদান করে। আপনার জন্য পজিশনিং, স্ট্যাকিং এলিমেন্ট, ফোকাস বা কীবোর্ড ইন্টারঅ্যাকশন নিয়ে আর উদ্বিগ্ন হবেন না। সর্বোপরি এটির জন্য শূন্য জাভাস্ক্রিপ্ট প্রয়োজন।

শুধুমাত্র নিম্নলিখিত স্নিপেটের সাথে API অন্যান্য সমস্ত সামগ্রীর উপরে উপাদান রেন্ডার করার যত্ন নেয় এবং ব্যবহারকারীর ইনপুট এবং ফোকাস পরিচালনা পরিচালনা করে।

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

ডিফল্টরূপে, ব্যবহারকারীরা ESC কী বা অন্যান্য উপাদানে ক্লিক করার মতো অঙ্গভঙ্গি দিয়ে পপআপ বন্ধ করতে পারে।

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

আরও উদাহরণ এবং API বিকল্পগুলির জন্য Jhey এর নিবন্ধটি দেখুন।

সহজে আপনার ব্যবহারকারীদের সময়মত তথ্য দিতে মূল পরীক্ষার জন্য সাইন আপ করুন . আপনি কি মনে করেন তা আমাদের জানান।

নতুন CSS বৈশিষ্ট্য

দুটি নতুন CSS বৈশিষ্ট্য রয়েছে যা ইন্টারপকে উন্নত করে এবং আশা করি আপনার জীবনকে একটু সহজ করে তুলবে।

শহরে একটি নতুন দৈর্ঘ্য ইউনিট আছে: ic পার্টিতে যোগ দিচ্ছে। ic ch এর অনুরূপ। কিন্তু ic বিশেষভাবে ব্যবহৃত হয় ভাষাগুলিতে লেখা পাঠ্যের জন্য যেগুলি আইডিওগ্রাম ব্যবহার করে, মূলত এটি এই অক্ষরের প্রস্থ বা উচ্চতার উপর ভিত্তি করে দৈর্ঘ্য পরিমাপ করে [বিন্দু কোথাও] যার অর্থ জল।

এটি পাঠ্যের আকারের জন্য ডিজাইন করা একটি ইউনিট, যা আপনাকে পাঠযোগ্যতা উন্নত করতে প্রস্থ সীমিত করার অনুমতি দেয় এবং এটি পাঠ্যের আকার নির্বিশেষে অনুমানযোগ্য নিয়ন্ত্রণ দেয়।

উদাহরণস্বরূপ আপনি যদি একটি কন্টেইনারের max-width নির্ধারণ করেন, আসুন 10ic-কে বলি, আপনি জানেন যে কন্টেইনারে সর্বাধিক 10টি পূর্ণ প্রস্থের গ্লিফ থাকবে, ফন্ট-সাইজ যাই হোক না কেন। নিম্নলিখিত উদাহরণে এটি পরীক্ষা করে দেখুন:

grid-template-columns এবং grid-template-rows জন্য ইন্টারপোলেশনের জন্য CSS গ্রিড সমর্থন আসছে, এটি 106-এর জন্য পরিকল্পনা করা হয়েছিল, কিন্তু বিলম্বিত হয়েছে এবং Chrome 107-এ চালু হবে, আপনি এখনও Chrome বিটাতে এটি ব্যবহার করে দেখতে পারেন। এখানে একটি উদাহরণ হিসাবে Bramus এর কোড আছে:

এবং আরো!

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

  • আমরা ব্যবহারকারী এজেন্ট হ্রাস পরিকল্পনার পঞ্চম ধাপ শুরু করছি।
  • HTTP2 পুশ এবং স্থায়ী কোটা প্রকারের সমর্থন বাতিল করা হচ্ছে।
  • এবং CSS প্রপার্টি hyphenate-character এখন উপসর্গবিহীন উপলব্ধ।

আরও পড়া

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

সদস্যতা

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

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