« المبرمج الحقيقي
فكرة منتدى »

اختبار في CSS

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

1. ما هو الوسم الذي لا يتوافق مع هذه المجموعة:

  1. <div>
  2. <p>
  3. <ul>
  4. <span>

2. اكتب كود css للشكل التالي:

كود XHTML هو:

<p>smashing magazine</p>

3. ما هي نتيجة هذا الكود في كل من IE 6 و FF:

p {
 font-size: 20px !important;
 font-size: 12px
}

ثم هذا الكود:

p {
 height: 80px;
 min-height: 190px;
 border: 1px solid #ddd
}

أعزائي محبي CSS، من اجل المصداقية، يجب اعطاء اجوبة دون البحث في الأنترنت أو اجراء اختبارات

هذه التدوينة ادرجت بتاريخ 9 أكتوبر 2008 في الساعة 9:46 م ضمن تصنيف تطوير. يمكنك متابعة أي تعليق من خلال RSS 2.0 خلاصات التعليقات. يمكنك ترك تعليق, أو تعقيب من خلال موقعك الشخصي.

  1. مدونة محمد:

    إليك أجوبتي:
    1. الوسم span هو الشاذ عن المجموعةن ذلك أنه وسم أفقي عكس البقية.
    2. سنطلب من المتصفح أن يغير الحرف الأول فقط من الفقرة، و يترك البقية تخضع لشروط الفقرة الأخرى، عن طريق السطر التالي: p: first-letter.
    3. الجزء الأول: حجم الخط 20px في الFF، و 12px في IE6. ذلك بسبب إضافة important!
    3. الجزء الثاني: سيتم تجاهل السطر min-height: 190px في ال IE6، لكن في الFF سيكون أقل ارتفاع هو 190px.

    دمت سالما،
    و في انتظار التصحيح :)

  2. cssbit:

    عذرا
    الجواب صحيح ..

    لكن تمنيت لو كان هناك شرح وتفصيل للاجوبة

  3. ca2oom!:

    فكرة حلوة موضوع الأسئلة.. أنا هاجاوب علشان important لانه غريب معي

    جواب (1): الوسم رقم 4 span فجميع الأوسمة الأخري تشترك في طريقة الظهور في الوضع block أي تبدأ من سطر جديد وبقول عليها أنها تأخذ العرض بالكامل، أما الأخيرة فـ inline ليس لها عرض ولا تبدأ من سطر جديد مثلها مثل الوسوم a, em, b

    جواب (2): لا أعلم. بس عرفتها الأن من رد الأخ محمد.

    جواب (3): important! لا أفهمه حتى الأن بشكل كامل، أنا لي تجارب مع استخدامه في IE6 وخاصة مع الصور المتغيرة، كانت هناك دائما حالة تسبق أخرى وتتقدم عليها عند التأشير مثلاً وكان الحل في إضافة important! للتأكيد على وضع معين ولكن الغريب أنه كان لا يعمل إلا في حالة واحدة أن لا تأتي بعده خصائص أخرى :D

    استخدمته ايضا في الألوان ويتم تأكيدة داخل IE6 نفس الأمر.. في سؤلك وعلى تلك الحالة لن يعمل على IE6 لكن لو تم عكس الترتيب سيعمل على IE6!!! أما في FF طالما موجود important! فهو الظاهر دائما بغض النظر عن ترتيبه!!! لو عندك تعريف أو شرح مفصل لها ياريت تقوله.

    جواب (4): IE6 لا تصلح معه الأقل min ولا أيضا الأقصى max والإرتفاع هايكون 80px فقط، وفي FF يعتمد الأقل ليصبح الإرتفاع 190px.

  4. sadek:

    شكر اخي نعيم على هذه الدروس المفيدة

    وهذه أجوبتي البسيطة دون بحث او تجربة

    1 ) أظن الوسم الشاذ هو
    لأنه وسم خاص بالقوائم وليس الفقرات .

    2 ) أظن يتعين كتاية الكود التالي :

    /** تطبيق درس الاخ نعيم ; ) **/

    p:first-letter {
    color: #f99;
    font-size: 12px;
    }

    3 و 4 ) لم اقد بعد بتثبيث الاكسبلور 6 حيث يتعين عليا حدف الاكسبلور 7 حتى استطيع تطبيق درسك الاول في هذه المدونة <<< متابع ;)

    والمسالة مسالة وقت فقط .

    لكن رايي من راي الاخ محمد لأني سبق واطلعت على هذه المعلومة حيث الاكسبلور السادس لايدعم القيم !important; و min-height وغيرها من القيم المشابهة بخلاف الاكسبلور 7 والفايروفوكس .

    مع الشكر والتقدير .

  5. sadek:

    بخصوص الجواب الاول ..الوسم الذي اقصده هو رقم 3 في الترتيب اي ul

    لا اعرف لماذا لم يظهر في ردي اعلاه .

  6. cssbit:

    Sadekm:
    ليس ul كما تفضلت .. اقرا جواب الاخ ca2oom
    شكرا على المشاركة

  7. عمر الدليمي:

    * {
    direction: rtl;
    }
    pre, code {
    display: block;
    overflow: auto;
    background: #f9f9f9;
    padding: 5px;
    border: 1px dashed #e6e6e6;
    direction: ltr;
    text-align: left;
    }

    1. UL
    2. #smashing:first-letter {
    font-size:3em;
    color:#555;
    }
    أعذرني لكنني كتبته
    firstletter ولم يعمل لذلك إضررت للبحث >.<
    ولم أعرف شرط بدون إختبار لذلك تأكدت منه (من أول مرة) قبل أن أضعه هنا ^^

    3.1 هذا لا أعرف!
    كيف بدون إختبار!!
    لكن حسب توقعاتي أن
    FF ياخذ القيمة الثانية
    أما أكسبلورير فيتبع Important لذلك ياخذ الأولى

    3.1
    هذا يكون الإرتفاع
    FF: 190px;
    IE: 90px;
    ببساطة لأن أكسبلورير لا يعرف min-height

  8. cssbit:

    عمر الدليمي:
    اهلا وشكرا على المشاركة

    حسنا

    1. الجواب هو span لأن ul و div و p تظهر دائما على شكل block
    2. الكود هو p:first-letter لانني وضعت الجملة بين فقرة p
    3. في FF لن يتم تجاهل !important وبالتالي هو القياس الذي سيظهر في حين انه سيتم تجاهله في IE 6
    4. نعم صحيح

  9. ca2oom!:

    important هل حاولت عكس ترتيبه ومشاهدة على IE6 ?

    لن يتم تجاهلة!

  10. cssbit:

    لا يمكن عكس ترتيب !important
    فهو يكتب بعد القيمة

  11. ca2oom!:

    لا لا لم تفهمني..
    أنا أقصد أكتب الخواص بهذا الشكل.. سوف تعمل على IE6

    p {
    font-size: 12px;
    font-size: 20px !important;
    }

    أما بالشكل اللي كتتبه أنت لن تعمل

  12. cssbit:

    طبيعي لان IE 6 سيأخذ القيمة الثانية دائما ولو بدون !important
    وسيتجاهل القيمة الاولى وحتى عبارة !important

  13. cssbit:

    اخي ca2oom:
    سيتعامل IE6 مع الكود وكأن !important غير موجودة وبالتالي سيأخذ آخر قيمة، عكس FF
    شكرا على اثراء الموضوع بمشاركتك

  14. عمر الدليمي:

    1. الجواب هو span لأن ul و div و p تظهر دائما على شكل block

    هذا الأمر أعلمه، لكني فكرت به من ناحية أبسط بكثير!، فكرت أن كل واحد منهم مستقل بذاته إلا UL يحتاج لعناصر داخلية li كي يكتمل :D.

  15. إحسان:

    حلوة الأسئلة أستاذ ..

    السؤال الوحيد الخطأ عندي كان الأول :)

    بالنسبة لقيم الـdisplay .. فأحاول فهمها من هذا الرابط دائمًا :

    http://www.quirksmode.org/css/display.html

    لكنها تتعقد علي :(

أضف تعليقاً