Îmbinarea ADN-ului HTML cu selectori de atribute CSS

Pentru cea mai mare parte a carierei mele, selectoarele de atribute au fost mai mult magice decât știință. M-aș uita, uluit, la CSS pentru a scoate un link într-o foaie de stil de tipărire, fără să înțeleg nimic. Aș copia cu respect și l-aș lipi în foaia mea de stil de tipărire, apoi aș fuge pentru a scoate orice proiect ar fi cel mai mare morman de gunoi care arde.

Dar nu mai trebuie să te uiți cu falca slăbită la selectoarele de atribute CSS. Până la sfârșitul acestui articol, le veți folosi pentru a rula diagnostice pe site-ul dvs., pentru a remedia probleme altfel de nerezolvat și pentru a genera experiențe tehnologice atât de avansate încât să pară magice. S-ar putea să crezi că promit prea multe și că ai dreptate, dar odată ce înțelegi puterea selectoarelor de atribute, s-ar putea să ai chef să te exagerezi.

La cel mai elementar nivel, puneți un atribut HTML între paranteze pătrate și îl numiți selector de atribute astfel:

 [href] { color: chartreuse; }

Textul oricărui element care are un href și nu are un selector mai specific se va transforma acum în mod magic chartreuse. Specificitatea selectorului de atribute este aceeași cu clasele.

Notă : Pentru mai multe despre potrivirea cușcă care este specificitatea CSS, puteți citi „Specificitatea CSS: lucruri pe care ar trebui să le știți” sau dacă vă place Star Wars: „CSS Specificity Wars”.

Dar puteți face mult mai mult cu selectorii de atribute. La fel ca ADN-ul tău, au o logică încorporată pentru a te ajuta să alegi tot felul de combinații de atribute și valori. În loc să se potrivească doar exact așa cum ar face o etichetă, o clasă sau un selector de id-uri, acestea pot potrivi orice atribut și chiar valorile șirului din atribute.

Selectarea atributelor

Selectorii de atribute pot trăi singuri sau pot fi mai specifici, adică dacă trebuie să selectați toate etichetele div care au avut un atribut title .

 div[title]

Dar puteți selecta și copiii div-urilor care au un titlu făcând următoarele:

 div [title]

Pentru a fi clar, nici un spațiu între ele înseamnă că atributul este pe același element (la fel ca un element și o clasă fără spațiu), iar un spațiu între ele înseamnă un selector descendent, adică selectarea copiilor elementului care au atributul.

Puteți obține mult mai detaliat în modul în care selectați atributele, inclusiv valorile atributelor.

 div[title="dna"]

Cele de mai sus selectează toate div-urile cu un titlu exact de „ADN”. Nu ar fi selectat un titlu de „ADN este grozav” sau „dnamutation”, deși există algoritmi de selecție care gestionează fiecare dintre aceste cazuri (și multe altele). Vom ajunge la acestea în curând.

Notă : ghilimelele nu sunt necesare în selectoarele de atribute în majoritatea cazurilor, dar le voi folosi deoarece cred că mărește claritatea și asigură că cazurile marginale funcționează corespunzător.

Dacă doriți să selectați „ADN” dintr-o listă separată de spații, cum ar fi „ADN-ul meu frumos” sau „ADN-ul mutat este distractiv!” puteți adăuga o tildă sau „squiggly”, așa cum îmi place să o numesc, în fața semnului egal.

 div[title~="dna"]

Puteți selecta titluri precum „dontblamemeblamemydna” sau „prostia-lui-este-din-creștere-nu-adn”, apoi puteți utiliza semnul dolar $ pentru a se potrivi cu sfârșitul unui titlu.

 [title$="dna"]

Pentru a potrivi partea din față a valorii unui atribut, cum ar fi titlurile „dnamutants” sau „dna-splicing-for-all”, utilizați un semn de semnătură.

 [title^="dna"]

Deși este util să ai o potrivire exactă, poate fi o selecție prea strânsă, iar potrivirea din față a cursorului poate fi prea largă pentru nevoile tale. De exemplu, este posibil să nu doriți să selectați un titlu de „genealogie”, dar totuși selectați atât „genă”, cât și „date-gene”. Caracterul conductei (sau bara verticală) este doar atât; face o potrivire exactă, dar include momentul în care potrivirea exactă este urmată de o liniuță.

 [title|="gene"]

În cele din urmă, există un operator de atribut de căutare complet care se va potrivi cu orice subșir.

 [title*="dna"]

Dar folosește-l cu înțelepciune, deoarece cele de mai sus se vor potrivi cu „Îmi place-mi-adn-mea-ca-carne-mea-rare”, precum și „edna”, „răpire” și „echidna” (ceva ce Edna chiar nu ar trebui să facă. )

Ceea ce face acești selectori de atribute și mai puternici este faptul că sunt stivuibili - permițându-vă să selectați elemente cu mai mulți factori de potrivire.

