CSS irgendwie zuweisen/übernehmen/vererben

[Bernd]

Hallo,

kann ich irgendwie dem .content den Inhalt von vorher definitieren .header zuweisen?

<style>

.header {grid-column: 1/3}

@media screen and (max-width:425px)
{
.content{grid-column:1/3}
}

</style>

Sowas in der Art wie:

.content==.header;

Danke, Bernd

[dedlfix]

Tach!

kann ich irgendwie dem .content den Inhalt von vorher definitieren .header zuweisen? [...] Sowas in der Art wie:

.content==.header;

Das wäre keine Zuweisung sondern ein Vergleich. Aber weder das eine noch das andere geht in CSS. Weil das aber praktisch wäre, hat man CSS-Präprozessoren erfunden, die auf Namen wie SCSS und SASS und LESS hören. Die lässt man zwischen Code-Schreiben und Aufruf im Browser laufen. Sie generieren die finalen CSS-Dateien aus den SCSS/SASS/LESS-Dateien. Eine gute IDE kann den Prozess automatisieren, und zum Beispiel die Umwandlung immer dann starten, wenn die Datei gespeichert wird.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Weil das aber praktisch wäre, hat man CSS-Präprozessoren erfunden

Und was ginge damit, was ohne nicht ginge?

Aber ich verstehe auch die Intention hinter Bernds Frage nicht (von der Formulierung „den Inhalt zuweisen“ mal ganz abgesehen).

LLAP 🖖

[dedlfix]

Tach!

Weil das aber praktisch wäre, hat man CSS-Präprozessoren erfunden

Und was ginge damit, was ohne nicht ginge?

Sass/SCSS Basics. Nesting (Verschactelungen), Mixins (Funktionen mit Argumenten), Extension/Inheritance (Erweiterbarkeit/Vererbung) und vielleicht noch ein paar Dinge mehr, die noch nicht mit CSS only gehen.

Aber ich verstehe auch die Intention hinter Bernds Frage nicht (von der Formulierung „den Inhalt zuweisen“ mal ganz abgesehen).

Ich habe darin gelesen, dass die Regeln des einen Selektors zu einem anderen Selektor kopiert werden sollen, um sie nicht doppelt notieren zu müssen. Im Beispielfall also das grid-column: 1/3

%gemeinsames {
  grid-column: 1/3;
}

.header {
  @extend %gemeinsames;
}

@media screen and (max-width:425px)
{
  .content {
    @extend %gemeinsames;
  }
}

Für eine Anweisung lohnt sich das gemessen an der Zeichenanzahl noch nicht. Der Vorteil hier wäre lediglich, dass man bei Änderungen nur eine Stelle zu bearbeiten hat.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

%gemeinsames {
  grid-column: 1/3;
}

.header {
  @extend %gemeinsames;
}

@media screen and (max-width:425px)
{
  .content {
    @extend %gemeinsames;
  }
}

Getestet hast du das aber nicht‽ Bspw. in SassMeister:

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

Das ginge nur mit Mixin:

@mixin gemeinsames {
  grid-column: 1/3;
}

.header {
  @include gemeinsames;
}

@media screen and (max-width:425px)
{
  .content {
    @include gemeinsames;
  }
}

Und immer noch die Frage: was ginge damit, was ohne [Sass] nicht ginge? Vanilla CSS:

:root {
  --gemeinsames: 1/3;
}

.header {
  grid-column: var(--gemeinsames);
}

@media screen and (max-width:425px)
{
  .content {
    grid-column: var(--gemeinsames);
  }
}

Aber auch das würde man anders machen, bspw. so:

.container {
  display: grid;
  grid-template-columns: [full-start] 62fr 38fr [full-end];
}

.header {
  grid-column: full;
}

@media screen and (max-width:425px)
{
  .content {
    grid-column: full;
  }
}

LLAP 🖖

PS: Die ganzen Fehler hab ich mal unkorrigiert gelassen:

• Verwendung von px anstatt em

• Verwendung von Klassen wie "header" und "content", die bei vernünfitgem Markup mit Elementen <header> und <main> obsolet sind.

