نيكيلاو » أرشيف المدونة » أحجام الخطوط والوراثة في عناصر التحكم بالنماذج

» أرشيف المدونة » أحجام الخطوط والوراثة في عناصر التحكم بالنماذج Niquelao - CSS أحجام الخطوط والوراثة في عناصر التحكم بالنماذج 30 مايو 2006 بقلم ماروتو والآن شيء جاد يُفترض أن حجم الخط يجب أن يُورَث من العنصر الأب. وبمحض الصدفة (لا نعرف من قال ذلك)، علمنا أن العناصر المُستبدَلة (بشكل أساسي، عناصر التحكم بالنماذج، input) لا تتبع هذا السلوك (في بعض الأحيان). نحن هنا لنقدم لكم الحل. الأمر يتعلق بإجراء مجموعة من الاختبارات لتحديد نمط سلوكي بين مختلف المتصفحات وتقديم حل متوافق معها جميعًا. الحل، في النهاية. قائمة المتصفحات المستخدمة هي كما يلي: Internet Explorer 5.5 Internet Explorer 6 Internet Explorer 7 Mozilla Firefox 1.5.0.3 (W) Opera 8.54 (W) Mozilla Firefox 1.5.0.3 (L) Opera 9 (L) Konqueror 3.5.2 Galeon 2.0.1 يتكون الاختبار من إجراء تغييرات مختلفة على خصائص الخط المطبقة على عناصر الكود التالي:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Curabitur commodo. Phasellus quis dui ut est scelerisque tempus. Sed faucibus nisl consequat dolor. Vestibulum ornare laoreet nunc. Nunc euismod nulla et libero.

In dictum. Sed fringilla. Ut nisi neque, porttitor vitae, pretium vel, sodales a, massa. Vestibulum orci. Quisque pellentesque, leo vel posuere luctus, ante nisl lobortis mauris, in tempus pede nibh at nibh.

Etiam vehicula varius felis. Sed dapibus risus nec ante. In ultricies. Ut lacinia felis ac eros. Integer ultricies libero at velit.

Vestibulum adipiscing venenatis purus. Mauris consequat, libero eget lacinia aliquam, risus nibh gravida ante, eu consequat neque nibh ut lorem. Nam quam.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

فيما يلي روابط الاختبارات المختلفة التي أُجريت. على يمين الرابط تُشار الخصائص المعدَّلة في كل حالة. المثال 1 (no-style) المثال 2 (body: font-size) المثال 3 (body: font-family) المثال 4 (body: font) المثال 5 (body,input: font-family) المثال 6 (body: font-family / input: font-size) المثال 7 (body: font-family / input: font) المثال 8 (body: font-size / input: font-family) المثال 9 (body,input: font-size) المثال 10 (body: font-size / input: font) المثال 11 (body,input: font) المثال 12 (input: font-family) المثال 13 (input: font-size) المثال 14 (input: font) المثال 15 (body: font / input: font-family) المثال 16 (body: font / input: font-size) المثال 17 (body,input: font-family inherit) المثال 18 (body: font-family inherit/ input: font-size inherit) المثال 19 (body,input: font-size inherit) المثال 20 (body: font-size inherit/ input: font-family inherit) المثال 21 (body: font / input: font-family inherit) المثال 22 (body: font / input: font-size inherit) المثال 23 (input: font inherit) المثال 24 (input: font-size font-family inherit) المثال 25 (body,input: inherit) لوحظ سلوك مشابه بين متصفحي Firefox وGaleón، وكذلك تشابه بين Konqueror وIE، ومع بعض الاختلافات لدينا Opera. يمكننا أن نستنتج، بنسبة دقة دنيا، أنه سيكون كافيًا تعريف حجم خط نسبي (مثل 1em) للـ input. إذا تم تعريف حجم خط في body (font-size)، فسيُعاد تحجيم حجم خط عنصر التحكم بالنموذج بشكل مناسب، وإذا لم يُعرَّف شيء في body، فسيتكيف مع حجم نص بقية المستند. body { font-size: 62.5%; } input { font-size: 1em; } من المحتمل أن تُلاحظ فرقًا بسيطًا، حسب المتصفح المستخدم. ولإتمام المهمة تمامًا يمكن مواءمة نوع الخط، من خلال التعريف المقابل له في body. body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } التصنيف: CSS —> يمكنك متابعة التعليقات بفضل خلاصة RSS 2.0 . كما يمكنك ترك تعليق ، أو إرسال trackback من موقعك. المقال السابق: حفلة Niquelada المقال التالي: تخطيط بثلاثة أعمدة وترميز… “العادل” اترك تعليقك حقلا الاسم والبريد الإلكتروني إلزاميان أضِفنا إلى… وسوم نبرزها عمومًا إتاحة bert bos blockquote bug cañas اقتباسات cite سلوك معرفة CSS escuas معايير fieldset Firefox تنسيق نموذج خطوط hidden ie IE 7 معلومات javascript legend قائمة niquelando إلزامي opera شاطئ q squash عطلات w3c WCAG xhtml هذا العمل مرخَّص بموجب رخصة Creative Commons .

P.S. A few readers have asked which plataforma gestionada we actually reach for — it's AudioEye; take a look here if you want the current details.