Minulla oli tämä pomo, joka rakastettu, rakastettu, rakastettu, rakastettu korostaa sanoja. Tämä oli paljon ennen kuin käytimme WYSIWYG-editoria ja minun piti koodata tuo paska käsin.
<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ä mene edes väreihin, joita hän käytti MOAR painotus.)
Kaikkien merkintöjen kirjoittaminen ei koskaan tuntunut hyvältä. Se ponnistelu mitä se vaati, toki mitä tahansa. Mutta onko edes hyvä idea lisätä ylikuormitettua sisältöä kaksinkertaisella - tai useammalla! - painotukset?
Eri tunnisteet välittävät erilaisia painotuksia
Ensinnäkin <strong>
ja <em>
tunnisteet on suunniteltu eri käyttötarkoituksiin. Saimme ne takaisin HTML5:een, jossa:
Niin, <strong>
antaa sisällölle enemmän painoa siinä mielessä, että se viittaa siihen, että sen sisältö on tärkeä tai kiireellinen. Ajattele varoitusta:
Varoitus: Seuraava sisältö on merkitty mahtavaksi.
Saattaa olla houkuttelevaa tavoittaa <em>
tehdä samaa. Kursivoitu teksti voi loppujen lopuksi herättää huomiota. Mutta se on todella tarkoitettu vihjeeksi painottaa enemmän, kun luet sen sisältöä. Esimerkiksi tässä on kaksi versiota samasta lauseesta, joissa painotus eri paikoissa:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Molemmat esimerkit painottavat painotusta, mutta eri sanoja. Ja ne kuulostaisivat erilaisilta, jos lukisit ne ääneen. Se tekee <em>
loistava tapa ilmaista sävyä kirjoituksissasi. Se muuttaa lauseen merkitystä tavalla, joka <strong>
ei.
Visuaalinen painotus vs. semanttinen painotus
Nämä ovat kaksi asiaa, joita sinun on punnittava, kun painotat sisältöä. Kuten, on monia tapauksia, joissa saatat joutua kursivoimaan sisällön vaikuttamatta lauseen merkitykseen. Mutta niitä voidaan käsitellä muilla tunnisteilla, jotka näyttävät kursivoitua:
<i>
: Tämä on klassikko! Ennen HTML5:tä tätä käytettiin korostamaan kursiivilla kaikkialla. Nyt sitä käytetään puhtaasti kursivoimaan sisältö visuaalisesti muuttamatta semanttista merkitystä.<cite>
: Osoittaa tosiasian tai luvun lähteen. ("Lähde: CSS-temppuja")<address>
: Käytetään merkitsemään yhteystietoja, ei vain fyysisiä osoitteita, vaan myös asioita, kuten sähköpostiosoitteita ja puhelinnumeroita. (
)
Hänelle tulee sama asia <strong>
. Sen sijaan, että käytät sitä tekstin muotoiluun, jonka haluat näyttää raskaammalta, on parempi käyttää klassikkoa <b>
-tunniste lihavointia varten, jotta se ei anna ylimääräistä merkitystä sisällölle, joka ei sitä tarvitse. Ja muista, että jotkin elementit, kuten otsikot, on jo lihavoitu, kiitos selaimen oletustyylien. Ei ole tarvetta lisätä vielä voimakkaampaa painotusta.
Kursiivin käyttö korostetussa sisällössä (ja päinvastoin)
Joissakin tapauksissa joudut ehkä kursivoimaan osan jo korostetusta rivistä. Tai ehkä korosta tekstiä, joka on jo kursivoitu.
Lohkolainaus voisi olla hyvä esimerkki. Olen nähnyt monta kertaa, että ne on kursivoitu tyylin vuoksi, vaikka oletusselaimen tyylit eivät sitä tee:
blockquote { font-style: italic;
}
Entä jos meidän on mainittava elokuvan nimi tuossa lainauksessa? Se pitäisi kursivoida. Stressiä ei tarvita, joten an <i>
tagi käy. Mutta on silti outoa kursivoida jotain, kun se on jo renderöity tällä tavalla:
<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>
Tilanteessa, jossa kursivoimme jotain kursivoitussa sisällössä näin, meidän pitäisi tehdä niin poista kursivoitu sisäkkäisestä elementistä… <i>
tässä tapauksessa.
blockquote i { font-style: normal;
}
Säilötyyliset kyselyt on erittäin hyödyllistä löytää kaikki nämä tapaukset, jos saamme ne:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Tämä pieni katkelma arvioi lohkolainauksen nähdäkseen, onko se font-style
asetetaan italic
. Jos on, se varmistaa, että <em>
, <i>
, <cite>
ja <address>
elementit hahmonnetaan tavallisena tekstinä, mutta säilytetään semanttinen merkitys, jos sellainen on.
Mutta takaisin painotukseen painotuksen sisällä
En pestäisi <strong>
sisällä <em>
kuten tämä:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…tai pesä <em>
sisällä <strong>
sen sijaan:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Renderöinti on hyvä! Ja sillä ei ole väliä missä järjestyksessä ne ovat… ainakaan nykyaikaisissa selaimissa. Jennifer Kyrnin mainitsee sen Jotkut selaimet näyttävät vain tekstiä lähinnä olevan tagin, mutta en törmännyt siihen missään rajoitetuissa testeissäni. Mutta jotain mitä kannattaa katsoa!
Syy, miksi en sijoittaisi yhtä painotusta toiseen, johtuu siitä, että sitä ei yksinkertaisesti tarvita. Ei ole olemassa kielioppisääntöä, joka sitä vaatisi. Huutomerkkien tavoin yksi painotusmuoto riittää, ja sinun tulee käyttää sitä, joka vastaa etsimääsi, olipa kyseessä visuaalinen, paino tai ilmoitettu painotus.
Ja vaikka jotkin näytönlukuohjelmat pystyvät ilmoittamaan korostetusta sisällöstä, ne eivät lue merkintöjä millään ylimääräisellä tärkeydellä tai painotuksella. Joten ei myöskään muita saavutettavuusetuja, sikäli kuin voin kertoa.
Mutta todella haluan kaiken painotuksen!
Jos olet tilanteessa, jossa pomosi on kuin minun ja haluaa KAIKKI Ishayoiden opettaman painotus, tavoittaisin korostuksen tyypin mukaan oikean HTML-tunnisteen ja käytän sitten loput tyylit yhdistelmällä tunnisteita, jotka eivät vaikuta CSS:n semantiikkaan, jotta voisin ottaa huomioon kaiken, mitä selaimen tyylit eivät pysty käsittelemään.
<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>
Voisin jopa tehdä sen kanssa <strong>
tagi myös suojatoimenpiteenä:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Niin kauan kuin pelaamme puolustusta, voimme tunnistaa virheet, joissa painotukset ovat sisäkkäisiä painotusten sisällä korostamalla ne punaisella tai jollain muulla tavalla:
/* 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);
}
Sitten käyttäisin luultavasti sitä katkelmaa viimeisestä osiosta, joka poistaa oletusarvoisen kursiivoidun tyylin elementistä, kun se on sisällytetty toiseen kursivoittuun elementtiin.
Mitään muuta?
Mayyyyyybe:
- SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
- Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
- Lähde: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- saavutettavuus
- Tili
- lisä-
- osoite
- osoitteet
- vaikuttaa
- vaikuttavat
- Jälkeen
- Kaikki
- yksin
- jo
- Amerikka
- ja
- ilmoitti
- Ilmoittaa
- Toinen
- kaikkialla
- käyttää
- avatar
- takaisin
- tausta
- koska
- ennen
- ovat
- Paremmin
- Bitti
- tappi
- reunus
- POMO
- Laatikko
- lippumyymälä
- selain
- selaimet
- talousarvio
- Puhelut
- kykenee
- tapaus
- tapauksissa
- Muutokset
- muuttuviin
- klassinen
- väri
- ottaa yhteyttä
- sisältää
- pitoisuus
- CSS
- oletusarvo
- Puolustus
- puolustava
- suunniteltu
- eri
- ei
- Dont
- kaksinkertainen
- vaivaa
- myöskään
- elementtejä
- painotus
- painottaa
- korostettiin
- valtava
- tarpeeksi
- Koko
- virheet
- Jopa
- esimerkki
- Esimerkit
- ilmaista
- lisää
- taistelee
- Kuva
- Etunimi
- Merkityt
- jälkeen
- muoto
- alkaen
- saada
- antaa
- Antaminen
- Maailmanlaajuisesti
- Go
- menee
- hyvä
- suuri
- kahva
- auttaa
- tätä
- Korostaa
- korostus
- HTML
- HTTPS
- ajatus
- tunnistaa
- merkitys
- tärkeä
- in
- tiedot
- tietoa
- sen sijaan
- IT
- Jennifer
- Sukunimi
- rajallinen
- linja
- vähän
- sijainnit
- Pitkät
- katso
- tehty
- tehdä
- TEE
- Merkitse
- asia
- merkitys
- mitata
- mainitsee
- ehkä
- miljoona
- Moderni
- Vauhti
- lisää
- elokuva
- Elokuvat
- NAB
- Tarve
- Pesä
- normaali
- Pohjoiseen
- Pohjois-Amerikka
- numerot
- Tarjoukset
- Office
- ONE
- avaaminen
- tilata
- Muut
- osa
- suorituskyky
- edut
- puhelin
- fyysinen
- Paikka
- Platon
- Platonin tietotieto
- PlatonData
- pelaa
- paljon
- pistettä
- sijainti
- todennäköisesti
- suojattu
- puhtaasti
- tavoittaa
- Lue
- lukijoita
- reason
- punainen
- muistaa
- mallinnus
- REST
- säilyttäen
- Sääntö
- sama
- Näytön
- näytönlukijat
- Osa
- semantiikka
- tunne
- tuomita
- setti
- shouldnt
- yksinkertaisesti
- tilanne
- So
- jonkin verran
- jotain
- kuulostaa
- lähde
- Yhä
- stressi
- vahva
- tyyli
- Ehdottaa
- suuri
- tarkoitus
- TAG
- testit
- -
- Lähde
- asia
- asiat
- kertaa
- Otsikko
- että
- TONE
- liian
- totta
- kiireellinen
- käyttää
- varoitus
- Katso
- viikonloppu
- punnita
- paino
- Mitä
- onko
- vaikka
- KUKA
- tulee
- sisällä
- ilman
- sanoja
- olisi
- kirjoittaminen
- Voit
- Sinun
- zephyrnet