Régen volt ez a főnököm, aki szeretett, szeretett, szeretett, szeretett szavakat hangsúlyozni. Ez még azelőtt volt, hogy WYSIWYG szerkesztőket használtunk, és nekem kellett kézzel kódolnom azt a szart.
<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 menjünk bele az általa használt színekbe MOAR hangsúly.)
Ezt a jelölést soha nem éreztem nagyszerűnek. Persze, mennyi erőfeszítésbe került. De vajon jó ötlet-e még dupla – vagy több – túlterheléses tartalmat hozzáadni? – hangsúlyozza?
A különböző címkék eltérő hangsúlyt közvetítenek
Először a <strong>
és a <em>
a címkéket különféle felhasználásra tervezték. Visszakaptuk őket HTML5-be, ahol:
Szóval, <strong>
nagyobb súlyt ad a tartalomnak abban az értelemben, hogy azt sugallja, hogy a tartalom fontos vagy sürgős. Gondolj egy figyelmeztetésre:
Figyelmeztetés: A következő tartalmat nagyszerűnek minősítették.
Csábító lehet hozzányúlni <em>
hogy ugyanezt tegye. A dőlt betűs szöveg végül is figyelemfelkeltő lehet. De igazából tippnek szánták, hogy nagyobb hangsúlyt fektessünk a benne lévő tartalom olvasásakor. Például itt van ugyanannak a mondatnak két változata, különböző helyeken található hangsúlyozással:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Mindkét példa a hangsúlyt hangsúlyozza, de más szavakra. És másképp hangzanak, ha felolvasnád őket. Megcsinálja <em>
nagyszerű módja annak, hogy kifejezze az írás hangnemét. Megváltoztatja a mondat jelentését oly módon <strong>
nem.
Vizuális hangsúly kontra szemantikai hangsúly
Ezt a két dolgot mérlegelni kell a tartalom hangsúlyozásakor. Sok olyan eset van, amikor előfordulhat, hogy dőlt betűvel kell szednie a tartalmat anélkül, hogy ez befolyásolná a mondat jelentését. De ezek más címkékkel is kezelhetők, amelyek dőlt betűt jelenítenek meg:
<i>
: Ez a klasszikus! A HTML5 előtt ezt használták a hangsúly dőlt betűs hangsúlyozására mindenhol. Most pusztán a tartalom vizuális dőlt betűzésére szolgál a szemantikai jelentés megváltoztatása nélkül.<cite>
: Egy tény vagy adat forrásának megjelölése. ("Forrás: CSS-trükkök")<address>
: Kapcsolatfelvételi adatok megjelölésére szolgál, nem csak a fizikai címek, hanem például az e-mail címek és telefonszámok is. (
)
Ugyanez lesz vele <strong>
. Ahelyett, hogy a nehezebbnek látszó szöveg formázására használná, jobb ötlet a klasszikust használni <b>
címke a félkövér szedéshez, hogy ne adjon extra jelentőséget azoknak a tartalmaknak, amelyeknek nincs szükségük rá. És ne feledje, egyes elemek, például a címsorok már félkövérrel vannak szedve, köszönhetően a böngésző alapértelmezett stílusainak. Nem kell még nagyobb hangsúlyt fektetni.
Dőlt betűk használata a kiemelt tartalmakban (és fordítva)
Vannak jogos esetek, amikor előfordulhat, hogy dőlt betűvel kell szednie a már kiemelt sor egy részét. Vagy talán adjon hangsúlyt a már dőlt betűs szövegnek.
A blokk idézőjel jó példa lehet. Rengetegszer láttam, hogy dőlt betűvel írják a stílust, bár az alapértelmezett böngészőstílusok nem teszik ezt meg:
blockquote { font-style: italic;
}
Mi van, ha meg kell említenünk egy filmcímet ebben a blokk idézetben? Ezt dőlt betűvel kellene szedni. Nincs szükség stressz hangsúlyozására, ezért an <i>
címke megteszi. De még mindig furcsa valamit dőlt betűvel szedni, ha már így van renderelve:
<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>
Olyan helyzetben, amikor valamit dőlt betűvel írunk az ehhez hasonló dőlt betűs tartalmakon belül, ezt meg kell tennünk távolítsa el a dőlt betűket a beágyazott elemből… <i>
ebben az esetben.
blockquote i { font-style: normal;
}
Tárolóstílusú lekérdezések rendkívül hasznos lesz ezeknek az eseteknek a feltárása, ha megkapjuk őket:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Ez a kis részlet kiértékeli a blokk idézetet, hogy megnézze, az-e font-style
be van állítva italic
. Ha igen, akkor gondoskodik arról, hogy a <em>
, <i>
, <cite>
és <address>
Az elemek normál szövegként jelennek meg, miközben megtartják a szemantikai jelentést, ha van ilyen.
De vissza a hangsúly a hangsúlyon belül
nem fészkelnék <strong>
belső <em>
mint ez:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…vagy fészket <em>
belső <strong>
helyette:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Jó a megjelenítés! És nem számít, milyen sorrendben vannak… legalábbis a modern böngészőkben. Jennifer Kyrnin megemlíti ezt egyes böngészők csak a szöveghez legközelebb eső címkét jelenítik meg, de ebbe sehol nem ütköztem a korlátozott tesztjeim során. De valamire figyelni kell!
Azért nem ágyaznám be a hangsúly egyik formáját a másikba, mert egyszerűen nincs rá szükség. Nincs olyan nyelvtani szabály, amely ezt megköveteli. A felkiáltójelekhez hasonlóan egyfajta kiemelés is elegendő, és azt kell használnia, amelyik megfelel a keresettnek, legyen az vizuális, súly vagy bejelentett hangsúly.
És annak ellenére, hogy egyes képernyőolvasók képesek kiemelni a tartalmat, nem olvassák el a jelölést további fontossággal vagy hangsúlyozással. Tehát, amennyire meg tudom ítélni, nincs további akadálymentesítési előny sem.
De nagyon szeretném a hangsúlyt!
Ha olyan helyzetben vagy, ahol a főnököd olyan, mint az enyém, és akar MINDEN a hangsúly, megkeresem a megfelelő HTML-címkét a kiemelés típusához, majd a többi stílust olyan címkék keverékével alkalmaznám, amelyek nem befolyásolják a CSS szemantikáját, hogy segítsek figyelembe venni bármit, amit a böngészőstílusok nem kezelnek.
<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>
Még az is lehet, hogy a <strong>
védõintézkedésként a címke is:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Amíg védekezünk, felismerhetjük azokat a hibákat, ahol a hangsúlyok a hangsúlyok közé vannak ágyazva, ha pirossal kiemeljük őket, vagy ilyesmi:
/* 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);
}
Akkor valószínűleg azt a részletet használnám az utolsó szakaszból, amely eltávolítja az alapértelmezett dőlt stílust egy elemből, ha az egy másik dőlt elembe van beágyazva.
Akármi más?
Mayyyyyybe:
- SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
- Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
- Forrás: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- megközelíthetőség
- Fiók
- További
- cím
- címek
- érint
- érintő
- Után
- Minden termék
- kizárólag
- már
- Amerika
- és a
- bejelentés
- Bemutatjuk
- Másik
- bárhol
- alkalmaz
- avatar
- vissza
- háttér
- mert
- előtt
- hogy
- Jobb
- Bit
- határ
- FŐNÖK
- Doboz
- jegyiroda
- böngésző
- böngészők
- költségvetés
- kéri
- képes
- eset
- esetek
- Változások
- változó
- klasszikus
- szín
- kapcsolat
- tartalmaz
- tartalom
- CSS
- alapértelmezett
- Védelem
- védekező
- tervezett
- különböző
- Nem
- ne
- kétszeresére
- erőfeszítés
- bármelyik
- elemek
- hangsúly
- hangsúlyt helyez
- hangsúlyozta
- hatalmas
- elég
- Egész
- hibák
- Még
- példa
- példák
- expressz
- külön-
- harcol
- Ábra
- vezetéknév
- megjelölve
- következő
- forma
- ból ből
- kap
- ad
- Giving
- globálisan
- Go
- megy
- jó
- nagy
- fogantyú
- segít
- itt
- Kiemel
- kiemelve
- HTML
- HTTPS
- ötlet
- azonosítani
- fontosság
- fontos
- in
- információ
- Insight
- helyette
- IT
- Jennifer
- keresztnév
- Korlátozott
- vonal
- kis
- helyszínek
- Hosszú
- néz
- készült
- csinál
- KÉSZÍT
- jel
- Anyag
- jelenti
- intézkedés
- megemlíti
- esetleg
- millió
- modern
- Lendület
- több
- film
- Filmek
- NAB
- Szükség
- Fészek
- normális
- Északi
- Észak Amerika
- számok
- Ajánlatok
- Office
- ONE
- nyitás
- érdekében
- Más
- rész
- teljesítmény
- hegyezi
- telefon
- fizikai
- Hely
- Plató
- Platón adatintelligencia
- PlatoData
- játék
- bőséges
- pont
- pozíció
- valószínűleg
- védett
- tisztán
- el
- Olvass
- olvasók
- ok
- Piros
- eszébe jut
- vakolás
- REST
- visszatartó
- Szabály
- azonos
- Képernyő
- képernyőolvasók
- Rész
- szemantika
- értelemben
- mondat
- készlet
- kellene
- egyszerűen
- helyzet
- So
- néhány
- valami
- hang
- forrás
- Még mindig
- feszültség
- erős
- stílus
- javasolja,
- szuper
- feltételezett
- TAG
- tesztek
- A
- The Source
- dolog
- dolgok
- alkalommal
- Cím
- nak nek
- TONE
- is
- igaz
- sürgős
- használ
- figyelmeztetés
- Nézz
- hétvége
- mérjünk
- súly
- Mit
- vajon
- míg
- WHO
- lesz
- belül
- nélkül
- szavak
- lenne
- írás
- te
- A te
- zephyrnet