Jeg plejede at have denne chef, der elskede, elskede, elskede, elskede at understrege ord. Dette var langt tilbage, før vi brugte en WYSIWYG-editor, og jeg skulle håndkode det lort.
<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>
(Lad os ikke engang gå ind i de farver, han brugte til MOAR vægt.)
Det har aldrig været fantastisk at skrive alt det markup. Den indsats det tog, selvfølgelig, uanset hvad. Men er det overhovedet en god idé at tilføje overload indhold med dobbelt - eller mere! - fremhæver?
Forskellige tags formidler forskellig vægt
For det første, <strong>
, <em>
tags er designet til forskellige formål. Vi fik dem tilbage i HTML5, hvor:
Så, <strong>
giver indholdet større vægt i den forstand, det antyder, at indholdet i det er vigtigt eller presserende. Tænk på en advarsel:
Advarsel: Følgende indhold er blevet markeret for at være fantastisk.
Det kan være fristende at gribe efter <em>
at gøre det samme. Kursiv tekst kan trods alt være opsigtsvækkende. Men det er virkelig ment som et tip til at bruge mere vægt, når du læser indholdet i det. For eksempel er her to versioner af den samme sætning med vægt på forskellige steder:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Begge eksempler lægger vægt på, men på forskellige ord. Og de ville lyde anderledes, hvis du skulle læse dem højt. Det gør <em>
en fantastisk måde at udtrykke tone i dit forfatterskab. Det ændrer sætningens betydning på en måde, der <strong>
gør ikke.
Visuel betoning vs. semantisk betoning
Det er to ting, du skal veje, når du lægger vægt på indhold. Ligesom der er masser af tilfælde, hvor du måske har brug for at kursivere indhold uden at påvirke betydningen af sætningen. Men disse kan håndteres med andre tags, der gengiver kursiv:
<i>
: Dette er den klassiske! Før HTML5 blev dette brugt til at understrege fremhævelse med kursiv over det hele. Nu er det rent brugt til at kursivere indhold visuelt uden at ændre den semantiske betydning.<cite>
: Angivelse af kilden til et faktum eller tal. ("Kilde: CSS-tricks")<address>
: Bruges til at markere kontaktoplysninger, ikke kun fysiske adresser, men også ting som e-mail-adresser og telefonnumre. (
)
Det vil han det samme med <strong>
. I stedet for at bruge det til styling af tekst, du gerne vil se tungere ud, er det en bedre idé at bruge den klassiske <b>
tag til fed skrift for at undgå at give ekstra betydning til indhold, der ikke har brug for det. Og husk, at nogle elementer som overskrifter allerede er gengivet med fed, takket være browserens standardstile. Der er ingen grund til at tilføje endnu mere stærk vægt.
Brug af kursiv i fremhævet indhold (og omvendt)
Der er legitime tilfælde, hvor du muligvis skal kursivere en del af en linje, der allerede er understreget. Eller måske lægge vægt på en smule tekst, der allerede er kursiveret.
Et blokcitat kan være et godt eksempel. Jeg har set masser af gange, hvor de er kursiveret for stil, selvom standard browser stilarter ikke gør det:
blockquote { font-style: italic;
}
Hvad hvis vi skal nævne en filmtitel i det blokcitat? Det skal være kursiv. Der er ingen behov for stress, så en <i>
tag vil gøre. Men det er stadig mærkeligt at kursive noget, når det allerede er gengivet på den måde:
<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, hvor vi kursiverer noget inden for kursivt indhold som dette, skal vi fjern kursiverne fra det indlejrede element... <i>
I dette tilfælde.
blockquote i { font-style: normal;
}
Containerstilforespørgsler vil være super nyttigt at finde alle disse forekomster, hvis vi får dem:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Dette lille uddrag evaluerer blokcitatet for at se, om det er det font-style
er sat til italic
. Hvis det er, så vil det sørge for <em>
, <i>
, <cite>
og <address>
elementer gengives som normal tekst, mens den semantiske betydning bibeholdes, hvis der er en.
Men tilbage til betoning inden for betoning
Jeg ville ikke rede <strong>
indvendig <em>
sådan her:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…eller rede <em>
indvendig <strong>
i stedet:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Gengivelsen er fin! Og det er lige meget, hvilken rækkefølge de er i... i det mindste i moderne browsere. Jennifer Kyrnin nævner det nogle browsere gengiver kun tagget nærmest teksten, men det stødte jeg ikke på nogen steder i mine begrænsede tests. Men noget at holde øje med!
Grunden til, at jeg ikke ville indlejre én form for vægtning i en anden, er fordi det simpelthen ikke er nødvendigt. Der er ingen grammatikregel, der kræver det. Ligesom udråbstegn er én form for betoning nok, og du bør bruge den, der matcher det, du leder efter, uanset om det er visuel, vægt eller annonceret vægt.
Og selvom nogle skærmlæsere er i stand til at annoncere fremhævet indhold, vil de ikke læse markeringen med nogen yderligere betydning eller vægt. Så ingen yderligere tilgængelighedsfordele heller, så vidt jeg kan se.
Men jeg vil virkelig have al vægten!
Hvis du er i den position, hvor din chef er ligesom min og ønsker ALLE og vægt, ville jeg række ud efter det rigtige HTML-tag til vægttypen og derefter anvende resten af stilene med en blanding af tags, der ikke påvirker semantikken med CSS, for at hjælpe med at tage højde for alt, hvad browserstile ikke kan håndtere.
<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>
Jeg kan endda gøre det med <strong>
tag også som en defensiv foranstaltning:
/* 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 spiller forsvar, kan vi identificere fejl, hvor betoning er indlejret i betoninger ved at fremhæve dem med rødt eller noget:
/* 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);
}
Så ville jeg nok bruge det uddrag fra den sidste sektion, der fjerner standardkursiv-stilen fra et element, når det er indlejret i et andet kursivt element.
Ellers andet?
Mååååååå:
- SEO Powered Content & PR Distribution. Bliv forstærket i dag.
- Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. Adgang her.
- Kilde: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- tilgængelighed
- Konto
- Yderligere
- adresse
- adresser
- påvirke
- påvirker
- Efter
- Alle
- alene
- allerede
- amerika
- ,
- annoncerede
- Annoncerer
- En anden
- overalt
- Indløs
- avatar
- tilbage
- baggrund
- fordi
- før
- være
- Bedre
- Bit
- pin
- grænse
- BOSS
- Boks
- box office
- browser
- browsere
- budget
- Opkald
- stand
- tilfælde
- tilfælde
- Ændringer
- skiftende
- Classic
- farve
- kontakt
- indeholder
- indhold
- CSS
- Standard
- Forsvar
- defensiv
- konstrueret
- forskellige
- Er ikke
- Dont
- fordoble
- indsats
- enten
- elementer
- vægt
- understrege
- understreget
- enorm
- nok
- Hele
- fejl
- Endog
- eksempel
- eksempler
- Express
- ekstra
- slagsmål
- Figur
- Fornavn
- Markeret
- efter
- formular
- fra
- få
- giver
- Give
- Globalt
- Go
- gå
- godt
- stor
- håndtere
- hjælpe
- link.
- Fremhæv
- fremhæve
- HTML
- HTTPS
- idé
- identificere
- betydning
- vigtigt
- in
- oplysninger
- indsigt
- i stedet
- IT
- Jennifer
- Efternavn
- Limited
- Line (linje)
- lidt
- placeringer
- Lang
- Se
- lavet
- lave
- maerker
- markere
- Matter
- betyder
- måle
- nævner
- måske
- million
- Moderne
- momentum
- mere
- film
- Film
- NAB
- Behov
- Nest
- normal
- Nord
- nordamerika
- numre
- Tilbud
- Office
- ONE
- åbning
- ordrer
- Andet
- del
- ydeevne
- frynsegoder
- telefon
- fysisk
- Place
- plato
- Platon Data Intelligence
- PlatoData
- spiller
- Masser
- punkter
- position
- sandsynligvis
- beskyttet
- rent
- nå
- Læs
- læsere
- grund
- Rød
- huske
- rendering
- REST
- tilbageholdende
- Herske
- samme
- Skærm
- skærmlæsere
- Sektion
- semantik
- forstand
- dømme
- sæt
- bør
- ganske enkelt
- Situationen
- So
- nogle
- noget
- Lyd
- Kilde
- Stadig
- stress
- stærk
- stil
- foreslår
- Super
- formodes
- TAG
- tests
- The Source
- ting
- ting
- gange
- Titel
- til
- TONE
- også
- sand
- presserende
- brug
- advarsel
- Ur
- weekend
- veje
- vægt
- Hvad
- hvorvidt
- mens
- WHO
- vilje
- inden for
- uden
- ord
- ville
- skrivning
- Du
- Din
- zephyrnet