المقارنة والمقارنة بين الترجمة والشرح

لا يمكن أن ترتبط سمة 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، واستكشاف الأداء باستخدام أدوات مطوّري البرامج.

باستخدام الترميز نفسه، يمكننا استبدال padding-top: 56.25% بـ aspect-ratio: 16 / 9، وضبط aspect-ratio على نسبة محدّدة من width / height.

استخدام padding-top
.container {
  width: 100%;
  padding-top: 56.25%;
}
استخدام سمة aspect-ratio
.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 بحلقة for عادية ومملة وقابلة للقراءة.

كتابة الخصائص المخصّصة في Houdini

في ما يلي مثال على ضبط سمة مخصّصة (مثل متغيّر CSS)، ولكن الآن مع بنية (النوع) والقيمة الأولية (العنصر الاحتياطي) والقيمة المنطقية للاكتساب (هل يكتسب القيمة من العنصر الرئيسي أم لا؟). الطريقة الحالية لإجراء ذلك هي من خلال CSS.registerProperty() في JavaScript، ولكن في الإصدار 85 من Chromium والإصدارات الأحدث، سيتم استخدام بنية @property في ملفات CSS:

ملف JavaScript منفصل (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});
مضمّنة في ملف CSS (Chromium 85)
@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

يمكنك الآن الوصول إلى --colorPrimary مثل أيّ سمة مخصّصة أخرى في CSS، وذلك من خلال var(--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. يُرجى العلم أنّه يستخدم opacity بالإضافة إلى backdrop-filter. بدون 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 أفقيًا مع مجموعة الروابط، ويساعد .snap-indicator تنسيق العنوان هذا في إعداد هذه المرحلة. لا تتضمّن هذه الصفحة أي عناصر ذات موضع مطلق.

إنّ Gentle Flex هي استراتيجية أكثر دقة تركّز على المركز فقط. إنّه ناعم ولطيف، لأنّه بخلاف place-content: center، لا يتم تغيير أحجام مربّعات الأطفال أثناء التوسيع. يتم تجميع جميع العناصر معًا في وسط الشاشة مع ترك مسافة بينها قدر الإمكان.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
الإيجابيات
  • لا تتعامل إلا مع المحاذاة والاتجاه والتوزيع
  • تعديلات المحتوى وصيانتها في مكان واحد
  • يضمن مقياس Gap المسافة المتساوية بين n طفل
السلبيات
  • معظم سطور التعليمات البرمجية

مثالية لكل من التنسيقات الكبيرة والصغيرة

الاستخدام

تقبل gap أي طول أو نسبة مئوية في CSS كقيمة.

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


يمكن تمرير طول واحد للفجوة، وسيتم استخدامه لكل من الصف والعمود.

الكتابة المختصرة
.grid {
  display: grid;
  gap: 10px;
}
 ضبط الصفوف والأعمدة معًا في آنٍ واحد
القسم موسّع
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


يمكن تمرير طولَين إلى الفجوة، وسيتم استخدامهما للصف والعمود.

الكتابة المختصرة
.grid {
  display: grid;
  gap: 10px 5%;
}
 ضبط كل من الصفوف والأعمدة بشكل منفصل في آنٍ واحد
القسم موسّع
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}