So verwenden Sie CSS-Attributselektoren zum Spleißen von HTML-DNA

CSS-Attributselektoren sind großartig. Sie können Ihnen dabei helfen, das Hinzufügen von Unmengen an Klassennamen zu vermeiden und auf Probleme in Ihrem Code hinzuweisen. Aber keine Panik: Obwohl Attributselektoren komplex und leistungsstark sind, sind sie leicht zu erlernen und zu verwenden. In diesem Artikel erläutern wir ihre Funktionsweise und geben Ihnen einige Tipps zu ihrer Verwendung.

Im Allgemeinen verwenden wir es am häufigsten, indem wir HTML-Attribute in eckige Klammern setzen. Dies wird als Attributselektor bezeichnet. Zum Beispiel:

[href] {
    Farbe: Chartreuse;
}

Jedes HTML-Element mit einem href-Attribut und keinem spezifischeren Selektor wird jetzt gelbgrün. Die Eigenschaften von Attributselektoren sind die gleichen wie die von Klassenselektoren

Aber mit Attributselektoren können Sie noch viel mehr tun. Genau wie Ihre DNA verfügen sie über eine eingebettete Logik, die Ihnen bei der Auswahl verschiedener Attributkombinationen und -werte hilft. Sie können nicht nur mit exakten Tag-, Klassen- oder ID-Selektoren übereinstimmen, sondern auch mit jedem Attribut oder sogar Zeichenfolgenwert in einer Eigenschaft.

Attributauswahl

Attributselektoren können allein stehen oder spezifischer sein. Wir müssen beispielsweise alle Div-Tags auswählen, die über ein Titelattribut verfügen.

div[title]

Sie können die untergeordneten Elemente des Div auch mit dem Titelattribut auswählen, indem Sie Folgendes tun:

div [title]

Es sollte klar sein, dass der Bereich in der Mitte den Hintergrundselektor darstellt, der die untergeordneten Elemente des Elements mit diesem Attribut auswählt. Wir können auch präziser vorgehen und den gewünschten Attributwert auswählen:

div[title="dna"]

Normalerweise benötigen Attributselektoren keine Anführungszeichen, ich verwende sie jedoch, da ich glaube, dass dadurch die Lesbarkeit verbessert und eine gute Kompatibilität gewährleistet wird.

Wenn Sie aus der durch Leerzeichen getrennten Liste Attributwerte auswählen möchten, die das Zeichen „dna“ enthalten, wie etwa „my beautiful dna“ oder „mutating dna is fun!“, können Sie vor dem Gleichheitszeichen eine Tilde `~` hinzufügen:

div[title~="dna"]

Sie können einen Titel wie „schieb mir nicht die Schuld an meiner DNA“ oder „seine Dummheit liegt an meiner Erziehung, nicht an meiner DNA“ wählen und dann ein Dollarzeichen `$` verwenden, um das Ende des Titels anzupassen:

[title$="dna"]

Um den Anfang eines Eigenschaftswerts abzugleichen, beispielsweise die Überschriften „dnamutants“ oder „dna-splicing-for-all“, verwenden Sie das Zirkumflex-Zeichen „^“.

[title^="dna"]

Wenn Sie einen Wert am Anfang eines vollständigen Wortes abgleichen möchten, können Sie dazu das Pipe-Zeichen verwenden. Sie möchten beispielsweise nicht den Titel „Genealogie“, aber dennoch „Gen“ und „Gendaten“ auswählen:

[title|="gene"]

Es gibt auch einen Fuzzy-Suchattributoperator „*“, der mit jeder Teilzeichenfolge übereinstimmt:

[title*="dna"]

Als Letztes sollten Sie wissen, dass Sie ein Flag hinzufügen können, um bei der Eigenschaftensuche die Groß-/Kleinschreibung nicht zu berücksichtigen. Fügen Sie vor der schließenden eckigen Klammer ein „i“ hinzu:

[title*="DNA" i]

Was diese Attributselektoren noch leistungsfähiger macht, ist ihre Stapelbarkeit, die es Ihnen ermöglicht, Elemente mit mehreren Übereinstimmungsfaktoren auszuwählen.

Wenn Sie beispielsweise ein Tag suchen müssen, das ein Titelattribut und eine Klasse hat, die mit „Genes“ endet, wie schreiben Sie es?

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

Wir können nicht nur Attribute von HTML-Elementen auswählen, sondern auch Pseudo-„Wissenschaft“ (d. h. Pseudo-Elemente und Inhaltsdeklarationen) verwenden, um Text auszudrucken:

<span class="joke" title="Genbearbeitung!">Was ist das Erste, was ein Biotechnologiejournalist tut, nachdem er den ersten Entwurf eines Artikels fertiggestellt hat?</span>

.Witz:Hover:Nach {
   Inhalt: "Antwort:" attr(Titel);
   Anzeige: Block;
}

Der obige Code zeigt eine benutzerdefinierte Zeichenfolge an, wenn Sie mit der Maus darüber fahren.

Nachdem wir nun gesehen haben, wie mit Attributselektoren Auswahlen getroffen werden, schauen wir uns einige Anwendungsfälle an. Ich habe sie in zwei Kategorien unterteilt: allgemeine Nutzungstipps und Diagnose.

Allgemeine Nutzungstipps

Einstellungen für den Eingabetyp

Sie können den Eingabetyp unterschiedlich einstellen, beispielsweise E-Mail oder Telefon:

Eingabe[Typ="E-Mail"] {
   Farbe: Papayapeitsche;
}
Eingabe[Typ="tel"] {
   Farbe: Distel;
}

Link zur Mobilnummer anzeigen

Sie können Telefonnummern in bestimmten Größen ausblenden und einen Telefonlink anzeigen, um das Anrufen am Telefon zu vereinfachen:

span.phone {
   Anzeige: keine;
}
a[href^="tel"] {
   Anzeige: Block;
}

Interne Links vs. externe Links, sichere Links vs. nicht sichere Links

Sie können interne und externe Links unterschiedlich behandeln und sichere Links anders setzen als unsichere Links:

a[href^="http"]{
   Farbe: Biskuit;
}
a:nicht([href^="http"]) {
  Farbe: dunkellachs;
}
 
a[href^="http://"]:nach {
   Inhalt: URL (Unlock-Icon.svg);
}
a[href^="https://"]:nach {
   Inhalt: URL (Schlosssymbol.svg);
}

Download-Symbol

Eines der Attribute, die uns HTML5 gibt, ist „Download“, das dem Browser sagt, dass er, Sie haben es erraten, die Datei herunterladen soll, anstatt zu versuchen, sie zu öffnen. Dies ist nützlich für PDF- und DOC-Dateien, auf die andere zugreifen, die sie aber nicht sofort öffnen sollen. Darüber hinaus wird der Arbeitsablauf beim aufeinanderfolgenden Herunterladen einer großen Anzahl von Dateien dadurch erheblich vereinfacht. Der Nachteil des Download-Attributs besteht darin, dass es keinen visuellen Standardeffekt gibt, der es von einem herkömmlicheren Link unterscheidet. Normalerweise ist dies das, was Sie möchten. Wenn dies jedoch nicht der Fall ist, können Sie beispielsweise Folgendes tun:

a[download]:nach { 
   Inhalt: URL (download-arrow.svg);
}

Sie können auch unterschiedliche Symbole (wie PDF vs. DOCX vs. ODF usw.) verwenden, um den Dateityp mitzuteilen:

a[href$="pdf"]:nach {
   Inhalt: URL (pdf-icon.svg);
}
a[href$="docx"]:nach {
   Inhalt: URL (docx-icon.svg);
}
a[href$="odf"]:nach {
   Inhalt: URL (Open-Office-Icon.svg);
}

Sie können auch sicherstellen, dass diese Symbole nur auf herunterladbaren Links angezeigt werden, indem Sie Attributselektoren stapeln:

a[download][href$="pdf"]:nach {
   Inhalt: URL (pdf-icon.svg);
}

Überschreiben oder Wiederverwenden von veraltetem/veraltetem Code

Wir alle kennen alte Websites mit veraltetem Code. Vor HTML5 mussten Sie möglicherweise Stile, die als Attribute implementiert wurden, überschreiben oder sogar erneut anwenden:

<div bgcolor="#000000" color="#FFFFFF">Alte, löchrige Gene</div>
div[bgcolor="#000000"] { /*überschreiben*/
   Hintergrundfarbe: #222222 !wichtig;
}
div[color="#FFFFFF"] { /*erneut anwenden*/
   Farbe: #FFFFFF;
}

Dateitypen anzeigen

Standardmäßig ist die Liste der zulässigen Dateien für den Dateityp-Eingabetag nicht sichtbar. Normalerweise verwenden wir Pseudoelemente, um sie verfügbar zu machen. Und obwohl Sie bei den meisten Eingabe-Tags (oder in Firefox oder Edge) keine Pseudoelemente verwenden können, können Sie sie bei Dateieingaben verwenden:

