Včasih sem imel tega šefa, ki je ljubil, ljubil, ljubil, ljubil poudariti besede. To je bilo daleč nazaj, preden smo uporabljali urejevalnike WYSIWYG in to sranje bi moral ročno kodirati.
<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>
(Ne spuščajmo se v barve, ki jih je uporabil MOAR poudarek.)
Pisanje vseh teh oznak se nikoli ni počutilo dobro. Trud, ki je bil potreben, seveda, ne glede na to. Toda ali je sploh dobra ideja dodajati preobremenjeno vsebino z dvojno — ali več! — poudarki?
Različne oznake izražajo različne poudarke
Za začetek je <strong>
in <em>
oznake so zasnovane za različne namene. Dobili smo jih nazaj v HTML5, kjer:
Torej, <strong>
daje vsebini večjo težo v smislu, da nakazuje, da je vsebina v njej pomembna ali nujna. Pomislite na opozorilo:
Opozorilo: Naslednja vsebina je bila označena kot odlična.
Morda je skušnjava poseči po <em>
narediti isto stvar. Ležeče besedilo lahko kljub vsemu pritegne pozornost. Vendar je v resnici mišljeno kot namig, da pri branju vsebine uporabite večji poudarek. Tu sta na primer dve različici istega stavka s poudarkom na različnih mestih:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Oba primera poudarjata poudarek, vendar na različnih besedah. In zvenele bi drugače, če bi jih prebrali na glas. To naredi <em>
odličen način za izražanje tona v vašem pisanju. Spremeni pomen stavka na način, da <strong>
ne.
Vizualni poudarek vs. pomenski poudarek
To sta dve stvari, ki ju morate pretehtati, ko poudarjate vsebino. Na primer, obstaja veliko primerov, ko boste morda morali vsebino označiti ležeče, ne da bi to vplivalo na pomen stavka. Vendar jih je mogoče obravnavati z drugimi oznakami, ki upodabljajo poševno:
<i>
: To je klasika! Pred HTML5 se je to uporabljalo za poudarjanje poudarka s poševnim tiskom povsod. Zdaj se uporablja samo za ležeče vizualno pisanje vsebine brez spreminjanja semantičnega pomena.<cite>
: Navedba vira dejstva ali številke. (“Vir: CSS-triki")<address>
: Uporablja se za označevanje kontaktnih podatkov, ne samo fizičnih naslovov, ampak tudi stvari, kot so e-poštni naslovi in telefonske številke. (
)
Z njim se bo zgodilo isto <strong>
. Namesto da bi ga uporabljali za oblikovanje besedila, za katerega želite, da je videti težje, je bolje uporabiti klasično <b>
oznako za krepko pisavo, da se izognete dajanju dodatnega pomena vsebini, ki tega ne potrebuje. Ne pozabite, da so nekateri elementi, kot so naslovi, zaradi privzetih slogov brskalnika že upodobljeni krepko. Ni potrebe po dodajanju še močnejšega poudarka.
Uporaba ležečega tiska v poudarjeni vsebini (in obratno)
Obstajajo upravičeni primeri, ko boste morda morali del vrstice, ki je že poudarjen, zapisati ležeče. Ali pa morda dodajte poudarek delu besedila, ki je že v poševnem tisku.
Dober primer je lahko citat bloka. Velikokrat sem videl, da so zaradi sloga napisani ležeče, čeprav privzeti slogi brskalnika tega ne počnejo:
blockquote { font-style: italic;
}
Kaj pa, če moramo v tem blok citatu omeniti naslov filma? To bi moralo biti ležeče. Poudarek ni potreben, zato an <i>
oznaka bo zadostovala. Vendar je še vedno čudno, če nekaj napišete ležeče, če je že tako upodobljeno:
<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>
V primeru, da v ležeči vsebini pišemo nekaj v ležečem tisku, bi morali odstranite poševni tisk iz ugnezdenega elementa ... <i>
v tem primeru.
blockquote i { font-style: normal;
}
Poizvedbe v slogu vsebnika zelo uporabno bo zajeti vse te primere, če jih dobimo:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Ta majhen delček oceni blok citat, da ugotovi, ali je font-style
nastavljena na italic
. Če je, potem bo poskrbel za <em>
, <i>
, <cite>
in <address>
elementi so upodobljeni kot običajno besedilo, medtem ko ohranijo semantični pomen, če obstaja.
Toda nazaj k poudarku znotraj poudarka
Ne bi gnezdil <strong>
v notranjosti <em>
Všečkaj to:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
… ali gnezdo <em>
v notranjosti <strong>
namesto:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Upodabljanje je v redu! In ni pomembno, v kakšnem vrstnem redu so … vsaj v sodobnih brskalnikih. Jennifer Kyrnin to omenja nekateri brskalniki upodobijo samo oznako, ki je najbližja besedilu, vendar v svojih omejenih testih nisem nikjer naletel na to. Ampak nekaj, na kar je treba biti pozoren!
Razlog, zakaj ne bi vgnezdil ene oblike poudarka v drugo, je ta, da preprosto ni potreben. Ni slovničnega pravila, ki bi to zahtevalo. Tako kot pri klicajih je dovolj ena oblika poudarka in morali bi uporabiti tisto, ki se ujema s tem, kar iščete, pa naj gre za vizualni, težki ali napovedani poudarek.
In čeprav so nekateri bralniki zaslona sposobni napovedati poudarjeno vsebino, ne bodo prebrali oznak s kakršno koli dodatno pomembnostjo ali poudarkom. Torej tudi nobenih dodatnih ugodnosti za dostopnost, kolikor vem.
Ampak res želim vse poudarke!
Če ste v položaju, ko je vaš šef podoben mojemu in želi VSE o Poudarek, bi poiskal pravo oznako HTML za vrsto poudarka, nato pa uporabil preostale sloge z mešanico oznak, ki ne vplivajo na semantiko s CSS, da bi pomagal upoštevati vse, česar slogi brskalnika ne obravnavajo.
<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>
Morda bi to celo naredil z <strong>
označi tudi kot obrambni ukrep:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Dokler igramo obrambo, lahko prepoznamo napake, kjer so poudarki ugnezdeni znotraj poudarkov, tako da jih označimo z rdečo ali kaj podobnega:
/* 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);
}
Potem bi verjetno uporabil tisti delček iz zadnjega razdelka, ki odstrani privzeti poševni slog iz elementa, ko je ugnezden v drugem poševnem elementu.
Še kaj?
majyyyybe:
- Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
- Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
- vir: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- dostopnost
- Račun
- Dodatne
- Naslov
- naslovi
- vplivajo
- vplivajo
- po
- vsi
- sam
- že
- Amerika
- in
- razglasitve
- Napoveduje
- Še ena
- kjerkoli
- Uporabi
- avatar
- nazaj
- ozadje
- ker
- pred
- počutje
- Boljše
- Bit
- krepko
- meja
- BOSS
- Pasovi
- blagajna
- brskalnik
- brskalniki
- proračun
- poziva
- lahko
- primeru
- primeri
- Spremembe
- spreminjanje
- klasična
- barva
- kontakt
- Vsebuje
- vsebina
- CSS
- privzeto
- Defense
- defenzivna
- zasnovan
- drugačen
- Ne
- dont
- podvojila
- prizadevanje
- bodisi
- elementi
- E-naslov
- Poudarek
- poudariti
- je poudaril,
- ogromno
- dovolj
- Celotna
- napake
- Tudi
- Primer
- Primeri
- express
- dodatna
- bori
- Slika
- prva
- označeno
- po
- obrazec
- iz
- dobili
- daje
- Giving
- Globalno
- Go
- dogaja
- dobro
- veliko
- ročaj
- pomoč
- tukaj
- Označite
- poudarjanje
- HTML
- HTTPS
- Ideja
- identificirati
- Pomembnost
- Pomembno
- in
- Podatki
- vpogled
- Namesto
- IT
- Jennifer
- Zadnja
- Limited
- vrstica
- malo
- Lokacije
- Long
- Poglej
- je
- Znamka
- IZDELA
- znamka
- Matter
- kar pomeni,
- merjenje
- omenja
- morda
- milijonov
- sodobna
- Momentum
- več
- Film
- filmi
- NAB
- Nimate
- Gnezdo
- normalno
- sever
- North America
- številke
- Ponudbe
- Office
- ONE
- o odprtju
- Da
- Ostalo
- del
- performance
- perks
- telefon
- fizično
- Kraj
- platon
- Platonova podatkovna inteligenca
- PlatoData
- igranje
- Veliko
- točke
- Stališče
- verjetno
- zaščiteni
- izključno
- dosežejo
- Preberi
- bralci
- Razlog
- Rdeča
- ne pozabite
- upodabljanje
- REST
- ohranitev
- Pravilo
- Enako
- Zaslon
- bralniki zaslona
- Oddelek
- semantika
- Občutek
- stavek
- nastavite
- shouldnt
- preprosto
- Razmere
- So
- nekaj
- Nekaj
- zvok
- vir
- Še vedno
- stres
- močna
- slog
- Predlaga
- Super
- naj
- TAG
- testi
- O
- Vir
- stvar
- stvari
- krat
- Naslov
- do
- TONE
- tudi
- Res
- nujno
- uporaba
- opozorilo
- Watch
- vikend
- tehta
- teža
- Kaj
- ali
- medtem
- WHO
- bo
- v
- brez
- besede
- bi
- pisanje
- Vi
- Vaša rutina za
- zefirnet