CSS irgendwie zuweisen/übernehmen/vererben – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self CSS irgendwie zuweisen/übernehmen/vererben Wed, 15 May 19 21:56:32 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748780#m1748780 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748780#m1748780 <p>Hallo,</p> <p>kann ich irgendwie dem .content den Inhalt von vorher definitieren .header zuweisen?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">.header</span> <span class="token punctuation">{</span><span class="token property">grid-column</span><span class="token punctuation">:</span> 1/3<span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>425px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.content</span><span class="token punctuation">{</span><span class="token property">grid-column</span><span class="token punctuation">:</span>1/3<span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> <p>Sowas in der Art wie:</p> <p>.content==.header;</p> <p>Danke, Bernd</p> CSS irgendwie zuweisen/übernehmen/vererben Wed, 15 May 19 22:03:27 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748781#m1748781 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748781#m1748781 <p>Tach!</p> <blockquote> <p>kann ich irgendwie dem .content den Inhalt von vorher definitieren .header zuweisen? [...] Sowas in der Art wie:</p> <p>.content==.header;</p> </blockquote> <p>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.</p> <p>dedlfix.</p> CSS irgendwie zuweisen/übernehmen/vererben Wed, 15 May 19 22:19:13 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748783#m1748783 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748783#m1748783 <p>Lieber Bernd,</p> <blockquote> <p>kann ich irgendwie dem .content den Inhalt von vorher definitieren .header zuweisen?</p> </blockquote> <p>die Frage klingt nach einem fundamentalen Missverständnis bezüglich dessen, welchen Sinn oder welche Aufgabe CSS hat. Inhalte notiert man mit HTML.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 06:28:27 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748791#m1748791 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748791#m1748791 <p>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.</p> <p>Oder aber man schreibt bei Klassen mit einem Komma getrennt, also so:</p> <pre><code class="block language-css"><span class="token selector">.header, .content</span> <span class="token punctuation">{</span><span class="token property">grid-column</span><span class="token punctuation">:</span> 1/3<span class="token punctuation">}</span> </code></pre> <p>In Deinem Beispiel verbietet sich aber dieser Ansatz, weil die <code>.content</code>-Regel nur innerhalb einer Mediaquery gilt, die andere aber generell. Doch grundsätzlich könntest Du eine solch übergreifende Klasse nutzen.</p> <p>Nur mit CSS-Bordmitteln geht Deine Idee nicht, denn CSS ist rein deklarativ auf der Selektorenseite und keine Programmiersprache.</p> <p>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.</p> <p>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.</p> <p>Ich hoffe, ich habe Dein Problem korrekt verstanden.</p> <p>Grüße, Jens</p> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 08:35:05 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748801#m1748801 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748801#m1748801 <blockquote> <p>irgendwie</p> </blockquote> <p>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?</p> <pre><code class="block language-php"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token variable">$cssGridColumn</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'1/3'</span><span class="token punctuation">;</span> <span class="token variable">$cssContentFontColor</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'#000080'</span><span class="token punctuation">;</span> <span class="token variable">$cssHeaderFontColor</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'#646464'</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> .header</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> <span class="token php language-php"><span class="token delimiter important"><?=</span><span class="token variable">$cssGridColumn</span><span class="token punctuation">;</span><span class="token delimiter important">?></span></span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token php language-php"><span class="token delimiter important"><?=</span><span class="token variable">$cssHeaderFontColor</span><span class="token punctuation">;</span><span class="token delimiter important">?></span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>425px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.content</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> <span class="token php language-php"><span class="token delimiter important"><?=</span><span class="token variable">$cssGridColumn</span><span class="token punctuation">;</span><span class="token delimiter important">?></span></span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token php language-php"><span class="token delimiter important"><?=</span><span class="token variable">$cssContentFontColor</span><span class="token punctuation">;</span><span class="token delimiter important">?></span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> CSS irgendwie zuweisen/übernehmen/vererben Wed, 15 May 19 22:17:22 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748782#m1748782 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748782#m1748782 <p>@@dedlfix</p> <blockquote> <p>Weil das aber praktisch wäre, hat man CSS-Präprozessoren erfunden</p> </blockquote> <p>Und was ginge damit, was ohne nicht ginge?</p> <p>Aber ich verstehe auch die Intention hinter Bernds Frage nicht (von der Formulierung „den Inhalt zuweisen“ mal ganz abgesehen).</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 06:12:14 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748789#m1748789 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748789#m1748789 <p>Tach!</p> <blockquote> <blockquote> <p>Weil das aber praktisch wäre, hat man CSS-Präprozessoren erfunden</p> </blockquote> <p>Und was ginge damit, was ohne nicht ginge?</p> </blockquote> <p><a href="https://sass-lang.com/guide" rel="nofollow noopener noreferrer">Sass/SCSS Basics</a>. Nesting (Verschactelungen), Mixins (Funktionen mit Argumenten), Extension/Inheritance (Erweiterbarkeit/Vererbung) und vielleicht noch ein paar Dinge mehr, die noch nicht mit CSS only gehen.</p> <blockquote> <p>Aber ich verstehe auch die Intention hinter Bernds Frage nicht (von der Formulierung „den Inhalt zuweisen“ mal ganz abgesehen).</p> </blockquote> <p>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 <code>grid-column: 1/3</code></p> <pre><code class="block language-scss"><span class="token selector"><span class="token placeholder">%gemeinsames</span> </span><span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1/3<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.header </span><span class="token punctuation">{</span> <span class="token keyword">@extend</span> <span class="token placeholder selector">%gemeinsames</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>425px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.content </span><span class="token punctuation">{</span> <span class="token keyword">@extend</span> <span class="token placeholder selector">%gemeinsames</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>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.</p> <p>dedlfix.</p> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 07:01:07 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748796#m1748796 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748796#m1748796 <p>@@dedlfix</p> <blockquote> <pre><code class="block bad language-scss"><span class="token selector"><span class="token placeholder">%gemeinsames</span> </span><span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1/3<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.header </span><span class="token punctuation">{</span> <span class="token keyword">@extend</span> <span class="token placeholder selector">%gemeinsames</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>425px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.content </span><span class="token punctuation">{</span> <span class="token keyword">@extend</span> <span class="token placeholder selector">%gemeinsames</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Getestet hast du das aber nicht‽ Bspw. in <a href="https://www.sassmeister.com/" rel="nofollow noopener noreferrer">SassMeister</a>:</p> <p><em lang="en">You may not @extend an outer selector from within @media.<br> You may only @extend selectors within the same directive.</em></p> <p>Das ginge nur mit Mixin:</p> <pre><code class="block language-scss"><span class="token keyword">@mixin</span> <span class="token selector">gemeinsames </span><span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1/3<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.header </span><span class="token punctuation">{</span> <span class="token keyword">@include</span> gemeinsames<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>425px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.content </span><span class="token punctuation">{</span> <span class="token keyword">@include</span> gemeinsames<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Und immer noch die Frage: was ginge damit, was ohne [Sass] nicht ginge? Vanilla CSS:</p> <pre><code class="block language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--gemeinsames</span><span class="token punctuation">:</span> 1/3<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.header</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gemeinsames<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>425px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.content</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gemeinsames<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Aber auch das würde man anders machen, bspw. so:</p> <pre><code class="block language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [full-start] 62fr 38fr [full-end]<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.header</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> full<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>425px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.content</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> full<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>LLAP </p> <p>PS: Die ganzen Fehler hab ich mal unkorrigiert gelassen:</p> <ul> <li> <p>Verwendung von <code class="bad">px</code> anstatt <code class="good">em</code></p> </li> <li> <p>Verwendung von Klassen wie <code class="bad">"header"</code> und <code class="bad">"content"</code>, die bei vernünfitgem Markup mit Elementen <code class="good"><header></code> und <code class="good"><main></code> obsolet sind.</p> </li> </ul> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 07:13:49 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748797#m1748797 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748797#m1748797 <p>@@Flocke</p> <p>Flocke‽ Die Hölle <em>ist</em> zugefroren! </p> <blockquote> <p>Nur mit CSS-Bordmitteln geht Deine Idee nicht</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748796#m1748796" rel="noopener noreferrer">Nicht?</a> Wir sprachen drüber? <em>Gestern?</em> </p> <p>Bevor du jetzt ansetzt, aus dem Browser-Museum zu plaudern (wie hieß das Exponat doch gleich – Internet Explorator?), der kann schon <code>display: grid</code> nicht (in der Syntax), bräuchte also noch eine ganz andere Sonderbehandlung.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 07:26:12 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748800#m1748800 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748800#m1748800 <p>Tach!</p> <blockquote> <p>Getestet hast du das aber nicht‽</p> </blockquote> <p>Hab ich nicht.</p> <blockquote> <p><em lang="en">You may not @extend an outer selector from within @media.<br> You may only @extend selectors within the same directive.</em></p> </blockquote> <p>Hab ich nicht ewrwartet, dass das da nicht geht.</p> <blockquote> <p>Das ginge nur mit Mixin:</p> </blockquote> <p>Na immerhin.</p> <blockquote> <p>Und immer noch die Frage: was ginge damit, was ohne [Sass] nicht ginge? Vanilla CSS:</p> </blockquote> <p>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 <code>1/3</code> zu kopieren, sondern alle Regeln eines Selektors.</p> <p>dedlfix.</p> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 07:21:49 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748799#m1748799 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748799#m1748799 <p>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.</p> <p>Grüße aus Mainz,</p> <p>Jens Grochtdreis</p> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 09:26:18 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748805#m1748805 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748805#m1748805 <p>@@Flocke</p> <blockquote> <p>Stimmt, er könnte eine CSS-Variable setzen.</p> </blockquote> <p>Du hast <em lang="en">custom properties</em> falsch geschrieben. </p> <p><em lang="en">“The biggest trick the devil ever pulled was convincing people to call CSS custom properties ‘variables’.”</em> —<a href="https://twitter.com/HugoGiraudel/status/966793340871200770" rel="nofollow noopener noreferrer">Kitty Giraudel</a><br> (☞ <a href="https://speakerdeck.com/gunnarbittersmann/custom-properties-sind-mehr-als-bloss-css-variablen?slide=25" rel="nofollow noopener noreferrer">in deutsch und in LiebeGerda/LiebeDoris</a>)</p> <blockquote> <p>… und würde den Code nicht verkürzen.</p> </blockquote> <p><em lang="en">“The greatest trick the devil ever pulled was to convince us that fewer characters makes things more readable.”</em> —<a href="https://twitter.com/heydonworks/status/892637394243026944" rel="nofollow noopener noreferrer">Heydon Pickering</a></p> <p>Und es ist überhaupt nicht klar, worum es Bernd überhaupt ging. Code verkürzen? Nicht wirklich.</p> <blockquote> <p>nur der von Dir gehasste Browser ausgeschlossen.</p> </blockquote> <p>Nein, der war – wie gesagt – noch nie eingeschlossen.</p> <p>Obwohl: er war es doch! <em lang="en">Progressive enhancement</em>.</p> <p>Sagte ich schon <em lang="en">progressive enhancement</em>?</p> <p>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 <a href="https://forum.selfhtml.org/self/2015/sep/19/technische-fragen-zu-einer-seite-die-nur-aus-einer-seite-besteht/1650282#m1650282" rel="noopener noreferrer">nicht die richtigen Fragen gestellt</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> CSS irgendwie zuweisen/übernehmen/vererben Tue, 21 May 19 11:01:45 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1749071#m1749071 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1749071#m1749071 <p>@@dedlfix</p> <blockquote> <blockquote> <p><em lang="en">You may not @extend an outer selector from within @media.<br> You may only @extend selectors within the same directive.</em></p> </blockquote> <p>Hab ich nicht ewrwartet, dass das da nicht geht.</p> <blockquote> <p>Das ginge nur mit Mixin:</p> </blockquote> <p>Na immerhin.</p> </blockquote> <p>Deshalb lege ich in Sass Dinge gerne so an, dass man sie als Mixin und als Platzhalterklasse verwenden kann:</p> <pre><code class="block language-scss"><span class="token keyword">@mixin</span> <span class="token selector">mein-ding </span><span class="token punctuation">{</span> <span class="token comment">// Styles für mein Ding</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token placeholder">%mein-ding</span> </span><span class="token punctuation">{</span> <span class="token keyword">@include</span> mein-ding<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 09:03:58 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748803#m1748803 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748803#m1748803 <p>Tach!</p> <blockquote> <p>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?</p> </blockquote> <p>Mir nicht. Das ist auch eine Möglichkeit, die noch dazu nicht das Vorhandensein eines weiteren Tools benötigt.</p> <p>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</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>script.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>das Ergebnis als text/html deklariert ist. Prinzipdarstellung:</p> <pre><code class="block language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">header</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Content-Type: text/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$block</span> <span class="token operator">=</span> <span class="token string heredoc-string"><span class="token delimiter symbol"><span class="token punctuation"><<<</span>EOT</span> color: black; background-color: white; <span class="token delimiter symbol">EOT<span class="token punctuation">;</span></span></span> <span class="token delimiter important">?></span></span> .whatever { <span class="token php language-php"><span class="token delimiter important"><?=</span> <span class="token variable">$block</span> <span class="token delimiter important">?></span></span> } </code></pre> <p>Wenn man nicht nur einzelnen Werte sondern ganze Blöcke wiederholen möchte, kann man PHPs Heredoc (mit Variablenersetzung) oder Nowdoc (ohne) für <a href="https://www.php.net/manual/en/language.types.string.php" rel="nofollow noopener noreferrer">Strings</a> verwenden, um diese Blöcke im Code zu notieren.</p> <p>dedlfix.</p> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 12:42:42 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748826#m1748826 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748826#m1748826 <p>Hallo ursus,</p> <p>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).</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 10:40:07 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748813#m1748813 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748813#m1748813 <blockquote> <p>kann man auch CSS-Resourcen mit PHP erzeugen.</p> </blockquote> <pre><code class="block language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">header</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Content-Type: text/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// …</span> </span></code></pre> <p>Damit hast Du Recht. Aber ich bin ja so ein „Reaktionszeitfetischist“… unter diesem Aspekt sollte man dann daran denken, <a href="https://code.fastix.org/Projekte/PHP:Caching%20f%C3%BCr%20Webprojekte/" rel="nofollow noopener noreferrer">den Output bei "quasistatischen" Ressourcen auch entsprechend serverseitig und browserseitig zu cachen</a> 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.</p> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 10:39:36 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748812#m1748812 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748812#m1748812 <p>Tach!</p> <blockquote> <blockquote> <p>Stimmt, er könnte eine CSS-Variable setzen.</p> </blockquote> <p>Du hast <em lang="en">custom properties</em> falsch geschrieben. </p> </blockquote> <p>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?</p> <p>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?</p> <p>dedlfix.</p> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 11:13:50 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748815#m1748815 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748815#m1748815 <p>@@dedlfix</p> <blockquote> <p>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?</p> </blockquote> <p>Nö, <em lang="en">custom properties</em> sind wie andere CSS-Eigenschaften auch: sie können <em>einen</em> Wert haben. Der eine Wert kann aber auch was Zusammengesetztes sein: <code>--abstand: 3em 2em</code>. Ob und wie man den Wert später verwendet, ist der <em lang="en">custom property</em> egal.</p> <p>Man kann einer CSS-Eigenschaft den Wert einer <em lang="en">custom property</em> zuweisen (<code>background: var(--selfhtml-logo)</code>), aber auch den Wert als Teil irgendwo einsetzen: <code>background: whitesmoke var(--selfhtml-logo)</code>.</p> <p>Und man kann Werte von <em lang="en">custom properties</em> auch für die Deklaration anderer <em lang="en">custom properties</em> nutzen: <code>--selfhtml-logo: url(http://src.selfhtml.org/selfhtml.png) var(--abstand) no-repeat</code>.</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/pmeBqK?editors=01000" rel="noopener noreferrer">Beispiel zum Rumspielen</a></p> <p></p> <blockquote> <p>Sie können nicht ganze Gruppen von Eigenschaften zusammenfassen?</p> </blockquote> <p>Du kannst <code>--code: 'border: thin solid; padding: 1em 2em'</code> setzen; hilft aber nicht weiter, denn AFAIK gibt’s keine <code>exec()</code>-Funktion, um sowas als CSS zu parsen.</p> <blockquote> <p>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?</p> </blockquote> <p>Kannst du mal genauer beschreiben, was du im Sinn hast?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 10:51:20 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748814#m1748814 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748814#m1748814 <p>Tach!</p> <blockquote> <p>Aber ich bin ja so ein „Reaktionszeitfetischist“… unter diesem Aspekt sollte man dann daran denken, <a href="https://code.fastix.org/Projekte/PHP:Caching%20f%C3%BCr%20Webprojekte/" rel="nofollow noopener noreferrer">den Output bei "quasistatischen" Ressourcen auch entsprechend serverseitig und browserseitig zu cachen</a> [...]</p> </blockquote> <p>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.</p> <p>Aber schau dir mal PWAs<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> mit Service Worker an. Super Reaktionszeit plus zeitnahes steuerbares Refreshing plus Offline-Arbeiten (sofern sinnvoll).</p> <p>dedlfix.</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Progressive Web Apps <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 11:44:28 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748816#m1748816 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748816#m1748816 <p>Tach!</p> <blockquote> <blockquote> <p>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?</p> </blockquote> <p>Nö, <em lang="en">custom properties</em> sind wie andere CSS-Eigenschaften auch: sie können <em>einen</em> Wert haben. Der eine Wert kann aber auch was Zusammengesetztes sein: <code>--abstand: 3em 2em</code>. Ob und wie man den Wert später verwendet, ist der <em lang="en">custom property</em> egal.</p> </blockquote> <p>Wieso "Nö"? Hast du nicht genau das bestätigt, was ich schrieb? "Werte" sind für mich auch zu einem zusammengesetzte Einzelwerte.</p> <p>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.</p> <blockquote> <p>☞ <a href="https://codepen.io/pen?editors=0100" rel="noopener noreferrer">Beispiel zum Rumspielen</a></p> </blockquote> <p>Ich seh da nichts außer einem leeren Pen.</p> <blockquote> <blockquote> <p>Sie können nicht ganze Gruppen von Eigenschaften zusammenfassen?</p> </blockquote> <p>Du kannst <code>--code: 'border: thin solid; padding: 1em 2em'</code> setzen; hilft aber nicht weiter, denn AFAIK gibt’s keine <code>exec()</code>-Funktion, um sowas als CSS zu parsen.</p> </blockquote> <p>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 <a href="https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748796#m1748796" rel="noopener noreferrer">ein Fehler</a> sein? Du verwirrst mich.</p> <blockquote> <blockquote> <p>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?</p> </blockquote> <p>Kannst du mal genauer beschreiben, was du im Sinn hast?</p> </blockquote> <p>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.</p> <p>dedlfix.</p> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 12:18:10 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748821#m1748821 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748821#m1748821 <p>@@dedlfix</p> <blockquote> <blockquote> <p>☞ Beispiel zum Rumspielen</p> </blockquote> <p>Ich seh da nichts außer einem leeren Pen.</p> </blockquote> <p>Wie dumm von mir. URL jetzt berichtigt zu <a href="https://codepen.io/gunnarbittersmann/pen/pmeBqK?editors=0100" rel="noopener noreferrer">https://codepen.io/gunnarbittersmann/pen/pmeBqK?editors=0100</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 16:35:10 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748857#m1748857 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748857#m1748857 <p>@@dedlfix</p> <blockquote> <p>Wieso "Nö"? Hast du nicht genau das bestätigt, was ich schrieb?</p> </blockquote> <p>Mag sein. Dann hatte ich dich falsch verstanden, was du mit „Custom Properties […] sind Werte für eine einzelne CSS-Eigenschaft“ meintest.</p> <blockquote> <p>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.</p> </blockquote> <p>Beispiel: Schriftgrößen</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-medium<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-x-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h2</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">blockquote</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">blockquote footer</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-medium<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--font-size-medium</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> <span class="token property">--font-size-large</span><span class="token punctuation">:</span> 1.4rem<span class="token punctuation">;</span> <span class="token property">--font-size-x-large</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 30em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--font-size-medium</span><span class="token punctuation">:</span> 1.1rem<span class="token punctuation">;</span> <span class="token property">--font-size-large</span><span class="token punctuation">:</span> 1.7rem<span class="token punctuation">;</span> <span class="token property">--font-size-x-large</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Mit Media-Query müssen nun nicht die Werte der <code>font-size</code>-Eigenschaft für alle einzelnen Elemente geändert werden, sondern nur an einer Stelle die Werte der <em lang="en">custom properties</em>.</p> <p>Und an der Stelle wird auch deutlich, warum es <em lang="en">custom <strong>properties</strong></em> sind und keine „CSS-Variablen“.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 12:49:23 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748827#m1748827 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748827#m1748827 <p>Tach!</p> <blockquote> <p>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.</p> </blockquote> <p>PhpStorm von JetBrains <a href="https://www.jetbrains.com/help/phpstorm/syntax-highlighting-php-in-js.html" rel="nofollow noopener noreferrer">kann sowas</a>. Kostet aber etwas.</p> <p>dedlfix.</p> CSS irgendwie zuweisen/übernehmen/vererben Thu, 16 May 19 16:58:56 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748859#m1748859 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748859#m1748859 <p>Tach!</p> <blockquote> <p>Beispiel: Schriftgrößen</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-medium<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-x-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h2</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">blockquote</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">blockquote footer</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-medium<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--font-size-medium</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> <span class="token property">--font-size-large</span><span class="token punctuation">:</span> 1.4rem<span class="token punctuation">;</span> <span class="token property">--font-size-x-large</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 30em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--font-size-medium</span><span class="token punctuation">:</span> 1.1rem<span class="token punctuation">;</span> <span class="token property">--font-size-large</span><span class="token punctuation">:</span> 1.7rem<span class="token punctuation">;</span> <span class="token property">--font-size-x-large</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Mit Media-Query müssen nun nicht die Werte der <code>font-size</code>-Eigenschaft für alle einzelnen Elemente geändert werden, sondern nur an einer Stelle die Werte der <em lang="en">custom properties</em>.</p> </blockquote> <p>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.</p> <p>Was ist mit Eigenschaften, die man gar nicht generell setzen möchte, sondern nur in bestimmten Bereichen?</p> <p>dedlfix.</p> CSS irgendwie zuweisen/übernehmen/vererben Sat, 18 May 19 06:15:58 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748893#m1748893 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748893#m1748893 <p>@@Gunnar Bittersmann</p> <blockquote> <p>Beispiel: Schriftgrößen</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-medium<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-x-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h2</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">blockquote</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">blockquote footer</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-medium<span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Um auch Browser zu unterstützen, die keine <em lang="en">custom properties</em> unterstützen:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.1rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-medium<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-x-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h2</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.7rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">blockquote</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.7rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">blockquote footer</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.1rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-medium<span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre> <p>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.</p> <p>Um seine Schäfchen ins Trockene (DRY) zu kriegen, kann ein Präprozessor dienlich sein. <a href="https://www.sassmeister.com/gist/bee2acde4a3b9cb1c8b6591e68119915" rel="nofollow noopener noreferrer">Beispiel in Sass</a></p> <p>Und auf die Art möchte man sicher nicht nur die Schriftgrößen festlegen, sondern auch die zugehörigen Zeilenabstände. <a href="https://codepen.io/gunnarbittersmann/pen/XQvgYO?editors=0100" rel="noopener noreferrer">Beispiel in Stylus</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> CSS irgendwie zuweisen/übernehmen/vererben Sat, 18 May 19 06:18:53 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748894#m1748894 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748894#m1748894 <p>@@dedlfix</p> <blockquote> <p>Was ist mit Eigenschaften, die man gar nicht generell setzen möchte, sondern nur in bestimmten Bereichen?</p> </blockquote> <p><em lang="en">Custom properties</em> 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.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> CSS irgendwie zuweisen/übernehmen/vererben Sat, 18 May 19 07:20:48 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748897#m1748897 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748897#m1748897 <p>Tach!</p> <blockquote> <blockquote> <p>Was ist mit Eigenschaften, die man gar nicht generell setzen möchte, sondern nur in bestimmten Bereichen?</p> </blockquote> <p><em lang="en">Custom properties</em> 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.</p> </blockquote> <p>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 <a href="https://en.wikipedia.org/wiki/XY_problem" rel="nofollow noopener noreferrer">XY-Problem</a> 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.</p> <p>dedlfix.</p> CSS irgendwie zuweisen/übernehmen/vererben Tue, 21 May 19 10:55:29 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1749070#m1749070 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1749070#m1749070 <p>@@Gunnar Bittersmann</p> <blockquote> <p><em lang="en">Custom properties</em> sind ein Werkzeug, das man einsetzen kann, wo es sinnvoll ist</p> </blockquote> <p>☞ <a href="https://forum.selfhtml.org/self/2019/may/20/ist-ein-open-polygon-nur-mit-css-strich-html-moeglich/1749069#m1749069" rel="noopener noreferrer">ein Beispiel, wo es sinnvoll ist</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> CSS irgendwie zuweisen/übernehmen/vererben Sat, 18 May 19 11:17:14 Z https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748902#m1748902 https://forum.selfhtml.org/self/2019/may/15/css-irgendwie-zuweisen-strich-uebernehmen-strich-vererben/1748902#m1748902 <p>@@dedlfix</p> <blockquote> <p>Warum kommst du jetzt auf so einer vorwurfsvollen Antwort?</p> </blockquote> <p>Da sollte keinerlei Vorwurf sein und da war auch keiner.</p> <blockquote> <p>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.</p> </blockquote> <p>Durch Aufzählung der Selektoren, wie Flocke schon sagte:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.1rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-medium<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-x-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h2</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.7rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">blockquote</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.7rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">blockquote footer</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.1rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-medium<span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre> <p>ließe sich zusammenfassen zu</p> <pre><code class="block language-css"><span class="token selector">body, blockquote footer</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.1rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-medium<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-x-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">h2, blockquote</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.7rem<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-large<span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre> <p>wenn das denn Vorteile bringt.</p> <blockquote> <p>Deine Antwort war Custom Propertys.</p> </blockquote> <p>Nicht auf deine Frage, wie man ein Bündel von Eigenschaften mehrfach verwenden kann, ohne sie mehrfach zu notieren.</p> <p>Dass sich eine CSS-Eigenschaft nicht dafür verwenden lässt, mehrere Deklarationen als Wert zu haben, sollte klar sein. <em lang="en">Custom properties</em> sind – wie der Name schon sagt – <strong>Eigenschaften</strong>. Es sind keine Mixins; es sind <strong>keine Variablen</strong>.</p> <p>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“.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div>