میترا رحیمی

تاریخ انتشار: ۱۳۹۵-۰۳-۲۸

چقدر با css hack ها آشنا هستید !؟

آیا بطور کامل css hack ها را می شناسید؟

اگر با طراحی سایت سر وکار دارید فکر میکنم عبارت هک css رو زیاد شنیده باشید اما شاید خیلی از طراحان و یا افراد آشنا به طراحی سایت از کاربرد این هک ها اطلاعی نداشته باشند .

در این مقاله قصد دارم شمارو با css hack ها آشنا کنم و نحوه ی استفاده از اون رو در طراحی سایت خدمتتون توضیح بدم.

هک css چیست و چه کاربردهایی داره؟

حتما برای شما پیش اومده که سایتی رو کدنویسی کنید و در مرورگرهای مختلف مشکل داشته باشید. مرورگرهایی مثل Internet Explorer , chrome , Saffari , Opera و یا حتی FireFox برخی از خصوصیات و مشخصه های موجود در css رو متوجه نمیشوند و توانایی اجرای صحیح اونهارو ندارند ؛ در این لحظه ما باید با هک های css این خصوصیات و مشخصه هارو به این مرورگرها معرفی کنیم به نحوی که این خصوصیات رو شناسایی کنند و اونهارو به درستی اجرا کنند.

چه مرورگرهایی رو میتونیم هک کنیم؟

ما فرض رو بر این میزاریم که هنگام طراحی سایت و کدنویسی با فایرفاکس کار میکنیم و نتیجه ی اولیه رو روی این مرورگر بررسی میکنیم. بنابراین باید سایت رو با مرورگرهای دیگه هماهنگ کنیم.

معمولا تمامی مرورگرها به غیر از IE و  Saffari با فایرفاکس همراه هستند و نیازی برای بهینه سازی و هک ندارید.

البته در حال حاضر اکثرا از  IE10 و  IE11 استفاده می کنند که اکسپلورر در این نسخه ها کمی با فایرفاکس راه اومده و مشکلی بوجود نمیاره اما IE9 به پایین دیگه استفاده نمیشه و توسط کدنویسان در طراحی سایت نیز پشتیبانی نمیشه، با این وجود بهینه سازی سایت برمیگرده به مخاطبین شما ، مثلا اگر قرار باشه شما قالب سایت رو برای یک فروشگاه ساز بهینه سازی کنید ، نیازی به بررسی سایت در  IE9 به پایین نخواهید داشت اما اگر بخواهید یک سایت برای یک سازمان و یا ارگان دولتی طراحی کنید می بایست برای  IE9 , IE8 , IE7 و  IE6 هم بهینه سازی انجام بدید، چرا که هنوز کارمندان دولتی از  IE9 به پایین استفاده می کنند.

به همین خاطر علاوه بر هک مرورگهای دیگه،  هک مربوط به  IE6 تا IE9  رو هم خدمتتون آموزش میدم.

چگونگی استفاده از css hack ها

با در نظر گرفتن مشخصه ی  color ، هک مرورگرهای مختلف رو خدمتتون آموزش میدم، البته این مشخصه در تمامی مرورگرها اجرا میشه و مشکلی نداره ، صرفا برای آشنایی شما با هک ها این مشخصه ی ساده رو مثال میزنم.

همونطور که میدونید کد زیر برای همه ی مرورگرها نوشته میشه:

هک های مربوط به مرورگر  IE

همونطور که گفتم  IE10و IE11 کم پیش میاد بخوان شمارو اذیت کنند اما یادگیری هک مربوط به این دو نسخه هم ضرری نخواهد داشت . برای  IE10 به بالا راه های مختلفی وجود داره اما میتونید یکی از دو روش زیر رو استفاده کنید:

روش اول – استفاده از media queries در IE10 به بالا :

روش دوم – استفاده از CSS , Html , JavaScript (این روش کمی دقت میخواد):

از کد جاوا اسکریپت زیر در صفحه وبمون استفاده می کنیم و useragent رو به سند html معرفی میکنیم:

useragent در مرورگر IE10 به شکل زیر هست :

کد زیر رو توی Html هم تعریف میکنیم تا بتونیم در css بهش اشاره کنیم:

حالا تو css به شکل زیر صداش می کنیم و مثلا به h2 رنگ آبی رو اختصاص میدیم :

هک مربوط به مرورگرهای Google Chrome , safari , Opera

selectorName در مثال های زیر نام انتخابگر شماست مثلا #menu یا مثلا  h2

لازم به ذکر هست که زمانی که شما هک های IE رو به کار میبرید باید دستورات مربوطه رو داخل یک فایل css ذخیره کنید و با دستورات شرطی اون فایل رو در html تون صدا بزنید. مثلا ما میخوایم برای IE9 یک سری استایل خاص تعریف کنیم، دستورات css به شکل زیر خواهد بود:

سپس ما این دستورات رو در فایلی بنام مثلا IE9.css ذخیره میکنیم و با دستورات شرطی اون رو به html مون اضافه میکنیم:

در مثال بالا در IE9 عنصر h1 ما رنگ قرمز و فونت tahoma با سایز ۱۳ پیکسل خواهد داشت.

دستورات شرطی یا If condition ها در html چیست ؟

برای معرفی فایل های css مربوط به هر نسخه از مرورگر IE از دستورات شرطی استفاده می کنیم:

عبارت gte , lt , lte , gt :

Gt = Greater than (بزرگتر از)

Lt = little than (کوچکتر از)

Gte = greater than And Equal (مساوی و بزرگتر از)

Lte = little than And Equal (مساوی و کوچکتر از)

اگر شما طراح سایت هستید پیشنهاد میکنم این مقاله رو بخاطر بسپارید، چراکه در طراحی سایت استاندارد این نکات می بایست رعایت بشه.

عضویت در خبرنامه سایت

با عضویت در خبرنامه می توانید از جدیدترین مقالات، اخبار و محصولات سایت در ایمیل خود با خبر شوید.

به جمع 9475 کاربر ما بپیوندید.

ایمیل خود را وارد کنید
loading در حال ارسال اطلاعات...