مرحبا يا هبر! أقدم إليكم ترجمة المقال "
مطورو الأخطاء الستة الأكثر شيوعًا عند كتابة HTML و CSS " لستاس ميلنيكوف.
استخدام سمة العنصر النائب بدلاً من عنصر التصنيف
غالبًا ما يستخدم المطورين سمة العنصر النائب بدلاً من عنصر التصنيف. ولكن في هذه الحالة ، لا يمكن لمستخدمي قارئ الشاشة (قارئات الشاشة) ملء الحقول لأن قارئ الشاشة لا يمكنه قراءة النص من سمة العنصر النائب.
<input type="email" placeholder="Enter your email">
لذلك ، أوصي باستخدام عنصر التصنيف لحقل الاسم وسمة العنصر النائب لمثال البيانات التي يجب على المستخدم تعبئتها.
<label> <span>Enter your email</span> <input type="email" placeholder="eg example@gmail.com"> </label>
باستخدام عنصر img لوضع الرسومات الزخرفية
كثيرا ما أرى المطورين يخلطون بين الرسومات الزخرفية وصور المحتوى. على سبيل المثال ، يقومون بترميز الرموز الاجتماعية باستخدام عنصر img.
<a href="https://twitter.com" class="social"> <img class="social__icon" src="twitter.svg" alt> <span class="social__name">Twitter</span> </a>
لكن أيقونة الشبكة الاجتماعية هي أيقونة زخرفية تساعد المستخدمين على فهم معنى العنصر بسرعة دون قراءة النص. إذا أزلنا الرمز ، فلن نفقد قيمة العنصر ، حتى نتمكن من استخدام خاصية صورة الخلفية له.
<a href="https://twitter.com" class="social"> <span class="social__name">Twitter</span> </a>
.social::before { background-image: url("twitter.svg"); }
باستخدام خاصية تغيير الحجم
عند تعطيل تغيير حجم منطقة النص باستخدام خاصية تغيير الحجم ، يتم تقليل إمكانية الوصول. وبالتالي ، لا يمكن للمستخدم إدخال البيانات بطريقة مريحة.
textarea { width: 100%; height: 200px; resize: none; }
يمكنك استخدام الخصائص min-width و max-width و min-height و max-height ، مما يحد من حجم العنصر ، ويمكن للمستخدم ملء الحقول بطريقة ملائمة.
textarea { min-width: 100%; max-width: 100%; min-height: 200px; max-height: 400px; }
باستخدام العرض: كتلة والموقف: المطلق (ثابت) معا.
كثيرا ما أرى المطورين يستخدمون خصائص العرض والموضع كما يلي:
.button::before { content: ""; display: block; position: absolute; top: 0; left: 0; }
لكن المتصفح يحدد قيمة الكتلة الافتراضية. لذلك ، لا تحتاج إلى إضافة هذه القيمة للعناصر ذات الموضع المطلق أو الثابت. لذلك ، الكود التالي يعطي نفس النتائج مثل السابقة.
.button::before { content: ""; position: absolute; top: 0; left: 0; }
لا قيمة للهيكل الممتلكات
لا أستطيع العمل مع الموقع باستخدام لوحة المفاتيح. لا أستطيع متابعة الرابط. لا استطيع التسجيل وذلك لأن المطورين يوقفون التركيز على العناصر عندما لا يضيفون أيًا إلى خاصية المخطط التفصيلي.
.button:focus { outline: none; } .button:focus { outline: 0; }
إذا كنت بحاجة إلى إيقاف تشغيل التركيز بشكل افتراضي ، فتأكد من حالة التركيز البديل.
.button:focus { outline: none; box-shadow: 0 0 3px 0 blue; }
العناصر الفارغة
في كثير من الأحيان ، يستخدم المطورون عناصر HTML الفارغة لعناصر النمط. على سبيل المثال ، ترميز قائمة الهامبرغر باستخدام عناصر div أو span الفارغة:
<button class="hamburger"> <span></span> <span></span> <span></span> </button>
.hamburger { width: 60px; height: 45px; position: relative; } .hamburger span { width: 100%; height: 9px; background-color: #d3531a; border-radius: 9px; position: absolute; left: 0; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 18px; } .hamburger span:nth-child(3) { top: 36px; }
ولكن يمكنك استخدام العناصر الزائفة :: قبل و :: بعد وتحقيق نتائج مماثلة.
<button class="hamburger"> <span class="hamburger__text"> <span class="visually-hidden">Open menu</span> </span> </button>
.hamburger { width: 60px; height: 45px; position: relative; } .hamburger::before, .hamburger::after, .hamburger__text::before { content: ""; width: 100%; height: 9px; background-color: #d3531a; border-radius: 9px; position: absolute; left: 0; } .hamburger::before { top: 0; } .hamburger::after { top: 18px; } .hamburger__text::before { top: 36px; } .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px !important; height: 1px !important; overflow: hidden; }