ريسپانسيو كردن قالب

سازگاري قالب سايت با مرورگرهاي مختلف موضوع بسيار مهمي مي باشد. امروزه يكي از چالش ها و مشكلات پيش رو براي طراحان وب سازگاري و نمايش صحيح وب سايت طراحي شده بر روي مرورگرهاي مختلف (كروم، فايرفاكس و سافاري و … ) مي باشد. و طراحي وب سايت به طوري در تمام مرورگر ها به يك شيوه نمايش داده شود (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);

ادامه مطلب