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

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

25. November 2018

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:

 

Markup

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

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

 

CSS
@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 tollund 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.

 

CSS
@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.

 

CSS
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. Noch Fragen? Wir helfen gerne!

SIE KÖNNEN SICH BEI UNS BEDANKEN!

Sofern Ihnen der Artikel geholfen hat, können Sie sich mit wenig Aufwand revanchieren!

 

Bitte hinterlassen Sie uns eine positive Bewertung.

 

Falls Sie Fehler entdecken oder ein Artikel unvollständig ist, freuen wir uns über einen Kommentar.

Bewertung erstellen

Kommentare

Sag uns deine Meinung! Jetzt antworten

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