1. المخطط التفصيلي
عند تصحيح مشكلات CSS، غالبًا ما أقوم بإضافة حد إلى عنصر معين لمعرفة ما يحدث بالضبط لهذا العنصر والمساعدة في تحديد مصدر المشكلة. يعمل هذا غالبًا لأنه يمنحني رؤية أكثر تحديدًا للتخطيط. ولكن إذا كان عنصرًا على مستوى الكتلة، فقد يحدث خطأ ما - فإضافة حد 1 بكسل إلى أي عنصر على مستوى الكتلة من المرجح أن يؤثر على التخطيط من خلال جعل العنصر أوسع بمقدار 2 بكسل.
تُعد خاصية المخطط التفصيلي بديلاً مثاليًا لأنها تعرض الكائن دون التأثير على تدفق المستند. ومع ذلك، لا يدعم IE6 وIE7 سمة المخطط التفصيلي، لذلك لا يمكن استخدامها لتصحيح الأخطاء في هذين المستعرضين.
2. وراثة (القيمة)
هناك العديد من الأمثلة على ذلك في تطوير CSS: من خلال تعيين أنماط معينة على عنصر معين لإخبار هذا العنصر بأنه "يرث" جميع الخصائص المضافة للعنصر الأصلي، يمكنك تجنب قدر كبير من إدخال لوحة المفاتيح.
يمكن تحقيق ذلك بسهولة عن طريق تعيين الميراث. قد يكون هذا مفيدا. على سبيل المثال، عند تجاوز سمة الخلفية، غالبًا ما يكون هناك الكثير من النص في السمة (اللون، عنوان URL للصورة، الموقع، وما إلى ذلك). لذا، بدلاً من إعادة كتابة هذه القيم، قد ترغب فقط في أن يكون للعنصر المعني نفس خاصية الخلفية التي يتمتع بها العنصر الأصلي، وستقوم القيمة الموروثة بالمهمة - ومن الواضح أنها ستوفر الكثير من الكتابة على لوحة المفاتيح.
لسوء الحظ، قيم الوراثة غير مدعومة في IE6 وIE7 (باستثناء الاتجاه (اتجاه النص) وخصائص الرؤية).
3. الخلايا الفارغة
يتم استخدام هذه السمة فقط للجداول أو العناصر التي تم تعيين سمة "العرض" الخاصة بها على "خلية الجدول". إذا قمت بإضافة محتوى إلى جدول ديناميكيًا، فقد تواجه موقفًا يكون فيه محتوى خلية معينة فارغًا، ولا تريد إخفاء حدود هذه الخلية الفارغة ولون الخلفية وصورة الخلفية وما إلى ذلك.
يمكن أن يؤدي استخدام "الخلايا الفارغة: إخفاء" إلى حل هذه المشكلة، مما يؤدي إلى إخفاء الخلايا التي قد يحدث فيها هذا الموقف تمامًا.
لا يدعم Internet Explorer سمة الخلايا الفارغة.
4. الجانب التسمية التوضيحية
عند الحديث عن سمة الجدول، يتم استخدام هذه السمة للإعلان عن عنوان الجدول الذي يتم عرضه في العمود الجانبي للجدول. يقبل أربع قيم: الأعلى والأسفل واليسار واليمين. لا يدعم Internet Exporer هذه السمة، وسيظهر عنوان الجدول دائمًا في أعلى الجدول في IE6 وIE7.
5. عداد الزيادة/عداد الضبط
تعتبر القائمة المرتبة (
) مريحة للغاية لأنها توفر عليك عناء إضافة أرقام متزايدة يدويًا، وتسمح لك بتغيير تسلسل القائمة دون تغيير الأرقام.
يحتوي CSS على خصائص مضادة للزيادة ومضادة لإعادة التعيين، والتي تسمح لك بإنشاء أرقام متزايدة تلقائيًا على أي عنصر HTML تقريبًا، على غرار القائمة المرتبة.
لكن IE6 وIE7 وحتى Safari (حتى الإصدار 3.x) لا يدعمون هذه الخصائص. بالطبع، IE6 أيضًا لا يدعم العنصر الزائف :before.
6.الارتفاع الأدنى
في بعض الأحيان، يتطلب التصميم أو هيكل التخطيط لموقع الويب منطقة محتوى ذات ارتفاع ثابت، وإلا فسيتم فقدان تأثير مرئي معين. قد يكون هذا بسبب الخلفية المتدرجة، أو القائمة المنسدلة الفريدة، أو ربما بسبب تأثير التوهج الرائع الذي يخرج من Photoshop. لكن في بعض الأحيان، يكون هناك الكثير من المحتوى في الصفحة، ولكن لا يمكن توسيع الصفحة كما هو متوقع.
في هذا الوقت، تحتاج إلى استخدام سمة min-height، لأنها يمكن أن تطلب من المتصفح عرض الحد الأدنى للارتفاع على عنصر معين على مستوى الكتلة، بغض النظر عما إذا كان الارتفاع الفعلي للمحتوى يصل إلى هذا الحد الأدنى للارتفاع. وبعد ذلك، إذا تجاوز المحتوى الحد الأدنى للارتفاع، فسيتم توسيع العنصر بشكل مناسب.
الشيء الوحيد الذي يجب ملاحظته حول استخدام min-height هو أنه غير مدعوم في IE6. نعلم جميعًا أن IE6 يختفي (ببطء)، ولكن قد يستمر بعض العملاء في المطالبة بأن تدعم مواقعهم المتصفح اللعين.
والخبر السار هو أن IE6 يعرض قيمة الارتفاع تمامًا بنفس الطريقة التي تعرض بها المتصفحات الأخرى "min-height"، لذلك كل ما تحتاجه هو اختراق خاص بـ IE6 أو ورقة أنماط مستقلة لإضافة ارتفاع محدد، وتم حل المشكلة.
يتجاهل IE6 أيضًا الحد الأدنى للعرض والحد الأقصى للارتفاع والحد الأقصى للعرض، ولكن الطريقة المذكورة أعلاه مناسبة أيضًا لهذه الخصائص.
7. :تحوم
من الناحية الفنية، يعد :hover مجرد فئة زائفة، ولكنه غير مدعوم في IE6 (يدعمه IE7 وIE8). تسمح لك الفئة الزائفة :hover بإضافة أي نمط تمرير الماوس إلى عنصر ما. وهذا مفيد جدًا ويتجنب (على الأقل إلى حد ما) استخدام JavaScript.
ولكن إذا كان موقع الويب الخاص بك يحتاج إلى دعم IE6 بشكل كامل، خاصة في الصين حيث يهيمن IE6 على السماء، فيجب عليك التفكير في إلغاء استخدام هذه الفئة الزائفة، ما لم تكن العلامة ذات الصلة تحتوي على سمة "href"، مثل العلامة . وإذا كنت ترغب في تحقيق هذا التأثير، فقد تضطر إلى اللجوء إلى جافا سكريبت وأنماط إضافية.
8. العرض
عادةً ما يتم تعيين العرض على إحدى هذه القيم الثلاث: كتلة، ومضمنة، ولا شيء. "شكرًا" لـ IE، نادرًا ما يتم استخدام قيم العرض الأخرى. تتضمن هذه القيم كتلة مضمنة، وجدول، وجدول مضمن، وخلية جدول، وما إلى ذلك. وهذه السمات مفيدة جدًا لحل بعض مشكلات التخطيط الخاصة.
لذلك، على الرغم من أن IE يدعم هذه الخصائص الأساسية الثلاثة للعرض، إلا أنه لا يدعم الخصائص الأخرى بشكل أساسي.
في الواقع، دعم IE8 لسمات العرض مكتمل تمامًا. ومع ذلك، بالنسبة لسمة inline-block، فإن IE6/7 يدعم فقط العناصر المضمنة نفسها.
لمعرفة المزيد حول دعم العرض في المتصفحات المختلفة، يرجى التحقق هنا - Shenfei Note
9. مقطع
هذه خاصية CSS مثيرة للاهتمام ويمكن أن تكون مفيدة في مواقف خاصة. وقد يتم دمجه مع محتوى لا يمكن التنبؤ به ويتم إنشاؤه ديناميكيًا. ببساطة، تسمح لك هذه السمة بتحديد منطقة مخفية على عنصر معين - ويمكن أيضًا فهمها على أنه، في عنصر محدد الموضع بشكل مطلق، يتم اقتصاص منطقة العرض للعنصر وفقًا لإعدادات معينة، والمحتوى سيتم إخفاء ما وراء هذه المنطقة.
من الناحية الفنية، يتم دعم سمة المقطع بواسطة IE، ولكنها تدعم فقط بناء الجملة الخالي من الفواصل، مثل
شعبة مقطعة {
الحشو: 20 بكسل؛
العرض: 400 بكسل؛
الارتفاع: 400 بكسل؛
مقطع: مستطيل (20 بكسل 300 بكسل 200 بكسل 100 بكسل) ؛
الموقف: مطلق؛
} يمكن تشغيل النمط أعلاه (السمات الموجودة بين قوسين بعد المستقيم غير مفصولة بفواصل) في معظم المتصفحات، لكنه قد لا يجتاز التحقق من صحة CSS لأن العبارات غير مفصولة بفواصل.
10. :التركيز
هذه فئة زائفة أخرى يجب ذكرها هنا، لأن جميع المتصفحات غير التابعة لـ IE تدعم هذه السمة. تتيح لك الفئة الزائفة :focus الإعلان عن نمط خاص يتم تطبيقه ديناميكيًا على عنصر الصفحة عندما يصبح موضع تركيز لوحة المفاتيح (الماوس). يعد هذا مفيدًا في عناصر النموذج لأنه يمكنك إضافة حد إلى حقل الإدخال عند تحديده.
