Foundation 5: Visibility-Klasse macht Inline- zu Block-Element

Im Frontend-Framework Foundation sind die vorhandenen Sichtbarkeits-Klassen oft recht hilfreich, um Elemente an den Breakpoints ein- und auszublenden. Mir ist bei der Arbeit damit ein Fall untergekommen, wo das Konzept nicht funktioniert.

Es gibt vielleicht Situationen, wo ihr einen Teil eines statischen Textes bei gewissen Breakpoints ausblenden möchtet. Nehmen wir einmal folgenden Code an:

<p>Das Produkt ist super toll<span class="show-for-large-up"> und hat extrem viele gute Eigenschaften, die wir hier gerne alle aufzählen wollen ...</span>!</p>

Die Klasse show-for-large-up ist in Foundation 5 wie folgt definiert:

@media only screen {
  .show-for-large-up {
    display: none !important;
  }
}
...
@media only screen and (min-width: 64.063em) {
  .show-for-large-up {
    display: inherit !important;
  }
}

Anstatt die display-Eigenschaft zum Einblenden an diesem Breakpoint auf block zu setzen, wird sie durch die Visibility-Klasse auf inherit gesetzt. Das eigentlich als Unsitte bekannte !important wird hinzugefügt, damit diese Regel auf jeden Fall greift, da die Klassendefinition ggf. nicht spezifisch genug ist. inherit besagt, dass das Element den Wert der display-Eigenschaft vererbt bekommen soll.

In diesem Fall ist dies ein Paragraph-Tag, welcher im Standard ein Block-Element ist und daher vererbt dieses Element dem inneren span dann die Eigenschaft display: block;. Aus diesem Grund wird der Text „gesprengt“.

Beispiel

Das Produkt ist super toll und hat extrem viele gute Eigenschaften, die wir hier gerne alle aufzählen wollen …!

Das ist in diesem Fall nicht das gewünschte Ergebnis, denn eigentlich soll der Text weiterhin im Textfluss (inline) stehen.

Lösungen

Wenn man auf dieses Problem stößt, gibt es mehrere Lösungswege:

1. Eigene Foundation-ähnliche Klasse

Man könnte auf die Nutzung der Foundation-Klasse zugunsten einer eigenen verzichten, die dann das gewünschte Verhalten erhält.

@media only screen and (min-width: 64.063em) {
  .inline-for-large-up { 
    display: inline !important;
  }
}

2. Verhalten der Klasse in der bestehenden CSS-Struktur nachahmen

Betrachtet man obiges Beispiel haben wir nur folgenden Selektor zur Verfügung, um das span zu stylen: p > span. Die Media-Query könnte dann innerhalb der Regel stehen. Das Beispiel ist SCSS-Code.

p > span {
  display: none;

  @media #{$large-up} {
    display: inline;
  }
}

Ich nutze hier in der Media-Query Definition die Standard-Variable $large-up von Foundation, um auf die Breakpoint-Einstellungen aus den Defaults bzw. Settings zurückzugreifen.

Kommentar abgeben

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.