6 مقتطفات CSS يجب أن يعرفها كل مطور واجهة أمامية في عام 2023

توفّر أداة Toolbelt خدمة CSS فعّالة وفعالة وثابتة والتي يمكنك استخدامها اليوم.

Adam Argyle

أعتقد أنّ كل مطوّر للواجهة الأمامية يجب أن يعرف كيفية استخدام طلبات البحث في الحاوية، وإنشاء تجربة للانتقال عند التمرير، وتجنُّب position: absolute باستخدام الشبكة، وضرب دائرة بسرعة واستخدام طبقات متتالية، والوصول إلى المزيد من الطلبات بمعدل أقل من خلال الخصائص المنطقية. فيما يلي نظرة عامة سريعة على كل من هذه التوقعات.

1. طلب بحث عن حاوية

إنّ ميزة CSS الأكثر طلبًا لمدة 10 سنوات على التوالي مستقرة الآن في مختلَف المتصفحات، ويمكن استخدامها مع طلبات البحث ذات العرض المخصّص في عام 2023.

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

دعم المتصفح

• 105
• 105
• 110
• 16

المصدر

container

توافق المتصفّح

• 105
• 105
• 110
• 16

المصدر

2. محاذاة مواضع التمرير

تُميّز تجارب الانتقال السلس للأعلى أو للأسفل تجربة تطبيقك عن غيرها، والانتقال المفاجئ للأسفل أو للأعلى هو الطريقة المثالية لمطابقة تجربة المستخدم في الانتقال للأعلى أو للأسفل في النظام مع توفير نقاط توقف مفيدة.

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

تعرَّف على مزيد من المعلومات عن إمكانات ميزة CSS هذه في هذه المجموعة الكبيرة والملهمة من مشاريع Codepen التي تتضمّن حوالي 25 عرضًا توضيحيًا.

scroll-snap-type

توافق المتصفّح

• 69
• 79
• 99
• 11

المصدر

scroll-snap-align

توافق المتصفّح

• 69
• 79
• 68
• 11

المصدر

scroll-snap-stop

توافق المتصفّح

• 75
• 79
• 103
• 15

المصدر

overscroll-behavior

دعم المتصفح

• 63
• 18
• 59
• 16

المصدر

3- كومة شبكية

تجنَّب الموضع المطلق باستخدام شبكة CSS واحدة الخلية. بعد تجميعها فوق بعضها، استخدِم سمتَي justify وalign لتحديد مواضعها.

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

grid

دعم المتصفح

• 57
• 16
• 52
• 10.1

المصدر

4. دائرة سريعة

هناك الكثير من الطرق لإنشاء دوائر في CSS، ولكن هذه هي الطريقة الأكثر بساطة.

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

aspect-ratio

توافق المتصفّح

• 88
• 88
• 89
• 15

المصدر

5- التحكّم في الأسعار المتغيرة باستخدام @layer

يمكن أن تساعد طبقات السلسلة المتصاعدة في إدراج الأسعار المتغيرة التي تم اكتشافها أو إنشاؤها لاحقًا في المكان المناسب في السلسلة المتصاعدة مع المجموعة الأصلية من الأسعار المتغيرة.

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

بعد ذلك، في ملف مختلف تمامًا، تم تحميله في وقت عشوائي آخر، أضِف صيغة جديدة إلى طبقة الزر كما لو كانت موجودة مع بقية الصيغ في هذه المدّة الكاملة.

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

توافق المتصفّح

• 99
• 99
• 97
• 15.4

المصدر

6- حفظ عدد أقل من الخصائص وزيادة مدى الوصول إلى الجمهور باستخدام الخصائص المنطقية

احفظ هذا نموذج المربّع الجديد جيدًا، ولن داعي للقلق بعد الآن بشأن تغيير الحشو أو الهامش الأيمن والأيسر في أوضاع الكتابة واتجاهات المستندات الدولية. يمكنك تعديل الأنماط بدءًا من الخصائص المادية إلى الأنماط المنطقية مثل padding-inline وmargin-inline وinset-inline، وسيجري المتصفّح الآن عملية التعديل.

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}

padding-inline

توافق المتصفّح

• 87
• 87
• 66
• 14.1

المصدر

margin-block

توافق المتصفّح

• 87
• 87
• 66
• 14.1

المصدر

inset-inline

توافق المتصفّح

• 87
• 87
• 63
• 14.1

المصدر