توفّر أداة Toolbelt خدمة CSS فعّالة وفعالة وثابتة والتي يمكنك استخدامها اليوم.
أعتقد أن كل مطوّر للواجهة الأمامية يجب أن يعرف كيفية استخدام الحاوية
أو طلبات البحث،
إنشاء تجربة للانتقال، وتجنَّب
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;
}
}
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 واحدة الخلية. بعد تجميعها في الأعلى لبعضها البعض، واستخدام ضبط ومحاذاة الخصائص لضبط موضعها.
.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
Cascade الطبقات يمكن أن يساعد في إدراج خيارات المنتج أو تم إنشاؤها لاحقًا، في المكان الصحيح في التسلسل المجموعة الأصلية للمتغيرات.
/* 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; }