CSS Optimierung mit gulp-cssnano und der z-index

804 2068
Foto von Gabriele Lässer

Elemente mit Hilfe von von z-index anzuordnen ist eine Maßnahme die es in Ausnahmefällen braucht – wie z.B. bei einem Sticky Header, der stets auf oberster Ebene bleiben soll, sodass die Seitenbereiche unter ihm durchgescrollt werden können. Ggf. muss man nicht gleich mit riesigen Zahlen arbeiten. Vor allem wer z-index sparsam einsetzt, wird meistens bereits bei z-index:1 einen Header bekommen, der sozusagen über den Dingen steht.

Nichtsdestrotrotz bekommt man es manchmal mit Elementen zu tun, die mit höheren Werten aufwarten. In einem Fall war es eine über ein Plugin eingefügte OpenStreetMap, die den Header beim Scrollen überrollte, statt unten durch zu gleiten. Um den Header da drüber zu bringen, musste ich seinen z-index auf einen 4-stelligen Wert setzen. Das machte ich, generierte das CSS neu und spielte die Dateien hoch. Die Map überrollte den Header immer noch, denn der z-index des Headers war nicht der, den ich vorgegeben hatte, sondern 2.

In der Entwicklungsumgebung verwende ich sass und gulp-sass (aufgeteilt in Bereiche mit einer jeweile überschaubaren Anzahl an Zeilen), gulp-concat, gulp-autoprefixer, gulp-rename, gulp-cssnano.

Beim Durchsuchen aller Dateien nach z-index kaum ich drauf, dass der z-index noch korrekt in der style.css war, die aus der Summe der SASS-Dateien gebildet worden war. In der style.min.css, die ich im Theme eingebunden hatte, war der Wert aber 2. Damit war klar, dass gulp-cssnano die Änderung bewirkte. Beim Optimieren der generierte CSS-Datei geht es alle z-index-Werte durch, und nummeriert sie je nach Höhe des Ausgangswerts neu durch. Dabei fängt es mit 1 für den niedrigsten z-index-Wert an (es gab noch einen z-index-Wert in einer anderen SASS-Datei), dann 2, dann 3…

Doch eine Lösung dafür war schnell gefunden, indem beim Ausführen der Gulp-Task bei cssnano die Option {zindex:false} hinzugefügt wird.

.pipe(cssnano({zindex:false}))

Damit werden die in den SASS-Dateien angelegten originalen z-index-Werte bis zur style.min.css durchgeschleust.

vielleicht auch interessant:

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

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

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable