ما هي أفضل تقنية متناسقة الشكل والوظيفة بين جميع متصفحات الويب (بما في ذلك جوجل كروم)?

https://stackoverflow.com/questions/45239

09-06-2019
|

سؤال

النسخة القصيرة:ما هو أنظف وأكثر للصيانة تقنية متسقة عرض اياكس تعمل في جميع المتصفحات المستخدمة من قبل كل من مطوري الويب ومطوري الويب' نهاية المستخدمين ؟

IE 6, 7, 8
فايرفوكس 2 ، 3
سفاري
جوجل كروم
أوبرا

نسخة طويلة:كتبت التطبيق على شبكة الإنترنت تهدف إلى غيرها من مطوري الويب.أريد بلدي التطبيق إلى دعم متصفحات الويب الرئيسية (بالإضافة إلى جوجل كروم) في كل من العرض و اياكس السلوك.

بدأت على فايرفوكس/الحرائق, ثم أضاف المشروط تعليقات على التصميم ثابت تحت IE 6 و 7.المقبل, لدهشتي, اكتشفت أن مسج لا تتصرف بشكل مماثل في أي ؛ لذا غيرت بلدي جافا سكريبت أن تكون محمولة على FF و IE باستخدام الشرطية و أقل نقية مسج.

اليوم بدأت التجارب على بكت و جوجل كروم و اكتشفت أنه ليس فقط هي الأساليب inconsistant مع كل من FF و أي ولكن جافا سكريبت ليست المنفذة في كل شيء ، ربما يرجع إلى الجملة أو خطأ في التحليل.كنت أتوقع بعض CSS العمل, ولكن الآن لدي المزيد من جافا سكريبت التصحيح القيام به!عند هذه النقطة أريد أن خطوة إلى الوراء والتفكير قبل الكتابة أكوام من الحالات الخاصة لجميع الحالات.

أنا لا أبحث عن الرصاصة الفضية, فقط أفضل الممارسات أن تبقى الأمور كما مفهومة للصيانة ممكن.أنا أفضل إذا كان هذا يعمل مع أي جانب الخادم الذكاء ، ومع ذلك إذا كان هناك ميزة ، على سبيل المثال ، تحقق وكيل المستخدم ومن ثم العودة ملفات مختلفة على مختلف المتصفحات ، هذا على ما يرام إذا كان مجموع الشمول والصيانة التطبيق على شبكة الإنترنت أقل.شكرا جزيلا لكم جميعا!

المحلول

أنا في وضع مماثل ، والعمل على التطبيق على شبكة الإنترنت التي تستهدف المتخصصين في مجال تكنولوجيا المعلومات المطلوبة لدعم مجموعة من المتصفحات ، ناقص الأوبرا.

بعض الأشياء التي تعلمتها حتى الآن:

اختبار في كثير من الأحيان ، كما أن العديد من الهدف الخاص بك المتصفحات كما يمكنك.تأكد من أن لديك الوقت لذلك في جدول التنمية.
أدوات يمكن أن تحصل على جزء من الطريق إلى الدعم عبر متصفح, ولكن في نهاية المطاف سوف تفوت شيئا على بعض المتصفح.خطة بعض الوقت من أجل التصحيح والبحث عن إصلاحات محددة من المتصفحات.
إذا كنت بحاجة إلى شيء لا أدوات و لا يمكن العثور مجانا البرمجية المتكررة ، تستثمر بعض الوقت لكتابة فائدة الوظائف التي تغلف المتصفح تعتمد على السلوك.
تثقيف نفسك حول معروفة المتصفح الخلل, بحيث يمكنك توجيه بك تنفيذ حولهم.

عدد قليل من أكثر الأشياء المحددة تعلمت:

استخدام المشروط رمز استنادا إلى وكيل المستخدم فقط كملاذ أخير ، لأن أجيال مختلفة من "نفس" المتصفح قد تختلف الميزات.بدلا من ذلك, اختبار المعايير المتوافقة السلوك أولا — على سبيل المثال ، if(node.addEventListener)..., ثم الشائعة غير الوظائف القياسية — على سبيل المثال ، if(window.attachEvent)..., ثم إذا كان يجب أن أنظر وكيل المستخدم محدد نوع المتصفح & رقم الإصدار.
مع العلم عندما دوم 'جاهزة' البرنامج النصي مختلفة في كل متصفح.جيد الأدوات خلاصة هذا بالنسبة لك.
معالجات الأحداث تختلف فقط في كل متصفح.جيد الأدوات خلاصة هذا بالنسبة لك.
إنشاء عناصر DOM ، خاصة عناصر تحكم نموذج أو العناصر مع سمات يمكن أن تكون صعبة مع الوثيقة.createElement و العنصر.setAttribute.في حين لم القياسية (و كيندا يوكي) ، وذلك باستخدام عقدة.innerHTML مع السلاسل التي تحتوي على أجزاء من HTML يبدو أن أكثر موثوقية عبر المتصفح أنواع.لم تجد مجموعة من الأدوات التي تمكنك من استخدام عنصر.setAttribute لإضافة الاسم إلى شكل عنصر في IE.
CSS الاختلافات (البق) هي بنفس أهمية شبيبة الخلافات.
'الرئيسية' ميزات جافا سكريبت (سلسلة تاريخ RegExp, مجموعة وظائف) تبدو موثوقة ومتسقة عبر المتصفحات ، لا سيما بالنسبة إلى DOM/CSS/وظائف نافذة.هناك بعض الفرح في حقيقة أن اللغة ليست مختلفة تماما على كل منصة.:-)

لم تصل الى أي كروم محددة شبيبة البق, لكنه دائما واحدا من أول المتصفحات الاختبار.

HTH

نصائح أخرى

الكروم هو في الواقع مختلف قليلا إلى سفاري ، ويستخدم مختلف تماما تنفيذ جافا سكريبت و مشاكل تم الإبلاغ عنها مع كل من النموذج مسج.لا تقلق بشأن ذلك كثيرا الآن, انها لا تزال في وقت مبكر النسخة التجريبية من المتصفح و هذا التضارب المحتمل أن تعامل على أنها أخطاء.هنا تقرير الشوائب.

واحد "الرصاصة الفضية" قد تفكر في التحول إلى Google Web Toolkit (GWT).

أعتقد أنه يدعم جميع المتصفحات كنت مهتما في, ويعطيك القدرة على الرمز الخاص بك واجهة المستخدم في جافا متوافق مع IDE مثل الكسوف.وميزة هذا يمكنك استخدام IDE أدوات إنجاز قانون وتجميع خطأ وقت التدقيق ، مما يحسن إلى حد كبير في التنمية على نطاق واسع واجهة المستخدم المشاريع.

إذا كنت تستخدم GWT مكونات واجهة المستخدم ، فإنه سيتم إخفاء الكثير من المتصفح محددة قبح من الاضطرار إلى التعامل معها ، ولكن عند التحويل سيتم إنشاء المدمجة ، نشر ملف لكل متصفح منصة.بهذه الطريقة أنت لا تحميل أي أي-كود معين عند عرض التطبيق في فايرفوكس.سيكون لديك أيضا من جانب العميل كعب ولدت الذي سيتم تحميل المناسبة جمعت حزمة من JS.لتجميل الاتفاق هذه الملفات cacheable ، حتى ينظر الأداء عموما تحسين الزوار العائدين.

المناظر الطبيعية تطورت بشكل كبير لاستيعاب عبر متصفح التنمية. مسج, النموذج وغيرها من الأطر موجودة عبر متصفح جافا سكريبت. CSS يعيد هي جيدة بالنسبة ابتداء مشترك قماش بيضاء على جميع المتصفحات. مخطط و 960 على حد سواء CSS الأطر إلى مساعدة مع تخطيطات باستخدام CSS تخطيطات الشبكة التقنيات التي يبدو أن الحصول على شعبية جدا في هذه الأيام.

كما CSS المراوغات عبر متصفحات مختلفة ، لا يوجد الكأس المقدسة هنا فإن الخيار الوحيد هو اختبار لك موقع على شبكة الإنترنت عبر المتصفحات المختلفة واستخدام هذه رهيبة الموارد و بالتأكيد الانضمام إلى القائمة البريدية لانقاذ ما يصل سوم الوقت.

