Spleißen der DNA von HTML mit CSS-Attributselektoren
Veröffentlicht: 2022-03-10Die meiste Zeit meiner Karriere waren Attributselektoren mehr Magie als Wissenschaft. Ich starrte verblüfft auf das CSS für die Ausgabe eines Links in einem Druck-Stylesheet und verstand nichts. Ich kopierte es pflichtbewusst und fügte es in mein Druck-Stylesheet ein, dann rannte ich los, um das Projekt zu löschen, das der größte brennende Müllhaufen war.
Aber Sie müssen nicht mehr mit offenem Mund auf CSS-Attributselektoren starren. Am Ende dieses Artikels werden Sie sie verwenden, um Diagnosen auf Ihrer Website auszuführen, ansonsten unlösbare Probleme zu beheben und technologische Erfahrungen zu generieren, die so fortschrittlich sind, dass sie sich wie Magie anfühlen. Sie denken vielleicht, dass ich zu viel verspreche, und Sie haben Recht, aber sobald Sie die Macht der Attributauswahl verstanden haben, möchten Sie vielleicht selbst übertreiben.
Auf der einfachsten Ebene setzen Sie ein HTML-Attribut in eckige Klammern und nennen es einen Attributselektor wie folgt:
[href] { color: chartreuse; } Der Text jedes Elements, das ein href und keinen spezifischeren Selektor hat, wird jetzt auf magische Weise zu Chartreuse. Die Spezifität des Attributselektors ist die gleiche wie bei Klassen.
Hinweis : Weitere Informationen zur Cage-Match-CSS-Spezifität finden Sie unter „CSS-Spezifität: Dinge, die Sie wissen sollten“ oder, wenn Sie Star Wars mögen: „CSS-Spezifität Wars“.
Mit Attributselektoren können Sie jedoch noch viel mehr tun. Genau wie Ihre DNA verfügen sie über eine integrierte Logik, die Ihnen bei der Auswahl aller Arten von Attributkombinationen und -werten hilft. Anstatt nur einen exakten Abgleich vorzunehmen, wie es ein Tag-, Klassen- oder ID-Selektor tun würde, können sie jedes Attribut und sogar Zeichenfolgenwerte innerhalb von Attributen abgleichen.
Attributauswahl
Attributselektoren können eigenständig oder spezifischer sein, dh wenn Sie alle div -Tags auswählen müssen, die ein title Attribut hatten.
div[title]Sie können aber auch die Kinder von divs mit Titel auswählen, indem Sie wie folgt vorgehen:
div [title]Um es klar zu sagen, kein Leerzeichen zwischen ihnen bedeutet, dass sich das Attribut auf demselben Element befindet (genau wie ein Element und eine Klasse ohne Leerzeichen), und ein Leerzeichen zwischen ihnen bedeutet einen untergeordneten Selektor, dh die Auswahl der untergeordneten Elemente des Elements, die das Attribut haben.
Sie können bei der Auswahl von Attributen, einschließlich der Werte von Attributen, viel detaillierter vorgehen.
div[title="dna"]Das Obige wählt alle divs mit dem genauen Titel „dna“ aus. Ein Titel wie „DNA ist großartig“ oder „DNA-Mutation“ würde nicht ausgewählt werden, obwohl es Auswahlalgorithmen gibt, die jeden dieser Fälle (und mehr) handhaben. Zu denen kommen wir bald.
Hinweis : Anführungszeichen sind in den meisten Fällen in Attributselektoren nicht erforderlich, aber ich werde sie verwenden, weil ich glaube, dass dies die Klarheit erhöht und sicherstellt, dass Randfälle angemessen funktionieren.
Wenn Sie „DNA“ aus einer durch Leerzeichen getrennten Liste wie „meine schöne DNA“ oder „DNA mutieren macht Spaß!“ auswählen möchten. Sie können eine Tilde oder „Schnörkel“, wie ich es gerne nenne, vor dem Gleichheitszeichen hinzufügen.
div[title~="dna"]Sie können Titel wie „dontblamemeblamemydna“ oder „seine-Dummheit-ist-von-Erziehung-nicht-DNA“ auswählen und dann das Dollarzeichen $ verwenden, um das Ende eines Titels abzugleichen.
[title$="dna"]Verwenden Sie ein Caret-Zeichen, um die Vorderseite eines Attributwerts wie Titel von „DNA-Mutanten“ oder „DNA-Splicing-for-all“ abzugleichen.
[title^="dna"]Eine exakte Übereinstimmung ist zwar hilfreich, aber die Auswahl könnte zu eng sein, und die Caret-Front-Übereinstimmung könnte für Ihre Anforderungen zu breit sein. Beispielsweise möchten Sie möglicherweise keinen Titel „Genealogie“ auswählen, aber dennoch sowohl „Gen“ als auch „Gendaten“ auswählen. Das Pipe-Zeichen (oder der senkrechte Strich) ist genau das; es führt eine exakte Übereinstimmung durch, schließt jedoch ein, wenn auf die exakte Übereinstimmung ein Bindestrich folgt.
[title|="gene"]Schließlich gibt es einen vollständigen Suchattributoperator, der mit jeder Teilzeichenfolge übereinstimmt.
[title*="dna"]Aber verwenden Sie es mit Bedacht, da das Obige mit „Ich-mag-meine-DNA-mag-mein-Fleisch-selten“ sowie mit „Edna“, „Kidnapping“ und „Echidnas“ (etwas, was Edna wirklich nicht tun sollte) übereinstimmt. )
Was diese Attributselektoren noch leistungsfähiger macht, ist, dass sie stapelbar sind, sodass Sie Elemente mit mehreren Übereinstimmungsfaktoren auswählen können.
Aber Sie müssen a Tag finden, das einen Titel hat und dessen Klasse auf „Gene“ endet? Hier ist wie:
a[title][class$="genes"]Sie können nicht nur die Attribute eines HTML-Elements auswählen, sondern auch ihre mutierten Gene mit Hilfe von Pseudo-„Wissenschaft“ (d. h. Pseudo-Elemente und die Inhaltsdeklaration) drucken.
<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; }Der obige Code zeigt die Antwort auf einen der schlimmsten Witze, die je auf Hover geschrieben wurden (ja, ich habe ihn selbst geschrieben, und ja, es einen „Witz“ zu nennen, ist großzügig).
Das Letzte, was Sie wissen sollten, ist, dass Sie ein Flag hinzufügen können, um die Groß-/Kleinschreibung der Attributsuche zu ignorieren. Sie fügen vor der schließenden eckigen Klammer ein i hinzu.
[title*="DNA" i]Und somit würde es zu „dna“, „DNA“, „dnA“ und jeder anderen Variation passen.
Der einzige Nachteil dabei ist, dass das i nur in Firefox, Chrome, Safari, Opera und einigen wenigen mobilen Browsern funktioniert.
Nachdem wir nun gesehen haben, wie man mit Attributselektoren auswählt, schauen wir uns einige Anwendungsfälle an. Ich habe sie in zwei Kategorien eingeteilt: Allgemeine Verwendung und Diagnose .
Allgemeine Verwendungen
Stil nach Eingabetyp
Sie können die Eingabetypen unterschiedlich gestalten, z. B. E-Mail vs. Telefon.
input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }Telefonverbindungen anzeigen
Sie können eine Telefonnummer bei bestimmten Größen ausblenden und stattdessen einen Telefonlink anzeigen, um das Anrufen auf einem Telefon zu vereinfachen.
span.phone { display: none; } a[href^="tel"] { display: block; }Interne vs. externe Links, sicher vs. unsicher
Sie können interne und externe Links unterschiedlich behandeln und sichere Links anders gestalten als unsichere Links.
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); }Symbole herunterladen
Ein Attribut, das HTML5 uns gegeben hat, war „Download“, das dem Browser mitteilt, dass er, Sie haben es erraten, diese Datei herunterladen soll, anstatt zu versuchen, sie zu öffnen. Dies ist nützlich für PDFs und DOCs, auf die Sie zugreifen möchten, die Sie jedoch nicht sofort öffnen sollen. Es erleichtert auch den Arbeitsablauf für das Herunterladen vieler Dateien hintereinander. Der Nachteil des download -Attributs ist, dass es kein standardmäßiges visuelles Element gibt, das es von einem traditionelleren Link unterscheidet. Oft ist dies das, was Sie möchten, aber wenn dies nicht der Fall ist, können Sie Folgendes tun.
a[download]:after { content: url(download-arrow.svg); }Sie können Dateitypen auch mit verschiedenen Symbolen wie PDF vs. DOCX vs. ODF usw. kommunizieren.
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); }Sie können auch sicherstellen, dass sich diese Symbole nur auf herunterladbaren Links befinden, indem Sie die Attributauswahl stapeln.
a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }Veralteten/veralteten Code überschreiben oder erneut anwenden
Wir alle sind auf alte Websites mit veraltetem Code gestoßen, aber manchmal ist das Aktualisieren des Codes nicht die Zeit wert, die für sechstausend Seiten erforderlich wäre. Möglicherweise müssen Sie einen vor HTML5 als Attribut implementierten Stil überschreiben oder sogar erneut anwenden.
<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }Überschreiben Sie bestimmte Inline-Stile
Manchmal werden Sie auf Inline-Stile stoßen, die die Arbeit verfälschen, aber sie stammen aus Code, auf den Sie keinen Einfluss haben. Es sollte gesagt werden, dass es ideal wäre, wenn Sie sie ändern könnten, aber wenn Sie dies nicht können, finden Sie hier eine Problemumgehung.
Hinweis : Dies funktioniert am besten, wenn Sie die genaue Eigenschaft und den Wert kennen, die Sie überschreiben möchten, und wenn Sie möchten, dass sie überschrieben werden, wo immer sie erscheinen.
In diesem Beispiel wird der Rand des Elements in Pixel festgelegt, er muss jedoch erweitert und in em s festgelegt werden, damit das Element ordnungsgemäß neu angepasst werden kann, wenn der Benutzer die Standardschriftgröße ändert.
<divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; } Hinweis : Dieser Ansatz sollte mit äußerster Vorsicht verwendet werden, da Sie, wenn Sie diesen Stil jemals überschreiben müssen, in einen !important Krieg geraten und Kätzchen sterben werden.
Dateitypen anzeigen
Die Liste der akzeptablen Dateien für eine Dateieingabe ist standardmäßig unsichtbar. Normalerweise verwenden wir ein Pseudo-Element, um sie anzuzeigen, und obwohl Sie Pseudo-Elemente bei den meisten input Tags (oder überhaupt in Firefox oder Edge) nicht verwenden können, können Sie sie bei Dateieingaben verwenden.
<input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }HTML-Akkordeonmenü
Die wenig publizierten details und das summary Tag-Duo sind eine Möglichkeit, erweiterbare/Akkordeon-Menüs nur mit HTML zu erstellen. Details umschließen sowohl das summary -Tag als auch den Inhalt, den Sie anzeigen möchten, wenn das Akkordeon geöffnet ist. Durch Klicken auf die Zusammenfassung wird das detail -Tag erweitert und ein offenes Attribut hinzugefügt. Das offene Attribut macht es einfach, ein offenes details -Tag anders als ein geschlossenes details -Tag zu gestalten.
<details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details> details[open] { background-color: hotpink; }Links drucken
Das Anzeigen von URLs in Druckstilen führte mich auf diesen Weg zum Verständnis von Attributselektoren. Sie sollten jetzt wissen, wie Sie es selbst konstruieren können. Sie wählen einfach alle a -Tags mit einem href aus, fügen ein Pseudo-Element hinzu und drucken sie mit attr() und content .
a[href]:after { content: " (" attr(href) ") "; }Benutzerdefinierte QuickInfos
Das Erstellen von benutzerdefinierten Tooltips macht Spaß und ist mit Attributselektoren einfach (okay, Spaß, wenn Sie ein Nerd wie ich sind, aber so oder so einfach).
Hinweis : Dieser Code sollte Sie in die allgemeine Umgebung bringen, aber je nach Umgebung Ihrer Website und ob Sie einen besseren Geschmack als ich haben oder nicht, müssen möglicherweise einige Änderungen an Abstand, Polsterung und Farbschema vorgenommen werden.
[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; }Zugriffsschlüssel
Eines der großartigen Dinge am Web ist, dass es viele verschiedene Optionen für den Zugriff auf Informationen bietet. Ein selten verwendetes Attribut ist die Möglichkeit, einen accesskey , sodass auf dieses Element direkt über eine Tastenkombination und den durch den accesskey festgelegten Buchstaben zugegriffen werden kann (die genaue Tastenkombination hängt vom Browser ab). Es gibt jedoch keine einfache Möglichkeit, festzustellen, welche Schlüssel auf einer Website festgelegt wurden.
Der folgende Code zeigt diese Schlüssel auf :focus . Ich verwende on hover nicht, da die meisten Leute, die den accesskey benötigen, diejenigen sind, die Probleme mit der Maus haben. Sie können dies als zweite Option hinzufügen, aber stellen Sie sicher, dass dies nicht die einzige Option ist.
a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }Diagnose
Diese Optionen sollen Ihnen helfen, Probleme entweder während des Build-Prozesses oder lokal zu identifizieren, während Sie versuchen, Probleme zu beheben. Wenn Sie diese auf Ihrer Produktionsseite platzieren, werden Ihren Benutzern Fehler auffallen.
Audio ohne Steuerelemente
Ich verwende das audio -Tag nicht allzu oft, aber wenn ich es verwende, vergesse ich oft, das Attribut " controls einzufügen. Das Ergebnis: Es wird nichts angezeigt. Wenn Sie in Firefox arbeiten, kann Ihnen dieser Code dabei helfen, herauszufinden, ob Sie ein Audioelement versteckt haben oder ob die Syntax oder ein anderes Problem verhindert, dass es angezeigt wird (es funktioniert nur in Firefox).
audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }Kein Alt-Text
Bilder ohne Alt-Text sind ein Alptraum für Logistik und Zugänglichkeit. Sie sind schwer zu finden, wenn Sie nur auf die Seite schauen, aber wenn Sie dies hinzufügen, werden sie sofort angezeigt.
Hinweis : Ich verwende outline anstelle von border , da Rahmen die Breite des Elements erhöhen und das Layout durcheinander bringen könnten. outline fügt keine Breite hinzu.
img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }Asynchrone Javascript-Dateien
Webseiten können ein Konglomerat aus Content-Management-Systemen und Plugins und Frameworks und Code sein, den Ted (der drei Kabinen weiter sitzt) im Urlaub geschrieben hat, weil die Seite nicht erreichbar war und er Angst vor Ihrem Chef hat. Wenn Sie herausfinden, was JavaScript asynchron lädt und was nicht, können Sie sich darauf konzentrieren, wo Sie die Seitenleistung verbessern können.
script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }Javascript-Ereigniselemente
Sie können auch Elemente mit einem JavaScript-Ereignisattribut hervorheben, um sie in Ihre JavaScript-Datei umzugestalten. Ich habe mich hier auf das OnMouseOver Attribut konzentriert, aber es funktioniert für alle JavaScript-Ereignisattribute.
[OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }Versteckte Gegenstände
Wenn Sie sehen möchten, wo sich Ihre versteckten Elemente oder versteckten Eingaben befinden, können Sie sie anzeigen mit:
[hidden], [type="hidden"] { display: block; }Aber bei all diesen erstaunlichen Fähigkeiten denken Sie, dass es einen Haken geben muss. Sicherlich müssen Attributselektoren nur funktionieren, wenn sie in Chrome oder in den nächtlichen Builds von Fiery Foxes on the Edge of a Safari gekennzeichnet sind. Das ist einfach zu schön, um wahr zu sein. Und leider gibt es einen Haken.
Wenn Sie mit Attributselektoren in diesem beliebtesten aller Browser arbeiten wollen – also IE6 – werden Sie das nicht können. (Es ist okay; lass die Tränen fallen. Keine Urteile.) So ziemlich überall sonst bist du gut zu gehen. Attributselektoren sind Teil der CSS 2.1-Spezifikation und befinden sich daher seit fast einem Jahrzehnt in Browsern.
Und so sollten diese Selektoren für Sie nicht länger magisch sein, sondern sich als ausreichend fortgeschrittene Technologie enthüllen. Sie sind mehr Wissenschaft als Magie, und jetzt, da Sie ihre tiefsten Geheimnisse kennen, liegt es an Ihnen. Gehen Sie hinaus und vollbringen Sie mysteriöse Wunder der Wissenschaft im Internet.