لقد حان اليوم متصفح الويب شوطا طويلا من الأيام المجنونة حيث كان أي نوع من الاتساق عبر متصفح التمني. متصفحات الويب اليوم متوافقة تمامًا مع المعايير. وهي تلعب بشكل جيد معًا وتسليم عرض صفحة متسق إلى حد ما عبر المتصفحات المختلفة. يتضمن هذا أحدث الإصدارات من Google Chrome ، و Microsoft Edge ، و Mozilla Firefox ، و Opera ، و Safari ، والمتصفحات المختلفة الموجودة على عدد لا يحصى من أجهزة الجوال التي يتم استخدامها للوصول إلى موقع الويب اليوم.
على الرغم من التقدم الذي تم إحرازه بالتأكيد عندما يتعلق الأمر بمتصفحات الويب وطريقة عرض CSS ، فلا تزال هناك حالات عدم اتساق بين خيارات البرامج المختلفة هذه. أحد التناقضات الشائعة هي كيفية حساب هذه المتصفحات للهوامش والحشو والحدود بشكل افتراضي.
وبسبب هذه الجوانب من نموذج الصندوق ، تؤثر جميع عناصر HTML ، ولأنها ضرورية في إنشاء تخطيطات للصفحات ، تعني الشاشة غير المتسقة أن الصفحة قد تبدو رائعة في أحد المتصفحات ، ولكنها تبدو بعيدة بعض الشيء في متصفح آخر. لمكافحة هذه المشكلة ، العديد من مصممي الويب تطبيع هذه الجوانب من نموذج مربع. تُعرف هذه الممارسة أيضًا باسم "zeroing out" قيم الهوامش و padding و الحدود.
ملاحظة حول افتراضيات المستعرض
تحتوي جميع متصفحات الويب على إعدادات افتراضية لبعض جوانب العرض الخاصة بالصفحة. على سبيل المثال ، الارتباطات التشعبية باللون الأزرق ويتم وضع خط تحتها افتراضيًا. هذا متناسق عبر العديد من المتصفحات ، وعلى الرغم من أنه شيء يتغير معظم المصممين ليتناسب مع احتياجات التصميم لمشروعهم المحدد ، فإن حقيقة أن جميعهم يبدأون بنفس الافتراضات يجعل من السهل إجراء هذه التغييرات. للأسف ، لا تتمتع القيمة الافتراضية للهوامش والحشو والحدود بنفس مستوى التناسق عبر المتصفحات.
تطبيع القيم للهوامش والحشو
أفضل طريقة لحل مشكلة نموذج الصندوق غير المتسق هو تعيين كل الهوامش وقيم الحشو لعناصر HTML إلى صفر. هناك بعض الطرق التي يمكنك اتباعها لإضافة قاعدة CSS إلى ورقة الأنماط:
* {margin: 0؛ الحشو: 0؛ }تستخدم قاعدة CSS هذه * أو حرف البدل. هذا الحرف يعني "جميع العناصر" وسيحدد كل عنصر HTML بشكل أساسي ويضبط الهوامش والحشو إلى 0. على الرغم من أن هذه القاعدة غير محددة تمامًا ، نظرًا لأنها في ورقة الأنماط الخارجية ، ستكون لها خصوصية أعلى من المتصفح الافتراضي القيم تفعل. بما أن تلك التخلفيات هي ما تقوم بالكتابة فوقه ، فإن هذا النمط سيحقق ما تريد القيام به.
خيار آخر هو تطبيق هذه القيم على HTML وعناصر الجسم. نظرًا لأن جميع العناصر الأخرى في صفحتك ستكون من أطفال هذين العنصرين ، يجب أن يطبق شلال CSS هذه القيم على جميع العناصر الأخرى.
html ، النص الأساسي {margin: 0؛ الحشو: 0؛ }سيبدأ هذا التصميم الخاص بك في نفس المكان على جميع المتصفحات ، ولكن هناك شيء واحد يجب تذكره هو أنه بمجرد أن تقوم بتحويل كل الهوامش والحشو ، ستحتاج إلى إعادة تشغيلها بشكل انتقائي لأجزاء معينة من صفحة الويب الخاصة بك لتحقيق المظهر ويشعر أن التصميم الخاص بك يدعو ل.
الحدود
قد تفكر "ولكن لا توجد مستعرضات لها حدود حول العنصر الأساسي افتراضيًا". هذا ليس صحيحا تماما. تحتوي الإصدارات الأقدم من Internet Explorer على حدود شفافة أو غير مرئية حول العناصر. ما لم تقم بتعيين الحد إلى 0 ، يمكن لهذا الحد الفوضى تخطيطات الصفحة الخاصة بك. إذا قررت أنك ستستمر في دعم هذه الإصدارات القديمة من IE ، فستحتاج إلى معالجة ذلك عن طريق إضافة ما يلي إلى أنماط النص الأساسي و HTML:
HTML ، النص الأساسي {
الهامش: 0 بكسل ؛
الحشو: 0px؛
الحد: 0 بكسل ؛
}
على غرار الطريقة التي أوقفت بها الهوامش والحشو ، سيؤدي هذا النمط الجديد أيضًا إلى إيقاف تشغيل الحدود الافتراضية. يمكنك أيضًا القيام بنفس الشيء باستخدام محدد حرف البدل الموضح في المقال سابقًا.
المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرارد في 9/27/16.