امروز : چهارشنبه ۱ آذر ۱۳۹۶ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

 

Compatibility-with-different-browsers-Site-Templates-VEBEET استفاده از 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  خود قرار دهید.

/* css reset */html,body,div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, menu, output, ruby, section, summary,time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, menu, section {    display: block;}body {    line-height: 1px;}ol, ul {    list-style: none;}blockquote, q {    quotes: none;}blockquote:before, blockquote:after,q:before, q:after {    content: ”;    content: none;}

همچنین می توانید فایل reset.css  را دانلود کرده و آن دا در پروژه خود در فولدر css خود قرار دهید و سپس آن ا با نوشتن کد زیر در ابتدای فایل Css خود فراخوانی نمایید.

@import url(reset.css);

سازگاری html5 با مرورگرهای قدیمی با html5shiv.js

با به روز رسانی نسخه html  به html5  تگ های پر کاربرد جدیدی با برچسب های جدید اضافه شده است. این تگ ها به منظور  قابلیت های مفیدی مانند ساخت انیمیشن بدون بهره گیری از فلش و همچنین به منظور شناسایی قسمت های مختلف صفحات وب سایت توسط موتور های جستجوگر ایجاد شده اند. برخی از این تگ ها مانند header، footer ، aside ، article  و… از جدیدترین تگ های زبان اچ تی ام ال در html5  می باشند. اما در اینجا یک مشکل پیش می آید و آن عدم سازگاری تگ های جدید html  با مرورگر های قدیمی است که مجددا این مشکل نیز باعث بهم ریختگی و نمایش غیر استاندارد قالب می باشد. برای برطرف سازی این مشکل نیز راه حل منلسبی وجود دراد و آن افزودن و یا فراخوانی اسکریپتی با نام html5shiv.js در پوسته قالب وب سایت مورد نظر است. کد جاوای مورد نظر را در ابتدای قالب وی سایت خود در فایل header.php  قرار دهید. فایل مورد نظر را می توانید از اینجا دانلود نمایید.

موفق و سلامت باشید.

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

منبع : وبیت

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 1,348 بار دسته بندی : اخبار دیدگاه : ۰ تاريخ : ۱۰ خرداد ۱۳۹۶
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
حانیه فراهانی

حانیه فراهانی هستم، فارغ التحصیل رشته IT و در زمینه گرافیک، طراحی و سئو سایت فعالیت می کنم. بنده مفتخرم که چندی از اطلاعات خود در این زمینه را در اختیار شما دوستان عزیز قرار دهم.

دیدگاه کاربران تعداد دیدگاه : ۰