إذا كنت تعمل على ارتفاع حجم إنتاج الموقع ثم يمكنك استخدام خدمة مثل browsercam.com في نهاية اللعبة لضمان موقع لا كسر فظيعة في بعض المتصفح.

وأخيرا لا تحاول أن تجعل الموقع تبدو هي نفسها في كل متصفح.الأساسي الخاص بك التصميم يجب أن الهدف IE/FF و يجب أن يكون حسنا مع تسويات معقولة على الآخرين.استخدام متدرج المتصفح الرسم البياني إلى ضيق في دعم المتصفح.

أما عن أفضل الممارسات ، بدءا باستخدام إطارات شبكية على ورقة فارغة أو خدمة مثل Balsamiq نماذج بالأحجام الطبيعية.أنا ما زلت مندهش كيف كثير من المطورين البدء باستخدام محرر بدلا من الذبائح ولكن بعد ذلك مرة أخرى أنا فقط تحولت في السنة مرة أخرى قبل تحقيق كم كبير وقت المدخر هو.نظيفة الانفصال من تخطيط (HTML) العرض (CSS) والسلوكيات (جافا سكريبت).يجب أن يكون هناك عناصر التصميم في HTML, لا presenation في جافا سكريبت (استخدام .addClass('highlight') بدلا من .css({'background-color': 'red'});).

إذا كنت لم تكن مألوفة مع أي من وجرئ في هذا المنصب ، غوغلينغ لهم يجب أن يكون مثمرا الويب الخاص بك التطوير الوظيفي والإنتاجية.

إذا كنت تبدأ من قاعدة إعادة تعيين أو الإطار بلغت IE و مازال كل شيء فظيع ، قد ترغب في فحص التالية:

كل شيء يؤكد?CSS و HTML ؟
أي كسر الروابط إلى تضمين ملف (js, css, وما إلى ذلك؟).في كروم/سفاري ، إذا الأنماط الرابط ضبطت كل الروابط الخاصة بك قد ينتهي الأحمر.(أن تفعل شيئا مع الافتراضي 404 التصميم أعتقد)
أي الغريب متطلبات شبيبة الإضافات التي قد تكون تستخدم ؟ (هل ملف css يجب أن تأتي قبل ملف js, مثل مع مسج.thickbox?)

واجهة المستخدم, تحقق تحويلة.

انها كبيرة بذاتها المكتبة ، على الرغم من أنها يمكن أن تستخدم أيضا مع مسج, يوي, النموذج GWT.

عينات: http://extjs.com/deploy/dev/examples/samples.html

لقد وجدت أربعة أشياء مفيدة في تطوير تطبيقات جافا سكريبت:

ميزة الكشف
المكتبات
تطوير متكررة باستخدام المحاكاة الافتراضية
جافا سكريبت:دليل قاطع ، دوغلاس Crockford & John Resig

ميزة الكشف

استخدام التفكير أن أسأل ما إذا كان المتصفح يدعم الميزة المطلوبة.إذا كنت تريد أن تعرف ماذا التعامل مع الحدث متصفح يدعم, يمكنك إذا(ش.addEventHandler) الامتثال W3C ، إذا(ش.attachEvent) عن أي نوع ، وأخيرا تقع مرة أخرى على ش.['onSomeEvent'].

واحدة كبيرة ولكن!

المتصفحات في بعض الأحيان الكذب حول ما هي الميزات التي تدعمها.لا أستطيع أن أتذكر ولكنني واجهت مشاكل فايرفوكس حيث نفذت دوم الميزة ، ولكن return false إذا كنت اختبار هذه الميزة!

المكتبات

منذ كنت تعمل بالفعل مع مسج, أنا حفظ التفسير.ولكن إذا كنت تقوم بتشغيل إلى مشاكل قد ترغب في النظر في YUI لانها رائعة عبر متصفح التوافق.حتى أنها تعمل معا.

تطوير متكررة مع الافتراضية

ربما أفضل نصيحة:تشغيل كل ما تبذلونه من اختبار البيئة في آن واحد.الحصول على توزيعة لينكس, Compiz Fusion و مجموعة من ذاكرة الوصول العشوائي.تحميل نسخة من أي برنامج VMWare VMWare Server أو الشمس الظاهري مربع و تثبيت عدد قليل من أنظمة التشغيل.الحصول على الصور على ويندوز XP, ويندوز فيستا نظام التشغيل Mac OS X.

