Mul oli kunagi see boss, kes armastatud, armastatud, armastatud, armastatud sõnade rõhutamiseks. See oli palju aega tagasi, enne kui kasutasime WYSIWYG-redaktoreid ja ma pidin selle jama käsitsi kodeerima.
<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>
(Ärme laskugem värvidesse, mida ta isegi kasutas MOAR rõhuasetus.)
Kogu selle märgistuse kirjutamine ei tundunud kunagi suurepärane. See pingutus, mis kulus, muidugi, mis iganes. Kuid kas on isegi hea mõte lisada ülekoormussisu topelt – või enamaga! — rõhuasetused?
Erinevad sildid annavad erinevat rõhuasetust
Alustuseks <strong>
ja <em>
sildid on mõeldud erinevaks kasutuseks. Saime need tagasi HTML5-sse, kus:
Niisiis, <strong>
annab sisule suurema kaalu selles mõttes, et see viitab sellele, et sisu on oluline või kiireloomuline. Mõelge hoiatusele:
Hoiatus: Järgmine sisu on märgitud suurepäraseks.
See võib olla ahvatlev jõuda <em>
sama asja teha. Kaldkirjas tekst võib ju tähelepanu köita. Kuid see on tõesti mõeldud vihjena, et selle sisu lugemisel rohkem rõhku panna. Näiteks siin on sama lause kaks versiooni rõhuasetusega erinevates kohtades:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Mõlemad näited rõhutavad rõhuasetust, kuid erinevatel sõnadel. Ja need kõlaksid teisiti, kui peaksite neid valjusti ette lugema. See teeb <em>
suurepärane viis oma kirjutises tooni väljendamiseks. See muudab lause tähendust viisil, mis <strong>
ei ole.
Visuaalne rõhuasetus vs semantiline rõhuasetus
Need on kaks asja, mida peate sisu rõhutamisel kaaluma. Samuti on palju juhtumeid, kus peate võib-olla sisu kaldkirjas muutma, ilma et see mõjutaks lause tähendust. Kuid neid saab käsitleda muude siltidega, mis renderdavad kaldkirja:
<i>
: See on klassikaline! Enne HTML5 kasutati seda rõhuasetuse rõhutamiseks kaldkirjaga kõikjal. Nüüd kasutatakse seda ainult sisu visuaalseks kursiivistamiseks, ilma semantilist tähendust muutmata.<cite>
: Fakti või kujundi allika märkimine. (“Allikas: CSS-nipid")<address>
: kasutatakse kontaktteabe, mitte ainult füüsiliste aadresside, vaid ka e-posti aadresside ja telefoninumbrite märgistamiseks. (
)
Temaga läheb sama asi <strong>
. Selle asemel, et kasutada seda teksti kujundamiseks, mille eesmärk on raskem välja näha, on parem kasutada klassikalist <b>
märgend paksus kirjas, et mitte anda sellele sisule, mis seda ei vaja, lisatähelepanu andmist. Ja pidage meeles, et mõned elemendid, näiteks pealkirjad, on tänu brauseri vaikestiilidele juba paksus kirjas. Pole vaja lisada veelgi tugevamat rõhku.
Kaldkirja kasutamine rõhutatud sisus (ja vastupidi)
On õigustatud juhtumeid, kus peate võib-olla juba rõhutatud rea osa kaldkirjas muutma. Või lisage rõhku juba kaldkirjas olevale tekstile.
Hea näide võib olla plokktsitaat. Olen näinud palju kordi, kus need on stiili jaoks kaldkirjas, kuigi brauseri vaikelaadid seda ei tee:
blockquote { font-style: italic;
}
Mis siis, kui me peame selles plokktsitaadis mainima filmi pealkirja? See peaks olema kaldkirjas. Pole vaja rõhutada stressi, nii et <i>
silt teeb. Kuid ikkagi on kummaline midagi kursiivi kirjutada, kui see on juba nii renderdatud:
<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>
Olukorras, kus me kaldkirjas midagi sellist kaldkirjas sisus kirjutame, peaksime seda tegema eemalda kaldkiri pesastatud elemendist… <i>
sel juhul.
blockquote i { font-style: normal;
}
Konteinerstiili päringud on ülikasu kõigi nende juhtumite tabamiseks, kui me need saame:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
See väike jupp hindab plokitsitaati, et näha, kas see on nii font-style
on seatud väärtusele italic
. Kui see on nii, siis see tagab, et <em>
, <i>
, <cite>
ja <address>
elemendid renderdatakse tavalise tekstina, säilitades samas semantilise tähenduse, kui see on olemas.
Aga tagasi rõhuasetuse juurde rõhuasetuses
Ma ei pesitseks <strong>
sees <em>
nagu nii:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…või pesa <em>
sees <strong>
selle asemel:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Renderdus on hea! Ja pole vahet, mis järjekorras need on... vähemalt tänapäevastes brauserites. Jennifer Kyrnin mainib seda mõned brauserid renderdavad ainult tekstile kõige lähemal asuva sildi, kuid ma ei puutunud sellega oma piiratud testides kuskil kokku. Aga midagi, mida jälgida!
Põhjus, miks ma ühte rõhuasetust teise sisse ei paneks, on see, et seda lihtsalt pole vaja. Pole ühtegi grammatikareeglit, mis seda nõuab. Sarnaselt hüüumärkidega piisab ühest rõhuasetusest ja peaksite kasutama seda, mis vastab sellele, mida otsite, olgu see siis visuaalne, kaal või väljakuulutatud rõhuasetus.
Ja kuigi mõned ekraanilugejad on võimelised teavitama rõhutatud sisu, ei loe nad märgistust täiendava tähtsuse või rõhuasetusega. Nii palju, kui ma aru saan, pole ka täiendavaid juurdepääsetavuse eeliseid.
Aga ma tõesti tahan kogu rõhku!
Kui olete olukorras, kus teie ülemus on nagu minu oma ja tahab ALL the,en rõhk, otsiksin rõhuasetuse tüübi jaoks õiget HTML-märgendit, seejärel rakendaksin ülejäänud stiilid segu siltidega, mis ei mõjuta CSS-i semantikat, et võtta arvesse kõike, mida brauseri stiilid ei suuda.
<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>
Ma võiksin seda isegi teha <strong>
sildi ka kaitsemeetmena:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Kuni mängime kaitset, saame tuvastada vead, kus rõhuasetused on rõhuasetuste sees, tõstes need esile punase või muuga:
/* 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);
}
Siis kasutaksin tõenäoliselt seda viimase jaotise katkendit, mis eemaldab elemendilt vaikimisi kaldkirja, kui see on pesastatud teise kaldkirjas elemendisse.
Veel midagi?
Mayyyyyybe:
- SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
- Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
- Allikas: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- kättesaadavus
- konto
- Täiendavad lisad
- aadress
- aadressid
- mõjutada
- mõjutades
- pärast
- Materjal: BPA ja flataatide vaba plastik
- üksi
- juba
- Ameerika
- ja
- teatas
- Kuulutades
- Teine
- kuskil
- kehtima
- avatar
- tagasi
- tagapõhi
- sest
- enne
- on
- Parem
- Natuke
- julge
- piir
- BOSS
- Kast
- piletikassa
- brauseri
- brauserid
- eelarve
- Kutsub
- võimeline
- juhul
- juhtudel
- Vaidluste lahendamine
- muutuv
- klassika
- värv
- kontakt
- sisaldab
- sisu
- CSS
- vaikimisi
- kaitse
- kaitsev
- kavandatud
- erinev
- Ei tee
- Ära
- kahekordistada
- jõupingutusi
- kumbki
- elemendid
- rõhk
- rõhuta
- rõhutas
- tohutu
- piisavalt
- Kogu
- vead
- Isegi
- näide
- näited
- ekspress
- lisatasu
- võitleb
- Joonis
- esimene
- märgistatud
- Järel
- vorm
- Alates
- saama
- annab
- andmine
- Ülemaailmselt
- Go
- läheb
- hea
- suur
- käepide
- aitama
- siin
- Esile tõstma
- esiletõstmine
- HTML
- HTTPS
- idee
- identifitseerima
- tähtsus
- oluline
- in
- info
- ülevaade
- selle asemel
- IT
- Jennifer
- viimane
- piiratud
- joon
- vähe
- kohad
- Pikk
- Vaata
- tehtud
- tegema
- TEEB
- märk
- küsimus
- tähendus
- mõõtma
- mainib
- võib
- miljon
- Kaasaegne
- Impulss
- rohkem
- film
- Filmid
- NAB
- Vajadus
- Pesa
- normaalne
- põhja-
- Põhja-Ameerika
- numbrid
- Pakkumised
- Office
- ONE
- avamine
- et
- Muu
- osa
- jõudlus
- hüved
- telefon
- füüsiline
- Koht
- Platon
- Platoni andmete intelligentsus
- PlatoData
- mängimine
- rohke
- võrra
- positsioon
- tõenäoliselt
- kaitstud
- puhtalt
- jõudma
- Lugenud
- lugejad
- põhjus
- Red
- meeles pidama
- rendering
- REST
- säilitamine
- Eeskiri
- sama
- Ekraan
- ekraanilugejad
- Osa
- semantika
- tunne
- Lause
- komplekt
- peaks
- lihtsalt
- olukord
- So
- mõned
- midagi
- heli
- allikas
- Veel
- stress
- tugev
- stiil
- Soovitab
- super
- peaks
- TAG
- testid
- .
- Allikas
- asi
- asjad
- korda
- Kapslid
- et
- TONE
- liiga
- tõsi
- kiireloomuline
- kasutama
- hoiatus
- Watch
- nädalavahetus
- kaaluge
- kaal
- M
- kas
- kuigi
- WHO
- will
- jooksul
- ilma
- sõnad
- oleks
- kirjutamine
- sa
- Sinu
- sephyrnet