هل تعاني من مشكلة عدم توافق Css3 مع جميع المتصفحات ؟!

[عبدالله أبولبن]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته


اهلا بجميع اعضاء وزوار ومشرفين ومساعدين مشرفين << لعيون الشباب :shiny01:

طبعا الكل يشكي ويبكي على موضوع عدم توافقية الاكسبلورر بالذات مع تقنية Css 3.0.0

وهناك متصفحات عديدة اخرى ولكن ما حصلي الشرف وشفتها :nosweat:

ومن هذي المميزات اللي نستفيدها من الـ Css3

- استخدام خطوط خاصة من الجهاز
- الحواف الدائرية
- الظل Shadow
- والكثييير الكثييير << اعد بتعب !

فاليوم صراحة قلت عيب ، ورحت ادور وابحث في الانترنت عربي انجليزي فرنسي على كل اللغات ، الا طلعلي نتيجة من البحث الصراحة مدوية للجروح :bigsmile::bigsmile:

لقيت الحل اللي راح يريحنا من عمل ترقيعات لكل متصفح ! وهذا شرط اذا كان كذا يروح على ملف لحاله وله اعداداته وما شابه !!

الحل بكل بساطة كالتالي :

1. قم بتحميل الملف التالي : http://www.life5.net/ie-css3.htc
2. قم بعمل باتباع الشرح

طبعا سنقوم بتجربة عمل الحواف الدائرية ، والظل ، والباقي يمكنك تجربته بنفسك

            <div class="box2">
                <div>صندوق التجارب :)</div>
            </div> 

طبعا بالكود السابق كتبنا اكواد صندوق جديد [ div ] وعرفنا له كلاس = box2

وكتبنا شوية كلمات داخله للتجربة

الان طبعا نقوم بالدخول لعالم الـ Css ونقوم ببدء العمل ، فيتكون لدينا الكود كالتالي :

        .box2 {
            background: red;
            width: 414px;
            height: 262px;
            margin: 0 auto 35px auto;
            padding: 15px;
            border: 11px solid #c6ac6c;
            position: relative;
            margin-top: 35px;
            z-index: 2;
            
            -moz-border-radius: 32px; /* Firefox  | فايرفوكس */
            -webkit-border-radius: 32px; /* Safari and Chrome | سفاري + جوجل كروم */
            border-radius: 32px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3  | اوبرا 10.5 واعلى | المتصفحات الجديدة | وانترنت اكسبلورر 6 واحدث باستخدم التقنية الجديدة */
 
            -moz-box-shadow: 10px 10px 10px #000; /* Firefox  | فايرفوكس */
            -webkit-box-shadow: 10px 10px 10px #000; /* Safari and Chrome | سفاري + جوجل كروم */
            box-shadow: 10px 10px 10px #000; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3  | اوبرا 10.5 واعلى | المتصفحات الجديدة | وانترنت اكسبلورر 6 واحدث باستخدم التقنية الجديدة */
 
 
            behavior: url(ie-css3.htc);/* This lets IE know to call the script on all elements which get the 'box' class  |  هنا مربط الفرس وهذا يستعمل لتعريف الاكسبلورر المتخلف عقليا بانه هناك سكربت لتطويره وعلاجه :)*/
        } 

طبعا ضع الاكواد السابقة كلها في صفحة واحدة وقم بتجربتها فسترى انه اصبح لديك كم بالصورة :

http://www.life5.net/?attachment_id=141


المصدر : http://www.life5.net/?p=136


تحياتي للجميع وان شاء الله اكون افدتكم

[وضاء]

و عليكم السلام ،
تصحيح المصدر : http://www.fetchak.com/ie-css3/
ابوالين الاجانب بالذات يحرصون على ان ملفاته لا ترفع ابداً خارج مواقعهم لانهم يطورونها باستمرار و لذلك يمنعون رفعها خارج مواقعم .
سبقك بها كتوم في المصنع لكن زيادة الخير خيران
// لا تشتغل الاضافة على اللوكال هوست على فكرة !

[عبدالله أبولبن]

و عليكم السلام ،
تصحيح المصدر : http://www.fetchak.com/ie-css3/
ابوالين الاجانب بالذات يحرصون على ان ملفاته لا ترفع ابداً خارج مواقعهم لانهم يطورونها باستمرار و لذلك يمنعون رفعها خارج مواقعم .
سبقك بها كتوم في المصنع لكن زيادة الخير خيران
// لا تشتغل الاضافة على اللوكال هوست على فكرة !

صحيح المصدر هو الموقع الاجنبي لكن اقصد المصدر المعرب :con2:

وانا وضحت بالموضوع اني لقيت الحل بموقع اجنبي ، وجبته لكم

وهي تعمل على اللوكال هوست لدي بشكل مميز Xampp

تحياتي لك

[يماني ديزاين]

يعطيك العافيه ,,

وان شاء الله نشوف العرب مطورين !