استخدم HTML Entity أم SVG ؟

كنت أحاول تصميم عرض المسار الحالي في صفحات الويب ؛ أو ما يُسمى بـ breadcrumb في أحد المواقع التي عملت بها. فكرت في الفاصل بين أجزاء مسار الصفحة الحالية مثل homepage > blog > post أم استخدم homepage / blog / post. قررت أن استخدم التصميم homepage > blog > post. ولكن هل استخدم الرمز > أم أستخدم الـ HTML entity › أم استخدم SVG أفضل ؟

SVG : Scalable Vector Graphics 🔗

جربت استخدام إس ڤي چي ، والنتيجة كما يلي.

<svg aria-hidden="true" data-prefix="fas" data-icon="angle-left" class="inline-block text-gray-600 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" height="18"
width="18" viewBox="0 0 256 512" {{ app()->isLocale('en') ? 'transform=rotate(180)' : '' }}><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" /></svg>

استخدمت الكود {{ app()->isLocale('en') ? 'transform=rotate(180)' : '' }} لتدوير القوس المربع في حسب لغة واجهة الموقع. لأن الموقع يدعم اللغتين ؛ العربية والإنجليزية.

أعجبني سهولة التخصيص ومرونة التصميم ولكن لم تعجبني حاجتي إلى تحديد لغة واجهة الموقع لكي يتم تحديد دوران صورة SVG مما يؤثر على أداء الموقع بالسوء بنسبة بسيطة جداً جداً. الشئ الآخر الذي لا أحبه عن الـ SVG وهو أنها طويلة جداً وتأخذ عدد كثير من الـ bytes مما يجعلها تستهلك أضعاف حجم الطرق الأخرى.

رمز عادي 🔗

جربت أنا أستخدم الرمز البسيط > لكن احتجت إلى تحديد لغة واجهة الموقع الإلكتروني لكي أستخدم الرمز الصحيح. وأصبح الكود بهذا الشكل.

{{ app()->isLocale('en') ? '>' : '<' }}

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

HTML Entity 🔗

جربت استخدام الـ HTML entity وهي › وأصبح الكود بهذا الشكل.

›

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

الشئ الآخر الذي أحبه في استخدام الـ HTML entities هو أنها بسيطة وصغيرة وبالتالي سريعة الأداء وتقلل من حجم الـ DOM بشكل عام وهذا مقياس رائع ويجب الإهتمام بتحسينه.

ولكن الـ HTML entities صعبة في التصميم والتخصيص.

أفكار أخيرة 🔗

لو كان تصميم موقعك مخصص جداً ويحتاج إلى دقة كبيرة في الرسوميات ، استخدم SVG .

أما إن كان موقعك يستخدم لغة واجهة واحدة وتحتاج إلى تحسين سرعة الموقع وتبسيط الكود ، استخدم الرموز العادية.

أما إن كان موقعك متعدد اللغات ومهتم بتحسين سرعة الموقع وتبسيط الكود ، استخدم الـ HTML entity .

وإليك جدول مقارنة بين الثلاث خيارات.

في حالتي، اخترت استخدام HTML entity لأنها تتبع إتجاه صفحة الويب لذلك لا احتاج إلى معرفة لغة الواجهة. بالإضافة إلى أنها خفيفة وسريعة وبسيطة.

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