مولّد border-radius

ما مولّد border-radius؟

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

وهذه الأداة تضيف الجزء الذي تتركه غيرها. ففي CSS قاعدةٌ لما يحدث حين لا تتّسع أنصاف الأقطار التي طلبتَها في الصندوق، وهي تفعل ما هو أغربُ من مجرد الاقتطاع. واللوحةُ تحت المعاينة تريك أثر تلك القاعدة وأنت تسحب.

وكل شيء يجري في متصفحك. فلا يُرفع شيء ولا حساب يُنشأ.

طريقة الاستعمال

1. اضبط مقاس الصندوق. فالعرض والارتفاع أهمّ مما يبدو، لأن اتّساع أنصاف أقطارك متوقف عليهما تمامًا. ونصفُ قطرٍ يحسن في بطاقة لا يحسن في زرّ.
2. اسحب الزوايا. لكل زاوية مقبض واحد افتراضًا. وفعّل الزوايا الإهليلجية لتعطي كل زاوية نصفَ قطر أفقي وآخر رأسي، وهو ما وُضعت له الشرطة المائلة في الصيغة المختصرة.
3. اقرأ اللوحة ثم انسخ. فإذا نزل معامل التصغير عن 1، كانت الأرقام المشطوبة هي ما طلبتَه، والتي بجانبها هي ما يُرسم. وكتلةُ CSS هي التصريح جاهزًا للّصق.

القاعدة التي تغيّر زوايا لم تمسّها

افترض زرًّا مقاسه 160 في 44 وفي زواياه الأربع 8 بكسل، ثم قررت أن تكون الزاوية العليا اليسرى قوسًا كبيرًا مقداره 40 بكسل. غيّرتَ قيمةً واحدة. والذي يُرسم 36.7 بكسل في تلك الزاوية، و7.3 بكسل في الثلاث الأخرى.

وليس هذا أثرًا من تقريب ولا شذوذًا في متصفح، بل هو في المواصفة. إذ تقول CSS Backgrounds and Borders Level 3 إنه حين يزيد مجموعُ نصفَي القطر الملتقيَين على ضلعٍ ما على طول ذلك الضلع، يُحسب f بأنه أصغرُ نسبةٍ بين طول الضلع ومجموع نصفَي قطره في الأضلاع الأربعة، ثم، إن كان f أصغر من 1، ضُرِب نصفُ قطر كلِّ زاوية في العنصر في f. لا الزاوية المخالفة وحدها، بل كلُّ الزوايا.

فالتصحيح شامل. ادفعْ زاويةً واحدة إلى ما وراء ما يحتمله الصندوق فينكمش الشكلُ كلُّه بالنسبة نفسها، ومعه زوايا لم تحرّرها وكانت في ذاتها سليمة تمامًا. وإذا عرفتَ ذلك اتّضح لك كثيرٌ من CSS الذي كاد يضبط ولم يضبط.

وأشهرُ الحالات طلبُ دائرة على ما ليس بمربع. ضعْ 100 بكسل في زوايا صندوق 200 في 100 الأربع، يخرج f مساويًا 0.5 بالضبط، فتُرسم كل زاوية عند 50 بكسل: ملعبٌ مستطيلُ الطرفين لا دائرة. والمعتاد أن يُفسَّر هذا بأن نصف القطر يُحدَّد بنصف الارتفاع. وهذا الوصف يعطي الجواب الصحيح هنا مصادفةً، والقاعدةُ غيره: إنها معامل واحد يُطبَّق على الكل، ولهذا تتغيّر معه زوايا الضلع الطويل أيضًا.

ويحسن ضبط الحدّ بدقّة. فالمواصفة تقول إن التصغير لا يُطبَّق إلا إذا كان f أصغر من 1، فالدائرةُ على المربع، أي 50 بكسل في صندوق 100 في 100، تقع على الخط تمامًا ولا تُصغَّر البتة. وبكسلٌ واحد زيادةً يجعل f يساوي 0.9901، فتبدأ الزوايا كلها في الانكماش. وهذه الأداة تتبع المواصفة عند تلك الحافة بدل أن تقرّبها.

حدود معلنة بصراحة

المعاينة عنصر حقيقي بـborder-radius حقيقي، فما تراه يرسمه متصفحك أنت. أما أرقام اللوحة فمحسوبة من المواصفة لا مقروءة من المتصفح. وهذا مقصود، إذ لا شيء يُقرأ: فالتصغير يقع عند رسم الصندوق، والقيمةُ التي تصرّح بها ورقةُ الأنماط هي التي وضعتَها أنت.

وكل ما هنا بالبكسل. والنِّسَبُ المئوية جائزة في border-radius وتُحلّ بالنسبة إلى عرض الصندوق وارتفاعه، وهي لذلك أنسب لكل ما هو متجاوب، لكنها تجعل سؤالَ اتّساع أنصاف الأقطار سؤالًا يتغيّر بتغيّر النافذة. وإن استعملت النسب فالقاعدة قائمة، غير أنك لا تراها في معاينة ثابتة.

والأداة تنمذج صندوقًا مجرَّدًا. فلا تُرسم الحدود ولا الحشو ولا الفرقُ بين المنحنى الخارجي والداخلي: فالعنصر الحقيقي ذو الحد السميك له نصف قطر ثانٍ أصغر عند الحافة الداخلية، تشتقّه المواصفة بطرح سُمك الحد. وهو جزء أصيل من border-radius وخارجٌ عن نطاق مولّد.

ولا يوجد هنا «سكويركل»، ولا يمكن أن يوجد. فالأشكالُ الناعمة الاستدارة في عتاد آبل قطوعٌ ناقصة فائقة، وهي أسرةُ منحنياتٍ غيرُ ربع القطع الناقص الذي تحدّده CSS، ولن يعيد إنتاجها أي تركيب من قيم border-radius. والحصولُ على تلك الهيئة في الويب يحتاج clip-path أو SVG، وكلُّ أداةٍ تَعِد بسكويركل من border-radius وحده تَعِد بما لا تقدر عليه الخاصية.

ويحمل المحرّك 30 تحققًا. وأهمُّها ليس جدولَ مخرجاتٍ متوقَّعة، بل الخاصيةَ التي وُجدت القاعدة لتضمنها: ففي 20,000 صندوق عشوائي لا يزيد مجموعُ نصفَي قطر أي ضلع على طول ذلك الضلع بعد التصغير، ومعه ضابطٌ يؤكد أن المدخلات نفسها تخالفه قبله، حتى لا يُرضي الاختبارَ دالةٌ تُرجِع كل شيء إلى الصفر. وتخريبٌ متعمَّد يقتطع كل زاوية على حدة، وهو ما تفعله مولّدات عدة، يُسقِط تلك المجموعة في أربعة مواضع.

لماذا هذه الأداة مجانية؟

أربعةُ مقابض وعمليةُ قسمة عملٌ يؤديه جهازك في الحال. فلا يُرفع شيء، ولا حساب، ولا شيء يُختم بعلامة مائية.

وإن أردت الألوان لا الزوايا، فمولّد التدرجات ومحوّل الألوان في هذا الموقع بجوارك، ودون رفع شيء كذلك.