[dedlfix]

Tach!

Getestet hast du das aber nicht‽

Hab ich nicht.

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

Hab ich nicht ewrwartet, dass das da nicht geht.

Das ginge nur mit Mixin:

Na immerhin.

Und immer noch die Frage: was ginge damit, was ohne [Sass] nicht ginge? Vanilla CSS:

Variablen können lediglich einen Wert beschreiben, nicht aber einen Block von Anweisungen zu einem Wert zusammenfassen. In dem Beispiel geht es nicht nur darum, das 1/3 zu kopieren, sondern alle Regeln eines Selektors.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

Hab ich nicht ewrwartet, dass das da nicht geht.

Das ginge nur mit Mixin:

Na immerhin.

Deshalb lege ich in Sass Dinge gerne so an, dass man sie als Mixin und als Platzhalterklasse verwenden kann:

@mixin mein-ding
{
	// Styles für mein Ding
}

%mein-ding
{
	@include mein-ding;
}

LLAP 🖖

[Felix Riesterer]

Lieber Bernd,

kann ich irgendwie dem .content den Inhalt von vorher definitieren .header zuweisen?

die Frage klingt nach einem fundamentalen Missverständnis bezüglich dessen, welchen Sinn oder welche Aufgabe CSS hat. Inhalte notiert man mit HTML.

Liebe Grüße,

Felix Riesterer.

[Flocke]

Wenn ich Dich richtig verstehe, möchtest Du die gleiche Regel für zwei unterschiedliche Klassen haben, damit Du keine doppelte Schreibarbeit hast. Dafür schreibt man dann einfach eine neue Klasse, die diese Aufgabe übernimmt.

Oder aber man schreibt bei Klassen mit einem Komma getrennt, also so:

.header, .content {grid-column: 1/3}

In Deinem Beispiel verbietet sich aber dieser Ansatz, weil die .content-Regel nur innerhalb einer Mediaquery gilt, die andere aber generell. Doch grundsätzlich könntest Du eine solch übergreifende Klasse nutzen.

Nur mit CSS-Bordmitteln geht Deine Idee nicht, denn CSS ist rein deklarativ auf der Selektorenseite und keine Programmiersprache.

Am Ehesten kämst Du mit einem Mixin oder Platzhalter bei Sass an Dein Ziel. Dafür müsstest Du Sass lernen, was ich generell nur begrüßen würde, aber evtl. übers Ziel hinaus schiesst.

Grundsätzlich möchte ich allerdings erst einmal die Motivation hinterfragen und evtl. in Frage stellen. Warum willst Du das? In dem Moment, in dem Du zwei Sachen miteinander koppelst, sind sie verbunden. Eine Loslösung ist nicht vorgesehen. Flexibilität ist was Anderes. Und wenn Du die Dateigröße reduzieren willst, kann ich Dich beruhigen: Du musst schon extrem viel Mist bauen, bis Dein CSS einen Einfluss auf die Performance Deiner Seite hat. Reduzier erst einmal die Qualität und Größe Deiner Bilder und schmeiss alles unnötige JS raus (also im Zweifelsfall alles 😀 ) und Deine Seite ist wesentlich performanter, als würdest Du an Mini-Details des CSS herumschrauben.

Ich hoffe, ich habe Dein Problem korrekt verstanden.

Grüße, Jens

[Gunnar Bittersmann]

@@Flocke

Flocke‽ Die Hölle ist zugefroren! 😈

Nur mit CSS-Bordmitteln geht Deine Idee nicht

Nicht? Wir sprachen drüber? Gestern? 😏

Bevor du jetzt ansetzt, aus dem Browser-Museum zu plaudern (wie hieß das Exponat doch gleich – Internet Explorator?), der kann schon display: grid nicht (in der Syntax), bräuchte also noch eine ganz andere Sonderbehandlung.

LLAP 🖖

[Flocke]

