ما هي الميزات الجديدة في أحدث إصدار CSS في 2024

ما هي الميزات الجديدة في أحدث إصدار ل CSS؟ إذا كان لديك نفس الاستفسار، فقد وصلت إلى المكان الصحيح لأن هذه المقالة تشرح وتعرض جميع الميزات الجديدة في CSS وفقًا لآخر تحديث.

Cascading Style Sheets  أو CSS هي لغة تُستخدم لتنسيق العناصر المختلفة مثل حجم ولون الخط والمسافة بين السطور، تحظى هذه اللغة بشعبية كبيرة ويستخدمها آلاف المطورين، أحد الأسباب الرئيسية وراء شعبية CSS هو أنها تحصل على تحديثات منتظمة وثابتة من وقت لآخر.

شهدت منصة البرمجة تغييرات جذرية في السنوات القليلة الماضية، ويعد التحديث الأخير لعام 2024 بالمزيد.

في هذا الدليل، سنلقي نظرة على أكثر التغييرات المفيدة التي تم إدخالها في أحدث إصدار لـ CSS، باستخدام المعلومات المقدمة في هذه المقالة، يمكنك فهم كيفية عمل التحديثات الأخيرة والفوائد التي تستمدها منها، لذا، دون، نبدأ.

ما هي الميزات الجديدة في أحدث إصدار CSS في 2024؟

والآن، حان الوقت للإجابة على سؤال اليوم الكبير – ما هي الميزات الجديدة في أحدث إصدار لـ CSS؟ ستجد هنا جميع التحديثات بالإضافة إلى فوائدها وطرق استخدامها.

1. focus-visible  التركيز المرئي

يتضمن أحدث إصدار من CSS خاصية focus-visible التركيز المرئي، تجعل هذه الميزة مواقع الويب أكثر سهولة في الاستخدام لمن يتنقلون بأنفسهم باستخدام تخطيط لوحة المفاتيح. نتيجة للدعم الواسع الانتشار الذي تتلقاه focus-visible التركيز المرئي من المتصفحات، فهي عنصر أساسي في مجموعات أدوات CSS المعاصرة.

يكون هذا مفيدًا جدًا عند التمييز بين العناصر التي يتم التركيز عليها من خلال نقرات الماوس وتلك التي يتم التركيز عليها من خلال التنقل عبر لوحة المفاتيح.

بشكل عام، تعمل focus-visible على تحسين إمكانية الوصول إلى المكونات التي يتم اجتيازها باستخدام لوحة المفاتيح (على سبيل المثال، عن طريق الضغط على Tab).

سيتم تمييز العناصر بغض النظر عن الطريقة التي تم استخدامها لاختيارها (باستخدام Tab على لوحة المفاتيح، أو باستخدام الفأرة للنقر عليها، أو باستخدام Tab على جهاز محمول). بالنسبة لجميع الأجهزة، يتم تمييز حقل الإدخال عبر خيار focus-visible ، بينما يتم تمييز الحقول الأخرى فقط عند اختيارها باستخدام لوحة المفاتيح.

2. بناء جملة: nth-of

إليك تحديث رئيسي آخر في أحدث ميزات إصدار CSS. بناء الجملة nth-child في CSS هو شيء نعرفه بالفعل؛ ومع ذلك، فقد أصبح أكثر تعقيدًا إلى حد ما مع إدراج مصطلح “of”، والذي يمكننا من استهداف عنصر بطريقة أكثر تحديدًا.

سيؤدي :nth-child(x of. myClass) أولًا إلى تصفية جميع العناصر التي تحتوي على الفئة myClass، ثم سيستخدم رقم العنصر x من القائمة لاستهداف العنصر المناسب.

