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

أدوات 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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

container

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 99.
  • Safari: 11.

Source

scroll-snap-align

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 68.
  • Safari: 11.

Source

scroll-snap-stop

Browser Support

  • Chrome: 75.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 15.

Source

overscroll-behavior

Browser Support

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Source

3- كدسة الشبكة

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

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

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

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

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

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

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

Browser Support

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 89.
  • Safari: 15.

Source

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

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

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

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

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

Browser Support

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4.

Source

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

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Source

margin-block

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Source

inset-inline

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 63.
  • Safari: 14.1.

Source