گاهی اوقات ممکن است یک سایت را طراحی کرده باشید و متوجه شوید در بعضی از مرورگر ها درست نمایش داده نمی شود و یا قسمتی از آن را نمایش نمی دهد، در این صورت از css هک استفاده می کنید. اما سی اس اس هک چیست و چه روش هایی برای این کار وجود دارد؟ این کد که کار خواندن سایت در مرورگرهای مختلف به خصوص مرورگر های قدیمی که در ادارات در حال استفاده هستند را انجام می دهد یک قطعه کد است که در ادامه قصد داریم به طور کامل ان را معرفی کنیم، لطفاً با ما تا انتهای این مطلب همراه باشید.
css هک چیست و چه کاربردی دارد؟
همانطور که در مقدمه توضیح مختصری در این مورد دادیم، سی اس اس هک یک سری قطعه کد هستند که با استفاده و به کارگیری بعضی روش های خاص می تواند به مرورگر مورد نظر دستور دهد تا مطالب سایت شما را به درستی نشان دهد.
ممکن است سایتی طراحی کرده باشید که در مرورگر فایرفاکس به درستی نمایش داده شود ولی در IE این طور نباشد زیرا این مرورگر قدیمی و فایرفاکس جدید تر است. شما در این حالت دو روش دارید یا می توانید بیخیال کاربرانی شوید که از نسخه های قدیمی مرورگر ها استفاده می کنند که در این صورت نصف کاربران خود را از دست می دهید.
یا می توانید با به روز کردن دانش خود و به کار گیری این قطعه کد ها، به مرورگر های قدیمی دستور دهید تا سایت شما را با محتوای کامل به کاربران نمایش دهند.
برای جواب این سؤال باید گفت اگر فایر فاکس را به عنوان یک مرورگر خوب در نظر بگیریم که همه کد ها را می خواند و معمولاً هم همینطور است، برای مرورگر های نظیر IE , Chrome , Opera و Saffari کار بهینه سازی را انجام می دهیم. با این که این روزها IE9 به پایین زیاد کاربرد ندارد ولی بیشتر کارمندان سازمان ها از IE6 به بالا استفاده می کنند که اگر این دسته از کاربران برای شما مهم هستند، باید از IE6 به بالا را یاد بگیرید.
با توجه به این که IE6 از خیلی از دستورات سی اس اس پشتیبانی نمی کند و همچنین عکس های PNG در آن نمایش داده نمی شوند، بسیاری از کد هایی را که در IE8 اجرا می شوند در این مرورگر IE6 و IE7 اجرا نمی شوند به همین دلیل نیاز است تا با وارد کردن یک قطعه کد هم کار لازم را انجام دهیم و هم در مصرف زمان صرفه جویی کرده باشیم. در این مطلب با ما همراه باشید تا css هک را به شما عزیزان آموزش دهیم.
مقاله پیشنهادی : زبان css چیست و چه کاربردی دارد؟
نحوه نوشتن کد های css هک چیست؟
شیوه نامه های مشروط css هک:
در ابتدا بهتر است بگوییم که هر کدام از این قطعه کد ها اگر برای یک مرورگر خاص نوشته شده باشند، بر روی دیگر مرورگر ها قابل اجرا نمی باشند.
برای مثال در قطعه کدهای زیر تعیین کرده ایم که اگر مرورگر کاربر IE6 بود، قطعه کدی که فایل CSS آن for-ie-6.css نام دارد اجرا شود و اگر مرورگر IE8 بود قطعه کدی که در فایل سی اس اس for-ie-7.css وجود دارد اجرا شده و همچنین اگر مرورگر کاربر IE8 بود از فایل CSS با نام for-ie-8.css استفاده کند. این شروط به نحوه زیر نوشته می شوند:
1.<!–[if for IE 8]><link rel=”stylesheet” href=”/for-ie-8.css”><![endif]–>
2.<!–[if for IE 7]><link rel=”stylesheet” href=”/for-ie-7.css”><![endif]–>
3.<!–[if for IE 6]><link rel=”stylesheet” href=”/for-ie-6.css”><![endif]–>
نحوه اجرای کدهایی مانند بالا، در مرورگرهای دیگر به شکل زیر است:
1/* استایل شیت اصلی و عموعی */
2.test { color: black; }
3/* for-ie-8.css, برای مرورگر اینترنت اکسپلورر 8 و ماقبل آن */
4.test {color: red;}
5/* for-ie-7.css, برای مرورگر اینترنت اکسپلورر 7 و ماقبل آن */
6.test {color: white;}
7/* for-ie-6.css, برای مرورگر اینترنت اکسپلورر 6 و ماقبل آن */
8.test {color: black;}
کلاسهای گفته شده در یک فایل جداگانه نوشته می شوند. اگر مایل هستید کلاسهای بالا را داخل کدهای CSS بنویسید، می توانید شرطی استفاده کنید. با نام بردن آن ها در قسمت تگ Body یا تگ html دستورات را در هر کلاس بنویسید:
1.<!–[if lt IE 6]><html class=”ie6″><![endif]–>
2.<!–[if IE 7]><html class=”ie7″><![endif]–>
3.<!–[if IE 8]><html class=”ie8″><![endif]–>
پس از نوشتن کدها در html، کدهایی که برای مرورگر مورد نظر نوشته شده اند اجرا می شوند، مانند زیر:
1.test { color:black; }
2.ie8 .test { color: red; } /*IE8*/
3.ie7 .test { color: white; } /*IE7*/
4.ie6 .test { color: black;} /*IE6*/
مقاله پیشنهادی : آموزش هکر شدن
روش نوشتن کدهای css هک چیست؟
نمونه ای از نوشتن کدهایی که فقط در یک مرورگر می خواهیم اجرا شوند:
1.test {
2.color:black;
3.color: green\9; /* IE8 and older, but there`s more… */
4.*color: blue; /* IE7 and older */
5._color: red; /* IE6 and older */
6.color: expression(‘red’); /* IE6 and above */
نحوه نوشتن به صورت تلفیقی کد های مشروط
ابتدا باید گفت که استفاده از کد های کلاس های مشروط و هک های css با هم و به صورت تلفیقی وجود دارد و نحوه نوشتن کد های آن به صورت زیر است:
<!–[if lt IE 9]><html class=”for-ie8″><![endif]–>
این دستور که به مرورگر دستور می دهد تا در نسخه های پایین تر از IE9 کلاسی که for-ie8 نام دارد را اجرا کند و سپس کلاس را به این صورت تعریف می کنیم: .for-ie8
حال نتیجه تلفیق این دو به صورت زیر است که بر روی همه مرورگر های IE8، IE7 و IE6 اجرا می شود:
1.test { color : black; }
2.for-ie8 .test {
3.color: red; /*IE8 and older*/
4.*color: green; /*IE7 and older*/
5._color: blue; /*IE6 and older*/
معانی برخی عبارات نوشته شده هم چون عبارت gte , lt , lte , gt به این معنی هستند:
Gt = Greater than (بزرگتر از)
Gte = greater than And Equal (معنی مساوی و بزرگتر)
Lt = little than (کوچکتر از)
Lte = little than And Equal (معنی مساوی و کوچکتر)
نتیجه گیری
هنگامی که سایتی را طراحی می کنید ممکن است در همه ی مرورگر ها به نحو خوبی اجرا نشود، برای رفع این کار می توانید از CSS هک ها استفاده کنید که هم وقت کمی صرف می کنید و هم به راحتی کار لازم الاجرا می شود. برای نوشتن این کد ها روش هایی وجود دارد که در مطلب گفته شد. همچنین امکان تلفیق کدهای کلاس مشروط و هک CSS با هم نیز وجود دارد و می توان جهت طولانی نشدن کد ها ان ها را با هم نوشت که نمونه ان در مطلب وجود دارد. شما می توانید با به کار گیری این قطعه کد های کوچک ولی کاربردی کاری کنید تا تمام کاربران چه کاربرانی که مرورگر قدیمی دارند و چه کاربرانی که مرورگر جدید دارند، بتوانند از سایت شما دیدن نمایند.