Contact

Ie ding met dubbele nadruk | CSS-trucs


Ik had vroeger eentje chef diegene geliefd, geliefd, geliefd, geliefd woorden te benadrukken. Dit wasgoed lang geleden voordat wij eentje WYSIWYG-editor gebruikten plus ik diegene troep met den hand moest codering.

<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>

(Permitteren wij noch ingaan op den tinten diegene hij gebruikte voordat even MOER nadruk.)

Ie schrijven van reeds diegene markeringen voelde nooit groots. Den moeite diegene ie kostte, zeker, watten dan zowel. Maar is ie welnu eentje wasgoed idee wegens overload content toe te voegen met dubbele — of meer! – accenten?

Verschillende tags brengen verschillende accenten overheen

Wegens te par, den <strong> Plusteken <em> tags zijn ontworpen voordat verschillende toepassingen. Wij hebben zij terug te HTML5, waar:

Dus, <strong> schenken den inhoud meer gewicht te den zin dat ie suggereert dat den inhoud relevant of urgent is. Bedenk eentje waarschuwing:

Waarschuwing: Den volgende inhoud is gemarkeerd omdat dit groots is.

Ie vermag verleidelijk zijn wegens ernaar te reiken <em> wegens idem te doet. Cursieve tekst vermag weliswaar den voetlicht voorttrekken. Maar ie is huwelijk bedoeld mits eentje hint wegens meer nadruk te leggen erbij ie oplezen van den inhoud ervan. Hier zijn bijvoorbeeld twee versies van dezelfde zin met den nadruk op verschillende plekken:

<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>

Beide voorbeelden benadrukken nadruk, maar op verschillende woorden. Plusteken zij zullen verschillend vastslaan mits jouw zij hardop zullen voorlezen. Dat maakt <em> eentje geweldige wijze wegens toon te uw schrijven uit te knellen. Ie verandert den waarde van den zin op eentje wijze diegene <strong> doet noch.

Visuele nadruk versus semantische nadruk

Dat zijn twee goedje diegene jouw moeten overpeinzen erbij ie benadrukken van inhoud. Er zijn bijvoorbeeld toereikend gevallen waarin u inhoud cursief moeten maken zonder den waarde van den zin te beïnvloeden. Maar diegene kunnen wordt afgehandeld met andere tags diegene cursief wordt weergegeven:

  • <i>: Dit is den klassieker! Vóór HTML5 worden dit tweedehands wegens nadruk te leggen met overal cursief. Nu wordt ie zuiver tweedehands wegens inhoud visueel cursief te maken zonder den semantische waarde te veranderen.
  • <cite>: Den waterput van eentje waarheid of cijfer declareren. (“Informatiebron: CSS-trucs“)
  • <address>: Tweedehands wegens contactgegevens te markeren, noch dolletjes fysieke adressen, maar zowel zaken mits e-mailadressen plus telefoonnummers. (
    (e-mail beveiligd)

    )

Hij zullen idem meemaken <strong>. Ter positie van ie te usances voordat ie potverteren van tekst diegene u zwaarder wilt permitteren toeschijnen, is ie eentje huis idee wegens den klassieker te usances <b> tag voordat vetgedrukt wegens te voorkomen dat er reserve waarde wordt gegeven aan inhoud diegene dit noch nodig heeft. Plusteken vergeet noch dat sommige elementen, zoals koppen, reeds vettig wordt weergegeven, dankzij den standaardstijlen van den browser. Ie is noch nodig wegens nog meer nadruk te leggen.

Cursief usances te inhoud met nadruk (plus vice versa)

Er zijn legitieme gevallen waarin u mogelijk eentje portie van eentje wet cursief moeten maken diegene reeds is benadrukt. Of misschien den nadruk leggen op eentje stuk tekst dat reeds cursief is weergegeven.

Ene blockquote is misschien eentje wasgoed voorbeeld. Ik heb vaak waargenomen dat zij cursief zijn weergegeven voordat stijl, zowel reeds doet standaardbrowserstijlen ie noch:

