خدع CSS لعناصر HTML Dialog
2025-01-14
تشارك هذه المشاركة خدعتين CSS لتحسين عنصر HTML `` . أولاً، تُظهر كيفية تعتيم خلفية الخلفية بشكل خفيف خلف مربع الحوار باستخدام `backdrop-filter: blur(2px);` المطبق على عنصر `::backdrop` الزائف. ثانيًا، تُظهر كيفية منع تمرير الصفحة بينما يكون مربع الحوار مفتوحًا باستخدام مُحدد `body:has(dialog[open]) { overflow: hidden; }` . هذا يمنع تحرك الصفحة الأساسية أثناء التفاعل مع مربع الحوار. هذه الإضافات البسيطة لـ CSS تُحسّن تجربة المستخدم.
التطوير