PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : روشهای شناسایی مرورگر برای کدنویسی متناسب با مرورگر



Ali.Sh
2011-09-26, 17:07
سلام

اگر دستی در کد نویسی و طراحی وب داشته باشید حتما به این موضوع پی برده اید که هر چقدر هم کدنویسی دقیق و استانداردی انجام داده باشید باز هم صفحه وبسایت شما در مرورگرها ، متفاوت از هم نمایش داده میشود. نه تنها در مرورگرهای مختلف بلکه در نسخه های مختلف یک مرورگر نیز این تناقض در نحوه ی نمایش صفحه طراحی شده به چشم میخورد!

در چنین شرایطی ممکن است طراحان وب عملکرد های متفاوتی را از خود بروز دهند :

عملکرد یک : طراح ممکن است به مرورگری که دلخواه با سلیقه ی وی صفحه را نمایش نمیدهد پوزخندی زده و بی محلی کند!

عملکرد دو : طراح با استفاده از خلاقیت و نبوغ خود مرورگر کاربر را شناسایی کرده و ضمن بلاک کردن محتوای صفحه برای کاربر ، به وی دستور دهد مرورگر خود را تغییر دهد.

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

روشهای فوق هر کدام مزیتی دارند !

در روش اول طراح خود را فردی خونسرد و قاطع نشان داده با این حال بازدید کننده وبسایت ، طراح را
فردی بی تجربه و تازه کار می یابد و به وی لقب آماتور میدهد !

در روش دوم با اینکه طراح فردی دلسوز و هدایتگر است و سعی در راهنمایی بازدیدکننده در استفاده از آخرین تکنولوژی را دارد اما در نظر بازدید کننده یک دیکتاتور بیش نخواهد بود !

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

از آنجا که من و شما هیچکدام آماتور و دیکتاتور نیستیم و به درآمد بیشتر از وبسایتمان فکر میکنیم روش یا عملکرد سوم را انتخاب میکنیم !

اولین و مهمترین گام شناسایی مرورگر کاربر است ! بنابر این در ادامه بعد از صرف چای و نسکافه که قولش را داده بودیم به دنبال راهکاری برای رسیدن به این مهم خواهیم بود !

ادامه دارد ...

منبع : قالبساز

shoppress
2011-09-26, 17:26
من با عملكرد دو، جزو ديكتاتوران! شدم
اميدوارم با آموزش شما جزو سومي بشم
شما فقط ميخواهيد شناسايي رو آموزش بديد؟

danx88
2011-09-26, 17:58
این دقیقا یکی از مشکلاتیه که من در حال حاضر باهاش دست و پنجه نرم میکنم. اصلی ترین مشکلم هم با اینترنت اکسپلورر و مخصوصا نسخه 7 است. البته خوشبختانه نسخه 6 اینقدر ایراد داره که ترجیح دادم در مورد این نسخه دیکتاتوری به خرج بدم . حتی فرمت png رو هم ساپورت نمیکنه! به هر حال منتطریم. من هم هر نکته ای که یاد گرفتم میام همینجا میگم.

danx88
2011-09-26, 17:59
من با عملكرد دو، جزو ديكتارتوران! شدم
اميدوارم با آموزش شما جزو سومي بشم
شما فقط ميخواهيد شناسايي رو آموزش بديد؟

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

Ali.Sh
2011-09-26, 18:26
من با عملكرد دو، جزو ديكتارتوران! شدم
اميدوارم با آموزش شما جزو سومي بشم
شما فقط ميخواهيد شناسايي رو آموزش بديد؟

بله موضوع تاپیک شناسایی مرورگر است .

تاپیک دیگه ای به زودی ایجاد میشه با عنوان آموزش سی اس اس که سعی میکنیم با کمک اساتید از ابتدا شروع به آموزش و حل مشکلات موجود کنیم .


این دقیقا یکی از مشکلاتیه که من در حال حاضر باهاش دست و پنجه نرم میکنم. اصلی ترین مشکلم هم با اینترنت اکسپلورر و مخصوصا نسخه 7 است. البته خوشبختانه نسخه 6 اینقدر ایراد داره که ترجیح دادم در مورد این نسخه دیکتاتوری به خرج بدم . حتی فرمت png رو هم ساپورت نمیکنه! به هر حال منتطریم. من هم هر نکته ای که یاد گرفتم میام همینجا میگم. البته موضوع این تاپیک صرفا شناسایی مرورگر است و در وحله ی بعد چگونگی نمایش در مرورگر که در تاپیک دیگری به اون می پردازیم.

