Unire il DNA dell'HTML con i selettori di attributi CSS
Pubblicato: 2022-03-10Per la maggior parte della mia carriera, i selettori di attributi sono stati più magici che scientifici. Fisserei, sbalordito, il CSS per l'output di un collegamento in un foglio di stile di stampa, senza capire nulla. Lo copierei diligentemente e lo incollerei nel mio foglio di stile di stampa, quindi scapperei per eliminare qualsiasi progetto fosse il più grande mucchio di spazzatura in fiamme.
Ma non devi più fissare a bocca aperta i selettori di attributi CSS. Entro la fine di questo articolo, li utilizzerai per eseguire la diagnostica sul tuo sito, risolvere problemi altrimenti irrisolvibili e generare esperienze tecnologiche così avanzate da sembrare magiche. Potresti pensare che io stia promettendo troppo e hai ragione, ma una volta compreso il potere dei selettori di attributi, potresti aver voglia di esagerare.
Al livello più elementare, metti un attributo HTML tra parentesi quadre e lo chiami selettore di attributi in questo modo:
[href] { color: chartreuse; } Il testo di qualsiasi elemento che ha un href e non ha un selettore più specifico ora diventerà magicamente chartreuse. La specificità del selettore degli attributi è la stessa delle classi.
Nota : per ulteriori informazioni sulla corrispondenza della gabbia che è la specificità CSS, puoi leggere "Specificità CSS: cose che dovresti sapere" o se ti piace Star Wars: "Guerre della specificità CSS".
Ma puoi fare molto di più con i selettori di attributi. Proprio come il tuo DNA, hanno una logica incorporata per aiutarti a scegliere tutti i tipi di combinazioni e valori di attributi. Invece di corrispondere esattamente come farebbe un selettore di tag, classe o id, possono abbinare qualsiasi attributo e persino valori di stringa all'interno degli attributi.
Selezione degli attributi
I selettori di attributo possono vivere da soli o essere più specifici, ad esempio se è necessario selezionare tutti i tag div che avevano un attributo title .
div[title]Ma puoi anche selezionare i figli dei div che hanno un titolo procedendo come segue:
div [title]Per essere chiari, nessuno spazio tra di loro significa che l'attributo è sullo stesso elemento (proprio come un elemento e una classe senza uno spazio), e uno spazio tra di loro significa un selettore discendente, cioè selezionando i figli dell'elemento che hanno l'attributo.
Puoi diventare molto più granulare nel modo in cui selezioni gli attributi, inclusi i valori degli attributi.
div[title="dna"]Quanto sopra seleziona tutti i div con un titolo esatto di "dna". Un titolo di "dna is awesome" o "dnamutation" non verrebbe selezionato, sebbene esistano algoritmi di selezione che gestiscono ciascuno di questi casi (e altro). Arriveremo presto a quelli.
Nota : le virgolette non sono richieste nella maggior parte dei casi nei selettori di attributi, ma le userò perché credo che aumentino la chiarezza e garantiscano che i casi limite funzionino in modo appropriato.
Se volessi selezionare "dna" da un elenco separato da spazi come "il mio bellissimo dna" o "mutare il dna è divertente!" puoi aggiungere una tilde o "ondulata", come mi piace chiamarla, davanti al segno di uguale.
div[title~="dna"]Puoi selezionare titoli come "dontblamemeblamemydna" o "his-stupidity-is-from-upbring-not-dna", quindi puoi utilizzare il simbolo del dollaro $ per abbinare la fine di un titolo.
[title$="dna"]Per abbinare la parte anteriore di un valore di attributo come i titoli di "dnamutants" o "dna-splicing-for-all" usa un accento circonflesso.
[title^="dna"]Anche se avere una corrispondenza esatta è utile, potrebbe essere una selezione troppo ristretta e la corrispondenza frontale del cursore potrebbe essere troppo ampia per le tue esigenze. Ad esempio, potresti non voler selezionare un titolo di "genealogia", ma selezionare comunque sia "gene" che "dati genetici". Il carattere pipe (o barra verticale) è proprio questo; fa una corrispondenza esatta, ma include quando la corrispondenza esatta è seguita da un trattino.
[title|="gene"]Infine, c'è un operatore di attributo di ricerca completo che corrisponderà a qualsiasi sottostringa.
[title*="dna"]Ma usalo con saggezza poiché quanto sopra corrisponderà a "Mi piace-il-mio-dna-come-la-mia-carne-rara" così come "edna", "rapimento" e "echidnas" (qualcosa che Edna davvero non dovrebbe fare. )
Ciò che rende questi selettori di attributi ancora più potenti è che sono impilabili, consentendoti di selezionare elementi con più fattori di corrispondenza.
Ma hai bisogno di trovare a tag che abbia un titolo e una classe che termina con "genes"? Ecco come:
a[title][class$="genes"]Non solo puoi selezionare gli attributi di un elemento HTML, ma puoi anche stampare i loro geni mutati usando la pseudo-"scienza" (che significa pseudo-elementi e la dichiarazione del contenuto).
<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; }Il codice sopra mostrerà la risposta a una delle peggiori battute mai scritte al passaggio del mouse (sì, l'ho scritto io stesso e, sì, chiamarlo "scherzo" è essere generosi).
L'ultima cosa da sapere è che puoi aggiungere un flag per rendere le ricerche di attributi senza distinzione tra maiuscole e minuscole. Aggiungi una i prima della parentesi quadra di chiusura.
[title*="DNA" i]E quindi corrisponderebbe a "dna", "DNA", "dnA" e qualsiasi altra variazione.
L'unico aspetto negativo di questo è che i funziona solo in Firefox, Chrome, Safari, Opera e un'infarinatura di browser mobili.
Ora che abbiamo visto come selezionare con i selettori di attributi, diamo un'occhiata ad alcuni casi d'uso. Li ho divisi in due categorie: usi generali e diagnostica .
Usi generali
Stile per tipo di input
È possibile definire lo stile dei tipi di input in modo diverso, ad esempio e-mail o telefono.
input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }Visualizza collegamenti telefonici
Puoi nascondere un numero di telefono di determinate dimensioni e visualizzare invece un collegamento telefonico per semplificare le chiamate su un telefono.
span.phone { display: none; } a[href^="tel"] { display: block; }Collegamenti interni o esterni, sicuri o non sicuri
È possibile trattare i collegamenti interni ed esterni in modo diverso e definire i collegamenti protetti in modo diverso dai collegamenti non sicuri.
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); }Scarica Icone
Un attributo che HTML5 ci ha fornito è stato "download" che dice al browser di, hai indovinato, scaricare quel file piuttosto che provare ad aprirlo. Questo è utile per PDF e DOC a cui vuoi che le persone accedano ma non vuoi che si aprano subito. Inoltre, semplifica il flusso di lavoro per il download di molti file di seguito. Lo svantaggio dell'attributo download è che non esiste un elemento visivo predefinito che lo distingua da un collegamento più tradizionale. Spesso questo è quello che vuoi, ma quando non lo è, puoi fare qualcosa come il seguente.
a[download]:after { content: url(download-arrow.svg); }Puoi anche comunicare i tipi di file con icone diverse come PDF vs. DOCX vs. ODF e così via.
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); }Potresti anche assicurarti che quelle icone fossero solo su link scaricabili sovrapponendo il selettore degli attributi.
a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }Sostituisci o riapplica codice obsoleto/obsoleto
Ci siamo imbattuti tutti in vecchi siti con codice obsoleto, ma a volte l'aggiornamento del codice non vale il tempo necessario per farlo su seimila pagine. Potrebbe essere necessario sovrascrivere o addirittura riapplicare uno stile implementato come attributo prima di HTML5.
<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }Sostituisci stili in linea specifici
A volte ti imbatterai in stili inline che stanno rovinando il lavoro, ma provengono da codice al di fuori del tuo controllo. Va detto che se puoi cambiarli sarebbe l'ideale, ma se non puoi, ecco una soluzione alternativa.
Nota : funziona meglio se si conosce la proprietà e il valore esatti che si desidera sovrascrivere e se si desidera che venga sovrascritto ovunque appaia.
Per questo esempio, il margine dell'elemento è impostato in pixel, ma deve essere espanso e impostato in em in modo che l'elemento possa riadattarsi correttamente se l'utente modifica la dimensione del carattere predefinita.
<divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; } Nota : questo approccio dovrebbe essere usato con estrema cautela, poiché se dovessi mai ignorare questo stile cadrai in una guerra !important e i gattini moriranno.
Visualizzazione dei tipi di file
L'elenco dei file accettabili per un file di input è invisibile per impostazione predefinita. In genere, utilizziamo uno pseudo elemento per esporli e, sebbene non sia possibile eseguire pseudo elementi sulla maggior parte dei tag di input (o del tutto in Firefox o Edge), è possibile utilizzarli sugli input di file.
<input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }Menu a fisarmonica HTML
I details non ben pubblicizzati e la coppia di tag di summary sono un modo per creare menu espandibili/a fisarmonica solo con HTML. I dettagli racchiudono sia il tag di summary che il contenuto che si desidera visualizzare quando la fisarmonica è aperta. Facendo clic sul riepilogo si espande il tag di detail e si aggiunge un attributo aperto. L'attributo open semplifica lo stile di un tag di details aperti in modo diverso da un tag di details chiusi.
<details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details> details[open] { background-color: hotpink; }Stampa di collegamenti
La visualizzazione degli URL negli stili di stampa mi ha condotto su questa strada per comprendere i selettori di attributi. Dovresti sapere come costruirlo da solo ora. Devi semplicemente selezionare tutti i tag con a href , aggiungere uno pseudo-elemento e stamparli usando attr() e content .
a[href]:after { content: " (" attr(href) ") "; }Suggerimenti personalizzati
La creazione di descrizioni comandi personalizzate è facile e divertente con i selettori di attributi (ok, divertente se sei un nerd come me, ma facile in entrambi i casi).
Nota : questo codice dovrebbe portarti nelle vicinanze generali, ma potrebbe richiedere alcune modifiche alla spaziatura, al riempimento e alla combinazione di colori a seconda dell'ambiente del tuo sito e se hai gusti migliori di me o meno.
[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; }Chiavi di accesso
Una delle grandi cose del web è che offre molte opzioni diverse per accedere alle informazioni. Un attributo usato raramente è la possibilità di impostare una chiave di accesskey in modo che sia possibile accedere a quell'elemento direttamente tramite una combinazione di tasti e la lettera impostata tramite la chiave di accesskey (l'esatta combinazione di tasti dipende dal browser). Ma non esiste un modo semplice per sapere quali chiavi sono state impostate su un sito web.
Il codice seguente mostrerà quei tasti su :focus . Non lo uso al passaggio del hover perché la maggior parte delle volte le persone che hanno bisogno della accesskey sono quelle che hanno problemi a usare il mouse. Puoi aggiungerlo come seconda opzione, ma assicurati che non sia l'unica opzione.
a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }Diagnostica
Queste opzioni consentono di identificare i problemi durante il processo di compilazione o in locale durante il tentativo di risolvere i problemi. Metterli sul tuo sito di produzione farà risalire gli errori ai tuoi utenti.
Audio senza controlli
Non uso il tag audio troppo spesso, ma quando lo uso, spesso dimentico di includere l'attributo controls . Il risultato: non viene mostrato nulla. Se stai lavorando in Firefox, questo codice può aiutarti a capire se hai un elemento audio nascosto o se la sintassi o qualche altro problema ne impedisce la visualizzazione (funziona solo in Firefox).
audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }Nessun testo alternativo
Le immagini senza testo alternativo sono un incubo per la logistica e l'accessibilità. Sono difficili da trovare semplicemente guardando la pagina, ma se aggiungi questo verranno visualizzati subito.
Nota : io uso il outline invece del border perché i bordi potrebbero aggiungersi alla larghezza dell'elemento e rovinare il layout. outline non aggiunge larghezza.
img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }File Javascript asincroni
Le pagine Web possono essere un conglomerato di sistemi di gestione dei contenuti, plug-in, framework e codice che Ted (seduto a tre cubicoli) ha scritto in vacanza perché il sito non funzionava e teme il tuo capo. Capire cosa JavaScript carica in modo asincrono e cosa no può aiutarti a concentrarti su dove migliorare le prestazioni della pagina.
script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }Elementi dell'evento Javascript
Puoi anche evidenziare gli elementi che hanno un attributo di evento JavaScript per rifattorizzarli nel tuo file JavaScript. Mi sono concentrato sull'attributo OnMouseOver qui, ma funziona per qualsiasi attributo dell'evento JavaScript.
[OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }Oggetti nascosti
Se hai bisogno di vedere dove vivono i tuoi elementi nascosti o input nascosti, puoi mostrarli con:
[hidden], [type="hidden"] { display: block; }Ma con tutte queste incredibili capacità pensi che ci debba essere un problema. Sicuramente i selettori di attributi devono funzionare solo se contrassegnati in Chrome o nelle build notturne di Fiery Foxes sul bordo di un Safari. Questo è semplicemente troppo bello per essere vero. E, sfortunatamente, c'è un problema.
Se vuoi lavorare con i selettori di attributi nel browser più amato, ovvero IE6, non sarai in grado di farlo. (Va tutto bene; lascia cadere le lacrime. Nessun giudizio.) Praticamente ovunque sei a posto. I selettori di attributo fanno parte delle specifiche CSS 2.1 e quindi sono stati nei browser per la maggior parte di un decennio.
E quindi questi selettori non dovrebbero più essere magici per te ma rivelati come una tecnologia sufficientemente avanzata. Sono più scienza che magia, e ora che conosci i loro segreti più profondi, tocca a te. Vai avanti e opera mistificanti meraviglie della scienza sul web.