الفكرة الأساسية هي هذه:Compiz Fusion يعطيك 4 أجهزة الكمبيوتر المكتبية على تعيين مكعب.1 من هذه سطح المكتب الخاص بك لينكس الكمبيوتر الخاص بك المقبل Virtutual ويندوز XP مربع واحد بعد ذلك Vista الماضي نظام التشغيل Mac OS X.بعد كتابة بعض التعليمات البرمجية التي alt-tab في الظاهرية الكمبيوتر وتحقق من العمل الخاص بك.بالإضافة إلى أنها تبدو رهيبة.

جافا سكريبت:دليل قاطع ، دوغلاس Crockford & John Resig

هذه المصادر الثلاثة توفر معظم المعلومات من أجل تطوير جافا سكريبت.دليل قاطع هو ربما أفضل كتاب مرجعي جافا سكريبت.

دوغلاس Crockford هو جافا سكريبت المعلم (أكره كلمة) في ياهو.البحث سلسلة "دوغلاس Crockford نظرية دوم", "دوغلاس Crockford المتقدمة جافا سكريبت", "دوغلاس Crockford نظرية دوم" ، و ""دوغلاس Crockford أجزاء جيدة" على ياهو!أشرطة الفيديو.

John Resig (كما تعلمون) كتب مسج.له موقع في ejohn.org يحتوي على ثروة من جافا سكريبت المعلومات, و إذا كنت ابحث في جوجل ستجد انه قدم عددا من العروض على دفاعي تقنيات جافا سكريبت.

...حظا سعيدا!

فقط إذا كنت قد حصلت على واحد أقل المتصفح يدعو للقلق ، كروم يستخدم نفس محرك التقديم كما سفاري.حتى إذا كان يعمل في سفاري ، ينبغي أن تعمل بالضبط نفس في كروم.

انظر هذا المنصب مات كاتس' بلوق.

يستخدم Google Chrome بكت على التقديم, وهو نفس محرك التقديم أبل متصفح سفاري ، حتى إذا كان موقعك متوافق مع سفاري ينبغي أن العمل العظيم في كروم.

تحديث:يبدو أن هذا هو الآن خارج مؤرخة معلومات عن الفندق.يرجى الاطلاع على فوكس التعليق على هذه الإجابة.

إذا كان الخاص بك جدا الأولوية القصوى هي بالضبط عرض ثابت على جميع المتصفحات المذكورة مع عدم التفاوت ، ربما يجب عليك أن تبحث في AS3 و فليكس.

أنا شخصيا استخدام Mootools بسيطة وخفيفة الوزن جافا سكريبت الإطار.وهو سهل الاستخدام و يدعم جميع المتصفحات المذكورة أعلاه (باستثناء كروم, ولكن يبدو أن العمل أيضا بقدر ما أنا يمكن أن أقول).

أيضا لضمان الاتساق عبر المتصفحات ، أحصل على ميزة/style/السلوك/الخ.للعمل في متصفح واحد الأولى (عادة فايرفوكس 3 مع الحرائق) ، ثم التحقق على الفور للتأكد من أنه يعمل في جميع المتصفحات الأخرى (ترك IE6 الماضي).إذا كان لا, أنا inveset الوقت إصلاحه على الفور, لأن خلاف ذلك كنت أعرف أنني لن يكون لها الوقت في وقت لاحق (في تجربتي الحصول على الأشياء تعمل عبر المتصفح يستغرق حوالي 50% من ديف.الوقت؛ -))

التحقق من صحة جافا سكريبت الخاصة بك مع "أجزاء جيدة" + المتصفح على JsLint.com يجعل من غير المحتمل أن يكون جافاسكريبتس يتصرف بشكل مختلف في FF, سفاري الخ.

على خلاف ذلك - باستخدام معايير التحقق من صحة التعليمات البرمجية الخاصة بك وكذلك بناء على التقنيات القائمة مثل مسج ينبغي أن تجعل موقع الويب الخاص بك تتصرف نفس في جميع المتصفحات ما عدا IE - وليس هناك وصفة سحرية IE - انها مجرد حشرات في كل مكان...

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow