يمكنك الآن استخدام لغة 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;
}
}
@containercontainer2. محاذاة التمرير
إنّ تجارب التمرير المنظّم بشكل جيد تُميز تجربتك عن بقية التطبيقات، وتُعتبر سرعة الانتقال أثناء التمرير الطريقة المثالية لمطابقة تجربة المستخدم أثناء التنقّل في النظام مع توفير نقاط توقّف مفيدة.
.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-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3- كومة على شكل مربّعات
تجنَّب تحديد موضع مطلق باستخدام شبكة CSS من خلية واحدة. بعد تجميعها فوق بعضها البعض، استخدِم ضبط ومحاذاة الخصائص لوضعها.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. دائرة سريعة
هناك الكثير من الطرق لإنشاء الدوائر في CSS، ولكن هذا بالتأكيد هو الحد الأدنى.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5- التحكّم في الصيغ باستخدام @layer
يمكن أن تساعد الطبقات المتتالية في إدراج المتغيرات التي يتم اكتشافها أو إنشاؤها لاحقًا، في المكان المناسب ضمن مجموعة المتغيرات الأصلية مع المجموعة الأصلية من الصيغ.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
بعد ذلك، في ملف مختلف تمامًا، يتم تحميله في وقت عشوائي آخر، ألحِق صيغة جديدة إلى طبقة الزر كما لو كانت هناك مع باقي العناصر طوال هذا الوقت.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. قلة التذكر والوصول إلى مزيد من المستخدمين باستخدام الخصائص المنطقية
تذكَّر نموذجًا واحدًا جديدًا للمربّع ولا داعي للقلق بشأن تغيير المساحة المتروكة لليسار واليمين أو هامش أوضاع الكتابة العالمية واتجاهات المستندات مرة أخرى.
اضبط الأنماط، بدءًا من الخصائص المادية إلى الأنماط المنطقية مثل
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;
}