blockquote {
  font-style: italic;
}

Watten mits wij eentje filmtitel te diegene blockquote willen vermelden? Dat moeten cursief wordt weergegeven. Er is geen nadruk op stress nodig, dus eentje <i> label zullen doet. Maar ie is nog steeds raar wegens iets cursief te maken mits ie reeds zo is weergegeven:

<blockquote>
  This movie’s opening weekend voorstelling offers some insight te
  to its opbergruimte office momentum spil it fights to justify its enormous 
  budget. Ter its first weekend, <i>Avatar: The Way of Water</i> made 
  $134 million te North America alone and $435 million globally.
</blockquote>

Ter eentje situatie waarin wij iets cursief maken te cursieve inhoud zoals dit, is ie den bedoeling dat wij dat doet verwijder den cursivering van ie geneste factor… <i> te dit geval.

blockquote i {
  font-style: normal;
}

Query’s in containerstijl zullen super handig zijn wegens reeds dit instanties te pakken te krijgen mits wij zij krijgen:

blockquote {
  container-name: quote;
  font-style: italic;
}

@container quote (font-style: italic) {
  em, i, cite, address {
    font-style: normal;
  }
}

Dit kleine fragment evalueert den blockquote wegens te zien of dat zo is font-style ingesteld op italic. Indien dat zo is, zullen ie ervoor zorgen dat den <em>, <i>, <cite>Plusteken <address> elementen wordt weergegeven mits normale tekst, met behoud van den eventuele semantische waarde.

Maar terug zoals nadruk hierbinnen nadruk

Ik zullen noch nestelen <strong> hierbinnen <em> soortgelijk:

<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>

…of nestelen <em> hierbinnen <strong> te positie van:

<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>

Den weergave is prima! Plusteken ie maakt noch uit te welke volgorde zij staan… althans te moderne browsers. Jennifer Kyrnin vermeldt dat sommige browsers geven alleen de tag weer die het dichtst bij de tekst staat, maar dat kwam ik nergens tegen te mijn beperkte tests. Maar iets wegens op te letten!

Den reden dat ik noch den ene vorm van nadruk te den andere zullen nesten, is omdat ie gewoon noch nodig is. Er is geen grammaticale wet diegene dit vereist. Netwerken mits uitroeptekens is één vorm van nadruk voldoende, plus jouw zullen diegene willen usances diegene overeenkomt met watten jouw zoekt, of ie nu gaat wegens visuele, gewichts- of aangekondigde nadruk.

Plusteken hoewel sommige schermlezers te staat zijn wegens benadrukte inhoud aan te kondigen, zullen zij den opmaak noch oplezen met enige reserve belangrijkheid of nadruk. Dus zowel geen reserve toegankelijkheidsvoordelen, voordat zover ik weet.

Maar ik wil huwelijk alle nadruk!

Indien jouw te den positie bent waar jouw chef is zoals den mijne plus wil ALLE den nadrukzullen ik den juiste HTML-tag zoeken voordat ie soort nadruk, plus dan den surplus van den stijlen toepassen met eentje mix van tags diegene geen zeggenschap hebben op den semantiek met CSS wegens rekening te liefhebben met alles watten browserstijlen noch aanpassen.

<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>

Ik zullen ie zelfs kunnen doet met den <strong> tag zowel mits verdedigingsmaatregel:

/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) {
  color: #f8a100;
}

Zolang wij verweerschrift spelen, kunnen wij mankementen identificeren waarbij accenten hierbinnen accenten zijn genest onderbrak zij stopteken te markeren of zulk:

/* 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);
}

Dan zullen ik waarschijnlijk dat fragment uit den laatste vakgroep usances dat den standaard cursieve stijl van eentje factor verwijdert wanneer ie is genest te eentje ander cursief factor.

Nog iets verschillend?

Mayyyyybe: