چقدر با 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 ، هک مرورگرهای مختلف رو خدمتتون آموزش میدم، البته این مشخصه در تمامی مرورگرها اجرا میشه و مشکلی نداره ، صرفا برای آشنایی شما با هک ها این مشخصه ی ساده رو مثال میزنم.

کدام طراح وب سایت بهتر است؟

بخوانید

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

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

color:red; All browsers

۱	color:red; All browsers

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

color:red !important; All browsers but IE6 _color:red; Only works in IE6 *color:red; IE6, IE7 +color:red; Only works in IE7 *+color:red; Only works in IE7 color:red\9; IE6, IE7, IE8, IE9 color:red\0; IE8, IE9 color:red\9\0; Only works in IE9

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

color:red !important; All browsers but IE6

_color:red; Only works in IE6

*color:red; IE6, IE7

+color:red; Only works in IE7

*+color:red; Only works in IE7

color:red\9; IE6, IE7, IE8, IE9

color:red\0; IE8, IE9

color:red\9\0; Only works in IE9

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

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

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {    /* style here for IE10+ */ }

۱	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* style here for IE10+ */ }

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

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

var doc= document.documentElement;doc.setAttribute(‘data-useragent’, navigator.userAgent);doc.setAttribute(‘data-platform’, navigator.platform);

۱	var doc= document.documentElement;doc.setAttribute(‘data-useragent’, navigator.userAgent);doc.setAttribute(‘data-platform’, navigator.platform);

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

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

۱	Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

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

<html data-useragent=”Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)”>

۱	<html data-useragent=”Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)“>

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

html[data-useragent*=’MSIE 10.0′] h1 {color: blue;}

۱	html[data-useragent*=’MSIE 10.0′] h1 {color: blue;}

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

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

safari 3+, chrome 1+, opera9+, ff 3.5+<br /><br>
body:nth-of-type(1) #selectorName { color: red }</p><br>
<p>safari 3+, chrome 1+, opera9+, ff 3.5+<br /><br>
body:first-of-type #selectorName {  color: red }</p><br>
<p>iPhone / mobile webkit<br /><br>
@media screen and (max-device-width: 480px) {<br /><br>
 #selectorName { color: red  }<br /><br>
}</p><br>
<p>Chrome ,  Safari , Opera<br /><br>
@media screen and (-webkit-min-device-pixel-ratio:0) {<br /><br>
    /* Safari , Chrome , Opera */<br /><br>
    #selectorName {<br /><br>
     color:#c00;<br /><br>
    }<br /><br>
    /* only Safari 5+*/<br /><br>
    ::i-block-chrome, #selectorName {<br /><br>
     color:#000;<br /><br>
    }<br /><br>
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

safari 3+, chrome 1+, opera9+, ff 3.5+

body:nth-of-type(1) #selectorName { color: red }

safari 3+, chrome 1+, opera9+, ff 3.5+

body:first-of-type #selectorName { color: red }

iPhone / mobile webkit

@media screen and (max-device-width: 480px) {

#selectorName { color: red }

}

Chrome , Safari , Opera

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* Safari , Chrome , Opera */

#selectorName {

color:#c00;

}

/* only Safari 5+*/

::i-block-chrome, #selectorName {

color:#000;

}

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

h1{color: red\9; font:13px tahoma\9}

۱	h1{color: red\9; font:13px tahoma\9}

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

<!–[if IE 9]><link rel=”stylesheet” href=”IE9.css”><![endif]–>

۱	<!–[if IE 9]><link rel=”stylesheet” href=”IE9.css”><![endif]–>

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

قالبهای فایل تصویر

بخوانید

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

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

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

<!–[if IE]> <link rel=”stylesheet” href=”IE.css”> <![endif]–> فقط نسخه ۶ <!–[if IE 6]><link rel=”stylesheet” href=”IE6.css”><![endif]–> فقط نسخه ۷ <!–[if IE 7]><link rel=”stylesheet” href=”IE7.css”><![endif]–> فقط نسخه ۸ <!–[if IE 8]><link rel=”stylesheet” href=”IE8.css”><![endif]–> فقط نسخه ۹ <!–[if IE 9]><link rel=”stylesheet” href=”IE9.css”><![endif]–> IE نسخه ی ۸ و بالاتر از ۸ <!–[if gte IE 8]><link rel=”stylesheet” href=”IE8+.css”><![endif]–> IE نسخه ی ۹ به پایین (یعنی IE9 محسوب نمیشه) <!–[if lt IE 9]><link rel=”stylesheet” href=”IE9-.css”><![endif]–> IE نسخه ی ۷ و پایین تر از نسخه ی ۷ <!–[if lte IE 7]><link rel=”stylesheet” href=”IE7-.css”><![endif]–> بالاتر از نسخه ی IE6 <!–[if gt IE 6]><link rel=”stylesheet” href=”IE6+.css”><![endif]–> اگر که مرورگر IE نباشه <!–[if !IE]><link rel=”stylesheet” href=”style.css”><!– <![endif]–>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

<!—[if IE]> <link rel=“stylesheet” href=“IE.css”> <![endif]—>

فقط نسخه ۶

<!—[if IE 6]><link rel=“stylesheet” href=“IE6.css”><![endif]—>

فقط نسخه ۷

<!—[if IE 7]><link rel=“stylesheet” href=“IE7.css”><![endif]—>

فقط نسخه ۸

<!—[if IE 8]><link rel=“stylesheet” href=“IE8.css”><![endif]—>

فقط نسخه ۹

<!—[if IE 9]><link rel=“stylesheet” href=“IE9.css”><![endif]—>

IE نسخه ی ۸ و بالاتر از ۸

<!—[if gte IE 8]><link rel=“stylesheet” href=“IE8+.css”><![endif]—>

IE نسخه ی ۹ به پایین (یعنی IE9 محسوب نمیشه)

<!—[if lt IE 9]><link rel=“stylesheet” href=“IE9-.css”><![endif]—>

IE نسخه ی ۷ و پایین تر از نسخه ی ۷

<!—[if lte IE 7]><link rel=“stylesheet” href=“IE7-.css”><![endif]—>

بالاتر از نسخه ی IE6

<!—[if gt IE 6]><link rel=“stylesheet” href=“IE6+.css”><![endif]—>

اگر که مرورگر IE نباشه

<!—[if !IE]><link rel=“stylesheet” href=“style.css”><!— <![endif]—>

ویژگی های مهم و کلی طراحی سایت تبلیغاتی

بخوانید

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

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

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

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

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

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

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

منبع : armanic.com