Łączenie DNA HTML z selektorami atrybutów CSS
Opublikowany: 2022-03-10Przez większość mojej kariery selektory atrybutów były bardziej magiczne niż nauka. Gapiłem się, zdumiony, na CSS, który wyświetlał link w arkuszu stylów wydruku, nic nie rozumiejąc. Posłusznie skopiowałem i wkleiłem go do arkusza stylów drukowania, a następnie uciekłem, aby zgasić projekt, który był największą palącą się stertą śmieci.
Ale nie musisz już dłużej gapić się na selektory atrybutów CSS. Pod koniec tego artykułu będziesz używać ich do przeprowadzania diagnostyki w swojej witrynie, rozwiązywania problemów nierozwiązywalnych w inny sposób i generowania doświadczeń technologicznych tak zaawansowanych, że wydają się magiczne. Możesz pomyśleć, że obiecuję za dużo i masz rację, ale kiedy zrozumiesz moc selektorów atrybutów, możesz mieć ochotę przesadzać.
Na najbardziej podstawowym poziomie umieszczasz atrybut HTML w nawiasach kwadratowych i nazywasz go selektorem atrybutów w następujący sposób:
[href] { color: chartreuse; } Tekst dowolnego elementu, który ma href i nie ma bardziej szczegółowego selektora, w magiczny sposób zmieni teraz użycie wykresu. Specyfika selektora atrybutów jest taka sama jak klas.
Uwaga : Aby uzyskać więcej informacji na temat dopasowania klatki, czyli specyfiki CSS, przeczytaj „Specyfika CSS: Rzeczy, które powinieneś wiedzieć” lub jeśli lubisz Gwiezdne Wojny: „Wojny specyficzności CSS”.
Ale możesz zrobić znacznie więcej dzięki selektorom atrybutów. Podobnie jak Twoje DNA, mają wbudowaną logikę, która pomoże Ci wybrać wszelkiego rodzaju kombinacje atrybutów i wartości. Zamiast dokładnego dopasowania tylko tak, jak zrobiłby to tag, klasa lub selektor identyfikatora, mogą one dopasować dowolny atrybut, a nawet wartości ciągu w atrybutach.
Wybór atrybutów
Selektory atrybutów mogą funkcjonować samodzielnie lub być bardziej szczegółowe, np. jeśli musisz wybrać wszystkie znaczniki div , które miały atrybut title .
div[title]Ale możesz także wybrać elementy potomne div, które mają tytuł, wykonując następujące czynności:
div [title]Żeby było jasne, brak spacji między nimi oznacza, że atrybut znajduje się na tym samym elemencie (tak jak element i klasa bez spacji), a spacja między nimi oznacza selektor potomka, czyli wybieranie potomków elementu, które mają ten atrybut.
Możesz uzyskać znacznie bardziej szczegółowy sposób wybierania atrybutów, w tym wartości atrybutów.
div[title="dna"]Powyższe wybiera wszystkie div z dokładnym tytułem „dna”. Tytuł „dna jest niesamowite” lub „dnamutation” nie zostałby wybrany, chociaż istnieją algorytmy selektora, które obsługują każdy z tych przypadków (i nie tylko). Wkrótce do nich przejdziemy.
Uwaga : w większości przypadków cudzysłowy nie są wymagane w selektorach atrybutów, ale użyję ich, ponieważ uważam, że zwiększają one przejrzystość i zapewniają prawidłowe działanie przypadków brzegowych.
Jeśli chcesz wybrać „dna” z listy oddzielonej spacjami, np. „moje piękne DNA” lub „mutowanie DNA jest fajne!” możesz dodać tyldę lub „falisty”, jak lubię to nazywać, przed znakiem równości.
div[title~="dna"]Możesz wybrać tytuły, takie jak „dontblamemeblamemydna” lub „jego-głupota-jest-z-wychowania-nie-dna”, a następnie możesz użyć znaku dolara $, aby dopasować koniec tytułu.
[title$="dna"]Aby dopasować przód wartości atrybutu, takiej jak tytuły „dnamutants” lub „dna-splicing-for-all”, użyj karetki.
[title^="dna"]Chociaż dokładne dopasowanie jest pomocne, może być zbyt ciasny wybór, a dopasowanie karetki może być zbyt szerokie dla Twoich potrzeb. Na przykład możesz nie chcieć wybierać tytułu „genealogia”, ale nadal wybrać zarówno „gen”, jak i „dane genu”. Znak kreski pionowej (lub pionowy pasek) jest właśnie tym; wykonuje dokładne dopasowanie, ale uwzględnia sytuację, w której po dokładnym dopasowaniu następuje myślnik.
[title|="gene"]Wreszcie istnieje operator atrybutu pełnego wyszukiwania, który będzie pasował do dowolnego podciągu.
[title*="dna"]Ale używaj go mądrze, ponieważ powyższe będzie pasowało do „lubię-moje-dna-lubi-mięso-rzadkie”, a także „edna”, „porwanie” i „kolczatki” (coś, czego Edna naprawdę nie powinna robić. )
To, co czyni te selektory atrybutów jeszcze potężniejszymi, to fakt, że można je układać w stosy — co pozwala wybierać elementy z wieloma współczynnikami dopasowania.
Ale musisz znaleźć a , który ma tytuł i ma klasę kończącą się na „geny”? Oto jak:
a[title][class$="genes"]Możesz nie tylko wybrać atrybuty elementu HTML, ale także wydrukować ich zmutowane geny za pomocą pseudo-„nauki” (co oznacza pseudoelementy i deklarację treści).
<span class="joke" title="Gene Editing!">What's the first thing a biotech journalist does after finishing the first draft of an article?</span> .joke:hover:after { content: "Answer:" attr(title); display: block; }Powyższy kod pokaże odpowiedź na jeden z najgorszych żartów, jakie kiedykolwiek napisano po najechaniu kursorem (tak, sam go napisałem i tak, nazywanie tego „żartem” jest hojnością).
Ostatnią rzeczą, o której należy wiedzieć, jest to, że możesz dodać flagę, aby nie uwzględniać wielkości liter w wyszukiwaniu atrybutów. Dodajesz i przed zamykającym nawiasem kwadratowym.
[title*="DNA" i]A zatem pasowałby do „dna”, „DNA”, „dnA” i każdej innej odmiany.
Jedynym minusem jest to, że działa tylko w Firefox, Chrome, Safari, Opera i kilku przeglądarkach mobilnych.
Teraz, gdy widzieliśmy, jak wybierać za pomocą selektorów atrybutów, spójrzmy na kilka przypadków użycia. Podzieliłem je na dwie kategorie: Ogólne zastosowania i Diagnostyka .
Ogólne zastosowania
Styl według typu wejścia
Możesz różnie stylizować typy danych wejściowych, np. e-mail lub telefon.
input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }Wyświetl łącza telefoniczne
Możesz ukryć numer telefonu w określonych rozmiarach i zamiast tego wyświetlić link do telefonu, aby ułatwić dzwonienie przez telefon.
span.phone { display: none; } a[href^="tel"] { display: block; }Linki wewnętrzne a zewnętrzne, bezpieczne a niepewne
Łącza wewnętrzne i zewnętrzne można traktować w inny sposób, a łącza bezpieczne można stylizować inaczej niż łącza niezabezpieczone.
a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="https://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }Pobierz ikony
Jednym z atrybutów, które dał nam HTML5, było „pobieranie”, które mówi przeglądarce, aby, jak zgadłeś, pobrać ten plik, zamiast próbować go otwierać. Jest to przydatne w przypadku plików PDF i DOC, do których użytkownicy mają mieć dostęp, ale nie chcą, aby otwierały się teraz. Ułatwia to również przepływ pracy podczas pobierania wielu plików z rzędu. Wadą atrybutu download jest to, że nie ma domyślnej wizualizacji, która odróżniałaby go od bardziej tradycyjnego linku. Często tego chcesz, ale jeśli tak nie jest, możesz zrobić coś takiego jak poniżej.
a[download]:after { content: url(download-arrow.svg); }Możesz także komunikować typy plików za pomocą różnych ikon, takich jak PDF, DOCX, ODF i tak dalej.
a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }Możesz również upewnić się, że te ikony znajdują się tylko w linkach do pobrania, ustawiając selektor atrybutów.
a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }Zastąp lub ponownie zastosuj przestarzały/przestarzały kod
Wszyscy natknęliśmy się na stare witryny, które mają przestarzały kod, ale czasami aktualizacja kodu nie jest warta czasu, jaki zajęłoby to zrobienie tego na sześciu tysiącach stron. Może być konieczne zastąpienie lub nawet ponowne zastosowanie stylu zaimplementowanego jako atrybut przed HTML5.
<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }Zastąp określone style wbudowane
Czasami natkniesz się na wbudowane style, które zaklejają prace, ale pochodzą z kodu poza twoją kontrolą. Należy powiedzieć, czy możesz je zmienić, co byłoby idealne, ale jeśli nie możesz, oto obejście.
Uwaga : działa to najlepiej, jeśli znasz dokładną właściwość i wartość, którą chcesz nadpisać, i jeśli chcesz, aby była zastępowana wszędzie tam, gdzie się pojawia.
W tym przykładzie margines elementu jest ustawiony w pikselach, ale musi zostać rozszerzony i ustawiony w em s, aby element mógł ponownie dopasować się poprawnie, jeśli użytkownik zmieni domyślny rozmiar czcionki.
<divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; } Uwaga : To podejście powinno być stosowane z najwyższą ostrożnością, ponieważ jeśli kiedykolwiek będziesz musiał zmienić ten styl, wpadniesz w !important wojnę i kocięta umrą.
Wyświetlanie typów plików
Lista akceptowanych plików dla pliku wejściowego jest domyślnie niewidoczna. Zazwyczaj używamy pseudoelementów do ich eksponowania i chociaż nie możesz zrobić pseudoelementów na większości tagów input (lub w ogóle w Firefoksie lub Edge), możesz ich użyć na plikach wejściowych.
<input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }Menu akordeonu HTML
Niezbyt dobrze nagłośnione details i duet tagów summary to sposób na tworzenie menu rozwijanych/akordeonowych za pomocą samego kodu HTML. Szczegóły otaczają zarówno tag summary , jak i zawartość, którą chcesz wyświetlić, gdy akordeon jest otwarty. Kliknięcie podsumowania powoduje rozwinięcie znacznika detail i dodanie otwartego atrybutu. Atrybut open ułatwia stylizowanie tagu Open details w inny sposób niż tagu Closed details .
<details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details> details[open] { background-color: hotpink; }Drukowanie linków
Wyświetlanie adresów URL w stylach drukowania doprowadziło mnie do zrozumienia selektorów atrybutów. Powinieneś już teraz wiedzieć, jak to skonstruować. Po prostu zaznaczasz wszystkie tagi a href , dodajesz pseudoelement i drukujesz je za pomocą attr() i content .
a[href]:after { content: " (" attr(href) ") "; }Niestandardowe podpowiedzi
Tworzenie niestandardowych podpowiedzi jest zabawne i łatwe dzięki selektorom atrybutów (w porządku, zabawne, jeśli jesteś nerdem takim jak ja, ale łatwe w każdym przypadku).
Uwaga : ten kod powinien Cię znaleźć w ogólnym sąsiedztwie, ale może wymagać pewnych poprawek odstępów, dopełnienia i schematu kolorów w zależności od środowiska Twojej witryny i tego, czy masz lepszy gust ode mnie, czy nie.
[title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }Klawisze dostępu
Jedną z największych zalet sieci jest to, że zapewnia ona wiele różnych opcji dostępu do informacji. Jednym z rzadko używanych atrybutów jest możliwość ustawienia klucza accesskey , tak aby do elementu można było uzyskać bezpośredni dostęp za pomocą kombinacji klawiszy i litery ustawionej przez accesskey dostępu (dokładna kombinacja klawiszy zależy od przeglądarki). Ale nie ma łatwego sposobu, aby dowiedzieć się, jakie klucze zostały ustawione na stronie internetowej.
Poniższy kod pokaże te klawisze na :focus . Nie używam hover , ponieważ większość osób potrzebujących accesskey to ci, którzy mają problemy z używaniem myszy. Możesz dodać to jako drugą opcję, ale upewnij się, że nie jest to jedyna opcja.
a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }Diagnostyka
Te opcje mają pomóc w identyfikacji problemów podczas procesu kompilacji lub lokalnie podczas próby ich rozwiązania. Umieszczenie ich w witrynie produkcyjnej spowoduje, że błędy będą widoczne dla użytkowników.
Dźwięk bez elementów sterujących
Nie używam znacznika audio zbyt często, ale kiedy go używam, często zapominam o dołączeniu atrybutu controls . Wynik: nic nie jest pokazywane. Jeśli pracujesz w Firefoksie, ten kod może pomóc Ci odgadnąć, czy element audio jest ukryty lub jeśli składnia lub inny problem uniemożliwia jego wyświetlenie (działa tylko w Firefoksie).
audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }Brak tekstu alternatywnego
Obrazy bez tekstu alternatywnego to koszmar związany z logistyką i dostępnością. Trudno je znaleźć, po prostu patrząc na stronę, ale jeśli to dodasz, od razu wyskoczą.
Uwaga : używam outline zamiast border , ponieważ obramowania mogą zwiększyć szerokość elementu i zepsuć układ. outline nie dodaje szerokości.
img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }Asynchroniczne pliki JavaScript
Strony internetowe mogą być konglomeratem systemów zarządzania treścią, wtyczek, frameworków i kodu, który Ted (siedzący w trzech boksach) napisał na wakacjach, ponieważ strona nie działała i boi się twojego szefa. Ustalenie, co JavaScript ładuje się asynchronicznie, a co nie, może pomóc Ci skoncentrować się na tym, gdzie poprawić wydajność strony.
script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }Elementy zdarzeń JavaScript
Możesz także wyróżnić elementy, które mają atrybut zdarzenia JavaScript, aby zrefaktoryzować je do pliku JavaScript. Skupiłem się tutaj na atrybucie OnMouseOver , ale działa on dla każdego atrybutu zdarzenia JavaScript.
[OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }Ukryte przedmioty
Jeśli chcesz zobaczyć, gdzie na żywo znajdują się Twoje ukryte elementy lub ukryte wejścia, możesz je pokazać za pomocą:
[hidden], [type="hidden"] { display: block; }Ale przy tych wszystkich niesamowitych możliwościach myślisz, że musi być jakiś haczyk. Z pewnością selektory atrybutów muszą działać tylko wtedy, gdy są oznaczone w Chrome lub w nocnych kompilacjach Ognistych lisów na krawędzi Safari. To zbyt piękne, aby mogło być prawdziwe. I niestety jest pewien haczyk.
Jeśli chcesz pracować z selektorami atrybutów w tej najbardziej ukochanej z przeglądarek — czyli IE6 — nie będziesz w stanie. (W porządku; pozwól łzom płynąć. Żadnych osądów.) Prawie wszędzie indziej, gdzie możesz się udać. Selektory atrybutów są częścią specyfikacji CSS 2.1 i dlatego są obecne w przeglądarkach przez większą część dekady.
Tak więc te selektory nie powinny już być dla ciebie magiczne, ale ujawnione jako wystarczająco zaawansowana technologia. Są bardziej nauką niż magią, a teraz, kiedy znasz ich najgłębsze sekrety, to zależy od Ciebie. Wyjdź i pracuj nad tajemniczymi cudami nauki w sieci.