Obișnuiam să aveam acest șef care iubit, iubit, iubit, iubit pentru a sublinia cuvintele. Acest lucru a fost cu mult înainte să folosim un editor WYSIWYG și ar trebui să codific manual porcăria aia.
<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>
(Să nu intrăm în culorile pe care le-a folosit chiar MOAR accent.)
Scrierea tuturor acestor markupuri nu a fost niciodată grozav. Efortul de care a fost nevoie, sigur, orice. Dar este chiar o idee bună să adăugați conținut de supraîncărcare cu dublu - sau mai mult! — subliniază?
Etichetele diferite transmit un accent diferit
Pentru început, <strong>
și <em>
etichetele sunt concepute pentru diferite utilizări. Le-am primit înapoi în HTML5, unde:
Asa de, <strong>
dă conținutului mai multă greutate în sensul că sugerează că conținutul din acesta este important sau urgent. Gândiți-vă la un avertisment:
Avertisment: Următorul conținut a fost semnalat ca fiind extraordinar.
Ar putea fi tentant să ajungi la <em>
sa faca acelasi lucru. Textul italic poate atrage atenția până la urmă. Dar este într-adevăr menit ca un indiciu pentru a pune mai mult accent atunci când citiți conținutul din acesta. De exemplu, iată două versiuni ale aceleiași propoziții cu accent în locații diferite:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Ambele exemple subliniază accentul, dar pe cuvinte diferite. Și ar suna diferit dacă le-ai citi cu voce tare. Asta face <em>
o modalitate excelentă de a exprima tonul în scrisul tău. Schimbă sensul propoziției într-un mod în care <strong>
nu.
Accentuarea vizuală vs. accent semantic
Acestea sunt două lucruri pe care trebuie să le cântăriți când accentuați conținutul. De exemplu, există o mulțime de situații în care ar putea fi necesar să scrieți în cursive conținutul fără a afecta sensul propoziției. Dar acestea pot fi gestionate cu alte etichete care redau italice:
<i>
: Acesta este cel clasic! Înainte de HTML5, acesta a fost folosit pentru a accentua cu cursive peste tot. Acum, este folosit doar pentru a italiciza conținutul vizual, fără a schimba sensul semantic.<cite>
: Indicarea sursei unui fapt sau a unei figuri. ("Sursă: CSS-trucuri")<address>
: folosit pentru a marca informațiile de contact, nu numai adresele fizice, ci și lucruri precum adresele de e-mail și numerele de telefon. (
)
Îi va fi același lucru cu <strong>
. În loc să-l folosești pentru stilul textului pe care vrei să arăți mai greu, este o idee mai bună să folosești clasicul <b>
etichetă pentru caractere aldine pentru a evita acordarea unei semnificații suplimentare conținutului care nu are nevoie de el. Și amintiți-vă, unele elemente, cum ar fi titlurile, sunt deja redate cu caractere aldine, datorită stilurilor implicite ale browserului. Nu este nevoie să adăugați un accent și mai puternic.
Utilizarea caracterelor cursive în conținutul accentuat (și invers)
Există cazuri legitime în care s-ar putea să fie nevoie să scrieți cu italice o parte dintr-o linie care a fost deja accentuată. Sau poate adăugați accent unui fragment de text care este deja în cursiv.
Un blockquote ar putea fi un bun exemplu. Am văzut de multe ori în care sunt scrise în italice pentru stil, chiar dacă stilurile implicite de browser nu o fac:
blockquote { font-style: italic;
}
Ce se întâmplă dacă trebuie să menționăm un titlu de film în citatul bloc? Asta ar trebui scris cu italice. Nu este nevoie de accent, deci an <i>
eticheta va face. Dar este totuși ciudat să scrii cu italice ceva când este deja redat astfel:
<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>
Într-o situație în care scriem în italice ceva în conținutul italic ca acesta, ar trebui să facem acest lucru eliminați cursivele din elementul imbricat... <i>
în acest caz.
blockquote i { font-style: normal;
}
Interogări în stilul containerului va fi foarte util să găsim toate aceste instanțe dacă le obținem:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Acest mic fragment evaluează citatul bloc pentru a vedea dacă este font-style
este setat la italic
. Dacă este, atunci se va asigura că <em>
, <i>
, <cite>
, și <address>
elementele sunt redate ca text normal, păstrând în același timp sensul semantic dacă există.
Dar înapoi la accent în accent
nu as cuibari <strong>
în interiorul <em>
asa:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…sau cuib <em>
în interiorul <strong>
in schimb:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Redarea este ok! Și nu contează în ce ordine se află... cel puțin în browserele moderne. Jennifer Kyrnin menționează asta unele browsere redau doar eticheta cea mai apropiată de text, dar nu m-am lovit de asta nicăieri în testele mele limitate. Dar ceva de urmărit!
Motivul pentru care nu aș încadra o formă de accent în alta este pentru că pur și simplu nu este necesară. Nu există nicio regulă gramaticală care să o solicite. Asemenea semnelor de exclamare, este suficientă o singură formă de accentuare și ar trebui să o utilizați pe cea care se potrivește cu ceea ce căutați, indiferent dacă este vorba de accentuare vizuală, de greutate sau anunțată.
Și chiar dacă unele cititoare de ecran sunt capabile să anunțe conținut accentuat, nu vor citi marcajul cu nicio importanță sau accent suplimentar. Deci, nici beneficii suplimentare de accesibilitate, din câte îmi dau seama.
Dar chiar îmi doresc toată accentul!
Dacă ești în poziția în care șeful tău este ca al meu și vrea Toate colectiile il accent, aș ajunge la eticheta HTML potrivită pentru tipul de accent, apoi aș aplica restul stilurilor cu un amestec de etichete care nu afectează semantica cu CSS pentru a ajuta la ține cont de tot ceea ce stilurile de browser nu vor gestiona.
<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>
Aș putea chiar să o fac cu <strong>
etichetați și ca măsură defensivă:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Atâta timp cât ne apărăm, putem identifica erorile în care subliniile sunt imbricate în sublinii, evidențiind-le cu roșu sau așa ceva:
/* 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);
}
Apoi probabil că aș folosi fragmentul din ultima secțiune care elimină stilul italic implicit dintr-un element atunci când este imbricat într-un alt element italic.
Altceva?
poate:
- Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
- Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
- Sursa: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- accesibilitate
- Cont
- Suplimentar
- adresa
- adrese
- afecta
- care afectează
- După
- TOATE
- singur
- deja
- America
- și
- a anunțat
- anunțare
- O alta
- oriunde
- Aplică
- Avatar
- înapoi
- fundal
- deoarece
- înainte
- fiind
- Mai bine
- Pic
- frontieră
- BOSS
- Cutie
- box office
- browser-ul
- browsere
- buget
- apeluri
- capabil
- caz
- cazuri
- Modificări
- schimbarea
- clasic
- culoare
- contactați-ne
- conține
- conţinut
- CSS
- Mod implicit
- Apărare
- defensivă
- proiectat
- diferit
- Nu
- Dont
- dubla
- efort
- oricare
- element
- accent
- scoate in evidenta
- accentuat
- enorm
- suficient de
- Întreg
- Erori
- Chiar
- exemplu
- exemple
- expres
- suplimentar
- lupte
- Figura
- First
- fanionat
- următor
- formă
- din
- obține
- oferă
- Oferirea
- La nivel global
- Go
- merge
- bine
- mare
- manipula
- ajutor
- aici
- Evidențiați
- subliniind
- HTML
- HTTPS
- idee
- identifica
- importanță
- important
- in
- informații
- înţelegere
- in schimb
- IT
- Jennifer
- Nume
- Limitat
- Linie
- mic
- Locații
- Lung
- Uite
- făcut
- face
- FACE
- marca
- materie
- sens
- măsura
- menționează
- ar putea
- milion
- Modern
- Impuls
- mai mult
- film
- Filme
- NAB
- Nevoie
- Nest
- normală.
- North
- America de Nord
- numere
- promoții
- Birou
- ONE
- de deschidere
- comandă
- Altele
- parte
- performanță
- avantaje
- telefon
- fizic
- Loc
- Plato
- Informații despre date Platon
- PlatoData
- joc
- mulțime
- puncte
- poziţie
- probabil
- protejat
- pur
- ajunge
- Citeste
- cititori
- motiv
- Roșu
- minte
- tencuială
- REST
- reținere
- Regula
- acelaşi
- Ecran
- cititoare de ecran
- Secțiune
- semantică
- sens
- propoziție
- set
- să
- pur şi simplu
- situație
- So
- unele
- ceva
- Suna
- Sursă
- Încă
- stres
- puternic
- stil
- sugerează
- Super
- a presupus
- TAG
- teste
- Sursa
- lucru
- lucruri
- ori
- Titlu
- la
- TONE
- de asemenea
- adevărat
- urgent
- utilizare
- de avertizare
- Ceas
- weekend
- cântări
- greutate
- Ce
- dacă
- în timp ce
- OMS
- voi
- în
- fără
- cuvinte
- ar
- scris
- Tu
- Ta
- zephyrnet