Stimmt, er könnte eine CSS-Variable setzen. M.W.n. wär das nur für einen Wert, nicht für eine komplette Eigenschaft oder Regel und würde den Code nicht verkürzen. Es wäre nichts gewonnen, nur der von Dir gehasste Browser ausgeschlossen. Deshalb wäre eine einfache Selektion mit Komma am Besten.

Grüße aus Mainz,

Jens Grochtdreis

[Gunnar Bittersmann]

@@Flocke

Stimmt, er könnte eine CSS-Variable setzen.

Du hast custom properties falsch geschrieben. 😏

“The biggest trick the devil ever pulled was convincing people to call CSS custom properties ‘variables’.” —Kitty Giraudel
(☞ in deutsch und in LiebeGerda/LiebeDoris)

… und würde den Code nicht verkürzen.

“The greatest trick the devil ever pulled was to convince us that fewer characters makes things more readable.” —Heydon Pickering

Und es ist überhaupt nicht klar, worum es Bernd überhaupt ging. Code verkürzen? Nicht wirklich.

nur der von Dir gehasste Browser ausgeschlossen.

Nein, der war – wie gesagt – noch nie eingeschlossen.

Obwohl: er war es doch! Progressive enhancement.

Sagte ich schon progressive enhancement?

Das Layout sollte im IE nicht zerschossen aussehen, aber es muss nicht genauso aussehen wie in anderen Browsern. Und wenn ein $Kunde etwas anderes sagt, dann hat man nicht die richtigen Fragen gestellt.

LLAP 🖖

[dedlfix]

Tach!

Stimmt, er könnte eine CSS-Variable setzen.

Du hast custom properties falsch geschrieben. 😏

Um das nochmal nachzufragen, weil ich mich da auch noch nicht so gut auskenne: Custom Properties / CSS Variables sind Werte für eine einzelne CSS-Eigenschaft? Sie können nicht ganze Gruppen von Eigenschaften zusammenfassen?

Wenn letzteres stimmt, wie kann man mit Vanilla-CSS lösen, wenn man drei Mediaquerys hat, aber nur in zweiten denselben Block haben möchte? - Hmm, wenn ich so darüber nachdenke, dann wohl eher so, dass man den gemeinsamen Teil in einen weiteren Mediaquery-Block auslagert und den Selektor so anpasst, dass er für beide gilt, oder?

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Um das nochmal nachzufragen, weil ich mich da auch noch nicht so gut auskenne: Custom Properties / CSS Variables sind Werte für eine einzelne CSS-Eigenschaft?

Nö, custom properties sind wie andere CSS-Eigenschaften auch: sie können einen Wert haben. Der eine Wert kann aber auch was Zusammengesetztes sein: --abstand: 3em 2em. Ob und wie man den Wert später verwendet, ist der custom property egal.

Man kann einer CSS-Eigenschaft den Wert einer custom property zuweisen (background: var(--selfhtml-logo)), aber auch den Wert als Teil irgendwo einsetzen: background: whitesmoke var(--selfhtml-logo).

