اعتدت أن يكون لدي هذا الرئيس الذي أحب, أحب, أحب, أحب للتأكيد على الكلمات. كان هذا في طريق العودة قبل أن نستخدم محرري WYSIWYG وسأضطر إلى ترميز هذا الهراء يدويًا.
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(دعونا لا ندخل في الألوان التي استخدمها حتى MOAR توكيد.)
كتابة كل هذا الترميز لم يكن رائعًا أبدًا. الجهد الذي بذلته ، بالتأكيد ، أيا كان. ولكن هل من الجيد إضافة محتوى زائد مع ضعف - أو أكثر! - تأكيدات؟
علامات مختلفة تعبر عن تركيز مختلف
بالنسبة للمبتدئين ، و <strong>
و <em>
العلامات مصممة لاستخدامات مختلفة. أعدناها إلى HTML5 ، حيث:
وبالتالي، <strong>
يعطي المحتوى وزناً أكبر بمعنى أنه يوحي بأن المحتوى فيه مهم أو عاجل. فكر في تحذير:
: تحذير تم تمييز المحتوى التالي لكونه رائعًا.
قد يكون من المغري الوصول إليه <em>
لفعل نفس الشيء. يمكن أن يكون النص المائل ملفتًا للانتباه بعد كل شيء. ولكن من المفترض حقًا أن تكون بمثابة تلميح لاستخدام مزيد من التركيز عند قراءة المحتوى الموجود فيه. على سبيل المثال ، إليك نسختان من نفس الجملة مع التركيز في مواقع مختلفة:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
يؤكد كلا المثالين على التركيز ، ولكن على كلمات مختلفة. وستبدو مختلفة إذا قرأتها بصوت عالٍ. الذي يجعل <em>
طريقة رائعة للتعبير عن النبرة في كتاباتك. يغير معنى الجملة بطريقة <strong>
لا.
التركيز البصري مقابل التركيز الدلالي
هذان شيئان يجب أن تزنهما عند التركيز على المحتوى. مثل ، هناك الكثير من الحالات التي قد تحتاج فيها إلى كتابة المحتوى بخط مائل دون التأثير على معنى الجملة. ولكن يمكن التعامل مع تلك العلامات الأخرى التي تعرض الخط المائل:
<i>
: هذا هو الكلاسيكي! قبل HTML5 ، تم استخدام هذا للتأكيد على التركيز بالخط المائل في كل مكان. الآن ، يتم استخدامه فقط لجعل المحتوى مائلًا بشكل مرئي دون تغيير المعنى الدلالي.<cite>
: مبينا مصدر الحقيقة أو الرقم. ("مصدر: حيل CSS")<address>
: يُستخدم لترميز معلومات الاتصال ، ليس فقط العناوين الفعلية ، ولكن أيضًا لأشياء مثل عناوين البريد الإلكتروني وأرقام الهواتف. (
)
انها ذاهبة الى انه نفس الشيء مع <strong>
. بدلاً من استخدامه لتصميم النص الذي تريد أن تبدو أثقل ، من الأفضل استخدام الكلاسيكية <b>
علامة للخط العريض لتجنب إعطاء أهمية إضافية للمحتوى الذي لا يحتاج إليه. وتذكر أن بعض العناصر مثل العناوين تم عرضها بخط غامق بالفعل ، وذلك بفضل الأنماط الافتراضية للمتصفح. ليست هناك حاجة لإضافة المزيد من التركيز القوي.
استخدام الخط المائل في المحتوى المميز (والعكس صحيح)
هناك حالات مشروعة قد تحتاج فيها إلى كتابة جزء مائل من السطر الذي تم التأكيد عليه بالفعل. أو ربما أضف التركيز على جزء من النص المكتوب بخط مائل بالفعل.
قد يكون blockquote مثالًا جيدًا. لقد رأيت الكثير من المرات حيث يتم كتابتها بالخط المائل للأسلوب ، على الرغم من أن أنماط المتصفح الافتراضية لا تفعل ذلك:
blockquote { font-style: italic;
}
ماذا لو احتجنا إلى ذكر عنوان فيلم في هذا blockquote؟ يجب أن يكون مائلا. ليس هناك حاجة للتركيز على التوتر ، لذا فإن <i>
العلامة ستفعل. ولكن لا يزال من الغريب جعل شيء مائلًا عندما يتم تقديمه بهذه الطريقة بالفعل:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
في الحالة التي نكتب فيها شيئًا مائلًا داخل محتوى مائل مثل هذا ، من المفترض أن نفعل ذلك قم بإزالة الخط المائل من العنصر المتداخل ... <i>
في هذه الحالة.
blockquote i { font-style: normal;
}
استعلامات نمط الحاوية سيكون مفيدًا للغاية في القبض على كل هذه الحالات إذا حصلنا عليها:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
يقوم هذا المقتطف الصغير بتقييم blockquote لمعرفة ما إذا كان كذلك font-style
ومن المقرر أن italic
. إذا كان الأمر كذلك ، فسوف يتأكد من أن <em>
, <i>
, <cite>
و <address>
يتم عرض العناصر كنص عادي ، مع الاحتفاظ بالمعنى الدلالي إذا كان هناك واحد.
لكن العودة إلى التركيز ضمن التركيز
لن أعشش <strong>
في الداخل <em>
مثله:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
... أو عش <em>
في الداخل <strong>
في حين أن:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
التقديم على ما يرام! ولا يهم ترتيبها ... على الأقل في المتصفحات الحديثة. ذكرت ذلك جينيفر كيرنين تعرض بعض المتصفحات العلامة الأقرب إلى النص فقط، لكنني لم أصطدم بهذا في أي مكان في اختباراتي المحدودة. لكن هناك شيء لمشاهدة!
السبب في عدم تداخل أحد أشكال التركيز في شكل آخر هو أنه ببساطة غير ضروري. لا توجد قاعدة نحوية تستدعي ذلك. مثل علامات التعجب ، فإن أحد أشكال التأكيد كافٍ ، ويجب عليك استخدام الشكل الذي يتطابق مع ما تبحث عنه سواء أكان مرئيًا أم وزنًا أم تأكيدًا معلنًا.
وعلى الرغم من أن بعض برامج قراءة الشاشة قادرة على الإعلان عن المحتوى المشدد ، فإنها لن تقرأ الترميز بأي أهمية أو تركيز إضافي. لذلك ، لا توجد امتيازات وصول إضافية أيضًا ، على حد علمي.
لكنني حقًا أريد كل التركيز!
إذا كنت في موقع يكون فيه مديرك مثل مديري ويريد الجميع ال تشديد، سأصل إلى علامة HTML المناسبة لنوع التركيز ، ثم أطبق بقية الأنماط بمزيج من العلامات التي لا تؤثر على الدلالات باستخدام CSS للمساعدة في حساب أي شيء لن تتعامل معه أنماط المتصفح.
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
قد أفعل ذلك حتى مع <strong>
ضع علامة أيضًا كإجراء دفاعي:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
طالما أننا نلعب الدفاع ، يمكننا تحديد الأخطاء حيث تتداخل التأكيدات داخل التأكيدات عن طريق تمييزها باللون الأحمر أو شيء من هذا القبيل:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
ثم من المحتمل أن أستخدم هذا المقتطف من القسم الأخير الذي يزيل التصميم المائل الافتراضي من عنصر عندما يكون متداخلًا في عنصر مائل آخر.
أي شيء آخر؟
ماييبي:
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
- المصدر https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- إمكانية الوصول
- حسابي
- إضافي
- العنوان
- عناوين
- تؤثر
- تؤثر
- بعد
- الكل
- وحده
- سابقا
- أمريكا
- و
- أعلن
- اعلان
- آخر
- في أى مكان
- التقديم
- الصورة الرمزية
- الى الخلف
- خلفية
- لان
- قبل
- يجري
- أفضل
- قطعة
- الخطّ الغامق
- الحدود
- رئيس
- صندوق
- شباك التذاكر
- المتصفح
- المتصفحات
- ميزانية
- دعوات
- قادر على
- حقيبة
- الحالات
- التغييرات
- متغير
- كلاسيكي
- اللون
- التواصل
- يحتوي
- محتوى
- CSS
- الترتيب
- الدفاع
- دفاعي
- تصميم
- مختلف
- لا
- لا
- مضاعفة
- جهد
- إما
- عناصر
- البريد الإلكتروني
- تشديد
- التأكيد
- وأكد
- ضخم
- كاف
- كامل
- أخطاء
- حتى
- مثال
- أمثلة
- التعبير
- احتفل على
- معارك
- الشكل
- الاسم الأول
- مرصوف
- متابعيك
- النموذج المرفق
- تبدأ من
- دولار فقط واحصل على خصم XNUMX% على جميع
- يعطي
- إعطاء
- على الصعيد العالمي
- Go
- الذهاب
- خير
- عظيم
- مقبض
- مساعدة
- هنا
- تسليط الضوء
- تسليط الضوء
- HTML
- HTTPS
- فكرة
- تحديد
- أهمية
- أهمية
- in
- معلومات
- تبصر
- بدلًا من ذلك
- IT
- جينيفر
- اسم العائلة
- محدود
- خط
- القليل
- المواقع
- طويل
- بحث
- صنع
- جعل
- يصنع
- علامة
- أمر
- معنى
- قياس
- يذكر
- ربما
- مليون
- تقدم
- زخم
- الأكثر من ذلك
- فيلم
- أفلام
- NAB
- حاجة
- عش
- عادي
- شمال
- امريكا الشمالية
- أرقام
- عروض
- Office
- ONE
- افتتاح
- طلب
- أخرى
- جزء
- أداء
- اكراميات
- للهواتف
- مادي
- المكان
- أفلاطون
- الذكاء افلاطون البيانات
- أفلاطون داتا
- لعب
- وفرة
- نقاط
- ان يرتفع المركز
- المحتمل
- محمي
- بحت
- الوصول
- عرض
- القراء
- سبب
- أحمر
- تذكر
- أداء
- REST
- الاحتفاظ
- قاعدة
- نفسه
- شاشة
- قارئات الشاشة
- القسم
- دلالات
- إحساس
- عقوبة
- طقم
- ينبغي
- ببساطة
- حالة
- So
- بعض
- شيء
- مصدر
- لا يزال
- إجهاد
- قوي
- نمط
- وتقترح
- فائق
- مفترض
- TAG
- اختبارات
- •
- المصدر
- شيء
- الأشياء
- مرات
- عنوان
- إلى
- TONE
- جدا
- صحيح
- عاجل
- تستخدم
- تحذير
- شاهد
- نهاية الأسبوع
- وزن
- وزن
- ابحث عن
- سواء
- في حين
- من الذى
- سوف
- في غضون
- بدون
- كلمات
- سوف
- جاري الكتابة
- أنت
- حل متجر العقارات الشامل الخاص بك في جورجيا
- زفيرنت