Jeg pleide å ha denne sjefen som elsket, elsket, elsket, elsket å understreke ord. Dette var langt tilbake før vi brukte et WYSIWYG-redigeringsprogram, og jeg måtte håndkode den dritten.
<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>
(La oss ikke gå inn på fargene han brukte for engang MOAR vektlegging.)
Å skrive all den markeringen føltes aldri bra. Den innsatsen det tok, uansett. Men er det til og med en god idé å legge til overbelastningsinnhold med dobbelt - eller mer! – vektlegginger?
Ulike tagger formidler forskjellig vekt
For det første, <strong>
og <em>
tagger er laget for ulike bruksområder. Vi fikk dem tilbake i HTML5, hvor:
Så, <strong>
gir innholdet større vekt i den forstand det antyder at innholdet i det er viktig eller presserende. Tenk på en advarsel:
Advarsel: Følgende innhold har blitt flagget for å være fantastisk.
Det kan være fristende å strekke seg etter <em>
å gjøre det samme. Kursiv tekst kan tross alt være oppsiktsvekkende. Men det er egentlig ment som et hint om å legge mer vekt når du leser innholdet i den. For eksempel, her er to versjoner av samme setning med vekt på forskjellige steder:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Begge eksemplene legger vekt på, men på forskjellige ord. Og de ville høres annerledes ut hvis du leste dem høyt. Det gjør <em>
en fin måte å uttrykke tonen i skrivingen din. Det endrer betydningen av setningen på en måte som <strong>
gjør ikke.
Visuell vektlegging vs semantisk vektlegging
Det er to ting du må veie når du legger vekt på innhold. Som, det er mange tilfeller der du kan trenge å kursivere innhold uten å påvirke betydningen av setningen. Men de kan håndteres med andre tagger som gjengir kursiv:
<i>
: Dette er den klassiske! Før HTML5 ble dette brukt for å understreke vekt med kursiv over alt. Nå er det rent brukt til å kursivere innhold visuelt uten å endre den semantiske betydningen.<cite>
: Angir kilden til et faktum eller tall. ("Kilde: CSS-triks")<address>
: Brukes til å merke kontaktinformasjon, ikke bare fysiske adresser, men ting som e-postadresser og telefonnumre også. (
)
Det kommer til han det samme med <strong>
. I stedet for å bruke den til å style tekst du vil se tyngre ut, er det en bedre idé å bruke den klassiske <b>
tag for fet skrift for å unngå å gi ekstra betydning til innhold som ikke trenger det. Og husk, noen elementer som overskrifter er allerede gjengitt i fet skrift, takket være nettleserens standardstiler. Det er ikke nødvendig å legge til enda sterkere vekt.
Bruke kursiv i fremhevet innhold (og omvendt)
Det er legitime tilfeller der du kanskje må kursivere deler av en linje som allerede er understreket. Eller kanskje legge vekt på litt tekst som allerede er kursivt.
Et blokksitat kan være et godt eksempel. Jeg har sett mange ganger hvor de er kursivt for stil, selv om standard nettleserstiler ikke gjør det:
blockquote { font-style: italic;
}
Hva om vi trenger å nevne en filmtittel i det blokksitatet? Det bør kursiveres. Det er ikke nødvendig å legge vekt på stress, så en <i>
tag vil gjøre. Men det er fortsatt rart å kursivere noe når det allerede er gjengitt på den måten:
<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 situasjon der vi kursiverer noe i kursivt innhold som dette, skal vi fjern kursiv fra det nestede elementet... <i>
i dette tilfellet.
blockquote i { font-style: normal;
}
Beholderstilspørringer vil være veldig nyttig å finne alle disse forekomstene 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 utdraget evaluerer blokksitatet for å se om det er det font-style
er satt til italic
. Hvis det er det, vil det sørge for at <em>
, <i>
, <cite>
og <address>
elementer gjengis som vanlig tekst, samtidig som den semantiske betydningen beholdes hvis det er en.
Men tilbake til vektlegging innenfor vektlegging
Jeg ville ikke hekke <strong>
innsiden <em>
som dette:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…eller hekker <em>
innsiden <strong>
i stedet:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Gjengivelsen er fin! Og det spiller ingen rolle hvilken rekkefølge de er i ... i hvert fall i moderne nettlesere. Jennifer Kyrnin nevner det noen nettlesere gjengir bare taggen nærmest teksten, men jeg kom ikke borti det noe sted i mine begrensede tester. Men noe å se etter!
Grunnen til at jeg ikke ville hekke en form for vektlegging i en annen er fordi det rett og slett ikke er nødvendig. Det er ingen grammatikkregel som krever det. Som utropstegn er én form for vektlegging nok, og du bør bruke den som matcher det du er ute etter, enten det er visuell, vekt eller annonsert vekt.
Og selv om noen skjermlesere er i stand til å annonsere vektlagt innhold, vil de ikke lese markeringen med noen ekstra viktighet eller vekt. Så ingen ekstra tilgjengelighetsfordeler heller, så vidt jeg kan fortelle.
Men jeg vil virkelig ha all vekt!
Hvis du er i en posisjon der sjefen din er som min og ønsker ALLE de vekt, ville jeg strekke meg etter den riktige HTML-koden for vekttypen, og deretter bruke resten av stilene med en blanding av koder som ikke påvirker semantikk med CSS for å hjelpe til med å ta hensyn til alt som nettleserstiler ikke vil 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 til og med gjøre det med <strong>
tag også som et defensivt tiltak:
/* 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å lenge vi spiller forsvar, kan vi identifisere feil der betoning er nestet i betoning ved å markere dem i rødt eller noe:
/* 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);
}
Da ville jeg sannsynligvis brukt det utdraget fra den siste delen som fjerner standard kursiv stil fra et element når det er nestet i et annet kursivt element.
Alt annet?
Mayyyyybe:
- SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
- Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
- kilde: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- tilgjengelighet
- Logg inn
- Ytterligere
- adresse
- adresser
- påvirke
- påvirker
- Etter
- Alle
- alene
- allerede
- america
- og
- annonsert
- Kunngjøring
- En annen
- hvor som helst
- Påfør
- avatar
- tilbake
- bakgrunn
- fordi
- før du
- være
- Bedre
- Bit
- pin
- grensen
- SJEF
- Eske
- box office
- nett~~POS=TRUNC leseren~~POS=HEADCOMP
- nettlesere
- budsjett
- Samtaler
- stand
- saken
- saker
- Endringer
- endring
- Classic
- farge
- kontakt
- inneholder
- innhold
- CSS
- Misligholde
- Forsvar
- defensiv
- designet
- forskjellig
- ikke
- ikke
- dobbelt
- innsats
- enten
- elementer
- emalje
- vekt
- understreke
- understreket
- enorm
- nok
- Hele
- feil
- Selv
- eksempel
- eksempler
- ekspress
- ekstra
- kamper
- Figur
- Først
- flaggede
- etter
- skjema
- fra
- få
- gir
- Giving
- Globalt
- Go
- skal
- god
- flott
- håndtere
- hjelpe
- her.
- Uthev
- utheving
- HTML
- HTTPS
- Tanken
- identifisere
- betydning
- viktig
- in
- informasjon
- innsikt
- i stedet
- IT
- Jennifer
- Siste
- Begrenset
- linje
- lite
- steder
- Lang
- Se
- laget
- gjøre
- GJØR AT
- merke
- Saken
- betyr
- måle
- nevner
- kunne
- millioner
- Moderne
- Momentum
- mer
- film
- Filmer
- NAB
- Trenger
- Nest
- normal
- nord
- nord amerika
- tall
- Tilbud
- Office
- ONE
- åpning
- rekkefølge
- Annen
- del
- ytelse
- fordeler
- telefon
- fysisk
- Sted
- plato
- Platon Data Intelligence
- PlatonData
- spiller
- Plenty
- poeng
- posisjon
- sannsynligvis
- beskyttet
- rent
- å nå
- Lese
- lesere
- grunnen til
- Rød
- husker
- gjengivelse
- REST
- støttemur
- Regel
- samme
- Skjerm
- skjermlesere
- Seksjon
- semantikk
- forstand
- dømme
- sett
- bør
- ganske enkelt
- situasjon
- So
- noen
- noe
- Lyd
- kilde
- Still
- stresset
- sterk
- stil
- foreslår
- Super
- ment
- TAG
- tester
- De
- Kilden
- ting
- ting
- ganger
- Tittel
- til
- TONE
- også
- sant
- som haster
- bruke
- advarsel
- Se
- helg
- veie
- vekt
- Hva
- om
- mens
- HVEM
- vil
- innenfor
- uten
- ord
- ville
- skriving
- Du
- Din
- zephyrnet