11

كيف يمكن إنشاء صفحة أو موقع متوافق مع جميع المستعرضات

  • emad.echtay

تحية طيبة

ارغب في إنشاء موقع يعمل على جميع متصفحات الويب بدون استثناء وبدون أخطاء وبدقة عالية

فما المطلوب لتحقيق ذلك

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

13

انصحك باستعمال بوت ستراب فهي فعالة جدا في بناء المواقع و تسرع العملية و متواقة مع جل المتصفحات و الاجهزة و هتى الهواتف، تجدها هنا

أنا حاليا استعمل نسخة من Dist من Bootstrap

ولكنني لا أعلم ما الكود الذي يجب علي إضافته وأين إضيفه حتى يعمل موقعي على جميع مستعرضات الويب

كل ما تحتاجه مشروح هنا

انظر أول مثال و أهم الأسطر فيه هي

و

<script src="https://code.jquery.com/jqu..."></script>
<script src="js/bootstrap.min.js"></script>

افتح الامثلة الاخرى و تعلم منها

و كذلك يجب ان تقرأ كل شي عن المكونات حتى تعرف تستعملها

تم حذف هذا الاسطر من الرد السابق بسبب خطأ في التنسيق

 <link href="css/bootstrap.min.css" rel="stylesheet">

لا أنصح به بسبب نقص دعم العربية، استخدم Foundation 5 بدلاً عنه.

Foundation 5 ليس بقوة bootstrap و ليس بجماله و سهولة ال documentation و هناك دعم للعربية لبوتستراب هنا

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

أيضاً، بوتستراب مبني للشاشات الكبيرة و يدعم الصغيرة، بينما فاونديشن مبني للهواتف أولاً (أداء أفضل). و نظام الأعمدة في فاونديشن أجمل.

هذه مقارنة بين الإثنين:

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

13

موقع أستخدمه بإستمرار هو :

مبنى على bootstrap و يدعم العربى و الإنجليزى و الجوال

من برمجتى و يدعم عربى و إنجليزى :

http://notedn.com/test مبنى على bootstrap ويدعم العربى و الإنجليزى و الجوال

http://se7a.tv/test مبنى على bootstrap ويدعم العربى و الإنجليزى و الجوال

و مواقعى كلها مبنيه عليه و تدعم الجوال و منها

و غيرها مازلت أعمل عليها و أخرى

جميل. هل جربت foundation أيضاً و لم تعجبك؟

قلت لك هي في النهاية مسألة تفضيل شخصي لا أكثر.

اطلعت عليها ولم يعجبنى أنها تعطيك layout فقط ولا توفر لك عناصر أنيقة جاهزة لتعمل عليها و توفر لك الوقت + ال documentation الخاص بها ليس مفصلاً مثل الخاص بال bootstrap

و لكنها مجهود رائع و جبار من قبل القائمين عليه و تصلح فى عدة أماكن لا تصلح فيها بنية bootstrap

هل رأيت هذا :

السلام عليكم ..

١- تحتاج تعرف المتصفحات القديمه بعناصر html5 وهذا عمل html5shiv او Modernizr

٢- تحتاج تعمل تصفيه وهذا عمل normalize.css

٣- تشيك على العمل markup validity للـ html

http://validator.w3.org

٤- تشيك على العمل css

http://jigsaw.w3.org/css-va...

٥- تفتح جميع المتصفحات وتتاكد من كل خطوة تعمل ممتاز على المتصفحات او تبحث لها عن حل في النت

٦- تحتاج ان تتأكد من grid يعمل جيدا على جميع المتصفحات

… او بإختصار تريح راسك وتدخل على الموقع التالي وتحمل منصة عمل جاهزه ومفحوصه لك مع كل الخيارات السابقه :

http://www.initializr.com

ارجوا بأن اجابتي واضحه لك يالغالي

-1

شكرا ً وصلت الفكرة

عندي سؤال هلاء أنا عم استعمل bootstrap بضلني مكمل عليه ولا بانتقل عـــ Modernizr

وهل Modernizr بيدعم العربية ؟

العفو يالغالي ..

انت بالخيار تضيف html5shiv او Modernizr ..

لكن يجب اضافة احدهم لقالب bootstrap الاول يقوم بتعريف العناصر html5 للمتصفحات القديمه لكن Modernizr يقدم دعم اكبر لك اذا كنت تريد تستخدم بعض العناصر المتقدمه canves مثلا .. على حسب طلب عملك

Modernizr هي اداة فقط .. دعم العربي يكون في ملفات bootstrap اي ان تجعل الاتجاه من اليمين الى اليسار يمكن تجد في الرابط التالي قالب bootstrap

يدعم rtl وتحديثاته واصلاحاته جدا حديثه لم اجربه من قبل

تحياتي لك

-1

نصيحتي؟ استخدم * { Box-sizing: Border-box }

http://www.paulirish.com/20...

لماذا؟ المشكلة الأساسية في توافقية المتصفحات هي أن ie يختلف عن الباقي في طريقة قياس الأبعاد.

هذا السطر سيجعلها جميعها متشابهة في طريقة التعامل مع القياسات.

أيضاً استخدم less أو sass و قم بعمل دوال تقوم بإضافة البادئة في السي إس إس.

مثلاً: .transition تصبح:

-webkit-transition

-moz-transition

-ms-transition

transition

و بالتالي لن تقلق عن نسيان أي بادئة.

و في النهاية، استخدم normalize.css

13

لكن الأخ يتكلم عن شيء آخر تماما، هو يتكلم عن جعل العمل متوافق مع جميع المتصفحات

وأنت تتكلم عن إضافة Border-box والتي تجعل border و padding داخل نطاق العنصر يعني لو العنصر بعرض وطول 100 بكسل، وأضفت له padding ب 20

بالعرض والطول سيبقى 100 ولن يصبح 120

وللعلم، هذا الشيء ليس لie فحسب، بل لكامل المتصفحات انطلاقا من فايرفوكس إلى كروم إلى أوبرا لذا يفضل إضافة

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

وأيضا اضافة normalize.css سيكون شيئا مفيدا

لا تنسى تفقد موقع caniuse.com لتفقد دعم المتصفحات للخواص

ما الفرق بين سؤاله و جوابي؟

طبعاً، هذا يجعل كل المتصفحات تعمل مثل ie و ليس العكس. و الكود الذي وضعته موجود في الرابط.

نقطة جيدة أنه يجب الإبتعاد عن التقنيات غير المدعومة في كل المتصفحات :)

-2

هلاء يلي فهمته إنو IE8 واقل ما بيدعم ميزات HTML5 ولذلك لازم نظمن HTML5 Shiv وبالأخص ملف js/html5shiv.js بالكود

وطلع معي http://html5please.com بحل هالمشكلة

بس هلاء مو عارف شو بدي اعمل يعني إذا ضمنت html5shiv.js بمشروعي بتخلص من مشكلة توافق المتصفحات

ولا عندكن خطوات ثانية عم تستعملوها

صراحة أنا مع الوقت مللت من مسألة دعم المتصفحات هذه

نحن في 2014، أيّ شخص يتصفح الموقع بمتصفح أقل من ie 9 لا يفترض به أن يكون هناك

صدقا، من لازال يملك ie 6 & ie 7 نحن في 2014

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

صحيح يعتمد على نوعية العمل مثل مواقع البنوك والمواقع الخدميه الحكوميه يجب ان تراعي هذه الفئه