nicht angemeldet ottogal
Rolf B
Gunnar Bittersmann
Rolf B
Gunnar Bittersmann
ottogal
ottogal
ottogal
Hallo in die Runde,
für meine kleinen Websites mache ich die CSS von Hand, verwende insbesondere keinen Preprocessor (womit ich auch keine Erfahrung habe). Was ich freilich gern hätte, wären Variablen, z.B. für Farben.
Was empfehlt ihr mir, um lediglich diese Möglichkeit zu haben, ohne unnötigen Ballast?
Viele Grüße
ottogal
PHP. Den Output am Ende einfach in eine Datei umleiten. Aber damit wirst du warscheinlich langfristig nicht glücklich, wenn du erstmal mehr Flexibilität kennengelernt hast. SCSS gibt's auch noch.
Hallo,
da rate ich von ab. Ich habe das auch eine Zeitlang gemacht - einfach meine CSSe über getcss.php?file=xxx geholt, in dem PHP Script vorher ein paar Variablen gesetzt und das File included. Natürlich mit Sicherung gegen Injections.
Hat funktioniert, aber meiner IDE (Netbeans) gar nicht gefallen, es war immer alles rot wo Variablen standen.
Da Netbeans die Syntax von LESS kennt und den entsprechenden Toolstack unterstützt, habe ich dann LESS verwendet. Ist nicht ganz einfach, man muss eine node.js Instanz zum laufen bringen. Aber irgendwann ging's dann.
LESS kann auch deutlich mehr als Variablen - geschachtelte Regeln und Mixins sind schon eine feine Sache.
Das ist kein Plädoyer für LESS oder gegen Sass - es hat sich einfach so ergeben bei mir.
Rolf
@@Rolf B
… LESS verwendet. Ist nicht ganz einfach, man muss eine node.js Instanz zum laufen bringen.
Bei Sass muss man gar nichts zum Laufen bringen. Jedenfalls nicht, wenn man einen vernünftigen™ Rechner hat. Bei macOS ist Ruby gleich mit am Start, sodass Sass out of the box läuft.
LESS kann auch deutlich mehr als Variablen - geschachtelte Regeln und Mixins sind schon eine feine Sache.
Und Sass kann deutlich mehr als LESS – war jedenfalls so, als ich beide mal verglichen hatte. Möglich, dass LESS etwas aufgeholt hat. Ich sehe aber keinen Anlass, dass nochmal zu eruieren.
LLAP 🖖
Hat funktioniert, aber meiner IDE (Netbeans) gar nicht gefallen, es war immer alles rot wo Variablen standen.
Das kann ich nicht nachvollziehen. Welche Meldung wird denn im Tooltip angezeigt? Das funktioniert bei mir (PHPStorm) einfach, ist ja schliesslich nur eine PHP-Datei. Da kann man ja auch wunderbar einen Cache vorschalten.
Hallo chorn,
in der PHP Datei hatte ich keine Fehleranzeige, die hat ja auch nicht viel getan als Variablen zu setzen und das CSS zu includen.
Aber die includete Styles-Datei habe ich natürlich .css genannt, weil ich dort das Code-Highlighting für CSS haben wollte. Deshalb hat sich Netbeans an den PHP-Variablen gestört. Einen Dateityp "pcss" - CSS mit PHP Variablen - gibt's ja nicht. Mit etwas grübeln hätte ich Netbeans sowas vielleicht beibringen können. Aber mit less (oder sass oder scss) ist ja schon alles da.
Ich hatte anfangs keine Lust, einen CSS Preprozessor ans Laufen zu bringen, und der Kollege, von dem der Code stammte und der ihn theoretisch auch noch warten können sollte, hatte überhaupt keine Lust auf Toolstack, deswegen hatte ich zuerst die handgemachte Lösung.
Rolf
PHP
Ich sags mal so. Wenn die Webseite in PHP geschrieben ist (und Frontender + Backender die selbe Person ist) muss man sich nicht zwischendrin auf eine zweite Sprache umstellen - was man bei LESS oder SASS tun müsste.
Den Output am Ende einfach in eine Datei umleiten.
Ja: Cachen. Und zwar „Hardcore“. Also die entstehende Datei auch gleich mit gzip -9 zippen und das ausliefern, falls der UserAgent anzeigt, dass er es mag.
$zippedFile = $file . '.gz';
if ( ! is_file( $zippedFile ) ) {
$error = intval( trim( `gzip -9 -c < '$file' > '$zippedFile' 2> /dev/null; echo $?` ) );
if ( $error != 0 ) {
error_log("fastdeliver.php: error by trying gzip -c < '$file' > '$zippedFile' 2> /dev/null; echo \$?; in a shell");
$_SERVER['HTTP_ACCEPT_ENCODING'] = '';
}
}
if ( false === isset( $_SERVER['HTTP_ACCEPT_ENCODING'] ) OR false === strpos( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) ) {
header('Content-Length: ' . filesize($file));
readfile( $file );
} else {
header( 'Vary: Accept-Encoding' );
header( 'Content-Encoding: gzip' );
} else {
error_log( "fastdeliver.php: File '$zippedFile' created." );
}
}
header('Content-Length: ' . filesize($zippedFile));
readfile( $zippedFile );
}
Das entlastet den Apache. Man kann den Spaß so automatisieren, dass die Dateien (foo.css, foo.css.gz) neu erzeugt werden wenn foo.css.php ein neueres Datum hat.
@@Regina Schaukrug
Und zwar „Hardcore“. Also die entstehende Datei auch gleich mit gzip -9 zippen und das ausliefern, falls der UserAgent anzeigt, dass er es mag.
Hardcore?? Gzip ist für Weicheier!
👉 Brotli
LLAP 🖖
Brotli
Unterstützung: Noch nicht vollständig genug.
Den Packer hab ich zwar schon mal kompiliert und installiert - aber im Moment sieht das wegen IE 11 noch nach einem "zukünftigen Produkt" aus. Wer es mal installieren will:
#! /bin/bash
if [ ! $USER = "root" ]; then
echo "Fatal: Sie müssen das als Root tun. Exit.";
exit 1
fi
cd /usr/src
wget --output-document "brotli-master.zip" https://github.com/google/brotli/archive/master.zip && unzip brotli-master.zip && rm brotli-master.zip
cd brotli-master && mkdir out && cd out
../configure-cmake && make && make test && make install
brotli --help
Tach!
> $error = intval( trim( `gzip -9 -c < '$file' > '$zippedFile' 2> /dev/null; echo $?` ) );
Wenn die zlib-Extension verfügbar ist, kann man auch gzencode() verwenden. Dann sollte es auch kein Problem mit eventuell gesetzten open_basedir-Einschränkungen geben.
dedlfix.
@@ottogal
für meine kleinen Websites mache ich die CSS von Hand, verwende insbesondere keinen Preprocessor (womit ich auch keine Erfahrung habe). Was ich freilich gern hätte, wären Variablen, z.B. für Farben.
Das kriegst du mit CSS hin: mit custom properties. ☞ Beispiel
Achte auch drauf, wie einfach es ist, sämtliche Farben für eine Box (warning) zu ändern.
Funktioniert in allen modernen Browsern. Wenn es in alten IEs nicht genauso farbig sein muss (muss es nicht, wirklich nicht), sollte das der Weg sein.
Falls doch, ließe sich der CSS-Code auch durch einen Postprozessor jagen, der dann die custom properties überall durch die entsprechenden Werte ersetzt. Das geht in diesem Fall; aber Achtung: es gibt Einsatzmöglichkeiten für custom properties, die sich nicht mit einem Postprozessor für alte Browser hinbiegen lassen.
Ansonsten bliebe die Möglichkeit, einen Präprozessor einzusetzen. Ich empfehle Sass[1]; gar nicht erst LESS in Erwägung ziehen.
Oder halt – wie schon erwähnt – das Stylesheet serverseitig generieren, z.B. mit PHP.
LLAP 🖖
Es ist Sass, nicht SASS. ↩︎
(muss es nicht, wirklich nicht)
Puh, für mein Umfeld, konkret für gewerbliche Kunden, ist das eine gewagte Herangehensweise, zumal laut caiuse auch IE11 dann einfach wegfällt - und das ist immerhin der Standardbrowser unter Windows 7. Ich will mich da nicht in Statistiken wälzen, aber so rein aus der Erfahrung begegnet mir das - egal wie schlimm ich das persönlich finde - immer noch am häufigsten auf Kundenkisten. Kommt dann halt auf's Publikum an, mit CSS Grids habe ich da schlechte Erfahrungen gemacht, und das läuft ja unter IE11 wenigstens so halb.
@@chorn
(muss es nicht, wirklich nicht)
Puh, für mein Umfeld, konkret für gewerbliche Kunden, ist das eine gewagte Herangehensweise
Nein.
Du hast falsch zitiert. Richtig ist:
Wenn es in alten IEs nicht genauso farbig sein muss (muss es nicht, wirklich nicht)
Dann liest sich das schon ganz anders.
zumal laut caiuse auch IE11 dann einfach wegfällt
Und was genau fällt dann weg? Eventuell etwas Farbe. Ja, und?
Geht dadurch Funktionalität verloren? Nein. Und falls doch, wurde grundlegend etwas falsch gemacht: nämlich Farbe als alleiniges Unterscheidungsmekmal einzusetzen.
LLAP 🖖
Das kriegst du mit CSS hin: mit custom properties. ☞ Beispiel
...
Funktioniert in allen modernen Browsern. Wenn es in alten IEs nicht genauso farbig sein muss (muss es nicht, wirklich nicht), sollte das der Weg sein.
Leider funktioniert es (entgegen caniuse.com) nicht im Edge (auch nicht im aktuellen 41.16299.15.0).
@@ottogal
Leider funktioniert es (entgegen caniuse.com) nicht im Edge (auch nicht im aktuellen 41.16299.15.0).
Kann ich nicht nachvollziehen. Bei mir funktioniert es im 15er.
LLAP 🖖
Kann ich nicht nachvollziehen. Bei mir funktioniert es im 15er.
Kann ich inzwischen auch nicht mehr nachvollziehen: Das Fehlverhalten war nicht reproduzierbar. K.A. was da los war...
Nun ist das Problem bei Edge doch wieder aufgetaucht, und zwar bei Hintergrundbildern.
Angenommen, man hat definiert :root { --bgcolor: #999; }, dann wird die Regel
background-color: var(--bgcolor);
oder auch
background: var(--bgcolor);
verstanden.
Offenbar wird var(--bgcolor) jedoch in der zusammenfassenden Regel mit einem Bild,
background: var(--bgcolor) url("...");
nicht verstanden: die Regel wird ignoriert, das Bild nicht angezeigt.
background: #999 url("...");
dagegen findet das Bild.
Was empfehlt ihr mir, um lediglich diese Möglichkeit zu haben, ohne unnötigen Ballast?
Ich schmeiß einfach mal styled-components in den Raum. Das ist CSS mit JavaScript Superkräften, aber keine Angst das JavaScript muss nicht vom Browser ausgeführt werden können, der Server kann das machen und ein schmale Stylesheets generieren. Das würde ich vor allem empfehlen, wenn du mit einem Komponenten-basierten Framework wie React oder Vue arbeitest.
Vielen Dank für die aufschlussreichen Hinweise!
Die custom properties kannte ich noch gar nicht - die werde ich ausprobieren. Mir gefällt, dass man damit ohne externe Mittel wie JS oder Ruby auskommt. (Rücksicht auf Kunden mit älteren Browsern muss ich nicht nehmen.)
Works like a charm!