modern-css

Pure native CSS for building interfaces — no preprocessors, no frameworks.

| CSS Grid, Subgrid, Flexbox | @function, if() (Chrome-only) | | Container Queries (size + style) | Customizable (Chrome-only) | | :has(), :is(), :where() | Scroll-state queries (Chrome-only) | | CSS Nesting, @layer, @scope | sibling-index(), sibling-count() | | @property (typed custom props) | ::scroll-button(), ::scroll-marker |

| oklch(), color-mix(), light-dark() | Typed attr() beyond content | | Relative color syntax | field-sizing: content | | @starting-style, transition-behavior | interpolate-size (Chrome-only) | | Scroll-driven animations | Grid Lanes / masonry (experimental) | | Anchor positioning, Popover API | random() (Safari TP only) |

قم بالتطبيق بشكل استباقي عند إنشاء أنظمة التصميم أو مكتبات المكونات أو أي تطبيق للواجهة الأمامية. المشغلات على CSS Grid، Subgrid، Flexbox، استعلامات الحاوية،: has()، @layer، @scope، CSS تداخل، @property، @function، if()، oklch، مزيج الألوان، لون داكن فاتح، لون نسبي، @starting-style، رسوم متحركة تعتمد على التمرير، عرض التحولات، تحديد موضع المرساة، popover، تحديد قابل للتخصيص، رؤية المحتوى، الخصائص المنطقية، التفاف النص، حجم الاستيفاء، المشبك، تغيير حجم الحقل، CSS الحديث، بنية CSS، التصميم سريع الاستجابة، الوضع المظلم، السمات، رموز التصميم، الطبقات المتتالية. يُستخدم عند كتابة CSS لأي مشروع ويب، أو اختيار أساليب التخطيط، أو إنشاء مكونات سريعة الاستجابة، أو تنفيذ الوضع المظلم أو السمات، أو إنشاء رسوم متحركة أو انتقالات، أو تصميم عناصر النموذج، أو تحديث أوراق الأنماط القديمة. ميزات CSS الحديثة وأفضل الممارسات لبناء واجهات باستخدام CSS أصلي خالص. المصدر: ccheney/robust-skills.