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

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

Adam Argyle

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

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 واحدة الخلية. بعد تجميعها في الأعلى لبعضها البعض، واستخدام ضبط ومحاذاة الخصائص لضبط موضعها.

.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

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

/* 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

المصدر