دستورات شرطی در CSS برای یکسان‌سازی نمایش در مرورگرها

[merlin_vista]

یکی از دغدغه‌های طراحان وب، نمایش یکسان طرح در مرورگرهای مختلف است. با افزایش استفاده از مرورگر فایرفاکس (http://bweb.ir/archives/computer-internet/firefox-at-20-percent-market-share.php) و عرضه‌ی مرورگرهای جدید، صفحات وب باید به گونه‌ای طراحی شوند که با رعایت استانداردها، در مرورگرهای مختلف به طور یکسان به نمایش درآیند.
برای این کار شما می‌توانید از دستورات شرطی در CSS استفاده کنید؛ که نمونه‌ای از آن را در کد زیر می‌بینید:


/* Conditional-CSS example */
a.button_active, a.button_unactive {
display: inline-block;
[if lte Gecko 1.8] display: -moz-inline-stack;
[if lte Konq 3.1] float: left;
height: 30px;
[if IE 5.0] margin-top: -1px;
text-decoration: none;
outline: none;
[if IE] text-decoration: expression(hideFocus='true');
}

اما می‌توان تغییرات بیشتری نیز اعمال کرد؛ شما می‌توانید با استفاده از PHP تعیین کنید که چه محتویاتی برای یک مرورگر به نمایش درآید.


http://hazaveh.googlepages.com/Browsers-small.jpg

اگر با کدنویسی PHP آشنایی ندارید نگران نباشید؛ سایت Conditional-CSS (http://www.conditional-css.com/) به شما یک نسخه از کد PHP موردنیاز را با توضیحات کامل ارائه می‌کند. کافی است نام انتخابی فایل CSS خود را وارد کنید و کد PHP را دریافت نمایید. در ابتدای کد نیز توضیحات موردنیاز برای نحوه‌ی استفاده از آن، درج شده است.
نکته‌ی آخر این که این سایت کد موردنیاز برای C و #C را نیز ارائه می‌کند.

[arsalansalar]

من یک سوال داشتم واینکه فقط با کپی کردن این کد صفحات وب در تمامی مرورگرها یکسان نمایش داده می شود؟وبه طور کلی چه کار باید بکنم تا وبی که با asp.net نوشتم در تمامی مرورگرها یکسان نمایش داده شود؟

[Farzad66]

ممنون ، این کدی که سایت Conditional-CSS (http://www.conditional-css.com/) چگونه به صفحه ربطش بدیم ، یعنی باید در صفحه مثل لینک دادن CSS آدرس بدیم ؟

[teshnehab]

سلام
من سایتم را با div,tableless نوشتم ،مشکلم اینکه توی فایرفوکس درست نشون میده ولی توی IE جابه جای برای div ها رخ میدهد،چیکار کنم؟
از این دستورات یکسان سازی در پست یک هم استفاده کردم و اونها را توی فایل css ام قرار دادم ولی مشکلم حل نشد.
ممنون میشم دوستان راهنمایی کنند.

[shahriyar.m]

سلام.....
نمیدونم کسی هست جواب سوال من رو بده یا نه به هر حال سوال رو مطرح میکنم و منتظر پاسخ میمونم
میخواستم بدونم چطور میتونم چند فایل css رو در قالب یه سایت قرار بدم که بسته به رزولوشن کاربر از فایل css مربوط به اون رزولوشن استفاده کنه یا به طور ساده تر اینکه اگه رزولوشن کاربر مثلا 800 در 600 بود از css 1 و در صورتی که 1280 در 800 بود از css 2 و در صورتی که بالاتر از 1280 در 800 بود از css 3 استفاه کنه
ممنون میشم اگه کسی بتونه به طور کامل راهنمایی کنه یعنی کدها رو برام قرار بده و یه مثال بزنه

[nida_1987]

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


<!--[if IE ]>
<![endif]-->
قرار بگیرند فقط توسط ie اجرا می شوند که کدی که داخل این دستور قرار می گیرد هر دستوری می تواند باشد css یا جاوا اسکریپت ولی فایرفاکس با این دستورات مثل کامنت برخورد میکند.

اگه کسی خواست بگه تا مثال بذارم.

[shahriyar.m]

سلام
کاش یه نفر جواب سوال من رو میداد
من کاری به مرورگرها ندارم که خروجی براشون یکسان باشه یا صفحات رو مثل هم نشون بده بلکه من میخوام با نوشتن دو css مختلف برای رزولوشن های مختلف صفحه مورد نظرم رو در هر مانیتوری که از هر رزولوشنی استفاده میکنه مثل هم نشون بدم
به طور مثال سایت من اینه http://onlypet.ir خوب حالا در رزولوشن مانیتور 1280 در 800 واید کناره یا پس زمینه صفحه که ابی رنگ هست نشون داده میشه ولی در 1024 در 768 دیگه کناره ها معلوم نیست و البته مشکلی رو پیش نمیاره ولی خوب برای زیبایی میخوام بک گراند هم معلوم باشه حالا میخوام با تعریف دو main در دو css مجزا و قرار دادن یه دستور شرطی برای چک کردن رزولوشن مانیتور کاربر و استفاده از css مناسب این مشکل رو حل کنم همه چیز هم اماده است فقط یه دستور شرطی html نیاز دارم که مربوط به رزولوشن باشه و چون مبتدی هستم و اطلاعاتم تجربی هست لطفا کد کامل رو بذارید که من فقط فایل css رو جایگزین کنم
میدونم الان کسی جواب نمیده ولی اگه کسی گذری هم اینجا داشت و میدونست بگه چون من هر روز به سوالم سر میزنم ببینم کسی جواب داده یا نه
ممنون

[nida_1987]

html که زبان programming نیستش که بخوای توش شرط تعریف کنی برای این کار نیازی به دو تا css مجزا نیست. برای کل صفحه یک wrapper div بذار، اگه main صفحه شما همون wrapper کلی صفحه هست پوزیشنش رو relative قرار بده و بهش width بده مطمئنا مشکلت حل میشه. اگه width رو بر حسب px بدی نه تنها با تغییر ریزولوشن تغییر نمیکنه با ریسایز هم تغییر نمیکنه، ولی اگه با درصد بدی باز هم با تغییر رزولوسن تغییر نمیکنه ولی با ریسایز تغییر میکنه.
علاوه بر نکته بالا قرار دادن margin برای body و wrapper به این صورت :

body {

margin: 0px;
padding: 0px;

}
.wrapper {
position:relative;
margin:0px auto
width:960px
}
موفق باشی:لبخندساده:

[shahriyar.m]

سلام
ممنون از جوابی که دادید ولی منظور من چیز دیگه ایه و سایت من ریسایز میشه
و div main من هم 100% هست
بذارید یه جور دیگه سوالم رو توضیح بدم
صفحه من 1003px عرضشه و خوب بگراند ابی هم کل سایت داره برید به ادرس زیر و نگاه کنید
http://onlypet.ir
حالا وقتی من تو مانیتور خودم که رزولوشن 1280 در 800 داره نگاه میکنم صفحه من در وسط و بک گراند ابی هم مشخصه با ریسایز پنجره مرورگر هم سایت همراه پنجره حرکت میکنه. حالا اگه بریم همین سایت رو تو یه مانیتور که رزولوشن 1024 در 768 داره نگاه کنیم صفحه من همون وسط هست یعنی ریسایز شده ولی دیگه خبری از بک گراند نیست یعنی صفحه 1003px من کامل در وسط هست ولی خوب بک گراند نیست
حالا سوال من اینه که چطور مشکلش رو حل کنم یعنی هر کسی در هر رزولوشنی صفحه رو میبینه یه جور ببینه یعنی بک گراند هم باشه و چون فقط تو رزولوشن 1024 در 768 که خیلی هم رایجه این مشکل پیش میات میخوام دو تا css بنویسم یکی برای این رزولوشن و دیگری برای سایر رزولوشن ها یعنی همون شرطی ، که شما گفتید نمیشه.حالا راه حل چیه.؟؟؟ مشکل چیه؟؟ یه نگاه به سایت بندازید و یه نظری بدید. فکر کنم یا باید دوتا css بنویسم با یه دستور شرطی یا اینکه بک گراند رو هم به پیج اضافه کنم که خیلی ضایع هست
خوب باز منتظر پاسخ میمونم و هر روز به این پست سر میزنم پس اگه کسی میتونه راهنمایی کنه دریغ نکنه و من رو از سردرگمی در بیاره
فعلا

[nida_1987]

تازه متوجه منظورت شدم این کار فقط با جاوا اسکریپت امکان پذیره شما باید واسه ی wrapperet در css دو تا کلاس بنویسی و با تابع screen در جاوا اسکریپت رزولوشن کاربر رو بگیری و بعد شرط بنویسی که برای هر رزولوشن کلاس wrapper چی بشه.

[idocsidocs]

این کدها باگهای مرورگرهای مختلف رو هم برطرف می کنه یا فقط پیش فرضها رو تحت تاثیر قرار می ده؟

[idocsidocs]

تازه متوجه منظورت شدم این کار فقط با جاوا اسکریپت امکان پذیره شما باید واسه ی wrapperet در css دو تا کلاس بنویسی و با تابع screen در جاوا اسکریپت رزولوشن کاربر رو بگیری و بعد شرط بنویسی که برای هر رزولوشن کلاس wrapper چی بشه.

من برای اینکه سایتم توی مانیتورهای مختلف وسط مانیتور نمایش داده بشه از کد زیر استفاده می کنم.


body {

margin: 0px;
padding: 0px;

}
.wrapper {
position:relative;
margin:0px auto
width:1024px
}این کد درحالتی که محتویات سایت از ارتفاع مانیتور بیشتر باشه خوب اجرا می شه اما اگه ارتفاع محتویات سایت از ارتفاع مانیتور کمتر باشه، باعث می شه فوتر در وسط مانیتور نمایش داده بشه.

در این مورد راهی به ذهنتون نمی رسه؟

[ajajoom]

برای وسط نمایش دادن سایتت کل محتویاته بادیت رو توی div بزار بعد با درصد گذاری اندازه هات بزارش وسط

[L u k e]

- و * هم همین کارو می کنن و دیگه نیاز به این همه دردسر نیست

[masoudcg1]

با سلام .
جواب سوال شما در یکی از مقالان این سایت هست ، امّا بنده پیدا نکردم ، چرا که قبلا دیده بودم . http://www.bugx.ir
حال با استفاده از کد نویسی php یا asp می توانید فایل css ای که به صفحه تان اعمال میکنید را انتخاب کنید به طوری که در تگ link در بخش href رو با برنامه نویسی مشخص کنید .
یا حق

[saman3020]

سلام
کاش یه نفر جواب سوال من رو میداد
من کاری به مرورگرها ندارم که خروجی براشون یکسان باشه یا صفحات رو مثل هم نشون بده بلکه من میخوام با نوشتن دو css مختلف برای رزولوشن های مختلف صفحه مورد نظرم رو در هر مانیتوری که از هر رزولوشنی استفاده میکنه مثل هم نشون بدم
به طور مثال سایت من اینه http://onlypet.ir خوب حالا در رزولوشن مانیتور 1280 در 800 واید کناره یا پس زمینه صفحه که ابی رنگ هست نشون داده میشه ولی در 1024 در 768 دیگه کناره ها معلوم نیست و البته مشکلی رو پیش نمیاره ولی خوب برای زیبایی میخوام بک گراند هم معلوم باشه حالا میخوام با تعریف دو main در دو css مجزا و قرار دادن یه دستور شرطی برای چک کردن رزولوشن مانیتور کاربر و استفاده از css مناسب این مشکل رو حل کنم همه چیز هم اماده است فقط یه دستور شرطی html نیاز دارم که مربوط به رزولوشن باشه و چون مبتدی هستم و اطلاعاتم تجربی هست لطفا کد کامل رو بذارید که من فقط فایل css رو جایگزین کنم
میدونم الان کسی جواب نمیده ولی اگه کسی گذری هم اینجا داشت و میدونست بگه چون من هر روز به سوالم سر میزنم ببینم کسی جواب داده یا نه
ممنون




سلام، شما باید بتونید از مدیا کوئری ها به خوبی استفاده بکنید. اصلا لازم نیست دوتا Css جدا بنویسید. برای مثال سایت http://pardone.ir دقیقا استایل خودش رو با تمام دیوایس ها یکی کرده. و اصلا نیاز به دوباره کاری هم ندارید. به نظر من تاجایی که ممکنه از بوت استرپ استفاده نکنید. تا دچار مشکل نشوید و آزادی عمل داشته باشید.