أدوات CSS قوية وثابتة ومناسبة للاستخدام اليوم
أعتقد أنّ كل مطوّر واجهة أمامية يجب أن يعرف كيفية استخدام طلبات
الاستعلام عن الحاوية،
وإنشاء تجربة للف سريع، وتجنُّب استخدام
position: absolute
مع
شبكة،
وإنشاء دائرة بسرعة، واستخدام التدرّج
للطبقات،
والوصول إلى المزيد من المستخدمين باستخدام عدد أقل من العناصر من خلال سمات
المنطقية. فيما يلي نظرة عامة
سريعة على كل من هذه التوقعات.
1. طلب بحث للحاوية
إنّ ميزة CSS الأكثر طلبًا على مدار 10 سنوات متتالية أصبحت الآن مستقرة في جميع المتصفّحات ومتاحة لاستخدامك في طلبات البحث عن العرض في عام 2023.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
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
scroll-snap-align
scroll-snap-stop
overscroll-behavior
3- كدسة الشبكة
تجنَّب استخدام موضع مطلق مع شبكة CSS ذات خلية واحدة. بعد تجميعها فوق بعضها، استخدِم سمتَي justify وalign لتحديد مواضعها.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
4. دائرة سريعة
هناك الكثير من الطرق لإنشاء دوائر في CSS، ولكن هذه هي الطريقة الأكثر بساطة.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio
5- التحكّم في الأسعار المتغيرة باستخدام @layer
يمكن أن تساعد طبقات السلسلة المتصاعدة في إدراج الأسعار المتغيرة التي تم اكتشافها أو إنشاؤها لاحقًا في المكان المناسب في السلسلة المتصاعدة مع المجموعة الأصلية من الأسعار المتغيرة.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
بعد ذلك، في ملف مختلف تمامًا، يتم تحميله في وقت عشوائي آخر، أضِف صيغة جديدة إلى طبقة الزر كما لو كانت معروضة مع باقي الملفات طوال الوقت.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer
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;
}