Und man kann Werte von custom properties auch für die Deklaration anderer custom properties nutzen: --selfhtml-logo: url(http://src.selfhtml.org/selfhtml.png) var(--abstand) no-repeat.

☞ Beispiel zum Rumspielen

Sie können nicht ganze Gruppen von Eigenschaften zusammenfassen?

Du kannst --code: 'border: thin solid; padding: 1em 2em' setzen; hilft aber nicht weiter, denn AFAIK gibt’s keine exec()-Funktion, um sowas als CSS zu parsen.

Wenn letzteres stimmt, wie kann man mit Vanilla-CSS lösen, wenn man drei Mediaquerys hat, aber nur in zweiten denselben Block haben möchte? - Hmm, wenn ich so darüber nachdenke, dann wohl eher so, dass man den gemeinsamen Teil in einen weiteren Mediaquery-Block auslagert und den Selektor so anpasst, dass er für beide gilt, oder?

Kannst du mal genauer beschreiben, was du im Sinn hast?

LLAP 🖖

[dedlfix]

Tach!

Um das nochmal nachzufragen, weil ich mich da auch noch nicht so gut auskenne: Custom Properties / CSS Variables sind Werte für eine einzelne CSS-Eigenschaft?

Nö, custom properties sind wie andere CSS-Eigenschaften auch: sie können einen Wert haben. Der eine Wert kann aber auch was Zusammengesetztes sein: --abstand: 3em 2em. Ob und wie man den Wert später verwendet, ist der custom property egal.

Wieso "Nö"? Hast du nicht genau das bestätigt, was ich schrieb? "Werte" sind für mich auch zu einem zusammengesetzte Einzelwerte.

Also ja, das ist was für einzelne Propertys (inklusive existierenden zusammenfassenden Propertys wie margin oder padding). Man kann sich damit keine Blöcke erstellen oder à la margin mehrere Eigenschaften zu einer zusammenfassen.

☞ Beispiel zum Rumspielen

Ich seh da nichts außer einem leeren Pen.

Sie können nicht ganze Gruppen von Eigenschaften zusammenfassen?

Du kannst --code: 'border: thin solid; padding: 1em 2em' setzen; hilft aber nicht weiter, denn AFAIK gibt’s keine exec()-Funktion, um sowas als CSS zu parsen.

Moment mal. Wenn ich sowas könnte, es aber nicht zu einem brauchbaren Ergebnis führt, was soll ich dann damit? Sag doch, dass sowas nicht geht. Aber px als Maßangabe und Bezeichner, für die der Anwendungsfall nicht bekannt ist, sind zwar syntaktisch korrekt und liefern ein gewünschtes Ergebnis, sollen ein Fehler sein? Du verwirrst mich.

Wenn letzteres stimmt, wie kann man mit Vanilla-CSS lösen, wenn man drei Mediaquerys hat, aber nur in zweiten denselben Block haben möchte? - Hmm, wenn ich so darüber nachdenke, dann wohl eher so, dass man den gemeinsamen Teil in einen weiteren Mediaquery-Block auslagert und den Selektor so anpasst, dass er für beide gilt, oder?

Kannst du mal genauer beschreiben, was du im Sinn hast?

Ich möchte gern CSS so schreiben, dass es DRY ist und nicht mit Copy & Paste hantieren, wenn ich dasselbe Bündel an Eigenschaften an mehreren Stellen brauche. Vermutlich ist die Lösung dazu, die gemeinsamen Teile der verschiedenen Stellen so zusammenzufassen, dass es nur noch eine, dafür aber eine neue ist. Also quasi ein Bereich für kleine Viewports, einen für mittlere, einen für große und einen weiteren für die Gemeinsamkeiten von kleinen und mittleren, die beim großen nicht gesetzt werden sollen.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

☞ Beispiel zum Rumspielen

Ich seh da nichts außer einem leeren Pen.

Wie dumm von mir. URL jetzt berichtigt zu https://codepen.io/gunnarbittersmann/pen/pmeBqK?editors=0100

LLAP 🖖

[Gunnar Bittersmann]

@@dedlfix

Wieso "Nö"? Hast du nicht genau das bestätigt, was ich schrieb?

Mag sein. Dann hatte ich dich falsch verstanden, was du mit „Custom Properties […] sind Werte für eine einzelne CSS-Eigenschaft“ meintest.

Ich möchte gern CSS so schreiben, dass es DRY ist und nicht mit Copy & Paste hantieren, wenn ich dasselbe Bündel an Eigenschaften an mehreren Stellen brauche. Vermutlich ist die Lösung dazu, die gemeinsamen Teile der verschiedenen Stellen so zusammenzufassen, dass es nur noch eine, dafür aber eine neue ist. Also quasi ein Bereich für kleine Viewports, einen für mittlere, einen für große und einen weiteren für die Gemeinsamkeiten von kleinen und mittleren, die beim großen nicht gesetzt werden sollen.

Beispiel: Schriftgrößen

body { font-size: var(--font-size-medium) }
h1 { font-size: var(--font-size-x-large) }
h2 { font-size: var(--font-size-large) }
blockquote { font-size: var(--font-size-large) }
blockquote footer { font-size: var(--font-size-medium) }

:root
{
	--font-size-medium: 1rem;
	--font-size-large: 1.4rem;
	--font-size-x-large: 2rem;
}

@media (min-width: 30em)
{
	:root
	{
		--font-size-medium: 1.1rem;
		--font-size-large: 1.7rem;
		--font-size-x-large: 3rem;
	}
}

Mit Media-Query müssen nun nicht die Werte der font-size-Eigenschaft für alle einzelnen Elemente geändert werden, sondern nur an einer Stelle die Werte der custom properties.

Und an der Stelle wird auch deutlich, warum es custom properties sind und keine „CSS-Variablen“.

LLAP 🖖

[dedlfix]

Tach!

Beispiel: Schriftgrößen

body { font-size: var(--font-size-medium) }
h1 { font-size: var(--font-size-x-large) }
h2 { font-size: var(--font-size-large) }
blockquote { font-size: var(--font-size-large) }
blockquote footer { font-size: var(--font-size-medium) }

:root
{
	--font-size-medium: 1rem;
	--font-size-large: 1.4rem;
	--font-size-x-large: 2rem;
}

@media (min-width: 30em)
{
	:root
	{
		--font-size-medium: 1.1rem;
		--font-size-large: 1.7rem;
		--font-size-x-large: 3rem;
	}
}

Mit Media-Query müssen nun nicht die Werte der font-size-Eigenschaft für alle einzelnen Elemente geändert werden, sondern nur an einer Stelle die Werte der custom properties.

Gut, damit kann man Werte ändern. Wenn man nun noch weitere Bereich hat, denen man die Werte nicht setzen möchte, wäre das dann wohl mit einen Default-Wert (Fallback, Declaration Value) zu tun.

Was ist mit Eigenschaften, die man gar nicht generell setzen möchte, sondern nur in bestimmten Bereichen?

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Was ist mit Eigenschaften, die man gar nicht generell setzen möchte, sondern nur in bestimmten Bereichen?

Custom properties sind ein Werkzeug, das man einsetzen kann, wo es sinnvoll ist, aber nicht einsetzen muss, wenn es das nicht ist. Es verlangt niemand, eine Schraube mit dem Hammer in die Wand zu bekommen.

LLAP 🖖

[dedlfix]

Tach!

Was ist mit Eigenschaften, die man gar nicht generell setzen möchte, sondern nur in bestimmten Bereichen?

Custom properties sind ein Werkzeug, das man einsetzen kann, wo es sinnvoll ist, aber nicht einsetzen muss, wenn es das nicht ist. Es verlangt niemand, eine Schraube mit dem Hammer in die Wand zu bekommen.

Warum kommst du jetzt auf so einer vorwurfsvollen Antwort? Das wäre jetzt die Frage nach dem "können" gewesen, nicht nach dem "wie missbraucht man Custom Propertys". Wenn man damit das Problem nicht lösen kann, wäre ein einfaches "geht nicht" ausreichend gewesen. Die eigentliche Frage war ja immer noch, wie man ein Bündel von Eigenschaften mehrfach verwenden kann, ohne sie mehrfach zu notieren. Beziehungsweise wie man dieses XY-Problem durch eine andere Herangehensweise zu lösen bekommt. Deine Antwort war Custom Propertys. Und derzeit sind wir auf dem Stand, dass sich zwar eine Menge Probleme so umschreiben lassen, dass sie mit CPs gelöst werden können, aber möglicherweise nicht alle. Mir fallen nur keine Eigenschaften ein, die man nicht mit inherit/initial/unset als Defaltwert quasi unsichtbar anlegen kann und die dann in den jeweiligen Bereichen einen Wert überschrieben bekommen oder nicht. Meine Erwartung an eine Antwort wäre die Verwendung ebendieser Default-Eigenschaften gewesen, aber ich wollte nicht vorgreifen. Vielleicht ist es ja wirklich nicht sinnvoll, es damit lösen zu wollen. Da hast du eventuell mehr Erfahrung als ich.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Warum kommst du jetzt auf so einer vorwurfsvollen Antwort?

Da sollte keinerlei Vorwurf sein und da war auch keiner.

Wenn man damit das Problem nicht lösen kann, wäre ein einfaches "geht nicht" ausreichend gewesen. Die eigentliche Frage war ja immer noch, wie man ein Bündel von Eigenschaften mehrfach verwenden kann, ohne sie mehrfach zu notieren.

Durch Aufzählung der Selektoren, wie Flocke schon sagte:

body { font-size: 1.1rem; font-size: var(--font-size-medium) }
h1 { font-size: 3rem; font-size: var(--font-size-x-large) }
h2 { font-size: 1.7rem; font-size: var(--font-size-large) }
blockquote { font-size: 1.7rem; font-size: var(--font-size-large) }
blockquote footer { font-size: 1.1rem; font-size: var(--font-size-medium) }

ließe sich zusammenfassen zu

body, blockquote footer { font-size: 1.1rem; font-size: var(--font-size-medium) }
h1 { font-size: 3rem; font-size: var(--font-size-x-large) }
h2, blockquote { font-size: 1.7rem; font-size: var(--font-size-large) }

wenn das denn Vorteile bringt.

Deine Antwort war Custom Propertys.

Nicht auf deine Frage, wie man ein Bündel von Eigenschaften mehrfach verwenden kann, ohne sie mehrfach zu notieren.

Dass sich eine CSS-Eigenschaft nicht dafür verwenden lässt, mehrere Deklarationen als Wert zu haben, sollte klar sein. Custom properties sind – wie der Name schon sagt – Eigenschaften. Es sind keine Mixins; es sind keine Variablen.

Möglicherweise lag hier das Missverständnis. Die Verwendung falscher Begriffe zeugt häufig vom Unverständnis des grundlegenden Konzepts. Das ist bei „UTF-8-Zeichen“ so wie auch bei „CSS-Klassen“ und bei „CSS-Variablen“.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Custom properties sind ein Werkzeug, das man einsetzen kann, wo es sinnvoll ist

☞ ein Beispiel, wo es sinnvoll ist

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Beispiel: Schriftgrößen

body { font-size: var(--font-size-medium) }
h1 { font-size: var(--font-size-x-large) }
h2 { font-size: var(--font-size-large) }
blockquote { font-size: var(--font-size-large) }
blockquote footer { font-size: var(--font-size-medium) }

Um auch Browser zu unterstützen, die keine custom properties unterstützen:

body { font-size: 1.1rem; font-size: var(--font-size-medium) }
h1 { font-size: 3rem; font-size: var(--font-size-x-large) }
h2 { font-size: 1.7rem; font-size: var(--font-size-large) }
blockquote { font-size: 1.7rem; font-size: var(--font-size-large) }
blockquote footer { font-size: 1.1rem; font-size: var(--font-size-medium) }

In veralteten Browsern passen sich die Schriftgrößen nicht der Viewportgröße an. Das kann man durchaus verschmerzen, da diese Browser vorwiegend auf Desktop-Geräten mit größeren Monitoren zu finden sind.

Um seine Schäfchen ins Trockene (DRY) zu kriegen, kann ein Präprozessor dienlich sein. Beispiel in Sass

Und auf die Art möchte man sicher nicht nur die Schriftgrößen festlegen, sondern auch die zugehörigen Zeilenabstände. Beispiel in Stylus

LLAP 🖖

[ursus contionabundo]

irgendwie

Ich weiß, dass die Frage womöglich manchem dämlich erscheinen mag: Aber hast Du schon daran gedacht, Dein Problem durch stumpfes serverseitiges Skripting zu lösen?

<style>
<?php
$cssGridColumn       = '1/3';
$cssContentFontColor = '#000080';
$cssHeaderFontColor  = '#646464';

?>
.header { 
    grid-column: <?=$cssGridColumn;?>;
    color: <?=$cssHeaderFontColor;?>;
}

@media screen and (max-width:425px)
{
    .content {
        grid-column: <?=$cssGridColumn;?>;
        color: <?=$cssContentFontColor;?>;
    }
}

</style>

[dedlfix]

Tach!

Ich weiß, dass die Frage womöglich manchem dämlich erscheinen mag: Aber hast Du schon daran gedacht, Dein Problem durch stumpfes serverseitiges Skripting zu lösen?

Mir nicht. Das ist auch eine Möglichkeit, die noch dazu nicht das Vorhandensein eines weiteren Tools benötigt.

Dazu ein paar Anmerkungen. Wenn das CSS nicht als style-Block im HTML stehen soll, kann man auch CSS-Resourcen mit PHP erzeugen. Da aber text/html der Standard-Content-Type ist, sollte man im PHP-Script für die CSS-Ressource selbigen per header() korrekt setzen, auch wenn die Browser wohl fehlertolerant sein werden, wenn bei

<link rel="stylesheet" type="text/css" href="script.php">

das Ergebnis als text/html deklariert ist. Prinzipdarstellung:

<?php
header('Content-Type: text/css');

$block = <<<EOT
  color: black;
  background-color: white;
EOT;
?>

.whatever {
<?= $block ?>
}

Wenn man nicht nur einzelnen Werte sondern ganze Blöcke wiederholen möchte, kann man PHPs Heredoc (mit Variablenersetzung) oder Nowdoc (ohne) für Strings verwenden, um diese Blöcke im Code zu notieren.

dedlfix.

[ursus contionabundo]

kann man auch CSS-Resourcen mit PHP erzeugen.

<?php
header('Content-Type: text/css');
// …

Damit hast Du Recht. Aber ich bin ja so ein „Reaktionszeitfetischist“… unter diesem Aspekt sollte man dann daran denken, den Output bei "quasistatischen" Ressourcen auch entsprechend serverseitig und browserseitig zu cachen und vor einem Update der Webseite die Cachedauer dann auch zeitlich auf einen fixen Zeitpunkt kurz vor dem Update (oder halt 0) zu begrenzen und die vorherige Dauer des Cachens abzuwarten. Ich wollte nicht gleich „vom Hundertsten ins Tausendste“ kommen.

[dedlfix]

Tach!

Aber ich bin ja so ein „Reaktionszeitfetischist“… unter diesem Aspekt sollte man dann daran denken, den Output bei "quasistatischen" Ressourcen auch entsprechend serverseitig und browserseitig zu cachen [...]

Wenn etwas quasi-statisch ist, reicht ja im Prinzip auch, dass man die Datei mit irgendeinem Vorgang auf dem Server statisch ablegt. Was anderes macht ja ein Cache im Prinzip auch nicht.

Aber schau dir mal PWAs^[1] mit Service Worker an. Super Reaktionszeit plus zeitnahes steuerbares Refreshing plus Offline-Arbeiten (sofern sinnvoll).

dedlfix.

---

1. Progressive Web Apps ↩︎

[Rolf B]

Hallo ursus,

sowas hab ich vor ein paar Jahren mal gebaut, incl. Cache-Headern. Weil ich den SASS- bzw. LESS-Toolstack mit Node.js vermeiden wollte (bzw. mein Mitentwickler, dem auch der Server gehört, da strikt gegen war).

Das Lästige an dieser Lösung war, dass ich keinen Editor habe, der die Kombination PHP/CSS sauber verarbeitet (mein Tool war da NetBeans). PHP/HTML ist okay, aber wenn ich PHP in CSS einbette laufen sämtliche Syntax-Highlighter, die mich dann ja auch noch auf Tippfehler hinweisen wollen, Amok.

Rolf

[dedlfix]

Tach!

Das Lästige an dieser Lösung war, dass ich keinen Editor habe, der die Kombination PHP/CSS sauber verarbeitet (mein Tool war da NetBeans). PHP/HTML ist okay, aber wenn ich PHP in CSS einbette laufen sämtliche Syntax-Highlighter, die mich dann ja auch noch auf Tippfehler hinweisen wollen, Amok.

PhpStorm von JetBrains kann sowas. Kostet aber etwas.

dedlfix.