Chrome 104-এ নতুন

পিট লেপেজ

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

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

অঞ্চল ক্যাপচার সহ একটি ক্রপ এলাকা নির্দিষ্ট করুন

getDisplayMedia() বর্তমান ট্যাব থেকে একটি ভিডিও স্ট্রিম তৈরি করা সম্ভব করে তোলে। কিন্তু, এমন কিছু সময় আছে যখন আপনি সম্পূর্ণ ট্যাবটি চান না, এর একটি ছোট অংশ। এখন পর্যন্ত, এটি করার একমাত্র উপায় ছিল প্রতিটি ভিডিও ফ্রেম ম্যানুয়ালি ক্রপ করা।

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

প্রধান বিষয়বস্তু এলাকা এবং একটি ক্রস-অরিজিন iframe হাইলাইট করে একটি ওয়েব অ্যাপ সমন্বিত একটি ব্রাউজার উইন্ডোর স্ক্রিনশট।
মূল বিষয়বস্তুর ক্ষেত্রটি নীল এবং ক্রস-অরিজিন আইফ্রেমটি লাল।

এটি ব্যবহার করতে, ভাগ করার জন্য উপাদানটি নির্বাচন করুন, তারপর সেই উপাদানটির উপর ভিত্তি করে একটি নতুন CropTarget তৈরি করুন৷ এরপর, getDisplayMedia() কল করে স্ক্রিন শেয়ারিং শুরু করুন। এটি ব্যবহারকারীকে তাদের স্ক্রিন শেয়ার করার অনুমতির জন্য অনুরোধ করে। তারপর, track.cropTo() কল করুন এবং আগে তৈরি করা cropTarget পাস করুন।

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

আরও বিশদ বিবরণের জন্য অঞ্চল ক্যাপচারের সাথে আরও ভাল ট্যাব ভাগ করে নেওয়া দেখুন।

লেভেল 4 সিনট্যাক্স এবং মূল্যায়ন সহ সহজ মিডিয়া প্রশ্ন

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

Chrome 104 মিডিয়া ক্যোয়ারিগুলির জন্য সমর্থন যোগ করে - স্তর 4 - সিনট্যাক্স এবং মূল্যায়ন , আপনাকে সাধারণ গাণিতিক তুলনা অপারেটরগুলি ব্যবহার করে মিডিয়া প্রশ্নগুলি লিখতে অনুমতি দেয়৷

সুতরাং 400 এবং 600 পিক্সেলের মধ্যে একটি ভিউপোর্ট নির্দেশ করার জন্য এরকম কিছুর পরিবর্তে:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

এটি এভাবে লেখা যেতে পারে:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

মিডিয়া ক্যোয়ারীগুলিকে কম ভার্বোস করার পাশাপাশি, নতুন সিনট্যাক্স আরও নির্ভুল হতে পারে। min- এবং max- ক্যোয়ারীগুলি অন্তর্ভুক্ত, উদাহরণস্বরূপ: min-width: 400px পরীক্ষা। নতুন সিনট্যাক্স আপনাকে আপনি যা বোঝাতে চান তা সম্পর্কে আরও স্পষ্ট হতে দেয়।

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

এটি ইতিমধ্যেই ফায়ারফক্সে সমর্থিত, এবং একটি পোস্টসিএসএস প্লাগইন রয়েছে যা ব্রাউজার সামঞ্জস্য নিশ্চিত করে পুরানো সিনট্যাক্সে নতুন সিনট্যাক্স পুনরায় লিখবে!

আরও বিশদ বিবরণের জন্য ক্রোম 104-এ রেঞ্জ মিডিয়া প্রশ্নের জন্য রেচেলের নিবন্ধটি নতুন সিনট্যাক্স দেখুন।

শেয়ার্ড এলিমেন্ট ট্রানজিশন নতুন অরিজিন ট্রায়াল শুরু করে

প্ল্যাটফর্ম নির্দিষ্ট অ্যাপে সাধারণত বিভিন্ন দৃশ্যের মধ্যে মসৃণ রূপান্তর থাকে, তারা দেখতে সুন্দর, তারা ব্যবহারকারীকে প্রসঙ্গে রাখে এবং তারা অভিজ্ঞতাকে আরও পারফরম্যান্স অনুভব করতে সহায়তা করে। যেখানে ওয়েবে, একটি সম্পূর্ণ নেভিগেশন কঠোর হতে পারে, এবং কখনও কখনও একটি ক্ষণস্থায়ী ফাঁকা স্ক্রীনের অর্থ হতে পারে। একটি একক পৃষ্ঠার অ্যাপ্লিকেশনের জন্য, এটি আরও ভাল হতে পারে, তবে রূপান্তর এখনও কঠিন।

শেয়ার্ড এলিমেন্ট ট্রানজিশন, Chrome 104-এ একটি নতুন অরিজিন ট্রায়াল শুরু করে, ট্রানজিশনগুলি ক্রস-ডকুমেন্ট (উদাহরণস্বরূপ একটি মাল্টি-পেজ অ্যাপে), বা ইন্ট্রা-ডকুমেন্ট (উদাহরণস্বরূপ একটি সিঙ্গেল) হোক না কেন, আপনাকে মসৃণ রূপান্তর প্রদান করতে দেয় পৃষ্ঠা অ্যাপ)।

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

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

হুডের নিচে, শেয়ার্ড এলিমেন্ট ট্রানজিশন CSS অ্যানিমেশন ব্যবহার করে, যাতে আপনি প্রভাবে বিবর্ণ থেকে পরিবর্তন করতে পারেন, স্লাইড করতে বা আপনি যা চান তা করতে পারেন।

আমি এইমাত্র পৃষ্ঠটি স্ক্র্যাচ করেছি, তাই জ্যাকের ভিডিওটি দেখুন ওয়েবে পৃষ্ঠার রূপান্তর আনয়ন করুন বা ব্যাখ্যাকারীতে ডুব দিন৷

এবং আরো!

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

  • যখন কুকিজ একটি সুস্পষ্ট Expires বা Max-Age বৈশিষ্ট্যের সাথে সেট করা হয়, তখন মানটি এখন 400 দিনের বেশি সীমাবদ্ধ থাকবে না।
  • মাল্টি-স্ক্রিন উইন্ডো প্লেসমেন্ট এপিআই-তে বর্ধিতকরণ রয়েছে।
  • এবং overflow-clip-margin সিএসএস প্রপার্টি নির্দিষ্ট করে যে কোন উপাদানের বিষয়বস্তু ক্লিপ করার আগে কতদূর পেইন্ট করা যাবে।

আরও পড়া

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

সাবস্ক্রাইব

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

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