المستقبل الـ CSS اليوم ⚡

الأهداف

1. بدون أدوات 🔥
2. المزيد بأقل
3. دعم متصفح رائع

1. لا يزال يستخدم التدقيق: Prettier, Stylelint.
2. كذلك لا يزال يستخدم أدوات التوافق والأداء: Autoprefixer, cssnano.
3. كتابة الصياغة الحديثة بفضل postcss-preset-env.

1. تقع المواقع المتشابهة معًا
2. ليس الآف الأسطر من الشيفرة
3. لا تجاوزات

• أوبرا ميني (1%)
• IE11 (0.5%)
• سفاري 12-14 (0.5%)
• متصفح أندرويد 4.4.4 (0.3%)
• كروم 69-89 (1.2%)
• فايرفوكس 3.6

• تصميم متجاوب - تجنب استفسارات الوسائط
• أنماط التفاعل (hover, focus, touch, etc.)
• دعم من اليمين إلى اليسار
• الأنماط الفاتحة والداكنة
• أنماط التباين / وضع التباين العالي لويندوز
• أوراق الأنماط للطباعة

• 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);
            
          

• هذا يظهر وعدًا ولكن لا تزال هناك الكثير من العقبات.
• من المحتمل أن يكون عمليًا للمشروعات الصغيرة خلال السنتين المقبلتين.
• يمكن للمتبنين المبكرين استخدام هذا الآن مع تنازلات قليلة.

1. استعلامات الوسائط 💯
2. متغيرات CSS 💅
3. Sass و PostCSS أدوات