مقایسه & مقایسه کپشن

ویژگی lang فقط می تواند یک زبان مرتبط با آن داشته باشد. این بدان معناست که ویژگی <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));
  }
}

می‌توانید این را در دو مثال Glitch زیر آزمایش کنید و عملکرد را با استفاده از DevTools بررسی کنید.

با همان نشانه‌گذاری، می‌توانیم: padding-top: 56.25% با aspect-ratio: 16 / 9 جایگزین کنیم، aspect-ratio به نسبت مشخصی از width / height تنظیم کنیم.

با استفاده از padding-top
.container {
  width: 100%;
  padding-top: 56.25%;
}
استفاده از نسبت ابعاد
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

استفاده از aspect-ratio به جای padding-top بسیار واضح تر است و خاصیت padding را برای انجام کاری خارج از محدوده معمول آن اصلاح نمی کند.

بله، درست است، من 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);
  }
}
در این مثال، URL ها به صورت موازی واکشی و خوانده می شوند، اما بیت reduce "هوشمند" با یک حلقه استاندارد، خسته کننده و قابل خواندن جایگزین می شود.

نوشتن خواص سفارشی هودینی

در اینجا مثالی از تنظیم یک ویژگی سفارشی (تفکر کنید: متغیر CSS)، اما اکنون با یک نحو (نوع)، مقدار اولیه (fallback) و بولین وراثت (آیا مقدار را از والد خود به ارث می برد یا نه؟) آورده شده است. روش فعلی برای انجام این کار از طریق CSS.registerProperty() در جاوا اسکریپت است، اما در Chromium 85 و نسخه‌های جدیدتر، syntax @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 فقط به عنوان یک رشته خوانده نمی شود. داده دارد!

backdrop-filter CSS یک یا چند افکت را روی عنصری که شفاف یا شفاف است اعمال می کند. برای درک آن، تصاویر زیر را در نظر بگیرید.

بدون شفافیت پیش زمینه
مثلثی که روی یک دایره قرار گرفته است. دایره را نمی توان از طریق مثلث دید.
.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>

طرح بعدی تقریباً یکسان است: من از flex برای ایجاد نظم عمودی استفاده می کنم.

HTML
<snap-tabs>
  <header>
    <nav></nav>
    <span class="snap-indicator"></span>
  </header>
  <section></section>
</snap-tabs>
CSS
header {
  display: flex;
  flex-direction: column;
}

.snap-indicator باید به صورت افقی همراه با گروه پیوندها حرکت کند و این طرح هدر به تنظیم آن مرحله کمک می کند. هیچ عنصری مطلقاً در اینجا وجود ندارد!

Gentle Flex یک استراتژی واقعی تر است که فقط در مرکز قرار دارد. نرم و ملایم است، زیرا بر خلاف 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%;
}