آموزش کامل CSS Hack ، خوب در این زمان از وبسایت پروان وب در خدمتتون هستیم با یک آموزش خیلی عالی از CSS Hack ها که به طور کامل قصد معرفی اون ها رو داریم البته توجه کنید که خیلی این هک های سی اس اس سخت نیستند و شما با کمی آشنایی می تونید با اون ها کار کنید.
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 تون اعمال کنید:
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 مرورگر خوبیه و کم پیش میاد بخواد شمارو اذیت کنه اما گاهی اوقات ممکنه بخواین یه استایل متفاوت برای این نسخه از IE در نظر بگیرید، پس یادگیری هک این نسخه هم خالی از لطف نیست . برای هک IE10 راه های متفاوتی وجود داره اما میتونید از یکی از دو روش زیر استفاده کنید:
روش اول – استفاده از media queries که این روش برای IE10 به بالا استفاده میشه:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* style here for IE10+ */ }
روش دوم – به کارگیری از CSS , Html , JavaScript که یه مقدار مشکله :
کد جاوااسکریپت زیر رو در صفحه وب قرار میدیم تا خصوصیت data-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 با دستور زیر بهش میگیم اگر IE10 بود رنگ متن h1 رو آبی در نظر بگیر:
html[data-useragent*='MSIE 10.0'] h1 {color: blue;}
هک مرورگرهای Google Chrome , safari , Opera
منظور از selectorName در مثال های زیر نام انتخابگر شماست مثلا #TopMenu یا مثلا h1
Selector Hack :
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; } }
هک هارو خدمتتون آموزش دادم ، اما نیاز نیست تمامی هک هارو بخاطر بسپارید چون خیلی کم پیش میاد به همه ی این هک ها احتیاج پیدا کنید، در مواقع نیاز میتونید به این مقاله مراجعه کنید و استفاده کنید؛ اما در اکثر موارد شما باید صفحه ی وبتون رو با IE9 یا IE8 بهینه سازی کنید مخصوصا از زمانی که css3 بین کدنویس ها رواج پیدا کرده. برای همین لازمه که هک های مربوط به این دو مرورگر رو به خوبی یاد بگیرید.
نکته : زمانی که شما هک های 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]-->
به همین راحتی حالا عنصر h1 در تمامی مرورگرها یه استایل داره و در مرورگر IE9 استایل خاص خودش رو داره.
دستورات شرطی یا If condition ها در Html
برای افزودن فایل های css مخصوص هر نسخه ی مرورگر IE میتونید از شروط زیر استفاده کنید:
تمامی نسخه های مرورگر IE
<!--[if IE]> <link rel="stylesheet" href="IE.css"> <![endif]--> فقط نسخه 6 <!--[if IE 6]><link rel="stylesheet" href="IE6.css"><![endif]--> فقط نسخه 7 <!--[if IE 7]><link rel="stylesheet" href="IE7.css"><![endif]--> فقط نسخه 8 <!--[if IE 8]><link rel="stylesheet" href="IE8.css"><![endif]--> فقط نسخه 9 <!--[if IE 9]><link rel="stylesheet" href="IE9.css"><![endif]--> IE نسخه ی 8 و بالاتر از 8 <!--[if gte IE 8]><link rel="stylesheet" href="IE8+.css"><![endif]--> IE نسخه ی 9 به پایین (یعنی IE9 محسوب نمیشه) <!--[if lt IE 9]><link rel="stylesheet" href="IE9-.css"><![endif]--> IE نسخه ی 7 و پایین تر از نسخه ی 7 <!--[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 (مساوی و کوچکتر از)
خوب این آموزش هم به پایان رسید امیدوارم از این آموزش خوشتون اومده باشه و اگه مشکلی داشتین حتما در نظرات مطرح کنید.
منبع: مدرسه مجازی ایرانیان . کام
سلام خدمت شما، در خدمتتون هستم
سلام خدمت شما، در خدمتتون هستم
ثبت نظر جدید لغو پاسخ
لیست نظرات
-
چگونه از غول های فارسی بک لینک رایگان بگیریم ؟!!!
15 فروردين 140418 1,274 0 -
افزونه پنل کاربری حرفه ای و بهترین افزونه ثبت نام وردپرس MemberShip Pro درگاه زرین پال
12 شهريور 139915 5,283 5 -
افزایش سرعت بارگذاری – بهترین افزونه های کش وردپرس
20 آذر 139314 299 0 -
دانلود افزونه Gravity Forms : ساخت انواع فرم های وردپرس
27 آذر 139313 381 0 -
آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت
8 تير 13969 1,755 3 -
معرفی و مقایسه 7 افزونه مشاور املاک وردپرس – ساخت سایت املاک وردپرس
2 ارديبهشت 13979 2,910 5 -
ارسال خودکار مطالب وردپرس به تلگرام، اینستاگرام و سایر شبکههای اجتماعی
1 ارديبهشت 14049 3,485 0 -
آموزش افزونه حتما بخوانید وردپرس
25 بهمن 13958 379 5
-
چگونه خطای 400 درخواست نامعتبر (Bad Request) را در وردپرس برطرف کنیم؟
1 ارديبهشت 14040 16 5 -
ارسال خودکار مطالب وردپرس به تلگرام، اینستاگرام و سایر شبکههای اجتماعی
1 ارديبهشت 14049 3,485 0 -
ایجاد دوره آموزشی آنلاین در وردپرس با 5 افزونه راه اندازی سیستم آموزشی (LMS)
31 فروردين 14041 1,154 4.5 -
راهنمای جامع انتقال وردپرس به دامنه جدید
31 فروردين 14041 1,024 5 -
معرفی جدیدترین افزونههای تقویم وردپرس + تقویم شمسی
29 فروردين 14041 2,584 5 -
آموزش ثبت سایت در یاندکس Yandex به همراه یاندکس متریکا ( جایگزین گوگل آنالیتیکس )
29 فروردين 14041 2,857 5 -
فروش لایسنس در ووکامرس با استفاده از افزونه License Manager for WooCommerce
25 فروردين 14040 57 0 -
بهترین افزونه های جستجوی وردپرس | افزونه جستجو پیشرفته ووکامرس
24 فروردين 14040 525 5
تبلیغات متنی
به این مطالب نیز شاید علاقه مند باشید ...
مطالب مشابه
چگونه خطای 400 درخواست نامعتبر (Bad Request) را در وردپرس برطرف کنیم؟
اگر هنگام کار با سایت وردپرس خود با خطای 400 مواجه شدهاید، نگران نباشید! در این مقاله، به زبان ساده و کامل، تمام راههای رفع این خطا را با هم بررسی میکنیم تا بتوانید سایت خود را به سرعت به حالت عادی برگردانید. خطای 400 Bad Request چیست؟ خطای 400 نشاندهنده این است که سرور […]
ارسال خودکار مطالب وردپرس به تلگرام، اینستاگرام و سایر شبکههای اجتماعی
آیا تا به حال برایتان پیش آمده که بعد از انتشار یک مطلب جدید در سایت وردپرس خود، وقت یا حوصلهای برای اشتراکگذاری آن در شبکههای اجتماعی نداشته باشید؟ خوشبختانه، راهکارهایی وجود دارند که به شما کمک میکنند تا این فرایند را به صورت کاملاً خودکار انجام دهید. با استفاده از ابزارهایی مانند وبسایت IFTTT […]
ایجاد دوره آموزشی آنلاین در وردپرس با 5 افزونه راه اندازی سیستم آموزشی (LMS)
چرا باید از افزونههای آموزش آنلاین در وردپرس استفاده کنیم؟ آیا قصد دارید با استفاده از افزونه ساخت دوره آموزشی وردپرس، یک سیستم آموزشی حرفهای روی سایت خود پیادهسازی کنید؟ خبر خوب این است که با کمک بهترین افزونههای LMS وردپرس، میتوانید بستر مناسبی برای برگزاری دورههای آنلاین، آزمونها و کلاسهای مجازی فراهم کنید؛ همه […]
راهنمای جامع انتقال وردپرس به دامنه جدید
آیا قصد دارید سایت وردپرسی خود را به دامنه جدید منتقل کنید؟ دلایل زیادی وجود دارد که ممکن است شما را به انتقال سایت به دامنه دیگر ترغیب کند. با این حال، اگر با مراحل این کار آشنا نباشید، احتمال دارد با چالشهایی روبرو شوید که برای سئو و عملکرد سایت شما مضر باشند. خبر […]
سلام
بسیار ممنون از مطلب فوق العاده شیر شده…