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