তুলনা করুন & CompareCaption

ল্যাং অ্যাট্রিবিউটের সাথে শুধুমাত্র একটি ভাষা যুক্ত থাকতে পারে। এর মানে <html> অ্যাট্রিবিউটের শুধুমাত্র একটি ভাষা থাকতে পারে, এমনকি পৃষ্ঠায় একাধিক ভাষা থাকলেও। পৃষ্ঠার প্রাথমিক ভাষায় lang সেট করুন।

করবেন না
<html lang="ar,en,fr,pt">...</html>
একাধিক ভাষা সমর্থিত নয়।
করবেন
<html lang="ar">...</html>
শুধুমাত্র পৃষ্ঠার প্রাথমিক ভাষা সেট করুন। এই ক্ষেত্রে, ভাষাটি আরবি।

বোতামের মতো, লিঙ্কগুলি প্রাথমিকভাবে তাদের পাঠ্য সামগ্রী থেকে তাদের অ্যাক্সেসযোগ্য নাম পায়। একটি লিঙ্ক তৈরি করার সময় একটি চমৎকার কৌশল হল "এখানে" বা "আরো পড়ুন" এর মতো শব্দের পরিবর্তে সবচেয়ে অর্থপূর্ণ পাঠ্যটি লিঙ্কটিতেই রাখা।

যথেষ্ট বর্ণনামূলক নয়
Check out our guide to web performance <a href="/guide">here</a>.
দরকারী বিষয়বস্তু!
Check out <a href="/guide">our guide to web performance</a>.

একটি অ্যানিমেশন লেআউট ট্রিগার কিনা পরীক্ষা করুন

একটি অ্যানিমেশন যা transform ব্যতীত অন্য কিছু ব্যবহার করে একটি উপাদানকে স্থানান্তরিত করে, এটি ধীর হতে পারে। নিম্নলিখিত উদাহরণে, আমি top এবং left অ্যানিমেটিং এবং transform ব্যবহার করে একই ভিজ্যুয়াল ফলাফল অর্জন করেছি।

করবেন না
.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}
করবেন
.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

আপনি নিম্নলিখিত দুটি ভুল উদাহরণে এটি পরীক্ষা করতে পারেন এবং DevTools ব্যবহার করে পারফরম্যান্স অন্বেষণ করতে পারেন।

একই মার্কআপের সাহায্যে, আমরা প্রতিস্থাপন করতে পারি: padding-top: 56.25% aspect-ratio: 16 / 9 , width / height একটি নির্দিষ্ট অনুপাতের aspect-ratio সেট করে।

প্যাডিং-টপ ব্যবহার করে
.container {
  width: 100%;
  padding-top: 56.25%;
}
আকৃতি-অনুপাত ব্যবহার করে
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

padding-top পরিবর্তে aspect-ratio ব্যবহার করা অনেক বেশি স্পষ্ট, এবং প্যাডিং বৈশিষ্ট্যটিকে তার স্বাভাবিক সুযোগের বাইরে কিছু করার জন্য ওভারহল করে না।

হ্যাঁ, এটা ঠিক, আমি প্রতিশ্রুতি একটি ক্রম চেইন reduce ব্যবহার করছি. আমি খুব চালাক . কিন্তু এটি একটি বিট তাই স্মার্ট কোডিং ছাড়া আপনি ভাল বন্ধ.

যাইহোক, উপরেরটিকে একটি অ্যাসিঙ্ক ফাংশনে রূপান্তর করার সময়, এটি খুব ক্রমানুসারে যেতে লোভনীয়:

প্রস্তাবিত নয় - খুব ক্রমিক
async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}
দেখতে অনেক বেশি পরিষ্কার, কিন্তু আমার প্রথম আনা সম্পূর্ণরূপে পড়া না হওয়া পর্যন্ত আমার দ্বিতীয় আনা শুরু হয় না, এবং আরও অনেক কিছু। এটি প্রতিশ্রুতির উদাহরণের তুলনায় অনেক ধীর যা সমান্তরালভাবে ফেচগুলি সম্পাদন করে৷ সৌভাগ্যক্রমে একটি আদর্শ মধ্যম স্থল আছে.
প্রস্তাবিত - সুন্দর এবং সমান্তরাল
function markHandled(...promises) {
  Promise.allSettled(promises);
}

async function logInOrder(urls) {
  // fetch all the URLs in parallel
  const textPromises = urls.map(async (url) => {
    const response = await fetch(url);
    return response.text();
  });

  markHandled(...textPromises);

  // log them in sequence
  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}
