آموزش طراحی وب

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

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

csshack

سلام خدمت همراهان همیشگی ماهنامه طراحی وب

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

 

CSS Hack چیست؟

اول از همه یک توضیحی میدم در رابطه با هک های css که اصلا این هک ها چی هستند و در چه مواقعی استفاده میشوند. در مواقعی که شما از برخی از خصوصیات و مشخصه های css استفاده می کنید و مرورگر IE , Chrome , Saffari و … اون خصوصیت و مشخصه رو متوجه نمیشه و نمیتونه اون رو اجرا کنه از هک های css استفاده میکنیم.

به عنوان مثال ما یک shadow برای یک Div تعریف کردیم که IE8 اون رو متوجه نمیشه و به درستی اجرا نمیکنه ، در این لحظه شما راهه دیگه ای ندارید جز اینکه از هک استفاده کنید.

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

 

در حال حاضر به هکِ چه مرورگرهایی احتیاج داریم؟

ما چک کردن نمایش صحیح نتایج کدنویسی رو روی Firefox در نظر میگیریم که عموما هم همینطور هست و بهینه سازی رو برای مرورگرهای IE , Chrome , Opera و Saffari انجام میدیم . البته در اکثر موارد مرورگرها به جز IE با FireFox همراه هستند و نیازی برای بهینه سازی ندارید .

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

 

نحوه ی استفاده از هک های css

در لیست زیر شما میتونید با هک های موجود در css آشنا بشید:

دستور زیر در تمامی مرورگرها اجرا میشه، حالا با همین دستور هک هارو خدمتتون توضیح میدم، این دستورات رو شما باید در فایل css تون اعمال کنید:

 

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

 

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

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

 روش دوم – به کارگیری از CSS , Html , JavaScript که یه مقدار مشکله :

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

useragent در مرورگر IE10 به شکل زیر خواهد بود:

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

حالا تو css با دستور زیر بهش میگیم اگر IE10 بود رنگ متن h1 رو آبی در نظر بگیر:

 

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

منظور از selectorName در مثال های زیر نام انتخابگر شماست مثلا #TopMenu یا مثلا h1

Selector Hack :

 

هک هارو خدمتتون آموزش دادم ، اما نیاز نیست تمامی هک هارو بخاطر بسپارید چون خیلی کم پیش میاد به همه ی این هک ها احتیاج پیدا کنید، در مواقع نیاز میتونید به این مقاله مراجعه کنید و استفاده کنید؛ اما در اکثر موارد شما باید صفحه ی وبتون رو با IE9 یا IE8 بهینه سازی کنید مخصوصا از زمانی که css3 بین کدنویس ها رواج پیدا کرده. برای همین لازمه که هک های مربوط به این دو مرورگر رو به خوبی یاد بگیرید.

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

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

به همین راحتی 🙂 حالا عنصر h1 در تمامی مرورگرها یه استایل داره و در مرورگر IE9 استایل خاص خودش رو داره.

 

دستورات شرطی یا If condition ها در Html

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

تمامی نسخه های مرورگر IE

عبارت gte , lt , lte , gt معانی زیر رو دارند:

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

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

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

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

خوب همراهان عزیز در اینجا مقاله ی آموزشی به اتمام میرسه ، امیدوارم که براتون مفید بوده باشه.

موفق و پاینده باشید

تهیه شده در مدرسه مجازی ایرانیان

منتشر شده در ششمین ماهنامه طراحی وب

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

ثبت دیدگاه

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین