استفاده از Css Reset برای سازگاری قالب سایت با مرورگرهای مختلف
سازگاری قالب سایت با مرورگرهای مختلف موضوع بسیار مهمی می باشد. امروزه یکی از چالش ها و مشکلات پیش رو برای طراحان وب سازگاری و نمایش صحیح وب سایت طراحی شده بر روی مرورگرهای مختلف (کروم، فایرفاکس و سافاری و … ) می باشد. و طراحی وب سایت به طوری در تمام مرورگر ها به یک شیوه نمایش داده شود (Cross Browser) یک امتیاز ویژه برای طراحان وب است. برخی از طراحان این مشکل را با افزودن سنگین و پیچیده در لابه لای فایل های استایل خود (Css) برطرف می سازند که بسیار پیچیده و همچنین زمان بر می باشد. برای برطرف سازی این مشکل تکنیکی به عنوان استفاده از CSS Reset وجود دارد که از محبوبیت بالایی بین طراحان سایت برخوردار است. با آموزش Css با ما همراه باشید.
Css Reset نمایش صحیح سایت در مرورگر های مختلف
همان طور که می دانیم کد های HTML بدون شیوه نامه Css کاملا به هم ریخته و در واقع بدون هیچ گونه استایلی می باشد. اما پس از نوشتن کد های استایل Css یک قالب با چینش منظم و استایل مورد نظر را خواهیم داشت. اما بدون استفاده از فایل css reset قالب مورد نظر در مرورگرهای مختلف دارای نمایش و چینش متفاوت در قسمت های مختلف پوسته خود می باشد. در مرور گر ie گاهی این تفاوت ها به قدری زیاد است که به هم ریختگی در چینش سایت مشاهده می شود. گهی طراحان سایت از هماهنگ کردن قالب خود در این مرورگر صرفه نظر می کنند! اما می توان به منظور یکسان نمودن حالت پیش فرض نمایش سایت در تمامی مرورگرها از کد های css reset استفاده نمود.
کد CSS Reset چگونه کار می کند؟
css reset مجموعه ای از کد های استایل به زبان برنامه نویسی Css می باشد که در آن تمام استایل های پیش فرض و یکسان عناصر و تگ های HTML که در مرورگر های مختلف به شکل متفاوت دیده می شود قرار گرفته است. پس از استفاده از کد های Css reset استایل قالب به صورت پیش فرض در تمامی مرورگر ها چینش و نمایش یکسانی پیدا می کند و طراح پس از آن کد های استایل Css مد نظر خود را نوشته و قالب خود را شکل می دهد. تنها نکته ای که باید به آن توجه نمود این است که قسمت دستور line-heightرا از کدهای css reset حذف و مقدار فاصله خطوط مد نظر خود را در کد های Css خود قرار دهید. ما برای شما این کد ها را قرار داده ایم که می توانید آن را به راحتی در کپی نموده و در ابتدای فایل Css خود قرار دهید.
همچنین می توانید فایل reset.css را دانلود کرده و آن دا در پروژه خود در فولدر css خود قرار دهید و سپس آن ا با نوشتن کد زیر در ابتدای فایل Css خود فراخوانی نمایید.
@import url(reset.css);
ادامه مطلب
