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

تقنيات CSS الحديثة التي يمكننا استخدامها اليوم.
Thibaud Colas ,

الأهداف

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

بدون أدوات؟

الأدوات حيثما كانت ضرورية.

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

المزيد بأقل؟

CSS الأصلي دون التنازل عن التعبير

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

دعم متصفح رائع؟

دعم المتصفحات القديمة حتى لا يضطر المستخدمون لتحديث أجهزتهم.

  • أوبرا ميني (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);
            
          

عرض توضيحي!

عرض المصدر

هل يعمل؟

نعم ولا

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

النتائج الرئيسية للمشاريع المحترفة™

أشياء رائعة يجب أن تستخدمها بالتأكيد في المشروعات

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

شكرًا!

preset-env.cssdb.org/features