css mit Adi Prinz

::backdrop bei einem Dialogfenster

Ein Dialogfenster wird mit dem HTML-Element <dialog> erstellt. Wird es mit der JavaScript-Methode showModal() geöffnet, erzeugt der Browser dahinter ein ::backdrop.

<button type="button" id="open-dialog">
  Dialog öffnen
</button>

<dialog id="example-dialog">
  <h4>Beispiel für ::backdrop</h4>

  <p>
    Hinter diesem modalen Dialog wird das
    ::backdrop angezeigt.
  </p>

  <form method="dialog">
    <button type="submit">
      Dialog schließen
    </button>
  </form>
</dialog>
    

Hintergrundfläche gestalten

Das Pseudoelement wird direkt an den Selektor des Dialogfensters angefügt. Häufig wird eine halbtransparente dunkle Hintergrundfarbe verwendet.

#example-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.65);
}
    

Mit backdrop-filter kann der sichtbare Seiteninhalt hinter dem Dialog zusätzlich weichgezeichnet werden.

#example-dialog::backdrop {
  background-color: rgba(33, 37, 41, 0.65);
  backdrop-filter: blur(4px);
}
    

Dialog mit JavaScript öffnen

Damit ein modales Dialogfenster und sein ::backdrop angezeigt werden, wird showModal() verwendet.

const dialog = document.getElementById("example-dialog");
const openButton = document.getElementById("open-dialog");

openButton.addEventListener("click", () => {
  dialog.showModal();
});
    

Der Schließen-Button befindet sich in einem Formular mit method="dialog". Dadurch wird das Dialogfenster ohne zusätzliches JavaScript geschlossen.

Dialog durch Klick auf den Hintergrund schließen

Das ::backdrop ist kein gewöhnliches HTML-Element. Deshalb kann dafür kein eigener Event-Listener eingerichtet werden. Der Klick wird stattdessen am Dialogfenster ausgewertet.

dialog.addEventListener("click", (event) => {
  if (event.target === dialog) {
    dialog.close();
  }
});
    

::backdrop im Vollbildmodus

Auch ein Element, das mit der Fullscreen API im Vollbildmodus angezeigt wird, besitzt ein ::backdrop.

#fullscreen-example::backdrop {
  background-color: #212529;
}
    

const fullscreenElement =
  document.getElementById("fullscreen-example");

const openFullscreenButton =
  document.getElementById("open-fullscreen");

const closeFullscreenButton =
  document.getElementById("close-fullscreen");

openFullscreenButton.addEventListener("click", () => {
  fullscreenElement.requestFullscreen();
});

closeFullscreenButton.addEventListener("click", () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  }
});
    

Geeignete CSS-Eigenschaften

Das ::backdrop kann ähnlich wie eine große Fläche hinter dem geöffneten Element gestaltet werden.

In der Praxis reichen meistens eine halbtransparente background-color und eventuell ein backdrop-filter aus.

Wichtige Hinweise

• ::backdrop wird nur bei Elementen in der obersten Darstellungsebene des Browsers erzeugt.
• Bei einem <dialog> erscheint es nur nach showModal(), nicht nach show().
• Das Pseudoelement ist kein eigenes HTML-Element.
• Ein modales Dialogfenster sollte immer über Tastatur und Schaltfläche geschlossen werden können.
• Der Hintergrund muss genügend Kontrast erzeugen, darf den Dialoginhalt aber nicht beeinträchtigen.

Schreibweise der Pseudoelemente

Pseudoelemente werden in modernem CSS mit zwei Doppelpunkten :: geschrieben. Sie werden direkt an einen Selektor angefügt.

selektor::pseudoelement {
  eigenschaft: wert;
}
    

Beispiele:

p::first-letter {
  font-size: 2em;
}

li::marker {
  color: red;
}

input::placeholder {
  color: grey;
}
    

Wichtige Hinweise

• Pseudoelemente werden in modernem CSS mit zwei Doppelpunkten :: geschrieben.
• Sie werden an einen Selektor angefügt, beispielsweise p::first-line.
• Nicht jedes Pseudoelement kann mit allen CSS-Eigenschaften gestaltet werden.
• ::before und ::after benötigen normalerweise die Eigenschaft content, damit sie sichtbar werden.
• Erzeugte Inhalte sollten keine wichtigen Informationen enthalten, da ihre Ausgabe durch Hilfstechnologien unterschiedlich sein kann.
• Einige Pseudoelemente gelten nur für bestimmte HTML-Elemente oder Zustände, beispielsweise ::placeholder bei Eingabefeldern oder ::backdrop bei Elementen im Top Layer.