سلام
چطور میشه css ای فقط مخصوص ie یا هر مرورگری اختصاص داد؟
منظورم اینه مثلا یه css کلی برای سایت دارم و می خوام این سایت تو مرورگر ie با یه تغییرات دیگه ای تو css جداگانه نشون داده بشه.
چطور میتونم این css اختصاصی رو واسه یه مرورگر خاص تعریف کنم؟
Printable View
سلام
چطور میشه css ای فقط مخصوص ie یا هر مرورگری اختصاص داد؟
منظورم اینه مثلا یه css کلی برای سایت دارم و می خوام این سایت تو مرورگر ie با یه تغییرات دیگه ای تو css جداگانه نشون داده بشه.
چطور میتونم این css اختصاصی رو واسه یه مرورگر خاص تعریف کنم؟
بالخره یه سوال درست حسابی دیدیم
دوست من شما چند تا راه دارید ببینید کدوم راحتید انجام بدید
یکیش اینه که از اسکریت جاوا اسکریپت استفاده کنید : [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
دومیش اینه که از browser ---- استفاده کنید سایت : [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
[HTML]/***** Selector Hacks ******/
/* IE 6 and below */
* html #uno { color: red }
/* IE 7 and below */
*:first-child+html #dos { color: red }
/* IE 7 and modern browsers */
html>body #tres { color: red }
/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below */
html:first-child #cinco { color: red }
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { background: #FFDECE; border: 2px solid #ff0000 }
}
/***** Attribute Hacks ******/
/* ie6 and below */
#once { _color:blue }
/* ie7 and below */
#doce { *color: blue } /* or #color:blue */
/* 'Modern Browsers' includes IE8, whether you agree or not.. :) */[/HTML]
سومیش اینه که : از این کد ها استفاده کنید :
[HTML]<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>[/HTML]
چهارمیش اینه که از این مدل کدهای جاوا اسکریپت استفاده کنید :
[HTML]<script type="text/javascript"> var browser=navigator.appName; if browser == "Microsoft Internet Explorer" { document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">"); } else if browser == "Firefox" { document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"FF.css\">"); } else { document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">"); } </script>[/HTML]
راه های دیگه ی زیادی هست که میشه از این راه ها پیدا کرد
چه عجب بعد 2 هفته یکی پیدا شد جواب بده!
سایت خوابیده!
دست درد نکنه خوب بود:n16:
ولی بهتره برای اینایی که گفتی یه توضیحی هم میدادی دادا.
مثلا کدوم یکی از اینا رو باید تو فایل html استفاده کرد؟ و کدوم برای فایل css هست و چطوری و کجای فایل باید استفاده بشن؟!
کدوم برای کل فایله و کدوم فقط برای یک کلاس و id خاص؟
چون مثلماً هر کدوم روش هایی برای استفاده دارن دیگه.
به عنوان نمونه من منظور اینرو نفهمیدم یعنی چی؟:
/* IE 7 and below */ *:first-child+html #dos { color: red }
حالا که یه سؤال خوب دیدی ؛ یه جواب خوب هم بده دادا! :n26:
این بخش از فروم ۳ ساله خوابیده؛ دلیلش هم نپرسیدن سوالای درست و حسابیه! :n02:
اون سایتهایی که معرفی شد هم خوب بود ها، مثلن همون بروزر هکس، خوب توضیح داده.
موردهای ۱ و ۳ و ۴ که محمد معرفی کرد، برای کل فایل میتونه مورد استفاده قرار بگیره، یعنی می تونید یک فایل جداگانه برای مرورگرهای مختلف ایجاد کنید و فایل css آماده شده تون رو برای همون مرورگر موردنظرتون درنظر بگیرید. که سومی فقط برای ie کاربرد داره. ولی مورد دوم یکمی فرق میکنه مربوط به هکهای css میشه که بعضی از مرورگرها بدلیل درست پارس (parse) نکردن کدهای css ، میشه ازشون استفاده کرد که راه ها و کدهای مختلفی داره. بعضی هاشون رو میشه برای فقط یک calss یا id استفاده کرد و بعضی هاشون رو هم میشه برای چندین کلاس و مشخصه مختلف استفاده کرد. برای راهنمایی های بیشتر هم اون سایته خوبه در غیر اینصورت اینترنت پر از اینجور مباحث آموزشی هست.
اون موردی که متوجه نشدی: این یجور سلکتور هست که فقط برای مرورگرهای IE7 به پایین مورد استفاده قرار میگیره. مثلن شما میخوای کلاس مثلن class. فقط توی ورژن های 7 به پایین IE بکگراندش قرمز باشه، میای و قبل کلاست این کد روی قرار میدی "*:first-child+html" که بشه اینطوری:
یک مورد دیگه که بنظرم خیلی خوب میتونه باشه برای این سوال شما استفاده از کتابخونه [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] هست. کافیه فایل این کتابخونه رو به مرورگرتون اضافه کنید و توی فایل css تون تصمیم بگیرید که چه کلاسی برای چه مرورگری باشه.کد:*:first-child+html .class
[HTML]
<script src="css_browser_selector.js" type="text/javascript"></script>
<style type="text/css">
.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win.gecko .example {
background-color: red
}
.linux.gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>
[/HTML]
آسونه نه؟
پس من کار بزرگی کردم که بعد از 3 سال این قسمت رو از خواب درآوردم نه!!!؟!!! :n08:
دستت هر دو تون درد نکنه مطالب مفیدی گفتید.
تشکر:n16:
گرچه من نفهمیدم منظورد ازز مورد 1 و 3 و 4 چی بود و کدوما بود ولی در کل ممنون، چیز یاد گرفتم. :n26:
دوستان چرا منوهای سایتمتو ie باز نمیشه؟!!!
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
منوها فقط css و html هستن!!!
مرورگر من IE8
بجه ها من میخوام تو این کلاس ؛ Margin-top رو فقط برای ie سفارشی کنم.
[PHP].tag_title{
border-bottom:solid 1px #c9c9c9;
padding-bottom:12px;
padding-right:3px;
margin-top:300px;
font:bold 22px arial;
margin-top:-30px/9;
#margin-top:-30px;
}[/PHP]
هر چی که تو -- ها میدونستم انجام دادم ولی نشد که نشد. (نمونش همین دوتا که آخر کلاس نوشتم)
می خوام فقط تو css این کار رو انجام بدم و فایل css جداگانه ای نمی خوام براش بسازم.
نمونه ای هم بگید تا برای تمام مرورگرهای ie بدون در نظر گرفتن ورژن مرورگر اعمال بشه.
چیکار کنم؟
راستی ورژن ie من 11 هست.
همونی که با ویندوز 8 نصب میشه.
ویندوز 8 دارم
ولی با ie ویندوز7 هم امتحان کردم مشکل داشت اما -- CSS که یه _ قبل گزینه مورد نظر تو css روش کار کرد ولی رو ie 11 ویندوز 8 هرکار میکنم -- کار نمیکنه!!!
کسی راه حلی داره؟
باید توجه کنید که css haacckk ها فقط توی برخی از نسخه ی مرورگرهای ie جواب میده و از ورژن ۹ به بعد اکثر این هکها جواب نمیده؛ دلیل واضحی هم داره مشکلات خواندن کدهای css در ورژنهای جدید برطرف شده و میشه. باید از روش های دیگه استفاده کنید. در ورژنهای جدید ie حداقل از ۱۰ به بعد دیگه نیازی به استفاده از هکهای css نیست. چون توی این ورژنها تقریبا استانداردها رعایت شده و همچنین مشکلهای قبلی برطرف. پس طبیعتا هم نباید جواب بده.
همچنین Conditional comment ها هم از ورژن ۱۰ به بعد دیگه ساپورت نمیشن و کارایی در ورژن های بعد از این ندارن.
اگر بخواید بصورتی که فقط توی ie 11 یه چیزی نشون داده بشه و تو ۱۰ یه چیزه دیگه و همینطور ۹ به پایین، باید برای ورژنهای جدید تر از JavaScript یا یکی از زبان های سمت سرور استفاده کنید... اما با توجه به اینکه فکر نمی کنم شما آشنایی لازم رو داشته باشید در نتیجه تا زمانی که شما این موارد یعنی زبانهای برنامه نویسی وب نامبرده رو یاد نگرفته باشید، اینکار برای شما امکان پذیر نیست و نمیتونید به تنهایی از عهده اش بر بیاید.
راهنمایی هایی که باید بشه شده، بقیه اش رو خودتون باید دنبال کارای بعدیش باشید.
برای اینکه بهتر بتونید کمکم کنید و منظورم رو متوجه بشید فکر کنم بهتره این صفحه رو با مرورگرهای مختلف و ie ورژن 11 نگاه کنید
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
مشکل تو قسمت توضیحات محصوله
همونطور که میبینید تو مرورگرهای دیگه توضیحات سر جای خودش قرار داره ولی تو ie11 میره پایین تر و یه فضای خالی ایجاد میکنه!
شما اگر کدهای css تون رو کمی دستکاری میکردید این مشکلتون برطرف میشد. این کدها رو جایگزین کنید مشکل برطرف میشه.
پیاده سازی خاصیت justify در مرورگرهای مختلف فرق میکنه و همچنین برای زبانهای مختلف. اصولا خاصیت justify برای وب اون قابلیتی که در صنعت چاپ داره رو توی وب نداره، پس بهتره هیچ وقت (یا حداقل تازمانی که درست بشه) از این قابلیت استفاده نکنید/نکنیم.کد:#product_tag_content {
min-height:200px;
padding:20px 0 0 15px;
text-align:right;
}
ببین عزیز جان مشکل من اصلا چیز دیگه ایهنقل قول:
من می خوام بدونم چطور میتونم مثلا همین کدی که شما برام دادی رو
text-align:justify برای همه مرورگرها همین باشه و برای ie با هر ورژنی مخصوصا 10 یه بعد text-align:right باشه. همین.
اون کد رو هم تغییر دادک فرقی تو ماجرا نکرد!!!
به عنوان مثال من همین کد رو کامل نوشتم که تو همه مرورگرها یکسان کار میکنه و فقط برای ie (ورژن های زیر 8) یه آندرلاین _ قبل از یه قسمت گذاشتم و درست کار کرده
ولی تو ie11 درست کار نمی کنه!!!
]کد:#product_tag_content {
min-height:200px;
padding:20px 0 0 15px;
text-align:right;
_text-align:right;
}
بنده هم خدمتتون عرض کردم که css hackk ها توی ie 9 به بالا جواب نمیده. اینا اسمشون روی خودشونه hackk یعنی از یک مشکل/ایراد مرورگر سوء استفاده میشه برای رسیدن به هدف مورد نظر و طبیعی هم هست که این موارد در ورژنهای جدیدتر جواب نده.
اگه میخوای اون کدهای قبلی رو دستکاری نکنی تنها راهش استفاده از JavaScript هست، کافیه این کدها رو توی تگ script که درون body باشه قرار بدید.
کد:if (/(Trident\/7.0;|rv:11.0)/img.test(navigator.userAgent)) {
var ele = document.getElementById('product_tag_content');
ele.style.cssText = 'text-align:right !important';
}