Normalize.css : رفع ناسازگاری های مرورگرها در نحوه ی نمایش صفحات وب

- visibility ١۵ mode_comment

اگر طراح وب هستید و یا تا حالا سعی کردید صفحه ی وب و یا قالبی رو طراحی کنید حتما ناسازگاری های مرورگرهای مختلف رو دیدید . احتمالا زیاد پیش اومده که طراحی شما در مرورگرهای مختلف به صورت یکسانی نمایش داده نمیشه و دلیل این امر راهکار و نحوه ی متفاوت مرورگرها در رندر کردن اجزای صفحه ی وب هست . این مشکل توی مرورگر اینترنت اکسپلورر خیلی زیاد دیده میشه . هر چند در ورژن های اخر این مرورگر این ناسازگاری ها کم شده! ولی به شخصه خاطره ی خوبی از سازگار کردن طراحی هام با IE ندارم.

Normalize.css

امروز می خوام یه فایل و کتابخانه ی سبک وزن CSS رو به شما معرفی کنم که با تعریف یک سری پیش فرض های CSS خیلی از ناسازگاری های احتمالی رو برطرف میکنه و باعث میشه در اول کار همه ی مرورگرها یک سری تنظیمات تعریف CSS شده ی یکسان رو دشته باشند .

فایلی که می خوام بهتون معرفی کنم Normalize.css هست . حجم این فایل فقط 8 کیلوبایته و درونش به صورت کامنت گذاری شده در  مورد تنظیمات css ی که استفاده کرده توضیح داده و دلیل استفاده از هر سلکتور و ناسازگاری برطرف شده بوسیله ی اون رو آورده .

روش استفاده از Normalize.css :

روش استفاده از این فایل بسیار سادست . کافیه اون رو درون تگ <head> فایل html تون لود کنید . به این شکل :

 

در کد بالا فایل Normalize.css از سایت رسمیش لود شده . شما می تونید این فایل رو دانلود کنید و در هاست شخصی آپلود و استفاده کنید .

info نکته :

تا جایی که ممکنه سعی کنید قبل از شروع طراحی صفحه ی وب و یا قالب سایت و وبلاگتون از این فایل استفاده و اون رو به طراحی تون اضافه کنید، تا طراحی تون با پیش فرض های این فایل شروع بشه و بعد ادامه بدید . اگر قالب و یا صفحه ی وبی رو طراحی کردید و در اواسط طراحی و یا آخرش این فایل رو اضافه کنید، به خاطر اینکه طراحی تون وابسته به تنظیمات ابتدایی این فایل نبوده، ممکنه نتیجه ی دلخواه رو نگیرید .

comment دیدگاه کاربران
hamed17n

بسیار عالی بود ممنون

خیلی ممنون استاد…
یعنی normalize.css یه جور css reset هست؟؟؟

اره تقریبا

Paria RVN

ممنون از مطلب خوبتون،
اگر reset_rtl.css و text_rtl.css و normalize.css را با هم در سایت استفاده کنیم مشکلی ایجاد می شه؟

normalize.css مثل css reset همه ی تنظیمات رو ریست نمی کنه ولی باعث پایداری بهتر در نمایش عناصر در صفحه ی وب میشه . برای طراحی های مدرن و امروزی normalize.css رو شخصا ترجیح میدم و استفاده ی همزمان از این دو رو پیشنهاد نمی کنم .

Paria RVN

ممنون آقای آوند از توضیحاتتون.

سید علی

سلام
یعنی به هیچ کاری به جز اضافه کردنش به صفحه نیازمند نیست؟

لقمان آوند

نه، ولی باید (بهتره) قبل از شروع طراحیتون این فایل رو اضافه کنید و طراحی و کدنویسیتون بر پایه ی اون باشه .
نه اینکه به یه طراحی از قبل آماده اضافه اش کنید . در این صورت ممکنه جواب دلخواه رو نگیرید .

سید علی

ممنون

sajjad

حاجی به خدا دمتون گرم مردی به مولا ! نابودم کردی به مولا !

رضا

با سلام و عرض خسته نباشید خدمت شما اقای آوند.
من یه سایتی دارم که با یه مرورگر فقط درست نشون داده میشه
و کلافم کرده
میخواستم ببینم میشه من قالبم رو برای شما بفرستم و شما برام مشکل رو حل کنید
راستش برام سخته(خیلی سخته)
خیلی ممنون میشم اگر اینکار رو انجام بدید
لطفا جوابتون رو به ایمیلم بفرستید
منتظرتونم
رضا

لقمان آوند

عذرخواهی می کنم ولی وقت انجام اینکارو ندارم.
تو انجمن مطرح کنید ایشالله دوستان کمک کنن

محمد

سلام من کد اسلایدر درون قالبم قرار دادم و یک مشکل عجیب دارم اون هم اینه افکت های اسلایدر به خوبی درون همه مرورگرها نمایش داده میشن ولی درون گوگل کروم خیلی بد نمایش میده یعنی اصلا تو کادر اسلایدر نمایش نمیده دلیلش چی می تونه باشه ممنون

وحید صالحی

سوالتون رو در انجمن مطرح کنید

محمد

امروز هم متوجه شدم منو کرکره ای قالبم هم تو این مرورگر به درستی کار نمی کنه واقعا گیج شدم ممنون میشم کمکم کنید 🙁 🙁 🙁

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.