এই উদাহরণে, ইউআরএলগুলি সমান্তরালভাবে আনা হয় এবং পড়া হয়, কিন্তু "স্মার্ট" reduce বিটটি একটি স্ট্যান্ডার্ড, বিরক্তিকর, পড়ার জন্য লুপ দিয়ে প্রতিস্থাপিত হয়।

Houdini কাস্টম বৈশিষ্ট্য লেখা

এখানে একটি কাস্টম প্রপার্টি সেট করার একটি উদাহরণ রয়েছে (মনে করুন: CSS ভেরিয়েবল), কিন্তু এখন একটি সিনট্যাক্স (টাইপ), প্রাথমিক মান (ফলব্যাক), এবং ইনহেরিটেন্স বুলিয়ান (এটি কি এর প্যারেন্ট থেকে মানটি উত্তরাধিকার সূত্রে পায় নাকি না?)। এটি করার বর্তমান উপায় হল জাভাস্ক্রিপ্টে CSS.registerProperty() এর মাধ্যমে, কিন্তু Chromium 85 এবং পরবর্তীতে, @property সিনট্যাক্স আপনার CSS ফাইলগুলিতে সমর্থিত হবে:

আলাদা জাভাস্ক্রিপ্ট ফাইল (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});
CSS ফাইলে অন্তর্ভুক্ত (Chromium 85)
@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

এখন আপনি var(--colorPrimary) এর মাধ্যমে অন্য CSS কাস্টম প্রপার্টির মত --colorPrimary অ্যাক্সেস করতে পারবেন। যাইহোক, এখানে পার্থক্য হল যে --colorPrimary শুধুমাত্র একটি স্ট্রিং হিসাবে পড়া হয় না। এটা ডাটা আছে!

CSS backdrop-filter একটি উপাদানে এক বা একাধিক প্রভাব প্রয়োগ করে যা স্বচ্ছ বা স্বচ্ছ। এটি বুঝতে, নীচের চিত্রগুলি বিবেচনা করুন।

ফোরগ্রাউন্ড স্বচ্ছতা নেই
একটি বৃত্তের উপর চাপানো একটি ত্রিভুজ। ত্রিভুজ দিয়ে বৃত্ত দেখা যায় না।
.frosty-glass-pane {
  backdrop-filter: blur(2px);
}
ফোরগ্রাউন্ড স্বচ্ছতা
একটি বৃত্তের উপর চাপানো একটি ত্রিভুজ। ত্রিভুজটি স্বচ্ছ, এর মাধ্যমে বৃত্তটি দেখা যায়।
.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

backdrop-filter ব্যবহার বা সমর্থিত না হলে ওভারল্যাপিং উপাদানগুলি কীভাবে রেন্ডার করা হবে তা বাম দিকের চিত্রটি দেখায়। ডানদিকের ছবিটি backdrop-filter ব্যবহার করে একটি ঝাপসা প্রভাব প্রয়োগ করে। লক্ষ্য করুন যে এটি backdrop-filter ছাড়াও opacity ব্যবহার করে। opacity ছাড়া, অস্পষ্টতা প্রয়োগ করার কিছুই থাকবে না। এটি প্রায় বলার অপেক্ষা রাখে না যে যদি opacity 1 (সম্পূর্ণ অস্বচ্ছ) সেট করা হয় তবে পটভূমিতে কোন প্রভাব পড়বে না।

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

করবেন না
window.addEventListener('beforeunload', (event) => {
  if (pageHasUnsavedChanges()) {
    event.preventDefault();
    return event.returnValue = 'Are you sure you want to exit?';
  }
});
উপরের কোডটি নিঃশর্তভাবে একটি beforeunload শ্রোতাকে যুক্ত করে।
করবেন
function beforeUnloadListener(event) {
  event.preventDefault();
  return event.returnValue = 'Are you sure you want to exit?';
};

// A function that invokes a callback when the page has unsaved changes.
onPageHasUnsavedChanges(() => {
  window.addEventListener('beforeunload', beforeUnloadListener);
});

// A function that invokes a callback when the page's unsaved changes are resolved.
onAllChangesSaved(() => {
  window.removeEventListener('beforeunload', beforeUnloadListener);
});
উপরের কোডটি শুধুমাত্র beforeunload শ্রোতাকে যোগ করে যখন এটি প্রয়োজন হয় (এবং এটি না হলে এটি সরিয়ে দেয়)।

