من قبلا این رئیس را داشتم که محبوب, محبوب, محبوب, محبوب برای تاکید بر کلمات این خیلی قبل از استفاده از ویرایشگرهای 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>
(بیایید به رنگ هایی که او برای زوج استفاده کرده است نپردازیم موار تاکید.)
نوشتن این همه نشانه گذاری هرگز احساس خوبی نداشت. تلاشی که طول کشید، مطمئناً، هر چه باشد. اما آیا حتی ایده خوبی است که محتوای اضافه بار را با دو یا بیشتر اضافه کنید! - تاکید می کند؟
برچسب های مختلف تاکید متفاوتی را بیان می کنند
برای مبتدیان ، <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 { font-style: italic;
}
اگر لازم باشد عنوان فیلمی را در آن نقل قول ذکر کنیم چه؟ که باید مورب باشد. نیازی به تاکید بر استرس نیست <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; }
}
این قطعه کوچک نقل قول را ارزیابی می کند تا ببیند آیا چنین است یا خیر 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>
رندر خوبه! و مهم نیست که آنها به چه ترتیبی هستند... حداقل در مرورگرهای مدرن. جنیفر کیرنین به آن اشاره می کند برخی از مرورگرها فقط نزدیکترین برچسب را به متن ارائه می کنند، اما من در هیچ کجای تست های محدودم به آن برخورد نکردم. اما چیزی که باید مراقبش بود!
دلیل اینکه من یک شکل از تاکید را در شکل دیگر قرار نمی دهم این است که به سادگی مورد نیاز نیست. هیچ قاعده گرامری وجود ندارد که به آن نیاز داشته باشد. مانند علامت تعجب، یک شکل از تاکید کافی است، و شما باید از شکلی استفاده کنید که با آنچه که پس از آن هستید مطابقت داشته باشد، خواه بصری، وزن یا تاکید اعلام شده باشد.
و حتی اگر برخی از صفحهخوانها قادر به اعلام محتوای تاکید شده هستند، نشانهگذاری را با هیچ اهمیت یا تاکید بیشتری نمیخوانند. بنابراین، تا آنجا که من می توانم بگویم، هیچ مزیت دسترسی اضافی نیز وجود ندارد.
اما من واقعاً همه تأکید را می خواهم!
اگر در موقعیتی هستید که رئیس شما مانند من است و می خواهد همه la تاکید، برای نوع تاکید، تگ 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);
}
سپس احتمالاً از آن قطعه از آخرین بخش استفاده میکنم که استایل پیشفرض ایتالیک را از یک عنصر حذف میکند، زمانی که در یک عنصر مورب دیگر تودرتو است.
چیز دیگری مد نظر دارید؟
Mayyyyybe:
- محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
- پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
- منبع: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- دسترسی
- حساب
- اضافی
- نشانی
- آدرس
- اثر
- موثر بر
- پس از
- معرفی
- تنها
- قبلا
- امریکا
- و
- اعلام کرد
- اعلام كردن
- دیگر
- هر جا
- درخواست
- نماد
- به عقب
- زمینه
- زیرا
- قبل از
- بودن
- بهتر
- بیت
- جسور
- مرز
- BOSS
- جعبه
- دفتر جعبه
- مرورگر
- مرورگرهای
- بودجه
- تماس ها
- توانا
- مورد
- موارد
- تبادل
- متغیر
- کلاسیک
- رنگ
- تماس
- شامل
- محتوا
- CSS
- به طور پیش فرض
- دفاع
- دفاعی
- طراحی
- مختلف
- نمی کند
- آیا
- دو برابر
- تلاش
- هر دو
- عناصر
- پست الکترونیک
- تاکید
- اهمیت دادن
- تاکید
- عظیم
- کافی
- تمام
- خطاهای
- حتی
- مثال
- مثال ها
- صریح
- اضافی
- دعوا
- شکل
- نام خانوادگی
- پرچم گذاری شده
- پیروی
- فرم
- از جانب
- دریافت کنید
- می دهد
- دادن
- در سطح جهانی
- Go
- رفتن
- خوب
- بزرگ
- دسته
- کمک
- اینجا کلیک نمایید
- نماد
- مشخص کردن
- HTML
- HTTPS
- اندیشه
- شناسایی
- اهمیت
- مهم
- in
- اطلاعات
- بینش
- در عوض
- IT
- جنیفر
- نام
- محدود شده
- لاین
- کوچک
- مکان
- طولانی
- نگاه کنيد
- ساخته
- ساخت
- باعث می شود
- علامت
- ماده
- معنی
- اندازه
- اشاره می کند
- قدرت
- میلیون
- مدرن
- حرکت
- بیش
- سینما
- فیلم ها
- NAB
- نیاز
- لانه
- طبیعی
- شمال
- شمال امریکا
- تعداد
- پیشنهادات
- دفتر
- ONE
- افتتاح
- سفارش
- دیگر
- بخش
- کارایی
- قدرت
- تلفن
- فیزیکی
- محل
- افلاطون
- هوش داده افلاطون
- PlatoData
- بازی
- بسیاری
- نقطه
- موقعیت
- شاید
- محفوظ
- صرفا
- رسیدن به
- خواندن
- خوانندگان
- دلیل
- قرمز
- به یاد داشته باشید
- تفسیر
- REST
- حفظ
- قانون
- همان
- پرده
- خوانندگان صفحه نمایش
- بخش
- معنایی
- حس
- جمله
- تنظیم
- باید
- به سادگی
- وضعیت
- So
- برخی از
- چیزی
- صدا
- منبع
- هنوز
- فشار
- قوی
- سبک
- حاکی از
- فوق العاده
- مفروض
- TAG
- تست
- La
- منبع
- چیز
- اشیاء
- بار
- عنوان
- به
- TONE
- هم
- درست
- فوری
- استفاده کنید
- هشدار
- تماشا کردن
- اخر هفته
- وزن کن
- وزن
- چی
- چه
- در حین
- WHO
- اراده
- در داخل
- بدون
- کلمات
- خواهد بود
- نوشته
- شما
- شما
- زفیرنت