Avevo questo capo che amato, amato, amato, amato per enfatizzare le parole. Era molto tempo prima che usassimo un editor WYSIWYG e dovevo codificare a mano quella merda.
<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>
(Non entriamo nei colori che ha usato anche per MORA enfasi.)
Scrivere tutto quel markup non è mai stato fantastico. Lo sforzo che ci è voluto, certo, qualunque cosa. Ma è anche una buona idea aggiungere contenuti di sovraccarico con il doppio o più! - sottolineature?
Tag diversi trasmettono un'enfasi diversa
Per i principianti, il <strong>
ed <em>
i tag sono progettati per usi diversi. Li abbiamo recuperati in HTML5, dove:
Così, <strong>
dà al contenuto più peso nel senso che suggerisce che il contenuto è importante o urgente. Pensa a un avvertimento:
Attenzione: I seguenti contenuti sono stati contrassegnati come fantastici.
Potrebbe essere allettante raggiungerlo <em>
fare la stessa cosa. Dopotutto, il testo in corsivo può attirare l'attenzione. Ma in realtà è inteso come un suggerimento per usare più enfasi durante la lettura del contenuto in esso. Ad esempio, ecco due versioni della stessa frase con l'enfasi in posizioni diverse:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Entrambi gli esempi sottolineano l'enfasi, ma su parole diverse. E suonerebbero in modo diverso se li leggessi ad alta voce. Quello fa <em>
un ottimo modo per esprimere il tono nella tua scrittura. Cambia il significato della frase in un modo che <strong>
non.
Enfasi visiva vs. Enfasi semantica
Queste sono due cose che devi soppesare quando enfatizzi il contenuto. Ad esempio, ci sono molti casi in cui potrebbe essere necessario mettere in corsivo il contenuto senza influire sul significato della frase. Ma quelli possono essere gestiti con altri tag che rendono il corsivo:
<i>
: Questo è quello classico! Prima di HTML5, questo veniva usato per sottolineare l'enfasi con il corsivo ovunque. Ora, è puramente usato per mettere in corsivo il contenuto visivamente senza cambiare il significato semantico.<cite>
: Indicare la fonte di un fatto o di una figura. ("Fonte: CSS-Tricks")<address>
: utilizzato per contrassegnare le informazioni di contatto, non solo gli indirizzi fisici, ma anche cose come indirizzi e-mail e numeri di telefono. (
)
Farà la stessa cosa con <strong>
. Piuttosto che usarlo per dare uno stile al testo che vuoi sembrare più pesante, è un'idea migliore usare il classico <b>
tag per il grassetto per evitare di dare ulteriore significato a contenuti che non ne hanno bisogno. E ricorda, alcuni elementi come i titoli sono già resi in grassetto, grazie agli stili predefiniti del browser. Non c'è bisogno di aggiungere un'enfasi ancora più forte.
Usare il corsivo nei contenuti enfatizzati (e viceversa)
Ci sono casi legittimi in cui potrebbe essere necessario scrivere in corsivo una parte di una riga già evidenziata. O forse aggiungere enfasi a un po' di testo che è già in corsivo.
Un blockquote potrebbe essere un buon esempio. Ho visto molte volte in cui sono in corsivo per lo stile, anche se gli stili del browser predefinito non lo fanno:
blockquote { font-style: italic;
}
E se avessimo bisogno di menzionare il titolo di un film in quella citazione? Dovrebbe essere in corsivo. Non è necessaria alcuna enfasi sullo stress, quindi an <i>
il tag andrà bene. Ma è ancora strano mettere in corsivo qualcosa quando è già reso in quel modo:
<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>
In una situazione in cui stiamo scrivendo in corsivo qualcosa all'interno di contenuti in corsivo come questo, dovremmo farlo togliere il corsivo dall'elemento annidato... <i>
in questo caso.
blockquote i { font-style: normal;
}
Query in stile contenitore sarà super utile per catturare tutte queste istanze se le otteniamo:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Questo piccolo frammento valuta il blockquote per vedere se lo è font-style
è impostato su italic
. Se lo è, allora si assicurerà che il <em>
, <i>
, <cite>
e <address>
gli elementi sono resi come testo normale, pur mantenendo il significato semantico se ce n'è uno.
Ma torniamo all'enfasi all'interno dell'enfasi
non farei il nido <strong>
interno <em>
come questo:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…o nido <em>
interno <strong>
anziché:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Il rendering va bene! E non importa in che ordine si trovino... almeno nei browser moderni. Jennifer Kyrnin lo menziona alcuni browser visualizzano solo il tag più vicino al testo, ma non mi sono imbattuto in questo da nessuna parte nei miei test limitati. Ma qualcosa da tenere d'occhio!
Il motivo per cui non inserirei una forma di enfasi in un'altra è perché semplicemente non è necessario. Non esiste una regola grammaticale che lo richieda. Come i punti esclamativi, una forma di enfasi è sufficiente e dovresti usare quella che corrisponde a ciò che stai cercando, sia che si tratti di enfasi visiva, di peso o annunciata.
E anche se alcuni lettori di schermo sono in grado di annunciare contenuti enfatizzati, non leggeranno il markup con alcuna importanza o enfasi aggiuntiva. Quindi, per quanto ne so, nessun vantaggio aggiuntivo per l'accessibilità.
Ma voglio davvero tutta l'enfasi!
Se sei nella posizione in cui il tuo capo è come il mio e vuole TUTTO , il enfasi, raggiungerei il tag HTML giusto per il tipo di enfasi, quindi applicherei il resto degli stili con un mix di tag che non influiscono sulla semantica con CSS per aiutare a tenere conto di tutto ciò che gli stili del browser non gestiranno.
<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>
Potrei anche farlo con il <strong>
tagga anche come misura difensiva:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Finché giochiamo in difesa, possiamo identificare gli errori in cui le enfasi sono nidificate all'interno delle enfasi evidenziandole in rosso o qualcosa del genere:
/* 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);
}
Quindi probabilmente userei quel frammento dell'ultima sezione che rimuove lo stile corsivo predefinito da un elemento quando è nidificato in un altro elemento corsivo.
Qualunque altra cosa?
Potrebbe essere:
- Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
- Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
- Fonte: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- accessibilità
- Il mio account
- aggiuntivo
- indirizzo
- indirizzi
- influenzare
- che interessano
- Dopo shavasana, sedersi in silenzio; saluti;
- Tutti
- da solo
- già
- America
- ed
- ha annunciato
- annunciando
- Un altro
- ovunque
- APPLICA
- Avatar
- precedente
- sfondo
- perché
- prima
- essendo
- Meglio
- Po
- perno
- sistema
- CAPO
- Scatola
- botteghino
- del browser
- browser
- budget limitato.
- Bandi
- capace
- Custodie
- casi
- Modifiche
- cambiando
- classico
- colore
- contatti
- contiene
- contenuto
- CSS
- Predefinito
- Difesa
- difensiva
- progettato
- diverso
- non
- Dont
- doppio
- sforzo
- o
- elementi
- enfasi
- enfatizzare
- sottolineato
- enorme
- abbastanza
- Intero
- errori
- Anche
- esempio
- Esempi
- esprimere
- extra
- combattimenti
- figura
- Nome
- contrassegnato
- i seguenti
- modulo
- da
- ottenere
- dà
- Dare
- Globalmente
- Go
- andando
- buono
- grande
- maniglia
- Aiuto
- qui
- Highlight
- mettendo in evidenza
- HTML
- HTTPS
- idea
- identificare
- importanza
- importante
- in
- informazioni
- intuizione
- invece
- IT
- Jennifer
- Cognome
- Limitato
- linea
- piccolo
- posizioni
- Lunghi
- Guarda
- fatto
- make
- FA
- marchio
- Importanza
- significato
- misurare
- menziona
- forza
- milione
- moderno
- Impulso
- Scopri di più
- film
- Film
- NAB
- Bisogno
- Nest
- normale
- Nord
- America del Nord
- numeri
- Offerte
- Office
- ONE
- apertura
- minimo
- Altro
- parte
- performance
- vantaggi
- telefono
- Fisico
- posto
- Platone
- Platone Data Intelligence
- PlatoneDati
- gioco
- Abbondanza
- punti
- posizione
- probabilmente
- protetta
- puramente
- raggiungere
- Leggi
- lettori
- ragione
- Rosso
- ricorda
- interpretazione
- REST
- di ritegno
- Regola
- stesso
- allo
- lettori di schermo
- Sezione
- semantica
- senso
- condanna
- set
- dovrebbero
- semplicemente
- situazione
- So
- alcuni
- qualcosa
- Suono
- Fonte
- Ancora
- stress
- forte
- style
- suggerisce
- Super
- suppone
- TAG
- test
- Il
- L’ORIGINE
- cosa
- cose
- volte
- Titolo
- a
- TONE
- pure
- vero
- urgente
- uso
- identificazione dei warning
- Orologio
- fine settimana
- pesare
- peso
- Che
- se
- while
- OMS
- volere
- entro
- senza
- parole
- sarebbe
- scrittura
- Tu
- Trasferimento da aeroporto a Sharm
- zefiro