reines CSS -Tooltips

Viele Websites verwenden immer noch JavaScript, um Tooltips zu erstellen. Tats?chlich ist es jedoch einfacher, CSS zu verwenden. Die einfachste L?sung besteht darin, die Dateneigenschaften im HTML -Code zu verwenden, um Tooltip -Text wie data-tooltip="…" bereitzustellen. Mit diesem Tag k?nnen Sie Folgendes in CSS einfügen, um den Tooltip -Text in der Funktion attr() anzuzeigen:

.tooltip::after {
  content: attr(data-tooltip);
}

Es ist sehr einfach und klar, oder? Natürlich ist mehr Code ben?tigt, um die Tooltips tats?chlich zu stylen, aber keine Sorge, es gibt eine gro?artige reine CSS -Bibliothek speziell für diesen Zweck namens Hint.CSS.

(Missbrauch) benutzerdefinierte Datenattribute und attr () Funktion

Wir haben attr() für Tooltips verwendet, aber es gibt einige andere Anwendungsf?lle. Wenn Sie Dateneigenschaften kombinieren, k?nnen Sie Miniaturbilder mit Titeln und Beschreibungen mit nur einer Zeile von HTML -Code erstellen:

<a class="caption" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="禿鷲" data-description="...">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg"  class="lazy" alt="8 Clever Tricks with CSS Functions " />
</a>

Sie k?nnen jetzt die Funktion attr() verwenden, um den Titel und die Beschreibung anzuzeigen:

.caption::after {
  content: attr(data-title);
  ...
}

Dies ist ein funktionierendes Beispiel für eine Miniaturansicht mit hover -Anzeigeanimationstitel: [CodePen -Beispiel -Link] (Annahme, dass CodePen -Link hier eingefügt werden sollte)

Hinweis: Der generierte Inhalt kann Probleme mit der Zug?nglichkeit haben. Dieser Artikel über die Unterstützung der Zug?nglichkeit für CSS -generierte Inhalte bietet eine nützliche Interpretation dieses Themas.

Sie k?nnen CSS -Z?hler verwenden, was wie Magie erscheint. Es ist nicht das bekannteste Feature, und die meisten Menschen denken vielleicht, dass es es nicht sehr gut unterstützt, aber tats?chlich unterstützt jeder Browser CSS-Z?hler: [Kann ich CSS-Z?hler verwenden?] (Angenommen, kann ich verwendet werden, wenn ich verwenden sollte, wenn ich eingesetzt werden sollte, wenn ich eingesetzt werden sollte, eingesetzt werden sollte, Hier Link)

W?hrend Sie keine CSS -Z?hler für bestellte Listen verwenden sollten (<ol>), eignen sich Z?hler hervorragend für Paginierung oder Anzeigen von Zahlen unter Elementen in der Galerie. Sie k?nnen auch die Anzahl der ausgew?hlten Elemente z?hlen, was sehr beeindruckend ist, wenn man bedenkt, dass Sie nur sehr wenig Code ben?tigen (und kein JavaScript): [CodePen -Beispiel -Link] (vorausgesetzt, dass der CodePen -Link hier eingefügt werden sollte).

CSS -Z?hler eignen sich auch hervorragend zum dynamischen ?ndern von Zahlen in der Projektliste, die durch Drag & Drop: [CodePen -Beispiel -Link] neu bestellt werden k?nnen (vorausgesetzt, der CodePen -Link sollte hier eingefügt werden).

Denken Sie wie beim letzten Beispiel daran, dass der generierte Inhalt Probleme mit der Zug?nglichkeit aufweist.

Mit der Ver?ffentlichung von iOS 7 bringt Apple einen ?frostierten Glas“ -Effekt - transparente, verschwommene Elemente, die wie gefrostete Glasfenster aussehen. Inspiriert von Apples Implementierung erschien dieser Effekt an vielen Orten. Wenn Sie diesen Effekt reproduzieren, ist es etwas schwierig, bevor Sie einen CSS -Filter haben. Sie müssen ein verschwommenes Bild verwenden, um einen gefrosteten Glasffekt zu erzeugen. Jetzt unterstützen fast alle gro?en Browser CSS -Filter vollst?ndig, sodass es viel einfacher ist, diesen Effekt zu reproduzieren. [Kann ich CSS-Filter verwenden?] (Angenommen, ich kann hier Link verwenden)

In Zukunft k?nnen wir die Funktionen

verwenden, um ?hnliche Effekte zu erzielen, aber diese beiden Funktionen werden derzeit nur von Safari unterstützt. backdrop-filter filter()

Normalerweise geben Sie eine JPEG- oder PNG -Datei als Hintergrundbild oder m?glicherweise einen Gradienten an. Aber wussten Sie, dass Sie mithilfe der Funktion

als Hintergrundbild verwenden k?nnen? Derzeit wird die element() -Funktion nur von Firefox unterstützt: [Kann ich CSS-Elementfunktion verwenden?] (Angenommen, die Link kann ich hier einfügen) <div> element() Die M?glichkeiten sind nahezu unbegrenzt, hier ist ein Beispiel von MDN.

intelligentere Gitter flüssiges Netz ist eine gro?artige Sache, aber es gibt einige ernsthafte Probleme. Zum Beispiel ist es nicht m?glich, den Abstand zwischen oberer und Boden gleich zu machen wie der Abstand zwischen links und rechts. Die Markierung ist auch sehr verwirrend, abh?ngig von dem von Ihnen verwendeten Netzsystem. Selbst Flexbox selbst ist nicht die endgültige L?sung, sondern die

eine bequeme Funktion, die Sie auf jeden Fall verwenden sollten. [Kann ich berechnen?] (Angenommen, ich kann den Link verwenden, sollte hier eingefügt werden) calc() calc()

Ein weiterer Anwendungsfall für eine Funktion besteht darin, Elemente an festen Positionen auszurichten. Wenn Sie beispielsweise einen Inhaltsverpackung links und rechts mit Flüssigkeitsabstand haben und die festen Elemente in diesem Wrapper genau ausrichten m?chten, haben Sie es schwer ? Mit

k?nnen Sie relative und absolute Werte kombinieren, um Elemente perfekt auszurichten: calc() calc()

.tooltip::after {
  content: attr(data-tooltip);
}