awesome-repositories.com
المدونة
awesome-repositories.com

اكتشف أفضل مستودعات المصادر المفتوحة باستخدام بحث مدعوم بالذكاء الاصطناعي.

استكشفعمليات بحث منسقةبدائل مفتوحة المصدربرمجيات ذاتية الاستضافةالمدونةخريطة الموقع
المشروعحولكيفية ترتيب النتائجالصحافةخادم MCP
قانونيالخصوصيةالشروط
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

8 مستودعات

Awesome GitHub RepositoriesData Attribute Styling

Styling mechanisms that use custom data attributes to define the visual state of an element.

Distinct from Element Attributes: Focuses on visual styling via data-attributes rather than general attribute management

Explore 8 awesome GitHub repositories matching web development · Data Attribute Styling. Refine with filters or upvote what's useful.

Awesome Data Attribute Styling GitHub Repositories

اعثر على أفضل المستودعات باستخدام الذكاء الاصطناعي.سنبحث عن أفضل المستودعات المطابقة باستخدام الذكاء الاصطناعي.
  • hakimel/laddaالصورة الرمزية لـ hakimel

    hakimel/Ladda

    7,796عرض على GitHub↗

    Ladda is an animated button library that provides loading button components to signal processing states during web interactions. It serves as a form submission indicator that replaces button text with a loading spinner during asynchronous operations to provide user feedback and prevent multiple clicks. The library focuses on asynchronous UI feedback and frontend state visualization. It links the visual appearance of buttons to the loading state of API calls and manages the user experience during form submissions. Capabilities include the creation of buttons with integrated animation styles a

    Uses DOM data attributes to determine the specific visual style and animation of the loading spinner.

    JavaScript
    عرض على GitHub↗7,796
  • apoorvsaxena/lozad.jsالصورة الرمزية لـ ApoorvSaxena

    ApoorvSaxena/lozad.js

    7,497عرض على GitHub↗

    lozad.js is a JavaScript lazy loading library and viewport-based media loader. It serves as a dependency-free wrapper around the Intersection Observer API to defer the loading of images and iframes until they enter the browser viewport. The project functions as a responsive image loader that optimizes page speed by delivering the most appropriate image sizes and formats based on the user's screen. It includes capabilities for responsive image optimization and layout stabilization through the use of image placeholders to prevent content shifts. The library manages the full lifecycle of deferr

    Uses data attributes to store media URLs, deferring the actual network request.

    JavaScript
    عرض على GitHub↗7,497
  • filamentgroup/loadcssالصورة الرمزية لـ filamentgroup

    filamentgroup/loadCSS

    6,647عرض على GitHub↗

    loadCSS هو محمل CSS غير متزامن وحاقن أوراق أنماط غير محظور. يوفر تنفيذاً تقنياً لتحميل أوراق الأنماط دون حظر عملية عرض المتصفح للحفاظ على واجهة مستخدم سريعة الاستجابة. ينفذ المشروع نمط تحميل CSS محدداً لاكتشاف متى انتهت أوراق الأنماط غير المتزامنة من التحميل عبر متصفحات الويب المختلفة. يسمح هذا بتنفيذ دوال الاستدعاء (callback) فقط بعد تحميل ورقة الأنماط بالكامل لضمان سلوك بصري متسق. تغطي الأداة إدراج أوراق الأنماط برمجياً، والحقن الديناميكي بناءً على منطق التطبيق، واكتشاف تحميل ورقة الأنماط. يدير كيفية طلب الأنماط لتحسين أداء الواجهة الأمامية.

    Provides the ability to configure media queries and relational attributes of stylesheet links before DOM injection.

    JavaScript
    عرض على GitHub↗6,647
  • tailwindlabs/tailwindcss-typographyالصورة الرمزية لـ tailwindlabs

    tailwindlabs/tailwindcss-typography

    6,249عرض على GitHub↗

    Tailwind CSS Typography is a plugin for the Tailwind CSS framework that provides hand-tuned typographic defaults for blocks of vanilla HTML content, such as content from Markdown or a CMS. It applies beautiful prose styles to HTML content using a single class, eliminating the need for custom CSS to style rich text. The plugin distinguishes itself by offering deep customization and control over typography. Users can adjust the overall font size of prose content across five predefined sizes, select from five built-in gray-scale palettes to match a project's color scheme, and seamlessly adapt ty

    Applies styles when an element has a specific ARIA state or data attribute using variants.

    JavaScript
    عرض على GitHub↗6,249
  • mdn/browser-compat-dataالصورة الرمزية لـ mdn

    mdn/browser-compat-data

    5,585عرض على GitHub↗

    Stores extra information on standard HTML elements using data-* attributes without predefined meaning.

    JSONcompatcompatibilitydata
    عرض على GitHub↗5,585
  • chakra-ui/arkالصورة الرمزية لـ chakra-ui

    chakra-ui/ark

    5,004عرض على GitHub↗

    Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by finite state machines. It provides unstyled components that encapsulate logic and accessibility — including full keyboard navigation, focus management, and WAI-ARIA support — while leaving visual styling entirely to the consumer. Components expose scoped data attributes for CSS targeting and use state machines to produce predictable, testable interactive behavior across every state transition. The library distinguishes itself through a state propagation model that distributes

    Exposes scoped data attributes on every component part for CSS targeting of structural and state hooks.

    TypeScriptcomponentsdesign-systemheadless
    عرض على GitHub↗5,004
  • webpack/mini-css-extract-pluginالصورة الرمزية لـ webpack

    webpack/mini-css-extract-plugin

    4,663عرض على GitHub↗

    هذا امتداد Webpack يُستخدم لاستخراج CSS من ملفات JavaScript إلى أوراق أنماط منفصلة ومستقلة لبناء الإنتاج. يعمل كمجمع CSS ومحسن أصول يفصل الأنماط عن حزم النصوص لتمكين التحميل المتوازي ومنع وميض المحتوى غير المنسق. يوفر المشروع أدوات لتوليد صادرات وحدة JavaScript التي تربط تعريفات الأسلوب المحلي بمكونات التطبيق. كما ينفذ إدارة سمات ديناميكية عن طريق تحميل متغيرات CSS مختلفة بشكل مشروط عبر استعلامات الموارد ويدعم التخزين المؤقت للمتصفح على المدى الطويل من خلال استخدام أسماء الملفات المجزأة للمحتوى. تغطي مجالات القدرة ضبط أداء الواجهة الأمامية عبر جلب الأسلوب عند الطلب غير المتزامن وتحسينات العرض من جانب الخادم، بما في ذلك تضمين الأسلوب ومنع العلامات المكررة. تدعم الأداة أيضًا سير عمل التطوير مع استبدال الوحدة الساخن لتحديثات الأسلوب الفورية. يتكامل المكون الإضافي في خط أنابيب بناء Webpack ويوفر خيارات تكوين لأنماط اسم ملف الإخراج وخطافات دورة الحياة لتخصيص توليد علامة رابط الأسلوب.

    Provides programmatic control over HTML link element attributes to support preloading and cross-origin loading.

    JavaScriptwebpack-plugin
    عرض على GitHub↗4,663
  • leaverou/prefixfreeالصورة الرمزية لـ LeaVerou

    LeaVerou/prefixfree

    3,792عرض على GitHub↗

    prefixfree is a runtime CSS processor and polyfill library designed to ensure cross-browser visual consistency. It functions as a client-side script that automatically detects browser requirements and injects necessary vendor prefixes into CSS properties and values at runtime. The project utilizes a system that intercepts stylesheets and modifies style rules in browser memory. It includes a DOM mutation style monitor that observes the document tree for new elements to apply prefixing logic to dynamic content and attributes. The library provides polyfilling for modern CSS standards in legacy

    Provides an attribute-based mechanism to exclude specific CSS blocks from the automated prefixing process.

    JavaScript
    عرض على GitHub↗3,792
  1. Home
  2. Web Development
  3. Element Attributes
  4. Data Attribute Styling

استكشف الوسوم الفرعية

  • ARIA Attribute Styling1 وسم فرعيApplying utility classes conditionally based on the current value of ARIA attributes on an element. **Distinct from Data Attribute Styling:** Distinct from Data Attribute Styling: focuses specifically on ARIA attributes for accessibility-driven styling, not general data attributes.
  • Link Attribute ConfigurationsProgrammatic control of HTML link element attributes to manage stylesheet behavior. **Distinct from Data Attribute Styling:** Distinct from Data Attribute Styling: focuses on standard link attributes like media and rel for loading, not custom data-attributes for visual state.
  • Source StorageUsing custom data attributes to temporarily store media URLs to prevent immediate browser loading. **Distinct from Data Attribute Styling:** Focuses on storing the source URL for later use, unlike Data Attribute Styling which focuses on visual state.