تنفيذ الكتلة المضمنة عبر المستعرضات في CSS

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


عادة نستخدم كود مثل هذا لتحقيق مثل هذا التأثير:


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


في هذه الحالة، نحتاج إلى تحديد ارتفاع العرض وصورة الخلفية للعلامة. ومع ذلك، سمة العرض الافتراضية للعلامة مضمنة، والعرض والارتفاع غير صالحين. وإذا تم تعيين العرض: كتلة على a، على الرغم من إمكانية حل مشكلة العرض والارتفاع، فإن العنصر سوف يكسر الخطوط تلقائيًا ولا يمكنه تحقيق التأثير الذي نحتاجه. هل هناك أي طريقة لتحقيق نفس الشيء مثل علامة img، والتي يمكنها ضبط الارتفاع والعرض دون كسر الخط تلقائيًا؟
الجواب هو نعم. يدعم Opera وWebkit عرض خاصية CSS2: inline-block. باستخدام هذه السمة، يمكننا تحقيق التأثير الذي نحتاجه بشكل كامل تحت Opera، لكنه لن يعمل تحت المتصفحات الأخرى.
تحتوي سمة العرض أيضًا على عرض قيمة أقل استخدامًا: جدول مضمّن. يمكن أن يؤدي استخدام هذه القيمة أيضًا إلى تحقيق التأثير الذي نحتاجه بشكل كامل. هذه الخاصية مدعومة بشكل صحيح من قبل جميع المتصفحات باستثناء IE، ولكن... حسنًا، IE مرة أخرى. على الرغم من أن جميع مطوري الويب سوف يكرهون ذلك عندما يواجهون CSS، إلا أن التخلي عن IE يعادل التخلي عن 70% من المستخدمين، لذلك لا يزال يتعين علينا إيجاد حلول أخرى.
لم يكن لدي أي خيار سوى البحث عنه في جوجل، وقد وجدته بالفعل. كما هو موضح في هذه المقالة، إذا قمت أولاً بتشغيل hasLayout الخاص بـ IE، ثم قمت بتعيين العرض الخاص به: مضمّن، فسيصبح هذا العنصر مضمنًا! وبهذه الطريقة، يمكننا الاستفادة من هذه الميزة غير المعقولة لـ IE ودمجها مع بعض CSS الاختراقات، وإعطاء رموز CSS متوافقة مع المتصفحات المختلفة:


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