فيما يلي ميزات CSS الخمس الحديثة لعام 2024، إلى جانب رموز الأمثلة لكل منها:

1. :لديه () محدد:
   • يسمح لك هذا بتصميم عنصر أصلي بناءً على أبنائه.

صمم div الأصلي إذا كان يحتوي على عنصر فرعي نشط

div:has(.active) {
       background-color: lightgreen;
   }

1. استعلامات الحاوية:
   • تتيح هذه التصميمات سريعة الاستجابة بناءً على حجم الحاوية.

تغيير تخطيط البطاقة بناءً على حجم الحاوية الخاصة بها

   @container (min-width: 500px) {
       .card {
           display: flex;
           flex-direction: row;
       }
   }

   @container (max-width: 499px) {
       .card {
           display: block;
       }
   }

1. محددات التداخل:
   • يدعم CSS الآن قواعد التداخل للحصول على تعليمات برمجية أكثر نظافة.

أنماط متداخلة لزر داخل البطاقة

   .card {
       background-color: white;
       padding: 20px;

       .button {
           background-color: blue;
           color: white;
           padding: 10px;
       }
   }

1. خاصية التفاف النص: تساعد هذه الخاصية على توزيع النص بالتساوي عبر السطور.

استخدم التفاف النص لموازنة النص في فقرة

   p {
       text-wrap: balance;
       width: 300px; / Set a width for the effect /
   }

1. : فئة زائفة مرئية للتركيز:
   • يعمل هذا على تحسين إمكانية الوصول من خلال عناصر التصميم التي يتم التركيز عليها عبر التنقل عبر لوحة المفاتيح.

تمييز حقول الإدخال عند التركيز عليها عبر لوحة المفاتيح

   input:focus-visible {
       outline: 2px solid blue;
       background-color: lightyellow;
   }

توضح هذه الأمثلة كيفية تنفيذ كل ميزة في CSS الخاص بك، مما يعزز الاستجابة وإمكانية الوصول إلى تصميمات الويب الخاصة بك.