<Eingabetyp="Datei" akzeptieren="pdf,doc,docx">
[akzeptieren]:nach {
   Inhalt: „Akzeptierte Dateitypen: " attr(accept);
}

HTML-Akkordeonmenü

Mit den Tags „Details“ und „Zusammenfassung“ können Sie ein erweiterbares/Akkordeon-Menü nur mit HTML erstellen. Das Tag „Details“ enthält das Tag „Zusammenfassung“ und den Inhalt, der angezeigt werden soll, wenn das Akkordeon geöffnet wird. Wenn Sie auf Zusammenfassung klicken, wird das Tag „Details“ erweitert und das Attribut „open“ hinzugefügt. Wir können das Tag „open“ ganz einfach mit dem Attribut „open“ formatieren:

<Details>
  <summary>Liste der Gene</summary>
    Roddenberry
    Hackman
    Wilder
    Kelly
    Luen Yang
    Simmons
</details>
Details[öffnen] {
   Hintergrundfarbe: Hotpink;
}

Link drucken

a[href]:nach {
   Inhalt: " (" attr(href) ") ";
}

Benutzerdefinierte Tools

Das Erstellen benutzerdefinierter Tooltips ist mithilfe von Attributselektoren ganz einfach und macht Spaß:

[Titel] {
  Position: relativ;
  Anzeige: Block;
}
[Titel]:hover:nach {
  Inhalt: attr(Titel);
  Farbe: Pink;
  Hintergrundfarbe: schieferblau;
  Anzeige: Block;
  Polsterung: .225em .35em;
  Position: absolut;
  rechts: -5px;
  unten: -5px;
}

Diagnose

Mithilfe dieser Optionen können wir Probleme während des Build-Prozesses oder lokal beim Beheben dieser Probleme leichter identifizieren. Das Platzieren dieser Inhalte auf unserer Produktionssite würde Benutzer Fehlern aussetzen.

Audio ohne Steuerungsattribut

Ich verwende den Audio-Tag nicht oft, aber wenn ich ihn verwende, vergesse ich häufig, das Controls-Attribut einzuschließen. Ergebnis: Es wird nichts angezeigt. Wenn Sie in Firefox arbeiten und das Audioelement ausgeblendet haben oder es aufgrund der Syntax oder eines anderen Problems nicht angezeigt wird (funktioniert nur in Firefox), kann dieser Code bei der Behebung des Problems hilfreich sein:

audio:nicht([Steuerung]) {
  Breite: 100px;
  Höhe: 20px;
  Hintergrundfarbe: Chartreuse;
  Anzeige: Block;
}

Kein Alternativtext

Bilder ohne Alt-Attribute sind ein Albtraum für die Barrierefreiheit. Sie sind schwer zu finden, wenn man sich die Seite nur ansieht, aber wenn man sie hinzufügt, fallen sie auf (und wenn das Seitenbild nicht geladen werden kann, kann der Alt-Text besser erklären, was das Bild tut):

img:not([alt]) { /* kein Alt-Attribut */ 
  Umriss: 2em solides Chartreuse; 
}
img[alt=""] { /* alt-Attribut ist leer */ 
  Umriss: 2em durchgehendes Kadettenblau; 
}

Asynchrone JavaScript-Dateien

Eine Webseite kann eine Sammlung von Content-Management-Systemen und Plug-Ins, Frameworks und Code sein. Ted schrieb im Urlaub, dass die Feststellung, welches JavaScript asynchron geladen wird und welches nicht, Ihnen dabei helfen kann, sich auf die Verbesserung der Seitenleistung zu konzentrieren:

script[src]:nicht([async]) {
  Anzeige: Block;
  Breite: 100 %;
  Höhe: 1em;
  Hintergrundfarbe: rot;
}
Skript:nach {
  Inhalt: attr(src);
}

Javascript-Ereignisse

Sie können Elemente auch mit JavaScript-Ereignisattributen hervorheben. Ich verwende hier das OnMouseOver-Attribut als Beispiel, aber es funktioniert mit jedem JavaScript-Ereignisattribut:

[BeiMouseOver] {
   Farbe: Burlywood;
}
[OnMouseOver]:nach {
   Inhalt: "JS: " attr(OnMouseOver);
}

Zusammenfassen

Oben ist die Methode, die ich Ihnen vorgestellt habe, um CSS-Attributselektoren zum Spleißen von HTML-DNA zu verwenden. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!