Jag brukade ha den här chefen som älskade, älskade, älskade, älskade att betona ord. Det här var långt tillbaka innan vi använde en WYSIWYG-redigerare och jag skulle behöva handkoda skiten.
<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>
(Låt oss inte ens gå in på färgerna han använde för MOAR betoning.)
Att skriva all den där uppmärkningen kändes aldrig bra. Ansträngningen det tog, visst, oavsett. Men är det ens en bra idé att lägga till överbelastningsinnehåll med dubbelt - eller mer! — betoningar?
Olika taggar förmedlar olika betoning
Till att börja med, <strong>
och <em>
taggar är designade för olika användningsområden. Vi fick tillbaka dem i HTML5, där:
Så, <strong>
ger innehållet större tyngd i den meningen att det antyder att innehållet i det är viktigt eller brådskande. Tänk på en varning:
Varning: Följande innehåll har flaggats för att vara fantastiskt.
Det kan vara lockande att sträcka sig efter <em>
att göra samma sak. Kursiv text kan trots allt väcka uppmärksamhet. Men det är egentligen menat som ett tips om att lägga mer vikt vid läsning av innehållet i den. Till exempel, här är två versioner av samma mening med betoning på olika platser:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Båda exemplen betonar betoning, men på olika ord. Och de skulle låta annorlunda om du skulle läsa dem högt. Det gör <em>
ett bra sätt att uttrycka tonen i ditt skrivande. Det ändrar meningen med meningen på ett sätt som <strong>
gör inte.
Visuell betoning vs. semantisk betoning
Det är två saker du måste väga när du betonar innehåll. Liksom, det finns många tillfällen där du kan behöva kursivera innehåll utan att påverka meningen med meningen. Men de kan hanteras med andra taggar som återger kursiv stil:
<i>
: Det här är den klassiska! Innan HTML5 användes detta för att betona betoning med kursiv stil överallt. Nu används det rent för att kursivera innehåll visuellt utan att ändra den semantiska innebörden.<cite>
: Anger källan till ett faktum eller en siffra. ("Källa: CSS-tricks")<address>
: Används för att markera kontaktinformation, inte bara fysiska adresser, utan även saker som e-postadresser och telefonnummer. (
)
Det kommer att han samma sak med <strong>
. Istället för att använda den för att styla text som du vill se tyngre ut, är det en bättre idé att använda den klassiska <b>
tagga för fetstil för att undvika att ge extra betydelse åt innehåll som inte behöver det. Och kom ihåg att vissa element som rubriker redan är renderade i fet stil, tack vare webbläsarens standardstilar. Det finns ingen anledning att lägga till ännu starkare betoning.
Använda kursiv stil i betonat innehåll (och vice versa)
Det finns legitima fall där du kan behöva kursivera en del av en rad som redan har betonats. Eller kanske lägga till betoning på lite text som redan är kursiverad.
Ett blockcitat kan vara ett bra exempel. Jag har sett många gånger där de är kursiverade för stil, även om standard webbläsarstilar inte gör det:
blockquote { font-style: italic;
}
Vad händer om vi behöver nämna en filmtitel i det blockcitatet? Det ska vara kursivt. Det behövs ingen betoning på stress, så en <i>
taggen duger. Men det är fortfarande konstigt att kursivera något när det redan är renderat på det sättet:
<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 en situation där vi kursiverar något i kursivt innehåll som detta, ska vi ta bort kursiv stil från det kapslade elementet... <i>
I detta fall.
blockquote i { font-style: normal;
}
Behållarstilsfrågor kommer att vara supernyttigt att hitta alla dessa instanser om vi får dem:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Det här lilla utdraget utvärderar blockcitatet för att se om det är det font-style
är inställd på italic
. Om det är det, kommer det att se till att <em>
, <i>
, <cite>
och <address>
element återges som normal text, samtidigt som den semantiska betydelsen behålls om det finns en.
Men tillbaka till betoning inom betoning
Jag skulle inte bo <strong>
inuti <em>
så här:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…eller bo <em>
inuti <strong>
istället:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Återgivningen är bra! Och det spelar ingen roll vilken ordning de är i... åtminstone i moderna webbläsare. Jennifer Kyrnin nämner det vissa webbläsare återger bara taggen närmast texten, men jag stötte inte på det någonstans i mina begränsade tester. Men något att titta på!
Anledningen till att jag inte skulle kapsla en form av betoning i en annan är för att det helt enkelt inte behövs. Det finns ingen grammatikregel som kräver det. Precis som utropstecken räcker det med en form av betoning, och du borde använda den som matchar vad du är ute efter, oavsett om det är visuellt, vikt eller annonserad betoning.
Och även om vissa skärmläsare kan tillkännage betonat innehåll, kommer de inte att läsa uppmärkningen med någon extra vikt eller betoning. Så, inga ytterligare tillgänglighetsförmåner heller, så vitt jag kan säga.
Men jag vill verkligen ha all betoning!
Om du är i den positionen där din chef är som min och vill ALLA d vikt, jag skulle sträcka mig efter rätt HTML-tagg för den typ av betoning och sedan tillämpa resten av stilarna med en blandning av taggar som inte påverkar semantiken med CSS för att hjälpa till att ta hänsyn till allt som webbläsarstilar inte kan hantera.
<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>
Jag kanske till och med gör det med <strong>
tagga också som en defensiv åtgärd:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Så länge vi spelar försvar kan vi identifiera fel där betoning är kapslad i betoning genom att markera dem i rött eller något:
/* 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);
}
Då skulle jag förmodligen använda det utdraget från det sista avsnittet som tar bort standardkursiv stil från ett element när det är kapslat i ett annat kursivt element.
Något annat?
Kanske:
- SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
- Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
- Källa: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- tillgänglighet
- Konto
- Annat
- adress
- adresser
- påverka
- påverkar
- Efter
- Alla
- ensam
- redan
- amerika
- och
- meddelade
- Vi presenterar
- Annan
- var som helst
- Ansök
- Avatar
- tillbaka
- bakgrund
- därför att
- innan
- Där vi får lov att vara utan att konstant prestera,
- Bättre
- Bit
- nål
- gränsen
- CHEF
- Box
- box office
- webbläsare
- webbläsare
- budget
- Samtal
- kapabel
- Vid
- fall
- Förändringar
- byte
- klassiska
- färg
- kontakta
- innehåller
- innehåll
- CSS
- Standard
- Försvar
- defensiv
- utformade
- olika
- inte
- inte
- dubbla
- ansträngning
- antingen
- element
- vikt
- betona
- betonade
- enorm
- tillräckligt
- Hela
- fel
- Även
- exempel
- exempel
- uttrycker
- extra
- slagsmål
- Figur
- Förnamn
- flaggad
- efter
- formen
- från
- skaffa sig
- ger
- Ge
- Globalt
- Go
- kommer
- god
- stor
- hantera
- hjälpa
- här.
- Markera
- belysa
- html
- HTTPS
- Tanken
- identifiera
- vikt
- med Esport
- in
- informationen
- insikt
- istället
- IT
- Jennifer
- Efternamn
- Begränsad
- linje
- liten
- platser
- Lång
- se
- gjord
- göra
- GÖR
- markera
- Materia
- betyder
- mäta
- nämner
- kanske
- miljon
- Modern Konst
- Momentum
- mer
- film
- Filmer
- HAFFA
- Behöver
- Nest
- normala
- Nord
- nordamerika
- nummer
- Erbjudanden
- Office
- ONE
- öppning
- beställa
- Övriga
- del
- prestanda
- förmåner
- telefon
- fysisk
- Plats
- plato
- Platon Data Intelligence
- PlatonData
- i
- Massor
- poäng
- placera
- förmodligen
- skyddad
- rent
- nå
- Läsa
- läsare
- Anledningen
- Red
- ihåg
- rendering
- REST
- kvarhållande
- Regel
- Samma
- screen
- skärmläsare
- §
- semantik
- känsla
- mening
- in
- skall
- helt enkelt
- Situationen
- So
- några
- något
- ljud
- Källa
- Fortfarande
- påkänning
- stark
- stil
- Föreslår
- super
- förment
- MÄRKA
- tester
- Smakämnen
- källan
- sak
- saker
- gånger
- Titel
- till
- TON
- alltför
- sann
- brådskande
- användning
- varning
- Kolla på
- helgen
- väga
- vikt
- Vad
- om
- medan
- VEM
- kommer
- inom
- utan
- ord
- skulle
- skrivning
- Om er
- Din
- zephyrnet