أضاف CSS الحديث وظائف وخصائص تحل محل فئات كاملة من حيل media-query و JavaScript. أبرزها:
clamp() — قيم سائلة ومحدودة
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
clamp(min, preferred, max) توفر طباعة/تباعد سائل يتغير بسلاسة مع viewport لكن يبقى ضمن الحدود — مما يحل محل عدة نقاط فاصلة من استعلامات font-size media بسطر واحد.
.video { aspect-ratio: 16 / 9; width: 100%; } /* height auto-computed to keep 16:9 */
.avatar { aspect-ratio: 1; } /* perfect square at any width */
في السابق، الحفاظ على صندوق responsive بنسبة 16:9 كان يتطلب حيلة padding-bottom: 56.25% سيئة السمعة. الآن إنها إعلان واحد — وتحتفظ بمساحة (جيد ل CLS) قبل تحميل الصور.
.container { width: min(90%, 1200px); } /* whichever is SMALLER → fluid but capped */
.box { padding: max(1rem, 3vw); } /* whichever is LARGER → a minimum floor */
min()/max() اختر الأصغر/الأكبر من القيم، مما يسمح بجعل خاصية واحدة responsive بدون استعلام media (مثل "90% واسع، لكن لا يتجاوز 1200px أبداً").
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
subgrid يسمح لشبكة متداخلة بوراثة خطوط المسار الأب، بحيث تتماشى العناصر عبر بطاقات منفصلة (العناوين، المحتويات، الأزرار) تماماً على صفوف مشتركة — كان مستحيلاً سابقاً بدون ارتفاعات ثابتة.
.flex { display: flex; gap: 1rem; } /* gap now works in flexbox, not just grid */
تلغي هذه الميزات حيل طويلة الأمد: clamp()/min()/max() تحل محل أكوام من استعلامات media للحجم السائل، aspect-ratio تحل محل حيلة padding وتحمي من تحول التخطيط، و subgrid تحل مشكلة المحاذاة عبر المكونات.
تجعل التخطيطات responsive والمتناسبة أبسط بكثير وأكثر قوة — CSS الحديث يفعل بشكل تصريحي ما كان يحتاج JS أو حيل غير مستقرة.