بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
كما ذكرنا في درس ماض ، لدى كل متصفح تنسيقات افتراضية وهو ما يصطلح عليه ب Default Stylesheet ، ولتجربة ذلك يمكنك إنشاء ملف html واكتب فيه مثلا عنوان h1 ، ولا تعطه أي تنسيق عدا border فقط حتى تتضح لك الأمور ، ثم افتح الملف بمتصفحات مختلفة :
Firefox
Internet Explorer
Google Chrome
...
ولاحظ الفروق ، ستجد اختلافات في font-family و padding و margin ، هذا مجرد عنوان h1 ، فما بالك بملف html مليء بالبلوكات والعناصر ، لهذا يعاني المصممون المبتدؤون من مشكلة عدم ظهور التصميم بشكل واحد في كل المتصفحات وخصوصا المتصفحات القديمة .
ومن حسن حظ المصممين اليوم أن الإصدارات القديمة للمتصفحات التي لا تعرف html5 و css3 أو تعرفها جزئيا لم تعد موجودة بكثرة ، أقصد عندما رفعت شركة Microsoft الدعم عن نظام التشغيل Windows XP ارتاح المصممون من المتصفح internet explorer الإصدارات القديمة الأقل من 9 التي شيبت رؤوسهم.
ومن أجل حل أمثل لضبط التنسيقات الإفتراضية ومنع تأثيرها سلبا على التصميمات تفنن المصممون في كتابة ملفات css خاصة بضبط هذه الإختلافات.
وقد نظرت في بعض هذه الملفات و قمت بإعداد ملف reset.css خال من بعض التعقيدات الموجودة في أغلب الملفات ، وهو على بساطته يضبط تنسيقات المتصفحات ، أهم ما فيه ضبط padding و margin و إعادتهما للقيمة 0 افتراضيا .
وهذه صورة للملف:
يدرج مسار هذا الملف أولا ، ثم بعد ذلك يتبع بمسار الملف الأساسي الذي نكتب فيه أكواد css الخاصة بالقالب الذي نصممه :
وهكذا ينفذ كود reset أولا وبعد ذلك تنفذ الأكواد الخاصة بنا فنحصل على درجة توافق مع كل المتصفحات تتراوح بين 95% و 100% .
إلى اللقاء في دروس جديدة بإذن الله تعالى .