Ein paar CSS-Tricks für HTML-Dialogelemente

In letzter Zeit experimentiere ich mit dem HTML-Element <dialog>. Es ist sehr praktisch für native Dialoge ohne viel JavaScript.

Wenn Sie schnell sehen möchten, wie es funktioniert, können Sie „Meine Spiele Jumblie“ besuchen und oben auf die Zahnradschaltfläche „Einstellungen“ klicken.

Okay! Hier sind ein paar Tipps, die Ihnen bei der Implementierung Ihres eigenen <dialog> auf Ihrer Website nützlich sein könnten!

Unscharfer<dialog>Hintergrund

::backdrop CSS-Pseudoelement ist nicht auf <dialog> beschränkt. Sie können es so gestalten, wie Sie möchten, aber wenn Sie es einfach halten möchten, können Sie einen Unschärfefilter wie diesen hinzufügen, um den Hintergrund leicht unscharf zu machen:

<code>dialog::backdrop {
  backdrop-filter: blur(2px);
}</code>

Natürlich können Sie auch andere Attribute hinzufügen, wie zum Beispiel background-color. Wenn Sie tiefer in dieses Thema eintauchen möchten, habe ich auch einen Artikel über das Stylen von Pseudoelementen mit JavaScript geschrieben!

<dialog>Deaktivieren Sie das Scrollen der Seite beim Öffnen von

Dies ist ein cooler Spezialselektor. Wenn <dialog> aktiviert ist, wird dem Tag ein open-Attribut hinzugefügt.

<code>body:has(dialog[open]) {
  overflow: hidden;
}</code>

Dieser Selektor prüft, ob body ein open mit dem Attribut <dialog> enthält. Wenn ja, deaktivieren Sie das Scrollen der Seite! Das Seltsame ist natürlich, dass Sie bei einem großen Dialog möglicherweise das Scrollen darin separat aktivieren müssen. Dadurch wird jedoch verhindert, dass sich die Seite hinter dem Dialog beim Scrollen bewegt.

Das ist es! Hoffe das hilft!

Das obige ist der detaillierte Inhalt vonEin paar CSS-Tricks für HTML-Dialogelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!