هک import@ در CSS

echessdesign

مدیر انجمن طراحی وب
هک import@ (اولین مقاله از نوع خود در زبان فارسی)


توضیحات:
SS= StyleSheet
NN4= Netscape Navigator 4
IE= Internet Explorer


بعضی از مرورگر ها ناقص یا توانایی آنرا ندارند که زمان پردازش CSS ، آن را به درستی پردازش کنند (مانند NN 4 که
حتی هنگ هم می کند).
شما با استفاده از هک import می توانید SS وارد شده را از دید مرورگر NN 4 و مرورگر های قدیمی مخفی نگه دارید، (زمانی که CSS را با import لینک می کنید و مرورگر توانایی فهمیدن آن را ندارد).
با قانون import لینک دادن SS خارجی، مرورگر هایی که توانایی تجزیه و تحلیل آن را ندارند، بودن به وجود آمدن مشکلی، از اجرای آن منصرف می شوند.

این نکته را در نظر داشته باشید که لینک دادن CSS توسط import (لینک خارجی) باید بالاتر از لینک دادن CSS به شکل متداول (rel) ان در بین تگ head باشد.

کار با دو StyleSheet:
simple.css > یک نمونه برای مرورگر های قدیمی
modern.css > در CSS2 پیشرفته، روشی برای قلبه بر simple.css

ساخت SS سوم، فقط با "import.css"
HTML:
@import "modern.css";

حالا، به CSS های simple.css و modern.css در تگ head لینک می دهیم:
HTML:
<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="import.css" />
(توجه داشته باشید که در ابتدا باید simple.css را قرار دهید).

هرچند همه مرورگرهای پشتیبانی کننده از CSS1 ، فایل های simple.css و modern.css را لود می کنند، اما فقط مرورگر های مدرن هستند که متوجه قوانین modern.css و لود آن می شوند.

زمانی که modern.css پس از sipmle.css لینک می شود، این قوانین آنها را در sipmle.css ساده تر لغو می کند.

نسخه های مختلف import که توسط مرورگر های قدیمی پشتیبانی می شوند:
HTML:
@import "style.css";      /*  مخفی کردن در نسخه های 4 تمامی مرورگر ها  */
@import url('style.css'); /* IE4 متوجه میشود اما Netscape navigator4 نه   */

مثالی بر فایل های CSS
HTML:
/* simple.css */
body {
  background:white;
  color:#666666;
}
/* modern.css */
body {
  font-size:87%;
  line-height:1.4em;
  text-align:justify;
}


Media =all (مثالی جهت مخفی کردن از دید NN4)
اگر شما فقط یک styleSheet خارجی دارید، باید آن را از دید NN4 مخفی نگه دارید (شما فقط می توایند یک SS ار از این طریق مخفی نگه دارید).
HTML:
<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="hiddenFromNav4.css" media="all" />

در صورتی که نیاز دارید SS خود را از طریق import از دید تمامی نسخه های مرورگر ها IE مخفی کنید، روش زیر را در پیش بگیرید:
HTML:
 <style type="text/css">
@import "modern.css" screen;
</style>

چرا ما از فایل import.css استفاده می کنیم؟
استفاده از عنصر لینک این اجازه را به ما می دهد که وقف بدهیم سیتم خود را با SS های خارجی. اگر SS خارجی اهمیتی نداشت، دیگر نیازی به استفاده از import.css نبود. قانون import@ می تونه در عنصر style به کاربره، بدین شکل:
HTML:
<link rel="stylesheet" type="text/css" href="simple.css" />
<style type="text/css"> @import "modern.css"; </style>


چرا نباید import@ را در پایین simple.css قرار دهیم؟
مطابق مشخصات CSS ، قانون import@ باید مقدم باشه از دیگر قوانین SS، بنا بر این ، این محصول به مکانی در SS برای منظور خود نیازمند است.

لیست مرورگرهایی که توانایی پشتیبانی از قوانین مختلف import@ را دارند:
لینک 1
لینک 2

منبع: تارنمای پارسیان
 

echessdesign

مدیر انجمن طراحی وب
می بخشید منظور از هک چیست!
درود بر شما
در انجمن css ، تایپیکی با همین عنوان زده شده است، با مطالعه آن می توانید به جواب خود دست پیدا کنید...
پاینده باشید.
 

meysamz

Member
echessdesign 2000 پست شدنت را بهت تبريك مي گم:rose:
اما در مورد هك سي اس اس با import موافق نيستم
به نظر من بايد اول سعي كرد تا جايي كه ميشه از هم استفاده نكرد
و اگر هم استفاده ميشه از گزينه هاي جامع تري مثله چك شدن مرورگر توسط جاوا اسكريپت استفاده كرد.
 

جدیدترین ارسال ها

بالا