٨ عناصر HTML أصلية تغنيك عن استخدام المكتبات

توقف عن صراع متصفحك. توقف عن تثبيت مكتبات لأشياء تمتلكها بالفعل.

جرب عناصر HTML الأصلية الثمانية هذه:

  • <dialog>: استخدمها للنوافذ المنبثقة (modals). فهي تتولى إدارة التركيز (focus) والخلفية (backdrop).
  • <details> و <summary>: استخدمهما للقوائم المنسدلة المتداخلة (accordions).
  • popover: استخدمها للقوائم. لا تتطلب أي JavaScript.
  • <select> و <datalist>: استخدمهما للقوائم المنسدلة والإكمال التلقائي.
  • <input type="range">: استخدمها لأشرطة التمرير (sliders). يمكنك تنسيقها باستخدام CSS.
  • <input type="color">: استخدمها لمختارات الألوان.
  • <input type="date">: استخدمها للتقاويم. وهي تعمل على الهواتف المحمولة.
  • loading="lazy": استخدمها لتحميل الصور.

اعتماد "الأصلي أولاً" لا يعني انعدام التبعيات (dependencies). بل يعني أن تتحقق من الوثائق (docs) قبل استخدام npm.

المكتبات تجمد الكود الخاص بك. بينما تتطور المتصفحات باستمرار، مما يمنحك ميزات جديدة مجانًا.

أرسل كوداً أقل. احصل على إمكانية الوصول (accessibility). واقضِ وقتاً أقل في الصيانة.

تحقق من وثائق المنصة أولاً. ففي نصف الحالات، تكون الميزة التي تبحث عنها مجرد وسم (tag) واحد فقط.

المصدر: https://dev.to/dimonb19a/8-native-html-elements-you-dont-need-a-library-for-29b4