مولّد حدود CSS بتدرج متحرك

حدود قوس قزح الدوارة تبدو بسيطة حتى تحاول فعلاً بناء واحدة في CSS: تحريك زاوية داخل ()conic-gradient باستخدام خاصية مخصصة عادية لا يفعل شيئًا مفيدًا، لأن المتصفح لا يعرف أن القيمة زاوية ولا يستطيع الاستيفاء بين 0deg و360deg — إنه يقفز فحسب. يستخدم هذا المولّد الحل الحقيقي، CSS Properties and Values API: `false; inherits: ;deg0: value-initial ;'angle> <: syntax' { angle-border-- @property` يخبر المتصفح بنوع القيمة التي تحملها الخاصية المخصصة، مما يتيح استيفاءً سلسًا مدعومًا بالـ GPU عبر قاعدة @keyframes.

الحلقة نفسها هي عنصر وهمي ::before يحجّم أكبر من الصندوق (يُزاح للداخل بسالب عرض الحدود) وتكون خلفيته مضبوطة على `(... ,angle)border-- var(from-gradient conic` مع العودة إلى اللون الأول بحيث لا يكون للمسح أي درز مرئي. ثم يقوم mask بالتشكيل الحقيقي: `exclude; composite-mask ;)0 0(000# gradient-linear, box-content )0 0(000# gradient-linear: mask` يُبقي فقط فرق شكل الحلقة بين padding-box وcontent-box، متجاهلاً مستطيل التدرج المصمت في أي مكان آخر. الخاصية `xor; composite-mask-webkit-` الأقدم في سفاري تؤدي العملية المطابقة وتأتي إلى جانب الخاصية القياسية، فيظهر التأثير بشكل متناسق بدلاً من أن يفشل بصمت على محرك واحد.

دعم نصف قطر الانحناء ليس فكرة ملحقة — `inherit: radius-border` للعنصر الوهمي تعني أن أي نصف قطر تضبطه للصندوق يُحمَل إلى الحلقة تلقائيًا، فيحصل الزر على شكل الحبة أو البطاقة المستديرة على حدود مضيئة مستديرة بدلاً من حواف مستقيمة تخرج من الزوايا المنحنية. اختبر ذلك مباشرة: اسحب منزلق نصف القطر من مستطيل حاد إلى شكل حبة كامل وشاهد الحلقة تتابع الشكل في كل خطوة، وهذه هي التفصيلة التي تفصل التنفيذ الحقيقي لهذه التقنية عن لقطة شاشة مزيفة.

كل شيء آخر في الصفحة يترجم مباشرة إلى الكود المولَّد: منزلق العرض هو سماكة الحلقة ومسافة الإزاحة/الحشوة للعنصر الوهمي، ومنزلق المدة هو animation-duration لـ @keyframes، ومفتاح الاتجاه يعكس ببساطة إشارة زاوية نهاية الإطار المفتاحي (+360deg أو -360deg)، وكل نقطة توقف لوني هي مدخلة مفصولة بفاصلة داخل نداء ()conic-gradient. الأمر برمته يعمل في متصفحك دون صور أو حلقة تحريك بجافاسكريبت أو خدمات خارجية — انسخ كتلة CSS وستظل تدور أينما ألصقتها.