استفاده از CSS Reset برای هماهنگی مرورگرها
در نحوه نمایش عناصر html توسط مرورگرهای مختلف، ممکن است تفاوت‌هایی وجود داشته باشد که با استفاده از CSS Reset تا حدی می‌توان تمام آنها را هماهنگ کرد.
ایجاد جلوه‌های بصری از جمله نیازمندی‌هایی است که هر سایت لازم دارد تا کاربر احساس خوبی از خواندن مطالب آن داشته باشد و بتواند ارتباط مناسبی با آن برقرر کند. به این منظور یک طراح سایت خوب فرانت‌اند باید با اصول آنها آشنایی کافی را داشته باشد و همچنین بداند که آمار مرورگرهایی که برای نمایش سایت توسط کاربران مختلف انتخاب می‌شود به چه نحو است و اینکه چه تفاوت‌هایی در نحوه نمایش سایت طراحی شده، توسط مرورگرهای متعدد امروزی وجود دارد تا در نهایت بتواند در صورت لزوم به رفع تفاوت‌ها و یا اختلافات موجود بپردازد. یکی از روش‌های رفع مغایرت نمایش عناصرر html در حالت پیش‌فرض استفاده از CSS Reset است که در این مقاله آموزشی می‌خواهیم در خصوص دلایل بهره‌گیری از آن و توضیحاتی درباره آموزش استفاده از آن، نکات ضروری را برای همراهان و مخاطبین نیوسان‌وب ذکر کنیم.
مرورگرهای مهم نمایش صفحات وب
امروزه (ابتدای سال 1401) شاید بتوان 6 مرورگر (Browser) مهم را که کاربران جهان برای نمایش صفحات وب استفاده می‌کنند، نام برد. این مرورگرها عبارتند از گوگل کروم، موزیلا فایرفاکس، اپل سافاری، اپرا، مایکروسافت ادج و مایکروسافت اینترنت اکسپلورر. البته این را باید اضافه کرد که مایکروسافت زمان پایان استفاده از مرورگر اینترنت اکسپلورر را 15 ژوئن 2022 اعلام کرده است که پس از آن تاریخ در مایکروسافت ادج خدمات لازم را ارائه خواهد داد و به این ترتیب اینترنت اکسپلورر در ویرایش 11 خود به کارش پایان خواهد داد.
در حال حاضر رتبه برتر کل مرورگرها در دستگاه‌های مختلف با اختلاف فاحش نسبت به بقیه گوگل کروم است و پس از آن مرورگرهای دیگر مانند سافاری و موزیلا فایرفاکس قرار دارند. البته بد نیست این را هم بدانید که حدودا تا سال 2012 این اینترنت اکسپلورر بود که بر کلیه مرورگرهای موجود سروری می‌کرد، اما سرانجام رقبای قدر، موفق شدند گوی سبقت را از آن بربایند و پیشتاز شوند.
اگر بخواهید بدانید در ایران وضعیت کنونی (مارس 2022) استفاده از مرورگرها چگونه است، تصویر زیر را مشاهده کنید:
CSS Reset و چرایی استفاده از آن
در پاراگراف قبلی گفتیم که کاربرها از مرورگرهای مختلفی استفاده می‌کنند. با توجه به اینکه هر مرورگر توسط شرکت خاصی تولید می‌شود، در نمایش یا رندر کردن برخی از عناصر صفحه وب، ممکن است با دیگر مرورگرها اندک تفاوتی داشته باشد. (به عنوان مثال اگر یک پاراگراف را در فایرفاکس 3 می‌نوشتید، در بالای آن یک فضای خالی با المان قبلی ایجاد می‌شد و این در حالی بود که در اینترنت اکسپلورر 7 این فضا ایجاد نمی‌شد) برای اینکه این اختلافات وجود نداشته باشد و نمایش محتوا در همه مرورگرها یکسان باشد، از CSS Reset استفاده می‌شود تا در ابتدای کار تمام شیوه‌های عامل کاربری را باطل کرده و مجددا بازنویسی کند. سالهاست که شخصی به نام اریک مایر (Eric A. Meyer) روی این بازنویسی شیوه‌ها کار کرده تا با افزودن برخی شیوه‌ها، نمایش در تمام مرورگرها یکسان شود که آن شیوه‌ها را می‌توانید از این آدرس پیدا کنید که تصویر آن به شکل زیر است.
برای استفاده از CSS Reset می‌توانید آن را در بالای فایل حاوی شیوه‌های سایت خودتان جانمایی کنید و یا اینکه درون یک فایل جدید بگذارید و مطابق آنچه در مقاله آموزشی CSS و کاربرد آن گفته شد، آن را در قسمت head فایل html خودتان فرخوانی کنید. البته همانطور که در ان مقاله گفته شد، در هنگامی که سایت روی یک هاست قرار می‌گیرد، بسیار بهتر است که تنها یک فایل CSS در پروژه خود داشته باشید.
اگر به کدهای نوشته شده نگاهی بیندازید، متوجه می‌شوید که برای کلیه المان‌های HTML مشخص شده، شیوه مشخصی نوشته شده است تا محتوای صفحه وب در تمام مرورگرها به صورت پیش‌فرض به یک شکل با استفاده از آن به نمایش در آید؛ مسلما هر تغییری که بخواهید روی شیوه نمایش هر المان در ادامه این فایل CSS بدهید، اثر شیوه تنظیم شده آن که گفتیم توسط اریک مایر انجام شده است، از بین رفته و شیوه جدید اعمال می‌شود.
جمع‌بندی
در این مقاله ابتدا در خصوص میزان استفاده کاربران از برخی مرورگرهای رایج، آمار و تاریخچه ذکر شد. گفته شد با توجه به اینکه به صورت پیش‌فرض ممکن است برخی از مرورگرها، صفحات html حاوی المان‌های مختلف را با دیگر مرورگرها متفاوت نشان دهند، باید از CSS Reset در فایل استایل استفاده کرد. یکی از CSS Reset های معرفی شده در این مقاله، شیوه‌نامه نوشته توسط اریک مایر بود که در صورت لزوم می‌توانید از آن برای هماهنگی بیشتر نمایش صفحات وبسایت‌هایتان در مرورگرهای مختلف بهره بگیرید. اگر هنوز با دستورات css که در بالا گفته شد، زیاد آشنا نیستید، زیاد نگران نباشید چرا که هنوز در ابتدای آموزش هستیم و در سایر مقالات، به زودی آموزش‌های لازم را در این خصوص ارائه خواهیم داد تا دغدغه و مشکلی از این جهت نداشته باشید.
لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.