Dar trebuie să găsiți a etichetă care are un titlu și are o clasă care se termină în „gene”? Iată cum:

 a[title][class$="genes"]

Nu numai că puteți selecta atributele unui element HTML, dar le puteți imprima și genele mutante folosind pseudo-„știință” (adică pseudo-elemente și declarația de conținut).

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

Codul de mai sus va arăta răspunsul la una dintre cele mai proaste glume scrise vreodată pe hover (da, l-am scris eu însumi și, da, a numi-o „glumă” înseamnă a fi generos).

Ultimul lucru de știut este că puteți adăuga un steag pentru a face căutările de atribute să nu țină seama de majuscule și minuscule. Adăugați un i înainte de paranteza pătrată de închidere.

 [title*="DNA" i]

Și astfel s-ar potrivi cu „ADN”, „ADN”, „ADN” și orice altă variație.

Singurul dezavantaj al acestui lucru este că i -ul funcționează doar în Firefox, Chrome, Safari, Opera și un pumn de browsere mobile.

Acum că am văzut cum să selectăm cu selectoare de atribute, să ne uităm la câteva cazuri de utilizare. Le-am împărțit în două categorii: Utilizări generale și Diagnosticare .

Utilizări generale

Stil după tipul de intrare

Puteți stila diferit tipurile de introducere, de exemplu e-mail vs. telefon.

 input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }

Afișează legăturile telefonice

Puteți ascunde un număr de telefon la anumite dimensiuni și puteți afișa în schimb o legătură telefonică pentru a facilita apelarea pe un telefon.

 span.phone { display: none; } a[href^="tel"] { display: block; }

Link-uri interne vs. externe, sigure vs. nesigure

Puteți trata link-urile interne și externe în mod diferit și puteți stila link-urile securizate diferit față de link-urile nesigure.

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

Descărcați icoane

Un atribut pe care ni l-a oferit HTML5 a fost „descărcarea”, care spune browserului să descarce fișierul respectiv, mai degrabă decât să încerce să-l deschidă. Acest lucru este util pentru fișierele PDF și DOC pe care doriți să le acceseze oamenii, dar nu doriți să le deschidă chiar acum. De asemenea, facilitează fluxul de lucru pentru descărcarea multor fișiere la rând. Dezavantajul atributului de download este că nu există nicio imagine implicită care să-l deosebească de un link mai tradițional. Adesea, asta este ceea ce îți dorești, dar când nu este, poți face ceva ca cel de mai jos.

 a[download]:after { content: url(download-arrow.svg); }

De asemenea, puteți comunica tipuri de fișiere cu diferite pictograme, cum ar fi PDF vs. DOCX vs. ODF și așa mai departe.

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

De asemenea, ați putea să vă asigurați că acele pictograme se aflau numai pe link-urile descărcabile prin stivuirea selectorului de atribute.

 a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }

Ignorați sau reaplicați codul învechit/depreciat

Cu toții am întâlnit site-uri vechi care au cod învechit, dar uneori actualizarea codului nu merită timpul necesar pentru a o face pe șase mii de pagini. Este posibil să fie nevoie să înlocuiți sau chiar să aplicați din nou un stil implementat ca atribut înainte de HTML5.

 <div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }

Ignorați anumite stiluri în linie

Uneori, veți întâlni stiluri inline care strâng lucrările, dar provin din coduri care nu sunt controlate. Ar trebui spus că dacă le poți schimba, ar fi ideal, dar dacă nu poți, iată o soluție.

Notă : Acest lucru funcționează cel mai bine dacă știți exact proprietatea și valoarea pe care doriți să le înlocuiți și dacă doriți să fie înlocuită oriunde apare.

Pentru acest exemplu, marginea elementului este setată în pixeli, dar trebuie extinsă și setată în em s, astfel încât elementul să se poată reajusta corect dacă utilizatorul modifică dimensiunea implicită a fontului.

 <divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; }

Notă : Această abordare ar trebui să fie folosită cu precauție extremă, deoarece, dacă vreodată ați avea nevoie să treceți peste acest stil, veți cădea într-un război !important și pisoii vor muri.

Afișează tipurile de fișiere

Lista fișierelor acceptabile pentru o intrare de fișier este invizibilă în mod implicit. De obicei, am folosi un pseudo-element pentru expunerea lor și, deși nu puteți face pseudo-elemente pe majoritatea etichetelor de input (sau deloc în Firefox sau Edge), le puteți utiliza pe intrările de fișiere.

 <input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }

Meniul HTML acordeon

details nefolosite și duoul de etichete summary sunt o modalitate de a face meniuri extensibile/acordeon doar cu HTML. Detaliile includ atât eticheta de summary , cât și conținutul pe care doriți să-l afișați atunci când acordeonul este deschis. Făcând clic pe rezumat, se extinde eticheta de detail și se adaugă un atribut deschis. Atributul deschis facilitează stilul unei etichete de details deschise diferit de o etichetă de details închisă.

 <details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details>

 details[open] { background-color: hotpink; }

