Miałem takiego szefa, który "kochanym", "kochanym", "kochanym", "kochanym" podkreślać słowa. To było dawno temu, zanim używaliśmy edytorów WYSIWYG i musiałbym ręcznie kodować to gówno.
<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>
(Nie wchodźmy w kolory, których użył nawet MOAR podkreślenie.)
Pisanie tych wszystkich znaczników nigdy nie było wspaniałe. Wysiłek, jakiego to wymagało, jasne, cokolwiek. Ale czy w ogóle dobrym pomysłem jest dodawanie treści przeciążonych podwójnym — lub więcej! — podkreśla?
Różne tagi przekazują różne akcenty
Na początek, <strong>
i <em>
Tagi są przeznaczone do różnych zastosowań. Przywróciliśmy je w HTML5, gdzie:
Więc, <strong>
nadaje treści większą wagę w tym sensie, że sugeruje, że jest ona ważna lub pilna. Pomyśl o ostrzeżeniu:
Ostrzeżenie: Następująca treść została oznaczona jako niesamowita.
Sięgnięcie po nie może być kuszące <em>
zrobić to samo. W końcu tekst pisany kursywą może przyciągać uwagę. Ale tak naprawdę ma to być wskazówka, aby użyć większego nacisku podczas czytania zawartej w nim treści. Oto na przykład dwie wersje tego samego zdania z naciskiem w różnych miejscach:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Oba przykłady podkreślają nacisk, ale na inne słowa. I brzmiałyby inaczej, gdybyś je przeczytał na głos. Sprawia, że <em>
świetny sposób na wyrażenie tonu w swoim piśmie. Zmienia sens zdania w taki sposób, że <strong>
nie.
Nacisk wizualny a nacisk semantyczny
To dwie rzeczy, które musisz rozważyć, podkreślając treść. Na przykład istnieje wiele przypadków, w których konieczne może być pochylenie treści bez wpływu na znaczenie zdania. Ale można je obsłużyć za pomocą innych tagów renderujących kursywę:
<i>
: To jest ten klasyczny! Przed HTML5 używano tego do podkreślania podkreślenia kursywą w całym miejscu. Teraz jest używany wyłącznie do wizualnego zaznaczania kursywą treści bez zmiany znaczenia semantycznego.<cite>
: Wskazanie źródła faktu lub liczby. ("Źródło: Sztuczki CSS")<address>
: Służy do oznaczania informacji kontaktowych, nie tylko adresów fizycznych, ale także adresów e-mail i numerów telefonów. (
)
To samo będzie z nim <strong>
. Zamiast używać go do stylizacji tekstu, który ma wyglądać na cięższy, lepiej jest użyć klasyki <b>
tag dla pogrubienia, aby uniknąć nadawania dodatkowego znaczenia treściom, które go nie potrzebują. Pamiętaj, że niektóre elementy, takie jak nagłówki, są już wyświetlane pogrubioną czcionką dzięki domyślnym stylom przeglądarki. Nie ma potrzeby dodawania jeszcze mocniejszych akcentów.
Używanie kursywy w wyróżnionych treściach (i odwrotnie)
Istnieją uzasadnione przypadki, w których konieczne może być pochylenie części linii, która została już wyróżniona. A może połóż nacisk na fragment tekstu, który jest już napisany kursywą.
Dobrym przykładem może być cytat blokowy. Widziałem wiele razy, gdy są one pisane kursywą dla stylu, mimo że domyślne style przeglądarki tego nie robią:
blockquote { font-style: italic;
}
Co zrobić, jeśli musimy wymienić tytuł filmu w tym cytacie blokowym? To powinno być zapisane kursywą. Nie ma potrzeby podkreślania stresu, więc an <i>
tag zrobi. Ale nadal dziwnie jest pisać kursywą coś, co jest już renderowane w ten sposób:
<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>
W sytuacji, gdy piszemy kursywą coś w takiej treści, jak ta, powinniśmy to robić usuń kursywę z zagnieżdżonego elementu… <i>
w tym przypadku.
blockquote i { font-style: normal;
}
Zapytania w stylu kontenera będą bardzo przydatne do złapania wszystkich tych instancji, jeśli je zdobędziemy:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Ten mały fragment ocenia cytat blokowy, aby sprawdzić, czy tak jest font-style
jest ustawione na italic
. Jeśli tak, to upewni się, że <em>
, <i>
, <cite>
, <address>
elementy są renderowane jako zwykły tekst, zachowując znaczenie semantyczne, jeśli takie istnieje.
Ale wróćmy do podkreślenia w ramach podkreślenia
nie zagnieździłbym się <strong>
wewnątrz <em>
lubię to:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…lub gniazdo <em>
wewnątrz <strong>
zamiast:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Renderowanie jest w porządku! I nie ma znaczenia, w jakiej kolejności są… przynajmniej w nowoczesnych przeglądarkach. Wspomina o tym Jennifer Kyrnin niektóre przeglądarki renderują tylko znacznik znajdujący się najbliżej tekstu, ale nie wpadłem na to nigdzie w moich ograniczonych testach. Ale jest na co uważać!
Powodem, dla którego nie umieściłbym jednej formy nacisku w innej, jest to, że po prostu nie jest to potrzebne. Nie ma reguły gramatycznej, która tego wymaga. Podobnie jak wykrzykniki, wystarczy jedna forma podkreślenia i powinieneś użyć tej, która pasuje do tego, czego szukasz, niezależnie od tego, czy jest to podkreślenie wizualne, waga, czy zapowiedziane podkreślenie.
I chociaż niektóre czytniki ekranu są w stanie ogłosić wyróżnioną treść, nie będą odczytywać znaczników z dodatkowym znaczeniem lub podkreśleniem. Tak więc, o ile wiem, nie ma też żadnych dodatkowych ułatwień dostępu.
Ale ja naprawdę chcę cały nacisk!
Jeśli jesteś w sytuacji, w której twój szef jest taki jak mój i chce WSZYSTKO dotychczasowy nacisk, sięgam po odpowiedni tag HTML dla rodzaju wyróżnienia, a następnie stosuję pozostałe style z mieszanką tagów, które nie wpływają na semantykę CSS, aby pomóc uwzględnić wszystko, czego style przeglądarki nie obsługują.
<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>
Może nawet zrobię to z <strong>
tag również jako środek obronny:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Tak długo, jak gramy w obronie, możemy zidentyfikować błędy, w których akcenty są zagnieżdżone w akcentach, podświetlając je na czerwono lub coś takiego:
/* 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);
}
Wtedy prawdopodobnie użyłbym tego fragmentu z ostatniej sekcji, który usuwa domyślną stylizację kursywy z elementu, gdy jest on zagnieżdżony w innym elemencie pisanym kursywą.
Coś jeszcze?
majyyybe:
- Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
- Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
- Źródło: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- dostępność
- Konto
- Dodatkowy
- adres
- Adresy
- oddziaływać
- wpływający
- Po
- Wszystkie kategorie
- sam
- już
- Ameryka
- i
- ogłosił
- Ogłaszając
- Inne
- nigdzie
- Aplikuj
- awatara
- z powrotem
- tło
- bo
- zanim
- jest
- Ulepsz Swój
- Bit
- granica
- SZEF
- Pudełko
- box office
- przeglądarka
- przeglądarki
- budżet
- Połączenia
- zdolny
- walizka
- Etui
- Zmiany
- wymiana pieniędzy
- klasyczny
- kolor
- skontaktuj się
- zawiera
- zawartość
- CSS
- Domyślnie
- Obrona
- obronny
- zaprojektowany
- różne
- Nie
- nie
- Podwójna
- wysiłek
- bądź
- Elementy
- nacisk
- podkreślać
- podkreślił
- ogromny
- dość
- Cały
- Błędy
- Parzyste
- przykład
- przykłady
- ekspresowy
- dodatkowy
- Walki
- Postać
- i terminów, a
- taflowy
- następujący
- Nasz formularz
- od
- otrzymać
- daje
- Dający
- Globalnie
- Go
- będzie
- dobry
- wspaniały
- uchwyt
- pomoc
- tutaj
- Atrakcja
- podświetlanie
- HTML
- HTTPS
- pomysł
- zidentyfikować
- znaczenie
- ważny
- in
- Informacja
- wgląd
- zamiast
- IT
- Jennifer
- Nazwisko
- Ograniczony
- Linia
- mało
- lokalizacji
- długo
- Popatrz
- zrobiony
- robić
- WYKONUJE
- znak
- Materia
- znaczenie
- zmierzyć
- wspomina
- może
- milion
- Nowoczesne technologie
- pęd
- jeszcze
- film
- Kino
- NAB
- Potrzebować
- Nest
- normalna
- Północ
- Ameryka Północna
- z naszej
- Oferty
- Biurowe
- ONE
- otwarcie
- zamówienie
- Inne
- część
- jest gwarancją najlepszej jakości, które mogą dostarczyć Ci Twoje monitory,
- profity
- telefon
- fizyczny
- Miejsce
- plato
- Analiza danych Platona
- PlatoDane
- gra
- Volcano Plenty Vaporizer Storz & Bickel
- zwrotnica
- position
- prawdopodobnie
- chroniony
- czysto
- dosięgnąć
- Czytaj
- czytelnicy
- powód
- Czerwony
- pamiętać
- wykonanie
- REST
- wspornikowy
- Zasada
- taki sam
- Ekran
- czytniki ekranu
- Sekcja
- semantyka
- rozsądek
- wyrok
- zestaw
- powinien
- po prostu
- sytuacja
- So
- kilka
- coś
- Dźwięk
- Źródło
- Nadal
- stres
- silny
- styl
- Wskazuje
- Wspaniały
- domniemany
- TAG
- Testy
- Połączenia
- Źródło
- rzecz
- rzeczy
- czasy
- Tytuł
- do
- TON
- także
- prawdziwy
- pilny
- posługiwać się
- ostrzeżenie
- Oglądaj
- weekend
- ważyć
- waga
- Co
- czy
- Podczas
- KIM
- będzie
- w ciągu
- bez
- słowa
- by
- pisanie
- You
- Twój
- zefirnet