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

أداة CSS فعّالة ومستقرة يمكنك استخدامها اليوم

Adam Argyle

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

1. طلب حاوية

على مدار 10 سنوات متتالية، كانت ميزة CSS الأكثر طلبًا هي الاستقرار في جميع المتصفّحات، وهي متاحة لك الآن لاستخدامها في طلبات البحث عن العرض في عام 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: 144.
  • Edge: 18.
  • Firefox: 150.
  • Safari: 16.

Source

3- كدسة على شكل شبكة

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

.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