المستقبل الـ CSS اليوم ⚡
تقنيات CSS الحديثة التي يمكننا استخدامها اليوم.
Thibaud Colas
,
الأهداف
- بدون أدوات 🔥
- المزيد بأقل
- دعم متصفح رائع
الشرائح: thib.me/tbx-css/
0بدون أدوات؟
الأدوات حيثما كانت ضرورية.
- لا يزال يستخدم التدقيق: Prettier, Stylelint.
- كذلك لا يزال يستخدم أدوات التوافق والأداء: Autoprefixer, cssnano.
- كتابة الصياغة الحديثة بفضل postcss-preset-env.
الشرائح: thib.me/tbx-css/
1المزيد بأقل؟
CSS الأصلي دون التنازل عن التعبير
- تقع المواقع المتشابهة معًا
- ليس الآف الأسطر من الشيفرة
- لا تجاوزات
دعم متصفح رائع؟
دعم المتصفحات القديمة حتى لا يضطر المستخدمون لتحديث أجهزتهم.
- أوبرا ميني (1%)
- IE11 (0.5%)
- سفاري 12-14 (0.5%)
- متصفح أندرويد 4.4.4 (0.3%)
- كروم 69-89 (1.2%)
- فايرفوكس 3.6
المزيد بأقل، مستمر
أشياء في CSS تأخذ الكثير من الأسطر دون سبب
- تصميم متجاوب - تجنب استفسارات الوسائط
- أنماط التفاعل (hover, focus, touch, etc.)
- دعم من اليمين إلى اليسار
- الأنماط الفاتحة والداكنة
- أنماط التباين / وضع التباين العالي لويندوز
- أوراق الأنماط للطباعة
نماذج CSS: التخطيط
- Flexbox و Grid 🐸
- الخصائص والقيم المنطقية
.slide-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-inline-start: 5rem;
}
الخطوط
- مكدس الخطوط النظامية
- وحدات نافذة العرض الديناميكية
clamp()
body {
font-family: "Segoe UI","system-ui","Roboto","Helvetica Neue","Arial",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-size: clamp(1rem, calc(2dvmax + 1rem), 5dvmin);
}
الألوان
جميعها!
- متغيرات CSS
oklch()
color-mix()
- ألوان النظام
--light-dark: color-mix(in oklch, CanvasText 10%, Canvas 50%);
--dark-light: color-mix(in oklch, Canvas 10%, CanvasText 50%);
color: color-mix(in oklch, var(--light-dark) 20%, CanvasText);
عرض توضيحي!
عرض المصدر
هل يعمل؟
نعم ولا
- هذا يظهر وعدًا ولكن لا تزال هناك الكثير من العقبات.
- من المحتمل أن يكون عمليًا للمشروعات الصغيرة خلال السنتين المقبلتين.
- يمكن للمتبنين المبكرين استخدام هذا الآن مع تنازلات قليلة.
النتائج الرئيسية للمشاريع المحترفة™
أشياء رائعة يجب أن تستخدمها بالتأكيد في المشروعات
شرائح: thib.me/tbx-css/
10شكرًا!
شرائح: thib.me/tbx-css/
11