تحية طيبة
ارغب في إنشاء موقع يعمل على جميع متصفحات الويب بدون استثناء وبدون أخطاء وبدقة عالية
فما المطلوب لتحقيق ذلك
كيف يمكن إنشاء صفحة أو موقع متوافق مع جميع المستعرضات
انصحك باستعمال بوت ستراب فهي فعالة جدا في بناء المواقع و تسرع العملية و متواقة مع جل المتصفحات و الاجهزة و هتى الهواتف، تجدها هنا
أنا حاليا استعمل نسخة من 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 ليس بقوة bootstrap و ليس بجماله و سهولة ال documentation و هناك دعم للعربية لبوتستراب هنا
صراحةً لم تعجبني تعريبات بوتستراب، بالإضافة إلى أنه محشو بالتعقيدات و أرى التطوير في فونديشن أسهل.
أيضاً، بوتستراب مبني للشاشات الكبيرة و يدعم الصغيرة، بينما فاونديشن مبني للهواتف أولاً (أداء أفضل). و نظام الأعمدة في فاونديشن أجمل.
هذه مقارنة بين الإثنين:
على كل حال هي مسألة تفضيل شخصي لا أكثر. و مع ذلك أضطر أحياناً إلى استعمال بوتستراب للتطوير على ثيم جاهز، و لكن هذا يحدث فقط في حال لم يكن دعم اللغة العربية مطلوباً.
موقع أستخدمه بإستمرار هو : مبنى على bootstrap و يدعم العربى و الإنجليزى و الجوال
من برمجتى و يدعم عربى و إنجليزى :
http://notedn.com/test مبنى على bootstrap ويدعم العربى و الإنجليزى و الجوال
http://se7a.tv/test مبنى على bootstrap ويدعم العربى و الإنجليزى و الجوال
و مواقعى كلها مبنيه عليه و تدعم الجوال و منها و غيرها مازلت أعمل عليها و أخرى
جميل. هل جربت foundation أيضاً و لم تعجبك؟
قلت لك هي في النهاية مسألة تفضيل شخصي لا أكثر.
اطلعت عليها ولم يعجبنى أنها تعطيك layout فقط ولا توفر لك عناصر أنيقة جاهزة لتعمل عليها و توفر لك الوقت + ال documentation الخاص بها ليس مفصلاً مثل الخاص بال bootstrap
و لكنها مجهود رائع و جبار من قبل القائمين عليه و تصلح فى عدة أماكن لا تصلح فيها بنية bootstrap
السلام عليكم ..
١- تحتاج تعرف المتصفحات القديمه بعناصر html5 وهذا عمل html5shiv او Modernizr
٢- تحتاج تعمل تصفيه وهذا عمل normalize.css
٣- تشيك على العمل markup validity للـ html
٤- تشيك على العمل css
http://jigsaw.w3.org/css-va...
٥- تفتح جميع المتصفحات وتتاكد من كل خطوة تعمل ممتاز على المتصفحات او تبحث لها عن حل في النت
٦- تحتاج ان تتأكد من grid يعمل جيدا على جميع المتصفحات
… او بإختصار تريح راسك وتدخل على الموقع التالي وتحمل منصة عمل جاهزه ومفحوصه لك مع كل الخيارات السابقه :
ارجوا بأن اجابتي واضحه لك يالغالي
شكرا ً وصلت الفكرة
عندي سؤال هلاء أنا عم استعمل bootstrap بضلني مكمل عليه ولا بانتقل عـــ Modernizr
وهل Modernizr بيدعم العربية ؟
العفو يالغالي ..
انت بالخيار تضيف html5shiv او Modernizr ..
لكن يجب اضافة احدهم لقالب bootstrap الاول يقوم بتعريف العناصر html5 للمتصفحات القديمه لكن Modernizr يقدم دعم اكبر لك اذا كنت تريد تستخدم بعض العناصر المتقدمه canves مثلا .. على حسب طلب عملك
Modernizr هي اداة فقط .. دعم العربي يكون في ملفات bootstrap اي ان تجعل الاتجاه من اليمين الى اليسار يمكن تجد في الرابط التالي قالب bootstrap
يدعم rtl وتحديثاته واصلاحاته جدا حديثه لم اجربه من قبل
تحياتي لك
نصيحتي؟ استخدم * { Box-sizing: Border-box }
http://www.paulirish.com/20...
لماذا؟ المشكلة الأساسية في توافقية المتصفحات هي أن ie يختلف عن الباقي في طريقة قياس الأبعاد.
هذا السطر سيجعلها جميعها متشابهة في طريقة التعامل مع القياسات.
أيضاً استخدم less أو sass و قم بعمل دوال تقوم بإضافة البادئة في السي إس إس.
مثلاً: .transition تصبح:
-webkit-transition
-moz-transition
-ms-transition
transition
و بالتالي لن تقلق عن نسيان أي بادئة.
و في النهاية، استخدم normalize.css
لكن الأخ يتكلم عن شيء آخر تماما، هو يتكلم عن جعل العمل متوافق مع جميع المتصفحات
وأنت تتكلم عن إضافة 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 و ليس العكس. و الكود الذي وضعته موجود في الرابط.
نقطة جيدة أنه يجب الإبتعاد عن التقنيات غير المدعومة في كل المتصفحات :)
هلاء يلي فهمته إنو IE8 واقل ما بيدعم ميزات HTML5 ولذلك لازم نظمن HTML5 Shiv وبالأخص ملف js/html5shiv.js بالكود
وطلع معي http://html5please.com بحل هالمشكلة
بس هلاء مو عارف شو بدي اعمل يعني إذا ضمنت html5shiv.js بمشروعي بتخلص من مشكلة توافق المتصفحات
ولا عندكن خطوات ثانية عم تستعملوها
صراحة أنا مع الوقت مللت من مسألة دعم المتصفحات هذه
نحن في 2014، أيّ شخص يتصفح الموقع بمتصفح أقل من ie 9 لا يفترض به أن يكون هناك
صدقا، من لازال يملك ie 6 & ie 7 نحن في 2014
أنا أتفق معك و لا أدعم الإصدارات القديمة من هذه المتصفحات، و لكن هذا الأمر يرجع إلى الفئة المستهدفة من موقعك. على كل حال فإذا أردت استخدام عناصر html5 في إنترنت إكسبلورر يجب عليك وضع كود html5shim قبل أي ملف سي إس إس و ستعمل وسوم html5 بشكل طبيعي.
صحيح يعتمد على نوعية العمل مثل مواقع البنوك والمواقع الخدميه الحكوميه يجب ان تراعي هذه الفئه
التعليقات