چگونه کدهای css براساس ورژن مرورگر اجرا کنیم

[bitcob589]

با سلام
با css قسمتی از یک صفحه وب سایت طراحی کرده ام اما در زمان صفحه در مرورگر به علت پایین بودن ورژن مرورگر قسمت طراحی شده به صورت صحیح نمایش داده نمی شود چگونه می توان پیش از زمان صفحه وب سایت به بازدید کننده ورژن مرورگر بازدید کننده تشخیص داد و با توجه به آن استایل شیت مربوط به ورژن مرورگر باز دید کننده اجرا کرد

[md3848]

تو CSS3 بعضی کد ها تو بعضی مرور گر ها پشتیبانی نمیشه برا بعضی از مرور گر ها باید یه چیزی اول کد اضافه کنی
میتونی بری سایت زیر تمام کد ها رو گفته که تو چه مرور گری اجرا میشه نمیشه چه طوریه.

http://www.beyamooz.com/css3/649-%DA%AF%D8%B1%D8%AF-%DA%A9%D8%B1%D8%AF%D9%86-%DA%A9%D9%88%D8%B4%D9%87-%D9%87%D8%A7-%D8%AF%D8%B1-css3

[bitcob589]

اما بعضی دستورات css من در مرورگر IE ورژن 8 اجرا نمی شود چگونه با توجه به مرورگر دستورات مربوط مرورگر IE اجرا کنم

[md3848]

اگه منظورت اینه که دستور X تو ورژن 8 به بالای IE کار میکنه ولی پایین تر از اون کار نمیکنه حالا دنبال روشی میگردی که این کار رو کنی نمیدونم
ولی
گفتم برو سایت بیاموز (همونی که لینکش رو بالا گزاشتم) ببین آیا اصلا IE دستور X رو قبول میکنه یا نه اگه آره از چه ورژن به بعد این دستور رو قبول میکنه و این که دستور X باید با چه پیشوندی همراه بشه

[bitcob589]

اگه منظورت اینه که دستور X تو ورژن 8 به بالای IE کار میکنه ولی پایین تر از اون کار نمیکنه حالا دنبال روشی میگردی که این کار رو کنی نمیدونم

منظورم همین بود

[mehdytux]

می توان دو فایل css جدا ایجاد کرد و با استفاده از دستور شرطی که در قسمت head قرار میگیرد فایل css مخصوص IE را لود کرد . مثال :


<!--[if IE ]>
<ink rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->


اگر قصد اجرای کد فقط بر روی IE ورژن 7 را دارید از دستور زیر استفاده کنید


<!--[if IE 7 ]>
<ink rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->



و حتی می تونی این دستورات رو ترکیب کنی




<!--[if IE 7 ]>
<ink rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if IE 8 ]>
<ink rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->



و در نهایت اگه می خوای قابلیت های موجود در html5 رو در مرورگرهایی مثل ie نسخه 8 که از این قابلیت ها پشتیبانی نمی کنن رو ، فعال کنی باید از html5shiv استفاده کنی. به مقالات زیر رجوع کن

