چقدر با 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
|
هک های مربوط به مرورگر 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
|
همونطور که گفتم IE10و IE11 کم پیش میاد بخوان شمارو اذیت کنند اما یادگیری هک مربوط به این دو نسخه هم ضرری نخواهد داشت . برای IE10 به بالا راه های مختلفی وجود داره اما میتونید یکی از دو روش زیر رو استفاده کنید:
روش اول – استفاده از media queries در 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);
|
useragent در مرورگر IE10 به شکل زیر هست :
۱
|
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)“>
|
حالا تو css به شکل زیر صداش می کنیم و مثلا به h2 رنگ آبی رو اختصاص میدیم :
۱
|
html[data-useragent*=’MSIE 10.0′] h1 {color: blue;}
|
هک مربوط به مرورگرهای Google Chrome , safari , Opera
selectorName در مثال های زیر نام انتخابگر شماست مثلا #menu یا مثلا h2
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
|
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}
|
سپس ما این دستورات رو در فایلی بنام مثلا IE9.css ذخیره میکنیم و با دستورات شرطی اون رو به html مون اضافه میکنیم:
۱
|
<!–[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]—>
|
عبارت gte , lt , lte , gt :
Gt = Greater than (بزرگتر از)
Lt = little than (کوچکتر از)
Gte = greater than And Equal (مساوی و بزرگتر از)
Lte = little than And Equal (مساوی و کوچکتر از)
اگر شما طراح سایت هستید پیشنهاد میکنم این مقاله رو بخاطر بسپارید، چراکه در طراحی سایت استاندارد این نکات می بایست رعایت بشه.
منبع : armanic.com
سایر مقالات مرتبط :
- روش های تشخیص اصل بودن تلویزیون های سامسونگ
- چگونه تایمر کولر گازی را خاموش کنیم؟
- بررسی صرافی انلاین بدون نیاز به احراز هویت
- نکاتی برای خرید ایمیل شرکتی و ایرانی
- بهترین برندهای تلویزیون هوشمند کدامند؟
- اهمیت سیگنال رایگان ارز دیجیتال فیوچرز در ترید
- آشنایی با بهترین قالب های چند منظوره در وردپرس
- استفاده از گوگل ادز در ایران چگونه و چطور؟
- خرید سرور خارج از کشور از سرودیتا
- بهترین سئوکار خانم در ایران ❤️ | بهترین سئوکار خانم ایران
- قوی ترین باتری گوشی های سامسونگ و شیائومی در سال 2023
- سرور HP چیست؛ ۴ دلیل برای استفاده از آن