Cache-Control: no-store

Cache-Control: no-store হল একটি HTTP হেডার ওয়েব সার্ভার প্রতিক্রিয়া সেট করতে পারে যা ব্রাউজারকে কোনো HTTP ক্যাশে প্রতিক্রিয়া সংরক্ষণ না করার নির্দেশ দেয়। এটি সংবেদনশীল ব্যবহারকারীর তথ্য সম্বলিত সংস্থানগুলির জন্য ব্যবহার করা উচিত, উদাহরণস্বরূপ লগইনের পিছনে থাকা পৃষ্ঠাগুলি৷

fieldset উপাদান, যার মধ্যে প্রতিটি ইনপুট গ্রুপ রয়েছে ( .fieldset-item ), উপাদানগুলির মধ্যে হেয়ারলাইন সীমানা তৈরি করতে gap: 1px ব্যবহার করছে৷ কোন জটিল সীমান্ত সমাধান!

শূন্যস্থান পূরণ
.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}
সীমান্ত কৌশল
.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

প্রাকৃতিক গ্রিড মোড়ানো

সবচেয়ে জটিল লেআউটটি ম্যাক্রো লেআউট, <main> এবং <form> এর মধ্যে লজিক্যাল লেআউট সিস্টেম।

ইনপুট
<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>
লেবেল
<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

fieldset উপাদান, যার মধ্যে প্রতিটি ইনপুট গ্রুপ রয়েছে ( .fieldset-item ), উপাদানগুলির মধ্যে হেয়ারলাইন সীমানা তৈরি করতে gap: 1px ব্যবহার করছে৷ কোন জটিল সীমান্ত সমাধান!

শূন্যস্থান পূরণ
.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}
সীমান্ত কৌশল
.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

ট্যাব <header> লেআউট

পরবর্তী লেআউট প্রায় একই: আমি উল্লম্ব ক্রম তৈরি করতে ফ্লেক্স ব্যবহার করি।

এইচটিএমএল
<snap-tabs>
  <header>
    <nav></nav>
    <span class="snap-indicator"></span>
  </header>
  <section></section>
</snap-tabs>
সিএসএস
header {
  display: flex;
  flex-direction: column;
}

.snap-indicator লিঙ্কগুলির গ্রুপের সাথে অনুভূমিকভাবে ভ্রমণ করা উচিত এবং এই হেডার লেআউটটি সেই পর্যায়টি সেট করতে সহায়তা করে। এখানে কোন পরম অবস্থান উপাদান!

জেন্টল ফ্লেক্স একটি সত্যকেন্দ্রিক- শুধুমাত্র কৌশল। এটি নরম এবং মৃদু, কারণ place-content: center বিপরীতে, কেন্দ্রীকরণের সময় শিশুদের বাক্সের আকার পরিবর্তন করা হয় না। যতটা সম্ভব আলতো করে, সমস্ত আইটেম স্তুপীকৃত, কেন্দ্রীভূত এবং ফাঁক করা হয়।

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
পেশাদার
  • শুধুমাত্র প্রান্তিককরণ, দিকনির্দেশ এবং বিতরণ পরিচালনা করে
  • সম্পাদনা এবং রক্ষণাবেক্ষণ সবই এক জায়গায়
  • গ্যাপ n শিশুদের মধ্যে সমান ব্যবধানের নিশ্চয়তা দেয়
কনস
  • কোডের বেশিরভাগ লাইন

ম্যাক্রো এবং মাইক্রো উভয় লেআউটের জন্য দুর্দান্ত ।

ব্যবহার

gap যেকোন CSS দৈর্ঘ্য বা শতাংশকে মান হিসাবে গ্রহণ করে।

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}


গ্যাপ 1 দৈর্ঘ্য পাস করা যেতে পারে, যা সারি এবং কলাম উভয়ের জন্য ব্যবহার করা হবে।

শর্টহ্যান্ড
.grid {
  display: grid;
  gap: 10px;
}
একসাথে সারি এবং কলাম উভয় সেট করুন
প্রসারিত
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


গ্যাপ 2 দৈর্ঘ্য পাস করা যেতে পারে, যা সারি এবং কলামের জন্য ব্যবহার করা হবে।

শর্টহ্যান্ড
.grid {
  display: grid;
  gap: 10px 5%;
}
একবারে আলাদাভাবে সারি এবং কলাম উভয় সেট করুন
প্রসারিত
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}