3. خصائص الإنشاءات المنطقية ((Inline and Block)

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

حتى وإن كنا قادرين على تنفيذ الشيء نفسه مع (Inline and Block)، يمكننا أيضًا تطبيقه على سمات أخرى مثل الحد والحجم، الأفقي هو المكان الذي تنطبق فيه المسطرة، بينما العمودي هو المكان الذي تنطبق فيه الكتلة.

4. قيمة جديدة للالتفاف النصي :التوازن

من خلال منع الفواصل غير المريحة، مثل كلمة واحدة معلقة في نهاية الفقرة، تساهم هذه الميزة في الحصول على مظهر أكثر توازناً واحترافية بصرياً.

ونتيجةً للدعم الممتاز الذي يقدمه المتصفح لميزة التوازن، يمكن للمطورين تطبيقها بثقة في تطبيقاتهم باستخدام هذا الإصدار الأخير من CSS.

أحد التعديلات التي لا يمكن ملاحظتها على الفور ولكن لها تأثير كبير هو إضافة قيمة التوازن إلى خاصية التفاف النص.

من خلال الحفاظ على عدد متناسق من الأحرف في كل سطر، فإنه يساهم في إنشاء تخطيط نصي مقبول بصريًا بشكل أكبر داخل المكونات.

5. Gap Property for Flexbox

إحدى الميزات الجديدة في CSS هي Gap Property for Flexbox ، كان من الضروري بالنسبة لنا الاستفادة من خاصية الهامش من أجل تحديد نفس المسافة بين الصفوف والأعمدة المتتالية.

تُمكِّننا Gap Property for Flexbox من إنشاء فجوة بين المكوِّنات دون الحاجة إلى تعديل العناصر التي تأتي أولًا وأخيرًا في التسلسل.

6. Accent-Color Property

Accent-Color Property هي إضافة جديدة في أحدث إصدار لـ CSS، يعد استخدام النماذج من أكثر الأشياء التي يمكن اكتشافها على موقع الويب، هناك احتمال أن تكون قد أضفت مربعات اختيار أو أزرار اختيار في النموذج الذي كنت تستخدمه، من المستحيل تغيير مكونات معينة، وفي معظم الأحيان، يتم استبدالها بأدوات تم إنشاؤها للمستخدم فقط.

يتيح لك Accent-Color Property الذي تم تقديمه حديثًا إجراء تخصيص سريع وتعيين الألوان للعناصر المعنية.

7. CSS Nesting

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

لم يكن من الممكن في السابق الوصول إلى قواعد التداخل إلا باستخدام معالجات مسبقة مثل SASS؛ لكن CSS تدعم الآن قواعد التداخل بشكل أصلي.

8. المحدد لـ :has()

يعد محدد has Selector إضافة مهمة أخرى إلى أحدث ميزات إصدار CSS، هذه الميزة لا تسهل فهم الشيفرة البرمجية فحسب، بل إنها تحسن الكفاءة أيضًا من خلال تقليل الاعتماد على JavaScript، دعم المتصفح لدالة has() قوي، مما يجعلها أداة يمكن الاعتماد عليها في إنشاء المواقع الإلكترونية المعاصرة.

من خلال استخدام محدد :has()، يستطيع المطورون تطبيق الأنماط على العناصر الأم اعتمادًا على استيفاء عناصرها الفرعية لمتطلبات معينة.

على سبيل المثال، عندما يتم تحديد عنصر الإدخال لعنصر قائمة، تصبح عملية تزيين حدود عنصر القائمة أبسط بكثير مع أحدث ميزات إصدار CSS.

يعد محدد :has() من CSS خطوة كبيرة إلى الأمام من حيث إمكانيات النمط. قبل ذلك، كان من الضروري استخدام JavaScript أو حلول أخرى أكثر تعقيدًا من أجل تغيير نمط العنصر الأصلي اعتمادًا على العناصر التي يحتويها.

خاتمة

تحدثنا في هذه المقالة عن ما هي الميزات الجديدة في أحدث إصدار CSS في 2024، هذا كل ما لدينا فيما يتعلق بأحدث إصدار لـ CSS، في الوقت الحالي، سيكون من الدقة القول بأن CSS تشهد فترة ازدهار، وقد لاحظنا أيضًا أن عددًا من هذه الميزات الجديدة لها خصائص معينة مع بعضها البعض.

في الواقع، غالبًا ما تساعدنا هذه الميزات في كتابة أكواد برمجية أكثر وضوحًا وفعالية، ويستفيد البعض منهم من إمكانيات أدوات المعالجة المسبقة (مثل SaaS)، مما يعني أن هذه الأدوات ستصبح أقل أهمية مع مرور الوقت.

باستخدام أحدث الميزات الجديدة والجديدة في CSS، يمكننا إنشاء مواقع ويب رائعة، فمع استمرار تقدم CSS، من الممتع الاستمرار في تجربة استخدامه