shoppress
2011-09-26, 18:59
ببخشید شما فروشگاه ساز نوشتید. فکر کنم نباید جزو دسته دوم باشید...

يك مدتي طراحي ميكردم. به خاطر همين مسائل كنار گذاشتم
الانم فقط برنامه نويسي داخلي قالب يا برنامه رو انجام ميدم. و به طراحي كاري ندارم

danx88
2011-09-26, 19:17
البته موضوع این تاپیک صرفا شناسایی مرورگر است و در وحله ی بعد چگونگی نمایش در مرورگر که در تاپیک دیگری به اون می پردازیم.

برای شروع خوبه. به هر حال تا نوع مرورگر تشخیص داده نشه نمیشه سراغ مرحله های بعدی رفت

as87
2011-09-26, 22:42
مشكل اينه كه شما مي‌توني مثلا ie8 و ie9 رو روي سايتت درست كني. اما فرض كنيد از css3 استفاده مي كنيد به جاي اينكه بخواييد از عكس استفاده كنيد. ببينيد واقعا نميشه با ie6-7-8 يه شكل درست داشت. يا شما بايد از يه سري موارد جديد چشم پوشي كنيد يا اينكه مثلا از تكنولوژي استفاده كنيد ولي كاري كنيد كه سايت با بقيه مرورگرها درهم نشون داده نشه. وگرنه واقعا براي شما نمي‌صرفه كه بخواييد يه بار سايت رو با عكس براي مرورگرهاي قديمي بسازيد و يه بار براي مرورگرهاي جديد.
مثلا من خودم براي ورژن جديد سايت (http://freewebphoto.ir) كه دارم راه مي‌ندازم از عكس استفاده نكردم اما سايت درهم با اينترنت اكسپلور نشون نميده.
به هر حال به نظرم شما نمي‌توني همه رو با هم داشته باشي. بايد كاربرهارو ما تشويق كنيم به بروز بودن. چون 100% روي امنيت خودشون تاثير مثبتي خواهد داشت.

علایی
2011-09-26, 23:58
مباحثی که اینجا مطرح شد یکی از مشکلات اصلی طراحان وب سایت هست
از جمله مشکلاتی که در این مورد مطرحه پشتیبانی نکردن تصاویری با فرمت png می باشه که نمونه اش IE6 هست بنده برای حل این مشکل تصویر را با پسوند jpg ذخیره می کنم ولی چون طبیعتا با پس زمینه خوانایی نداره از تصاویر و یا رنگ پس زمینه برای اصلاح این مورد استفاده می کنم

یکی از مشکلات عمده هم که در این مورد هست تفاسیر مختلف خصوصیات padding و margin در مرورگرهای مختلف است که باز بنده برای حل این مشکل با دادن طول و عرض دقیق مثلا برای یک div و کمک گرفتن از div کمکی برای فاصله دادن مثل از بالا این مشکل را برطرف کردم.

danx88
2011-09-27, 05:47
مشکل من الان با ie7 پرتاب شدن بعضی عناصر به اطراف صفحه است! در حالی که ie8 , ie9, firfox 3.6+ , chrome سایت رو بدون هیچ مشکلی نشون میدن. البته نه سایت الانمون، یه نسخه جدیده که دارم روش کار مکینم

shoppress
2011-09-27, 23:40
مشكل تصاوير png رو ميتوانيد با png fix حل كنيد
ولي براي تصاوير بكگراند عمل نميكند

Ali.Sh
2011-09-29, 11:40
مشكل اينه كه شما مي‌توني مثلا ie8 و ie9 رو روي سايتت درست كني. اما فرض كنيد از css3 استفاده مي كنيد به جاي اينكه بخواييد از عكس استفاده كنيد. ببينيد واقعا نميشه با ie6-7-8 يه شكل درست داشت. يا شما بايد از يه سري موارد جديد چشم پوشي كنيد يا اينكه مثلا از تكنولوژي استفاده كنيد ولي كاري كنيد كه سايت با بقيه مرورگرها درهم نشون داده نشه. وگرنه واقعا براي شما نمي‌صرفه كه بخواييد يه بار سايت رو با عكس براي مرورگرهاي قديمي بسازيد و يه بار براي مرورگرهاي جديد.
مثلا من خودم براي ورژن جديد سايت (http://freewebphoto.ir/) كه دارم راه مي‌ندازم از عكس استفاده نكردم اما سايت درهم با اينترنت اكسپلور نشون نميده.
به هر حال به نظرم شما نمي‌توني همه رو با هم داشته باشي. بايد كاربرهارو ما تشويق كنيم به بروز بودن. چون 100% روي امنيت خودشون تاثير مثبتي خواهد داشت.

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

در مواردی که مرورگر از یک سری ویژگیها و استانداردها ( مثلا CSS3 ) تبعیت نمیکنه در صورتی که اون کار برامون ارزش بالایی داشته باشه میتونیم روش وقتمون رو بزاریم و مثلا با عکس این کمبود رو جبران کنیم !

مثلا در مورد وبسایتتون که خیلی زیبا طراحی شده متاسفانه من در اینترنت اکسپلورر 7 کمی به هم ریختگی در صفحه میبینم .

در مورد تشویق کاربران هم درست میفرمایید ، اما نه به شکلی که کاربر رو از محتوای صفحه کلا محروم کنیم ، مثلا من بارها شده که از طریق کامپیوتری غیر از کامپیوتر شخصی خودم ، مثلا کافی نتها یا دانشگاه و ... با سایتهایی مواجه شدم که مرورگر خاصی رو لازم دارند و در صورتی که با غیر از اون مرورگر باشید یا امکاناتی رو ندارید و یا سایت خیلی به هم ریخته است و یا کلا محتوایی رو نمیتونید ببینید !

مثلا سایتهای دولتی رو ببینید با اینکه میلیونها تومان هزینه میکنند ولی باز هم کاربر مجبور میشه حتما از اینترنت اکسپلورر استفاده کنه !


مباحثی که اینجا مطرح شد یکی از مشکلات اصلی طراحان وب سایت هست
از جمله مشکلاتی که در این مورد مطرحه پشتیبانی نکردن تصاویری با فرمت png می باشه که نمونه اش IE6 هست بنده برای حل این مشکل تصویر را با پسوند jpg ذخیره می کنم ولی چون طبیعتا با پس زمینه خوانایی نداره از تصاویر و یا رنگ پس زمینه برای اصلاح این مورد استفاده می کنم

یکی از مشکلات عمده هم که در این مورد هست تفاسیر مختلف خصوصیات padding و margin در مرورگرهای مختلف است که باز بنده برای حل این مشکل با دادن طول و عرض دقیق مثلا برای یک div و کمک گرفتن از div کمکی برای فاصله دادن مثل از بالا این مشکل را برطرف کردم.

این مشکلات خوشبختانه قابل حل هستند تا حدودی ...


مشکل من الان با ie7 پرتاب شدن بعضی عناصر به اطراف صفحه است!

مگه با ie7 کشتی میگیرید یا میدونه جنگه احیانا ؟ :-p


مشكل تصاوير png رو ميتوانيد با png fix حل كنيد
ولي براي تصاوير بكگراند عمل نميكند

چرا آموزشش رو توی تاپیک جداگانه نمیزارید ؟ مطمئنا برای خیلیها مفید خواهد بود !

Ali.Sh
2011-09-29, 11:56
کامنتهای شرطی روشی است که اینترنت اکسپلورر به خوبی معنی آنرا میداند و به آنها عمل میکند این امکان از نسخه 5 اینترنت اکسپلورر به بعد در این مرورگر قرار داده شده است.

کامنتهای شرطی مرورگر اینترنت اکسپلورر را متقائد میسازد در چه شرایطی کدها را اجرا کند و یا در چه شرایطی کدها را اجرا نکند ، ضمن اینکه این کامنتها فقط در این مرورگر کاربرد دارند بنابر این سعی شده کامنتها به شکلی در کدهای وبسایت قرار بگیرد که در سایر مرورگرها به آنها توجهی نشود و خطایی نسازد !

ابتدا یک تو ضیح کوتاه :



کامنت ها در html

در زبان نشانه گذاری html برای نوشتن کامنتها به شکل زیر عمل میشود .


<!-- Comment content -->

نکته : کامنتها معمولا در زبانهای برنامه نویسی برای نوشتن توضیحات استفاده میشود این توضیحات میتواند در آینده به شما در به یاد آوری نکاتی کمک کنند .


به کمک کامنتها و شروطی که در ادامه به آنها میپردازیم میتوانید اینترنت اکسپلورر را خطاب قرار بدهید!

روش کلی :

<!--[if expression]> HTML <![endif]-->

رنگ قرمز : به جای آن عبارت شرطی دلخواه طراح قرار میگیرد !
رنگ آبی : کد HTML میتواند قرار بگیرد!

طبق عبارت فوق اینترنت اکسپلورر ابتدا شرط را بررسی میکند و در صورتی که شرط برقرار بود کد HTML اجرا خواهد شد.

بدین تریتیب به جای عبارت که با رنگ قرمز در روش کلی مشخص شده میتوان عبارات زیر را قرار داد!
[I]نکته : عددهای قرار داده شده ، فقط برای مثال است !

[if IE] : همه نسخه های اینترنت اکسپلورر ( از نسخه 5 به بعد ! )


<!--[if IE]> HTML <![endif]-->

[if IE 6] : مرورگر اینترنت اکسپلورر نسخه شش


<!--[if IE 6]> HTML <![endif]-->

[if !(IE 6)] : همه نسخه های اینترنت اکسپلورر به جز نسخه 6


<!--[if !(IE 6)]> HTML <![endif]-->

[if lt IE 6] : فقط نسخه های پایین تر از 6 ( نسخه 6 را شامل نمیشود )


<!--[if lt IE 6]> HTML <![endif]-->

[if lte IE 6] : نسخه 6 و همچنین نسخه های پایین تر از 6


<!--[if lte IE 6]> HTML <![endif]-->

[if gt IE 6] : فقط نسخه های بالاتر از 6 ( نسخه 6 را شامل نمیشود )


<!--[if gt IE 6]> HTML <![endif]-->

[if gte IE 6] : نسخه 6 و نسخه های بالاتر از 6


<!--[if gte IE 6]> HTML <![endif]-->

[if (gt IE 5)&(lt IE 7)] : فقط نسخه های بالاتر از 5 و پایین تر از 7


<!--[if (gt IE 5)&(lt IE 7)]> HTML <![endif]-->

[if (IE 6)|(IE 7)] : نسخه 6 یا نسخه 7


<!--[if (IE 6)|(IE 7)]> HTML <![endif]-->

[if !IE] : هیچکدام از نسخه های مرورگر اینترنت اکسپلورر
نکته : کامنت شرطی در این مورد متفاوت با سایر روشها خواهد بود .

مثال :


<!--[if !IE]>--> HTML <!-- <![endif]-->

ویا

<!--[if !IE]><!--> HTML <!--<![endif]-->




و در نهایت یک مثال کلی :
در این مثال با فرض اینکه کد صفحه وبسایت بدین شکل میباشد ، کامنت شرطی اول استایل سی اس اس در همه مرورگرها به جز اینترنت اکسپلورر میباشد و در کامنت شرطی دوم استایل سی اس اسی که فقط اینترنت اکسپلورر به آن توجه میکند !



<html>
<head>
<title> Conditional Comments </title>
.
.
.

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

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

</head>
</body>
.
.
.
</body>
</html>



منبع : مایکروسافت (http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx)

GraphX
2011-09-29, 17:57
منم ترجيح ميدم ديكتاتور باشم تا كاربر سراغ مرورگر هاي خوبي مثل كروم و فاير فاكس بره

Ali.Sh
2011-10-08, 21:40
منم ترجيح ميدم ديكتاتور باشم تا كاربر سراغ مرورگر هاي خوبي مثل كروم و فاير فاكس بره

نظر من اینه که در این صورت کاربر کاری با مرورگر نداره ، سراغ گوگل میره تا یک سایت دیگه با محتوای مورد نظرش پیدا کنه !

ببینید بعضی از کاربران همونطور که گفتم شرایطشون طوری نیست که همون لحظه بتونن مرورگر خودشون رو عوض کنند مثل کاربری که :

+ از کامپیوتری غیر از کامپیوتر شخصی خودش به اینترنت وصل میشه !
+ سرعت اینترنت خیلی پایینی داره و نمیتونه مرورگر جدید رو دانلود کنه !
+ نمیدونه مرورگر چیه !!! و فکر میکنه فقط با کلیک کردن روی آیکون اینترنت اکسپلورر میتونه وارد اینترنت شه ! به عبارتی لوگوی آی ای رو نماد اینترنت میدونه ! ( البته خدارو شکر این دسته خیلی کم شدند ! )
+ تنبلی ! :دی

یک مثال عینی که برای من و خیلی ها اتفاق افتاده و می افته !
بارها شده در جستجو به وبسایتی رسیدم که نیاز به ثبت نام داشته ! اولین کاری که کردم صفحه رو بستم و دوباره جستجوی خودم رو در گوگل ادامه دادم !
بنابراین کاربری که زحمت ثبت نام رو نده به خودش ، زحمت تعویض مرورگر رو در همون لحظه که شما میخواهید به هیچ وجه نمیده ! شاید موکولش کنه به بعد ! به دلیل اینکه در حال حاضر به چیزی نیاز داره که شما برای اون کاربر مسدودش کردید! کاربر به وبسایت شما نیاز داره و شما به کاربر ! بهتره این زنجیره رو قطع نکنید !

بنابر این برای یک فروشگاه این مورد اگر اتفاق بیوفته یعنی ضرر !

پیشنهادم اینه که از این راه استفاده نکنید مخصوصا برای وبسایتهای تجاری !
بهتر میدونم که از طریق یک پیغام در صفحه به کابر این موضوع رو اطلاع بدید !

پی نوشت : همونطور که as87 عزیز هم فرمودند برای مرورگرهای قدیمی همین که صفحه به هم ریخته نباشه و بتونه نیاز کاربر رو برطرف کنه کافیه ، پس خودتون رو زیاد به زحمت نیندازید !

Ali.Sh
2011-10-18, 11:34
1866


اگر شما می‌خواهید یک فایل سبک‌دهی (Stylesheet) کاملا متفاوت را به مرورگر کروم یا سافاری خود نسبت دهید می‌توانید با استفاده از دستور زیر این کار را انجام دهید.
در دستور زیر شما در قسمت نوع متالینک خود به جای text/css عبارت text/chrome یا text/safari را وارد می‌کنید که باعث می‌شود مرورگرهای دیگر این فایل را فراخوانی نکنند.
این روش external link در مرورگرهای فایرفاکس 3.6 و 4 ، اوپرا 10 و 11 و مرورگر Internet Explorer نسخه‌های 6، 7 و 8 تست شده است و این مرورگرها فایل سبک‌دهی مربوط به این کد را به هیچ عنوان بارگذاری نمی‌کنند.


<link rel="stylesheet" href="/style.css" type="text/chrome" />

و البته این روش برای مرورگر Safari نیز به درستی کار میکند:


<link rel="stylesheet" href="/style.css" type="text/safari" />

اما ممکن است شما نخواهید یک فایل سبک‌دهی جداگانه را به مرورگر خود نسبت دهید و می‌خواهید در فایل سبک‌دهی اصلی خود این دستورات را به مرورگر نسبت دهید. برای این کار کافی‌است در فایل استایل خود هرجایی که میخواهید کدی را به مرورگرهای گوگل کروم و سافاری اختصاص دهید دستورات خود را در تکه کد زیر وارد کنید:


@media screen and (-webkit-min-device-pixel-ratio:0) {
...
}

به عنوان مثال:


@media screen and (-webkit-min-device-pixel-ratio:0) {
#div {
Margin-top: 90px;
}
}

همانطور که می‌توان حدس زد عنصر div در تکه کد بالا فقط برای مرورگرهای گوگل کروم و سافاری از بالا 90 پیکسل فاصله می‌گیرد و در مرورگرهای دیگر این عمل اتفاق نخواهد افتاد.

منبع (http://webgyani.com/2010/03/how-to-serve-different-stylesheets-only-to-safari-and-chrome/)و مترجم (http://weblogina.com/post/differenet-css-codes-in-chrome-and-safari/) مطلب !