الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

فليكس جاب بوليفيل

هذا عبارة عن polyfill CSS خالص يستخدم PostCSS لمحاكاة الفجوة المرنة باستخدام الهوامش.

القيود المعروفة

  • يجب استخدام div المجمّع عند استخدام margin: auto أو background .
  • لا يمكن الاعتماد على فجوات النسبة المئوية إذا لم تكن الحاوية بعرض كامل للحاوية الأصلية
  • يختلف عرض العناصر المرنة ذات النسب المئوية قليلاً عن المواصفات بسبب الهامش السلبي على الحاوية.

قم بعرض الصفحة التجريبية لحالات الاختبار المختلفة للبوليفيل قيد التنفيذ.

مثال 

. container {
    display : flex;
    gap : 40 px ;
}

يصبح: 

 /* Output simplified for purpose of example */

. container > * {
    --fgp-parent-gap-row : 40 px ;
    --fgp-parent-gap-column : 40 px ;
    --fgp-margin-top : calc ( var ( --fgp-gap-row ) + var ( --orig-margin-top , 0 px ));
    --fgp-margin-left : calc (
        var ( --fgp-gap-column ) + var ( --orig-margin-left , 0 px )
    );
    margin-top : var ( --fgp-margin-top );
    margin-left : var ( --fgp-margin-left );
}

. container {
    --fgp-gap : var ( --has-fgp , 40 px );
    --fgp-gap-row : 40 px ;
    --fgp-gap-column : 40 px ;
    --fgp-margin-top : calc (
        var ( --fgp-parent-gap-row , 0 px ) - var ( --fgp-gap-row ) + var ( --orig-margin-top , 0 px )
    );
    --fgp-margin-left : calc (
        var ( --fgp-parent-gap-column , 0 px ) - var ( --fgp-gap-column ) + var ( --orig-margin-left , 0 px )
    );
    display : flex;
    gap : var ( --fgp-gap , 0 px );
    margin-top : var ( --fgp-margin-top , var ( --orig-margin-top ));
    margin-left : var ( --fgp-margin-left , var ( --orig-margin-left ));
}

يحاكي polyfill الفجوة المرنة عن طريق إضافة هوامش لكل عنصر فرعي وتطبيق هامش سلبي على الحاوية.

  • جديد يعمل الآن بغض النظر عما إذا كان يتم استخدام display: flex gap في نفس القاعدة (راجع الخيارات لمعرفة طرق التحسين)
  • يعمل مع عدد غير محدود من العناصر المتداخلة مع أي مجموعة من الوحدات، px > px، px > %، % > %، إلخ
  • ليست هناك حاجة إلى أسماء فئات أو أقسام إضافية (باستثناء عند استخدام margin: auto أو background )
  • يعمل حتى عندما يكون الهامش موجودًا بالفعل على العنصر (الأنماط المضمنة غير مدعومة)
  • نمط الهامش والحدود والحشو كالمعتاد
  • يدعم gap ، row-gap وفجوة column-gap

دعم المتصفح

يدعم جميع المتصفحات الحديثة الحالية، Edge وFirefox وChrome وSafari وOpera (أي متصفح يدعم calc() و var() ).

الاستخدام

أضف Flex Gap Polyfill إلى مشروعك: 

npm install flex-gap-polyfill postcss --save-dev

استخدم Flex Gap Polyfill لمعالجة CSS الخاص بك: 

 const flexGapPolyfill = require ( "flex-gap-polyfill" ) ;

flexGapPolyfill . process ( YOUR_CSS /*, processOptions, pluginOptions */ ) ;

أو استخدمه كمكون إضافي لـ PostCSS: 

 const postcss = require ( "postcss" ) ;
const flexGapPolyfill = require ( "flex-gap-polyfill" ) ;

postcss ( [ flexGapPolyfill ( /* pluginOptions */ ) ] ) . process (
    YOUR_CSS /*, processOptions */
) ;

خيارات

  • only

    النوع : صفيف الافتراضي : غير محدد

    عندما يتم تطبيق polyfill true فقط عند display: flex | inline-flex يتم استخدام display: flex | inline-flex و gap في نفس القاعدة. قم بتوفير مجموعة من المحددات لمطابقة القواعد الإضافية. يمكن أن تكون strings أو regexes . قم بتضمين /* apply fgp */ ضمن القاعدة لتطبيق polyfill يدويًا.

  • flexGapNotSupported

    النوع : سلسلة افتراضية : خطأ

    حدد يدويًا محددًا لاستخدامه عندما لا تكون الفجوة المرنة مدعومة عن طريق الاكتشاف عبر JavaScript، على سبيل المثال flexGapNotSupported: '.flex-gap-not-supported' .

  • webComponents

    النوع : منطقي افتراضي : خطأ

    عندما يستهدف polyfill true أيضًا العناصر ذات فترة زمنية محددة

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل