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

يمكن ربط لغة واحدة فقط بسمة 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.

استخدام المساحة المتروكة للأعلى
.container {
  width: 100%;
  padding-top: 56.25%;
}
استخدام نسبة العرض إلى الارتفاع
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

ويكون استخدام السمة aspect-ratio بدلاً من padding-top أكثر وضوحًا، ولا يؤدي إلى تعديل خاصية المساحة المتروكة لتنفيذ إجراء خارج نطاقها المعتاد.

نعم، هذا صحيح، أستخدم 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 بوحدة تخزين عادية قابلة للقراءة ومملة وقابلة للقراءة.

كتابة خصائص 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
<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>

التخطيط التالي متماثل تقريبًا: أستخدم المرونة لإنشاء ترتيب عمودي.

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 أي length (طول) CSS أو percentage كقيمة.

.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%;
}