Imprimarea link-urilor

Afișarea adreselor URL în stilurile de printare m-a condus pe acest drum spre înțelegerea selectoarelor de atribute. Ar trebui să știi cum să-l construiești singur acum. Pur și simplu selectați toate etichetele cu a href , adăugați un pseudo-element și le imprimați folosind attr() și content .

 a[href]:after { content: " (" attr(href) ") "; }

Sfaturi personalizate

Crearea de indicații personalizate este distractivă și ușoară cu selectoare de atribute (bine, distracție dacă ești un tocilar ca mine, dar ușor în orice caz).

Notă : Acest cod ar trebui să vă aducă în vecinătatea generală, dar poate avea nevoie de unele ajustări la spațiere, umplutură și schema de culori, în funcție de mediul site-ului dvs. și dacă aveți gusturi mai bune decât mine sau nu.

 [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; }

Taste de acces

Unul dintre lucrurile grozave despre web este că oferă multe opțiuni diferite pentru accesarea informațiilor. Un atribut rar folosit este abilitatea de a seta o accesskey de acces, astfel încât acel element să poată fi accesat direct printr-o combinație de taste și litera setată prin accesskey de acces (combinația exactă de taste depinde de browser). Dar nu există o modalitate ușoară de a afla ce taste au fost setate pe un site web.

Următorul cod va afișa acele taste pe :focus . Nu folosesc la hover pentru că de cele mai multe ori oamenii care au nevoie de accesskey de acces sunt cei care au probleme cu utilizarea mouse-ului. Puteți adăuga asta ca a doua opțiune, dar asigurați-vă că nu este singura opțiune.

 a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }

Diagnosticare

Aceste opțiuni sunt pentru a vă ajuta să identificați problemele fie în timpul procesului de construire, fie la nivel local, în timp ce încercați să remediați problemele. Punerea acestora pe site-ul dvs. de producție va face ca erorile să fie vizibile utilizatorilor dvs.

Audio fără comenzi

Nu folosesc eticheta audio prea des, dar când o folosesc, deseori uit să includ atributul controls . Rezultatul: nu este afișat nimic. Dacă lucrați în Firefox, acest cod vă poate ajuta să aflați dacă aveți un element audio ascuns sau dacă sintaxa sau vreo altă problemă îl împiedică să apară (funcționează doar în Firefox).

 audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }

Fără text alternativ

Imaginile fără text alternativ sunt un coșmar de logistică și accesibilitate. Sunt greu de găsit doar privind pe pagină, dar dacă adăugați acest lucru, vor apărea imediat.

Notă : Folosesc outline în loc de border , deoarece marginile ar putea adăuga lățimea elementului și pot deteriora aspectul. outline nu adaugă lățime.

 img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }

Fișiere Javascript asincrone

Paginile web pot fi un conglomerat de sisteme de management al conținutului și plugin-uri și cadre și cod pe care Ted (stând cu trei cabine peste) le-a scris în vacanță, deoarece site-ul era în funcțiune și se teme de șeful tău. Aflați ce se încarcă JavaScript asincron și ce nu vă poate ajuta să vă concentrați pe unde să îmbunătățiți performanța paginii.

 script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }

Elemente de eveniment Javascript

De asemenea, puteți evidenția elementele care au un atribut de eveniment JavaScript pentru a le refactoriza în fișierul dvs. JavaScript. M-am concentrat aici pe atributul OnMouseOver , dar funcționează pentru oricare dintre atributele evenimentului JavaScript.

 [OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }

Articole ascunse

Dacă trebuie să vedeți unde se află elementele dvs. ascunse sau intrările ascunse, le puteți afișa cu:

 [hidden], [type="hidden"] { display: block; }

Dar, cu toate aceste capacități uimitoare, crezi că trebuie să existe o captură. Cu siguranță, selectoarele de atribute trebuie să funcționeze numai când sunt marcate în Chrome sau în versiunile de noapte ale Fiery Foxes pe marginea unui Safari. Acest lucru este pur și simplu prea frumos pentru a fi adevărat. Și, din păcate, există o captură.

Dacă doriți să lucrați cu selectori de atribute în cel mai îndrăgit dintre browsere - adică IE6 - nu veți putea. (Este în regulă; lasă lacrimile să cadă. Fără judecăți.) Aproape peste tot în altă parte, ești gata să mergi. Selectoarele de atribute fac parte din specificația CSS 2.1 și, prin urmare, au fost în browsere pentru cea mai mare parte a unui deceniu.

Și astfel acești selectoare nu ar trebui să mai fie magice pentru tine, ci dezvăluite ca o tehnologie suficient de avansată. Sunt mai mult știință decât magie, iar acum că le cunoști cele mai adânci secrete, depinde de tine. Du-te și lucrează pe internet minuni misterioase ale științei.