Enable HTML 5 in Internet Explorer (http://webdesign.about.com/od/internetexplorer/qt/html5-shiv-for-internet-explorer.htm)



Fix Inserted HTML5 Content with HTML5 innerShiv (http://css-tricks.com/html5-innershiv/)

[bitcob589]

<!--[if IE ]>
<ink rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
اگر مرورگر ما به غیر IE بود مثل موزیلا و ...... به جای درونIE چه عبارتی نوشته می شود


<!--[if IE 7 ]> <ink rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if IE 8 ]>
<ink rel="stylesheet" type="text/css" href="css/ie8.css" />

<![endif]-->
اگر ورژن جدید مرورگر در دستور IF تایپ نشده بود مرورگر کدام یک از فایلهای CSS می خواند
آیا می توان تعریف کرد اگر ورژن مروگر در IE بزرگتر از 9 بود یکی از فایلهای CSS بخواند و اگر ورژن مرورگر کوچکتر از 9 بود فایل دیگر CSS ما را بخواند

[mehdytux]

جدول دستورات شرطی به این شکل هستش
IE : نشان دهنده مرورگر اینترنت اکپلورر هستش و اگر عددی نیز در کنار اون نوشته بشه منظور فقط آن نسخه از مرورگر هستش.
lt : به معنی کوچکتر است. برای انتخاب مرورگرهای کوچکتر از یک نسخه خاص
lte : به معنی کوچکتر مساوی است. برای انتخاب مرورگرهای کوچکتر از یک نسخه خاص و همچنین خود آن نسخه
gt : به معنی بزرگتر است. برای انتخاب مرورگرهای بزرگتر از یک نسخه خاص
gte : به معنی بزرگتر مساوی است. برای انتخاب مرورگرهای بزرگتر از یک نسخه خاص و همچنین خود آن نسخه
! : به معنای همه جز این. البته فکر کنم. خودم به شخصه از این یکی دستور شرطی استفاده نکردم.
مثال ها :

مرورگر IE همه نسخه ها


<!--[if IE ]>



مرورگر IE فقط نسخه 7


<!--[if IE 7]>



نسخه های پایین تر از 7


<!--[if lt IE 7]>



نسخه های پایین تر و یا مساوی 7


<!--[if lte IE 7]>



نسخه های بالاتر 7


<!--[if gt IE 7]>



نسخه های بالاتر و یا مساوی 7


<!--[if gte IE 7]>



غیر از نسخه 7


<!--[if !IE 7]>

[bitcob589]

IE : نشان دهنده مرورگر اینترنت اکپلورر هستش و اگر عددی نیز در کنار اون نوشته بشه منظور فقط آن نسخه از مرورگر هستش.
برای سایر مرورگرها به جای
IE چه عبارتی نوشته می شود مثل موزیلا و سایر مرورگرها

[2undercover]

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

برای مرورگر های Webkit (http://stackoverflow.com/questions/1292258/chrome-conditional-comments)
برای نسخه های مختلف Firefox (http://perishablepress.com/css-hacks-for-different-versions-of-firefox/)
برای Opera (http://bricss.net/post/11230266445/css-hack-to-target-opera)

[بهزاد علی محمدزاده]

برای سایر مرورگرها به جای

سلام . از کتابخانه modernizr (http://modernizr.com/) استفاده کن . نحوه استفاده به این صورت هست که کتابخانه رو به صفحه لینک می کنی . و به تگ html کلاس no-js رو میدی . موقع اجرا کلاس no-js با js جایگزین میشه توسط modernizr و یه تعدادی کلاس به همون تگ اعمال می کنه :


class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg no-blobbuilder blob bloburls download formdata wf-proximanova1proximanova2-n4-active wf-proximanova1proximanova2-i4-active wf-proximanova1proximanova2-n7-active wf-proximanova1proximanova2-i7-active wf-proximanovacondensed1proximanovacondensed2-n6-active wf-athelas1athelas2-n4-active wf-active"

هرکدام از کلاس ها که no- اولش هست یعنی این ویژگی رو مرورگر مورد نظر پشتیبانی نمی کنه . و بر اساس اون کلاس ها شما می تونی استایل های مختلف تعریف کنی . این مثال (http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-55.htm) بررسی کرده که آیا audio پشتیبانی شده یا نه . اگر شده دکمه های پخش و براش میذاره و در غیر اینصورت اونها رو مخفی می کنه . در این صفحه (http://www.tutorialspoint.com/html5/html5_modernizr.htm) هم معادل ویژگی های css3 کلاس های modernizr رو قرار داده .

می توی بصورت جاوا اسکریپت هم تصمیم گیری هایی داشته باشی . فرضا :

if (Modernizr.svg) { /* SVG Logo Link */
}else{
/* PNG Logo Link */
}

اگر مرورگر تصاویر svg و پشتیبانی می کنه لوگو svg رو قرار بده و در غیر اینصورت لوگو PNG . باهاش یه مقدار کار کنید تا دستتون بیاد . هر مرورگری رو هم نیاز نیست پشتیبانی کنی . مرورگرهای قدیمی رو بذار کنار الان نسخه های موبایل اهمیت بیشتری پیدا کردن تا پشتیبانی از مرورگرهای قدیمی .

[alireza_s_84]

علاوه بر روشهایی که دوستان گفتن میتونید از روشی که در تاپیک زیر توضیح دادم استفاده کنید ، پایدارتر و مستحکمتر هست و مدیریت کدهای Css رو بسیار راحت میکنه:

تشخیص نوع مروگر با انتخابگرهای CSS (http://barnamenevis.org/showthread.php?438183-%D8%AA%D8%B4%D8%AE%DB%8C%D8%B5-%D9%86%D9%88%D8%B9-%D9%85%D8%B1%D9%88%DA%AF%D8%B1-%D8%A8%D8%A7-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8%DA%AF%D8%B1%D 9%87%D8%A7%DB%8C-CSS)

[بهزاد علی محمدزاده]

من اون لینک و نگاه کردم . modernizr هم اون کار و انجام میده و ظاهرا هردو یه کار و انجام میدن . با این تفاوت که این از سال 2010 تا الان به روز رسانی نشده .