Background-Filter plötzlich nicht wirksam

[Killua]

Unter welchen Umständen kann es passieren, dass sich Background-Filter nicht anwenden lassen?

Folgendes habe ich gemacht und es funzte auch:

body  {
    background-image: url(bild.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    backdrop-filter: blur(10px);
    background-blend-mode: luminosity;
}

dann entschied ich mich, diesen Hintergrund nur für den DIV .header alleine zu verwenden - auch das klappte samt allen Filtern:

.header  {
    background-image: url(bild.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    backdrop-filter: blur(10px);
    background-blend-mode: luminosity;
}

Doch irgendwann waren die Filtereffekte im Header weg! Nach vielen erfoglosen Versuchen wandte ich dies wieder auf den Body an - das klappt weiterhin!

Wieso werden nur die Background-Filter nur bei dem DIV .header nicht mehr angewandt?

[MudGuard]

Hi,

dann entschied ich mich, diesen Hintergrund nur für den DIV .header alleine zu verwenden - auch das klappte samt allen Filtern:

Doch irgendwann waren die Filtereffekte im Header weg! Nach vielen erfoglosen Versuchen wandte ich dies wieder auf den Body an - das klappt weiterhin!

kann es sein, daß es im div nie funktioniert (hat) und nur der Cache noch die body-Variante hatte?

Irgendwann war das aus dem Cache weg, und die nicht-funktionierende Variante im div wurde verwendet …

Abgesehen davon: ein div mit class header - sollte das evtl. eher ein header-Element sein?

cu,
Andreas a/k/a MudGuard

[Killua]

Ja, es hat definitiv im div.header funktioniert und nein, Cache wird klaro stets geleert.

Die Klasse des Divs heisst eigentlich mh-header... irgendwas und ist Teile des Elements header. Habe den Code hier nur vereinfacht, daher einfach ".header"

Da es sich um eine WP Site handelt, ist auch noch .home davor, damit der so behandelte Header nur auf der Startseite erscheint. Aber all das scheint mir nicht relevant. Denn es ging ja eine Weile perfekt.

[Raketenwilli]

„Plötzlich“ tritt sowas auf, wenn der Browser aus dem Parsen des CSS aussteigt. Also bei neuen Typos.

Habe den Code hier nur vereinfacht, daher einfach ".header"

Was womöglich auch dazu führte, dass der Typo „wegvereinfacht“ wurde, wir ihn nicht sehen, weil Du ihn nicht zeigst.

Validiere Dein originales CSS.

[Killua]

Habe den Code hier nur vereinfacht, daher einfach ".header"

Was womöglich auch dazu führte, dass der Typo „wegvereinfacht“ wurde, wir ihn nicht sehen, weil Du ihn nicht zeigst.

Verstehe ich nicht

Validiere Dein originales CSS.

Das geht ja lokal nicht, oder?

[Raketenwilli]

Habe den Code hier nur vereinfacht, daher einfach ".header"

Was womöglich auch dazu führte, dass der Typo „wegvereinfacht“ wurde, wir ihn nicht sehen, weil Du ihn nicht zeigst. Verstehe ich nicht

Validiere Dein originales CSS. Das geht ja lokal nicht, oder?

Oder:

https://jigsaw.w3.org/css-validator/DOWNLOAD.html.de

[Killua]

https://jigsaw.w3.org/css-validator/DOWNLOAD.html.de

Oh, danke. Mal sehen ob ich das mal hinbekomme.

[tk]

Moin,

Was womöglich auch dazu führte, dass der Typo „wegvereinfacht“ wurde, wir ihn nicht sehen, weil Du ihn nicht zeigst.

Verstehe ich nicht

Rakete will damit wohl sagen, dass du beim Kürzen des Code die Stelle die den Fehler verursacht evtl. mit weg gekürzt haben könntest.

Validiere Dein originales CSS.

Das geht ja lokal nicht, oder?

Per URI nicht, nein – du kannst aber auch deine CSS-Datei hochladen oder dort den CSS-Code reinkopieren.

Gruß
Tobias

[Killua]

Per URI nicht, nein – du kannst aber auch deine CSS-Datei hochladen oder dort den CSS-Code reinkopieren.

Cool, Danke!

Ist übrigens alles ok, alles grün.

[Rolf B]

Hallo Killua,

ich kann das Problem nicht nachvollziehen - bei mir klappt das, wenn ich im Header ein blur setze.

Wir bräuchten wohl einen Link auf deine Seite, um der Sache auf den Grund zu gehen. Oder ein Codebeispiel, das anderswo liegt, und das Problem zeigt.

Rolf

[Killua]

bei mir klappt das, wenn ich im Header ein blur setze

Hat bei mir auch funktioniert. Doch plötzlich nicht mehr, dabei wurde nichts verändert. Nix neues installiert und nichts an dem Code für den Header verändert. Dennoch in allen Browsern, allen Bilschirmgrößen und mit allen geleerten Caches - haben alle diese Filter keine Wirkung mehr.

Ja, was ich geändert habe: Das Hintergrundbild von jpg zu webp gemacht. Doch es geht auch mit dem *.jpg nicht mehr.

Wir bräuchten wohl einen Link auf deine Seite, um der Sache auf den Grund zu gehen. Oder ein Codebeispiel, das anderswo liegt, und das Problem zeigt.

Leider geht beides nicht, die Site ist am XAMPP, es laufen erste Planungen, Bastelarbeiten, Suche nach einem Theme usw. dh. Online kann noch lange dauern.

Ich habe aber mal von so Portalen gehört, woe man öffentlich herumfrickeln kann, wo andere das sehen können. Oder so? Nur wo, wie? Wobei das aber wahrscheinlich im komplexen WP Kontext auch nix bringt ...

[Rolf B]

Hallo Killua,

Doch plötzlich nicht mehr, dabei wurde nichts verändert.

Reflexmäßige Antwort: Da dürftest Du Dich irren. Wenn Du nichts veränderst, verändert sich das Verhalten auch nicht. Es sei denn, ein Plattform-Update (Windows, Browser) schießt quer, aber das ist unwahrscheinlich.

Du weißt nur nicht, was verändert wurde.

Ich habe aber mal von so Portalen gehört, woe man öffentlich herumfrickeln kann,

Ja, im Selfwiki gibt's eins, dass passenderweise auch Frickl heißt. Hier. Frickl zeichnet sich allerdings nicht durch umfangreichen Komfort aus, das ist ein Minimal-Labor.

Mir bekannte Alternativen sind jsfiddle.net, codepen.io oder w3schools tryit. Ich spiele mit jsfiddle, wenn ich was zu Spielen habe. Andere schwören auf Codepen oder Tryit. Each their own poison.

Ein Problem mit einer Wordpress-Seite nach zufrickeln dürfte aber mühsam sein. Ein Copy+Paste des gesamten von WP rausgerotzten HTML und CSS könnte man versuchen... Good luck

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wenn Du nichts veränderst, verändert sich das Verhalten auch nicht. Es sei denn, ein Plattform-Update (Windows, Browser) schießt quer, aber das ist unwahrscheinlich.

Ist es das?

🖖 Живіть довго і процвітайте

[Killua]

Ist es das?

🖖 Живіть довго і процвітайте

?

[Gunnar Bittersmann]

@@Killua

Wenn Du nichts veränderst, verändert sich das Verhalten auch nicht. Es sei denn, ein Plattform-Update (Windows, Browser) schießt quer, aber das ist unwahrscheinlich.

Ist es das?

?

Ja, das ist es. Hatte ich doch im anderen Posting ausgeführt.

🖖 Живіть довго і процвітайте

Oder bezog sich dein Fragezeichen darauf?

Live long and prosper auf Ukrainisch (im Plural).

🖖 Живіть довго і процвітайте

[Killua]

Es sei denn, ein Plattform-Update (Windows, Browser) schießt quer, aber das ist unwahrscheinlich.

Möglich - denn der PC bekam gestern das Win 22H2 uw. Updates. Aber gefühlsmäßig liegt der Fehler eher bei mir.

jsfiddle.net

schaut cool aus Ev. schaffe ich das da drin nachzuvollziehen. Zuvor probiere ich es aber noch lokal.

Ein Problem mit einer Wordpress-Seite nach zufrickeln dürfte aber mühsam sein.

leider ja, ...

[Gunnar Bittersmann]

@@Killua

Folgendes habe ich gemacht und es funzte auch:

body  {
    background-image: url(bild.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    backdrop-filter: blur(10px);
    background-blend-mode: luminosity;
}

Du hast nicht richtig getestet. Das funktioniert nicht im Firefox. Es geht im Fuchs aber ohne background-blend-mode: luminosity. Wozu denkst du das zu brauchen?

Es funktioniert auch nicht im Safari; der braucht das noch mit Präfix: -webkit-backdrop-filter: blur(10px).

dann entschied ich mich, diesen Hintergrund nur für den DIV .header alleine zu verwenden - auch das klappte samt allen Filtern:

.header  {
    background-image: url(bild.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    backdrop-filter: blur(10px);
    background-blend-mode: luminosity;
}

Doch irgendwann waren die Filtereffekte im Header weg!

Can I Use listet die backdrop-filter-Eigenschaft noch als UNOFF(icial). Die Spezifikation ist im Status Editor’s Draft. Da kann sich durchaus noch was ändern, sei es in der Spec oder in den Implementierungen in Browsern.

Nach vielen erfoglosen Versuchen wandte ich dies wieder auf den Body an - das klappt weiterhin!

Aber auch nur solange, wie du html keinen nicht völlig transparenten Hintergrund gibst.

Wieso werden nur die Background-Filter nur bei dem DIV .header nicht mehr angewandt?

Sie werden angewandt, wenn du body (oder html) das Hintergrundbild gibst und dem div den Filter.

☞ Spielwiese

🖖 Живіть довго і процвітайте

[Killua]

Das funktioniert nicht im Firefox

Möglich, ich habe nur Chrome und da gings 1000%-ig

Safari; der braucht das noch mit Präfix

Safari habe auch nicht und ja, mein alter HTML-Editor (den ich deswegen testweise wieder angeworfen habe) hat diese Präfixe dazugestellt.

Can I Use listet die backdrop-filter-Eigenschaft noch als UNOFF(icial)

Achso, danke. Aber die neue Version meines Editors scheint dies schon zum Standard erklärt zu haben ...

Nach vielen erfoglosen Versuchen wandte ich dies wieder auf den Body an - das klappt weiterhin!

Aber auch nur solange, wie du html keinen nicht völlig transparenten Hintergrund gibst

Das hat bei mir keinen Einfluss, es geht so und so, samt Filter. (wenn direkt auf Body angewandt)

Sie werden angewandt, wenn du body (oder html) das Hintergrundbild gibst und dem div den Filter.

Ja, auch das hat funktioniert. Und eben auch das vom 2.ten Code im Startpost hat geklappt.

Nun funzt beides nicht mehr ... Und das ist halt die Frage, welche Kriterien verhindern die Filter? Wüsste ich, welche Fehler man dabei machen kann, könnte ich uU. nachvollziehen wo ich diese machte.

Wozu denkst du das zu brauchen?

ich wollte halt mit diesen (für mich neuen Filtern für den Hintergrund) spielen, schau'n was die so können. Ob das je online geht? Vielleicht, sind ja coole Effekte, vielleicht auch nicht, keine Ahnung.

Und so ist eben nur theoretisches Interesse, warum sich das so ändern kann.

[Gunnar Bittersmann]

@@Killua

Das funktioniert nicht im Firefox Möglich, ich habe nur Chrome und da gings 1000%-ig

Denkbar schlechte Voraussetzung für einen Webentwickler. Du solltest deinen Kram zumindest in allen gängigen Browsern testen: neben Chrome also in Firefox, Edge und Safari.

Und natürlich auch auf Tablets und Smartphones.

Can I Use listet die backdrop-filter-Eigenschaft noch als UNOFF(icial) Achso, danke. Aber die neue Version meines Editors scheint dies schon zum Standard erklärt zu haben ...

Dein Editor hat nicht die Autoriät, etwas zum Standard zu erklären.

Sie werden angewandt, wenn du body (oder html) das Hintergrundbild gibst und dem div den Filter. Ja, auch das hat funktioniert. Und eben auch das vom 2.ten Code im Startpost hat geklappt.

Nun funzt beides nicht mehr ...

Ich hatte dir ein in allen oben genannten Browsern funktionierendes Beispiel verlinkt.

Wozu denkst du das zu brauchen? ich wollte halt mit diesen (für mich neuen Filtern für den Hintergrund) spielen, schau'n was die so können.

Die Frage bezog sich speziell auf background-blend-mode: luminosity, bei dem ich keinen visuelle Auswirkung erkennen konnte.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

Edge ist optional. Die Rendering-Engine ist schließlich Chromium.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Edge ist optional. Die Rendering-Engine ist schließlich Chromium.

Das heißt aber nicht, dass Edge auf demselben Chromium-Stand ist wie Chrome.

🖖 Живіть довго і процвітайте

[Killua]

Denkbar schlechte Voraussetzung für einen Webentwickler

Logisch. Bin aber eh keiner ...

auf Tablets und Smartphones

Darauf lege ich hohen Wert, das teste ich zuerst in den Browertools (F12) und später auf echten Geräten. Immerhin kamen auf eine "meiner" früheren Sites 90% mit dem Smartphone. Also möchte ich "mobile first", wie ihr Profis das auf den Punkt bringt.

Dein Editors hat nicht die Autoriät, etwas zum Standard zu erklären.

Sorry, habs Smiley, bzw. "..." vergessen. Das war klaro nicht ernst gemeint.

auf background-blend-mode: luminosity, bei dem ich keinen visuelle Auswirkung erkennen konnte.

Der macht so eine Art Graustufenbild

[Raketenwilli]

    backdrop-filter: blur(10px);
    background-blend-mode: luminosity;

Mal ganz seriös gefragt: Warum sollte die recht aufwendige Bildverarbeitung überhaupt im Browser geschehen? Ändert sich das dynamisch oder bist Du nur zu faul, Gimp zu benutzen und das Resultat zu speichern?

[Killua]

Mal ganz seriös gefragt: Warum sollte die recht aufwendige Bildverarbeitung überhaupt im Browser geschehen?

Seriöse Antwort: Wie eben einem anderen geantwortet, ist es nur Spielerei, Test dieser neuen Sachen. Und es bohrt halt in mir: Warum zT. gings vorher und was habe ich verbockt, dass es plötzlich nicht mehr ging?

Das solltet ihr hier doch kennen: Ein Problem, und man kommt nicht auf die Lösung, hat aber das Gefühl, knapp davor zu sein. Und dann wird gecodet, bis es klappt. Bei Laien wie mir ist halt das Niveau im Sandkasten, aber es drängt einem halt, das zu lösen.

Ändert sich das dynamisch

Das wär ja auch cool! Also zB. ein schwarzweißes Header-Higrubild, welches sich beim Scrollen einfärbt - oder umgekehrt. (alles nur Hirngespinste, Experimente vielleicht - aber nicht Thema der Eingangsfrage)

oder bist Du nur zu faul, Gimp zu benutzen und das Resultat zu speichern?

Zu 10000% sicher nicht - PS ist bei mir den ganzen Tag offen und so ein Bild Effekt in einer Sekunde erledigt.

[Killua]

Wie kann man hier die noch nicht gelesenen, unbeantworteten Beiträge sehen?

Es kommen so viele Antworten und ich will keinen unbeantwortet lassen, muss aber immer alle aufklappen und suchen, wo ich noch nicht antwortete.

Ev. gibts da auch so ne Markierung oder einen Schalter "zeige alle ungelesenen Beiträge"?

[Gunnar Bittersmann]

@@Killua

Wie kann man hier die noch nicht gelesenen, unbeantworteten Beiträge sehen?

Es kommen so viele Antworten und ich will keinen unbeantwortet lassen, muss aber immer alle aufklappen und suchen, wo ich noch nicht antwortete.

Ev. gibts da auch so ne Markierung oder einen Schalter "zeige alle ungelesenen Beiträge"?

Als angemeldeter Nutzer: oben im Menü auf Einstellungen gehen, dann unter Lesbarkeit und Übersicht deinen Wünschen anpassen.

Ich habe u.a. im Stylesheet .visited { text-decoration: line-through } zu stehen.

🖖 Живіть довго і процвітайте

[Der Martin]

Hallo Gunnar,

Ich habe u.a. im Stylesheet .visited { text-decoration: line-through } zu stehen.

das ist natürlich auch eine treffende Kennzeichnung. Mir genügt die farbliche Unterscheidung: Ungelesene Beiträge mit blauem, gelesene mit blassgrauem Titel (ist die Standardeinstellung, meine ich).

Einen schönen Tag noch
 Martin

[Killua]

Danke für den Tipp!

[Killua]

Würden die Beiträge nicht automatisch als "gelesen" gelten, wäre es ganz einfach: Einstellungen > Personalisierung "Klappe Threads zusammen, wenn sie vollständig gelesen wurden" Haken weg.

Im Abschnitt Lesbarkeit und Übersicht > "Klappe gelesene Beiträge zusammen" anhaken (Standard)

und "markiere Beiträge in der Nested-Ansicht als gelesen, wenn sie in den sichtbaren Bereich scrollen" auch ohne Haken lassen.

Dann sind alle ungelesenen Beiträge offen und die anderen zugeklappt.

Da aber alles automatisch als gelesen gilt, muss man die noch nicht beantworteten manuell als ungelesen markieren. Was beim nächsten Einstieg aber weg ist.

[Killua]

Update zT.

Die Ursache ist vmtl. eine kleine Einstellung im WP Customizer, die ich verändert habe (ja, ich)

Kurz gesagt, aktiviert (wahrscheinlich nur diese Einstellung), dass eine Klasse im Theme wirksam wird: .mh-header-transparent .mh-header { background: none; }

Lösche ich diese Zeile aus dem WP Parent-Theme, kann ich etliche(*) Filter und/oder Blend-Modi auf das Element header und/oder .header (uo. auf allen weiteren darin verschachtelten Divs) anwenden!

Das Problem: Man löscht nichts aus einem WP Parent-Theme. Und ich weiß nicht, wie ich diese Zeile mittels des CSS aus dem Child-Theme überschreiben, annulieren kann. Das muss ich wahrscheinlich den Theme-Hersteller fragen ...

Klaro wäre es nun einfacher, die hier eingangs erwähnte Einstellung im Customizer zurücksetzen (dann klappts auch ohne frickeln) - aber das gefällt mir aus anderen Gründen nicht, warum, dass ist für dieses Problem aber unwichtig.

*) Ne, es lassen sich noch immer nicht alle diese neuen Filter anwenden und schon gar nicht alle Kombinationen von backdrop-filter und background-blend-mode. Aber das ist nicht wichtig.

[Rolf B]

Hallo Killua,

ich nehme an, du musst das Thema Kaskade und Spezifität studieren.

Kaskade und Spezifität legen fest, welche CSS Regeln angewendet werden. Wenn die WP Styles höhere Spezifität haben, kommst Du nicht dran.

Das heißt jetzt nicht, dass Du alles mit !important in Grund und Boden bomben sollst. Aber manchmal reichen auch alberne Tricks wie

#foo#foo#foo {
   color:green;
}

um Vorrang vor einer Regel wie

#foo {
   color:red;
}

zu bekommen. Warum? Weil die erste Regel 3 Punkte im Zähler A hat und die zweite Regel nur einen. Guck Dir den verlinkten Artikel an, dann weißt Du was ich meine.

Um rauszufinden, wie die Vorrangsituation ist, musst Du allerdings die Situation mit den Entwicklertools deines Browsers erforschen - dann erfährst Du, welche CSS Regeln für ein bestimmtes Element gelten. Das kann in Fummelei ausarten.

Rolf

[Killua]

(https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade)

Interessante Sache, das kannte ich noch nicht.

Wenn die WP Styles höhere Spezifität haben, kommst Du nicht dran.

Klar. Vor allem dann, wenn irgendein Theme bereits mit dem allseits beliebten !important kommt, ist knifflig und oft gehts wieder nur mit einem !important.

Ev. hilft da dieser Trick mit den Zählern, dies eleganter zu lösen. Danke!

Das heißt jetzt nicht, dass Du alles mit !important in Grund und Boden bomben sollst.

Ich weiß, !important != so gern gesehen.

Aber manchmal reichen auch alberne Tricks wie

Ich habe mich damit gespielt und ja, es erhöht die Priorität oder sagt man eher Spezifität?

Nur im Fall der sturen Blend-Modi bzw. Filter hilfts scheinbar nix, egal was ich alles probierte.

Doch klickt man .mh-header-transparent .mh-header { background: none; } in den Browsertools weg, ist der Effekt sofort da! Ergo müsste ich das Gegenstück zu background: none; finden, diese Zeile quasi deaktivieren, dieses none mit ... was überschreiben?

[Killua]

Update

Wenn irgendwas das Element auf farblos setzt (in meinen Fall die ständig querschießende CSS Anweisung aus dem Parent-Theme: .mh-header-transparent .mh-header { background: none; } ) geht nix mit den Blend-Modi!

Daher habe ich den Spieß umgedreht:

.mh-header-transparent .mh-header {
    background-color: gray; /* Farbe zwingend, sonst geht nix! */
    background-blend-mode: luminosity; /* passt, alle Blend-Modi anwendbar! */
}

Nun kann ich einem beliebigen Element im <header> ein Higrubild geben, welches den Effekt zeigt. Man muss nur mit der Farbe / deren Transparenz experimentieren, damit es gut aussieht.

Also lassen sich diese Blend-Modi nicht auf eine Ebenenkomposition/Verrechnung nur mit der Bitmap ein - sondern brauchen eine Farbe.

[Rolf B]

Hallo Killua,

Priorität und Spezifität sind nicht das gleiche. Die Herkunft des Stylesheets, die Reihenfolge des Antreffens und die Spezifität ergeben die Priorität. Der Gesamtkomplex heißt Kaskade - die Spezifität ist also nur ein Teilaspekt der Priorität.

background ist eine Shorthand-Eigenschaft, die 10 andere Werte vereint. Wenn Du weniger hinschreibst, muss der Browser zum einen herausknobeln, welchen Du wohl gemeint haben könntest, und zum anderen setzt er die Werte, für die Du nichts angibst, auf ihre Initialwerte.

Das Schlüsselwort none ist nur für background-image definiert, deshalb setzt background:none das background-image auf none und die übrigen 9 Teileigenschaften auf initial.

Die Interaktion mit anderen background-beeinflussenden Eigenschaften ist nun nicht so ganz trivial. Die Priorisierung erfolgt auf Ebene der Einzeleigenschaften, d.h. wenn Du dies hier hast:

#a {
   background: red;
}
.b {
   background-image: url(...);
}
...
<div id="a" class="b">...</div>

dann setzt die Regel für #a die background-color auf rot und den Rest auf initial, darunter auch background-image. #a ist ein ID-Selektor und damit eine Spezifitätsstufe höher als der Klassenselektor .b, deswegen wird background-image überschrieben, obwohl es im Stylesheet hinter der #a Regel steht.

Rolf

[Killua]

Priorität und Spezifität sind nicht das gleiche. Die Herkunft des Stylesheets, die Reihenfolge des Antreffens und die Spezifität ergeben die Priorität. Der Gesamtkomplex heißt Kaskade - die Spezifität ist also nur ein Teilaspekt der Priorität.

WOW, gelernt müsste man das haben ...

background ist eine Shorthand-Eigenschaft

Shorthand ... so heisst das also wenn man alle Sachen zusammenfasst, was man einem Element geben kann?

Wenn Du weniger hinschreibst,

Ich schreibe immer alles aus, irgendwie gefällt mir das besser. Selbst bei Farbwerten, wo manche #fff statt #ffffff schreiben, ich machs HEX sechstellig.

muss der Browser zum einen herausknobeln, welchen Du wohl gemeint haben könntest, und zum anderen setzt er die Werte, für die Du nichts angibst, auf ihre Initialwerte

Eigentlich logisch und sogar mir verständlich.

Das Schlüsselwort none ist nur für background-image definiert, deshalb setzt background:none das background-image auf none und die übrigen 9 Teileigenschaften auf initial.

Ja, verstehe

Die Interaktion mit anderen background-beeinflussenden Eigenschaften ist nun nicht so ganz trivial. Die Priorisierung erfolgt auf Ebene der Einzeleigenschaften,

Damit und dem Beispiel drunter habe ich eine leise Ahnung was gemeint ist. Aber wie mir für das aktuelle Problem geholfen hätte - davon bin ich noch Lichtjahre weg. (oke, das mit der Farbe war die eigentliche Lösung)

Kann mir mit meinen bescheidenen Kapazitäten nur das vorstellen: Würde die Anweisung im Parent-Theme genauer spezifiert sein, also statt bloß background: none;

background-color: none; notiert sein, wäre es einfacher, dessen Wirkung zu überschreiben.

[Matthias Scharwies]

Servus!

Priorität und Spezifität sind nicht das gleiche. Die Herkunft des Stylesheets, die Reihenfolge des Antreffens und die Spezifität ergeben die Priorität. Der Gesamtkomplex heißt Kaskade - die Spezifität ist also nur ein Teilaspekt der Priorität. WOW, gelernt müsste man das haben ...

Zeit für eine kurze auszeitu nd ein studium der grundlagen:

• CSS/Tutorials/Einstieg/Kaskade

background ist eine Shorthand-Eigenschaft Shorthand ... so heisst das also wenn man alle Sachen zusammenfasst, was man einem Element geben kann?

Aber vorher noch:

• HTML/Tutorials/Einstieg/Gestaltung_mit_CSS

Herzliche Grüße

Matthias Scharwies

[Killua]

Zeit für eine kurze auszeitu nd ein studium der grundlagen

Leider nicht, nicht mal heute am AT Feiertag wäre für so viel Stoff Zeit.

Aber ich versuche so viel als möglich zu behalten, um nicht irgendwann wieder hier mit nervigen Anfängerfragen aufzuschlagen. Meist versuche ich es eh alleine zu schaffen, solange bis es klappt. (So habe ich ja auch die Erkenntnis alleine gewonnen, dass man für diese Effekte eine Farbe braucht.)

Interessant ist es ja und bin ich mal drin, gehen viel Stunden mit dem Studium und Testen auf, bis die berühmte "Energie des Verstehens" fließt. Dieser Satz hat ja bereits anno domini meine Faszination fürs "HTML Programmieren" erweckt.

Inzwischen ist man aber (dem Kalender nach) erwachsen und hat 1000 andere Sorgen und Arbeiten; Kein Problem, oder? Doch. Denn wenn ich die eigenen SelfHTML Notizen aus der Anfangszeit ansehe, wird einem ganz anders. Inzwischen ist die Materie rasant leistungsfähiger, aber auch komplizierter geworden, dazu die sich stets verschärfenden Gesetze und Nutzer-Gewohnheiten. Da kann man nur mithalten, wenn man dies beruflich macht und nicht 99% der Zeit für anderes braucht.

Daher meine Hochachtung vor euch Profis. Klar: Wenn mich einäugigen unter den IT-Blinden jemand fragt, ich kenne auch Profis und werde diese selbst beauftragen oder vermitteln. Doch meine Hobbysite bastle ich selber zusammen und wenns ein Jahr dauert.

[Rolf B]

Hallo Killua,

background ist eine Shorthand-Eigenschaft

Shorthand ... so heisst das also wenn man alle Sachen zusammenfasst, was man einem Element geben kann?

Ja. Unser Wiki nennt es allerdings deutsch "zusammenfassende Eigenschaft".

Wenn Du weniger hinschreibst,

Ich schreibe immer alles aus, irgendwie gefällt mir das besser.

Dann hast Du bei background einiges zu tun 😉

WOW, gelernt müsste man das haben ...

Deswegen habe ich Dir ja auch gestern den Link auf den entsprechenden Wiki-Artikel gegeben, denn Matthias Dir heute auch noch mal verlinkt hat.

Wir können die Grundlagen nicht in jedem Forenthread neu aufschreiben.

Rolf

[Gunnar Bittersmann]

@@Killua

Shorthand ... so heisst das also wenn man alle Sachen zusammenfasst, was man einem Element geben kann?

Nicht alle Sachen, nur miteinander zusammenhängende.

Oft heißt die shorthand property so, wie die Einzeleigenschaften beginnen: bspw. ist margin shorthand für margin-top, margin-right, margin-bottom, margin-left.

Aber manchmal steckt auch was drin, was nicht so anfängt: font ist shorthand für font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family.

Oder es wird zusammengefasst, was keinen gemeinsamen Namensbestandteil hat: inset ist shorthand für top, right, bottom, left.

---

Ich schreibe immer alles aus, irgendwie gefällt mir das besser. Selbst bei Farbwerten, wo manche #fff statt #ffffff schreiben, ich machs HEX sechstellig.

Warum nicht white? Das ist besser lesbar.

Außerdem sind andere Farbmodelle wie HSL (und das muss noch nichtmal das beste sein) weitaus intuitiver als RGB. Wie sieht #663399 aus? hsl(270deg 50% 40%) ist da leichter verständlich: 270° im Farbkreis ist violett; 50% Farbsättigung ist nicht knallig bunt, sondern etwas pastell; 40% Helligkeit ist so etwas dunkler.

🖖 Живіть довго і процвітайте

[Raketenwilli]

Wie sieht #663399 aus?

Etwa 50% mehr blau als rot macht violett, der geringe grün-Anteil macht es pastellig und da alle Farben im Schnitt bei rund 50 von 255 liegen wird das Ganze recht dunkel…

[Killua]

Aber manchmal steckt auch was drin, was nicht so anfängt: font ist shorthand für font-style, font-variant, ... line-height, ...

Und ev. auch all das mit text- ?

Warum nicht white? Das ist besser lesbar.

Stimmt!

Bez. Farben und Intuition: Privat kommt eben das was gefällt und da spielt man ev. mit den, in den Browsertools integrierten Farbwähler herum. Im Business zählt wahrscheinlich mehr das, was die CI des Kunden vorgibt und deren Werteangaben in dem von denen zvg. Modell.

Farbmodell usw.: Also die Namen sind da sicher toll. Aber HSL ist nix für mich, da ist mir die rgba Art lieber, va. wenn der Alphakanal mit bei sein soll. Da sehe ich auf einem Blick, die Transparenz.

[Rolf B]

Hallo Killua,

Aber HSL ist nix für mich, da ist mir die rgba Art lieber, va. wenn der Alphakanal mit bei sein soll.

Kein Problem...

Rolf

[Tabellenkalk]

Hallo,

Kein Problem...

Gibt es einen Grund für den Slash vor der Deckkraft?

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

bestimmt. Frag Tab Atkins, der schreibt im Moment die Hälfte der CSS Specs, wie mir scheint.

Rolf

[Gunnar Bittersmann]

@@Tabellenkalk

Gibt es einen Grund für den Slash vor der Deckkraft?

Ich hab die Frage mal durchgereicht.

🖖 Живіть довго і процвітайте

[Tabellenkalk]

Hallo,

Ich hab die Frage mal durchgereicht.

Danke.
TIL, dass die Englischen den Namen einer römischen Münze für einen Schrägstrich verwenden…

Gruß
Kalk

[Gunnar Bittersmann]

@@Gunnar Bittersmann

@@Tabellenkalk

Gibt es einen Grund für den Slash vor der Deckkraft?

Ich hab die Frage mal durchgereicht.

Chris Lilley meint: “Good question. It seems to predate the move to GitHub, as the earliest drafts there have:
We still need to define how newer syntaxes work:
* comma-less with slash separated optional alpha variants of ''rgb()'', ''rgba()'', ''hsl()'', ''hsla()''”

und verweist auf https://github.com/w3c/csswg-drafts/blob/a647cfd6a87646c4ef2238204ba9c996e7faf0b0/css-color-4/Overview.bs.

Tab Atkins sagt: “It was needed specifically for color(), which can have an arbitrary number of channels (so you can't tell if the last number is an alpha or not without it), and we wanted to be consistent across the syntaxes.”

worauf Chris ein Beispiel liefert.

🖖 Живіть довго і процвітайте

[Tabellenkalk]

Hallo,

...
comma-less with slash separated optional alpha variants
...

Interessant. Danke!

Gruß
Kalk

[Gunnar Bittersmann]

@@Killua

Aber HSL ist nix für mich, da ist mir die rgba Art lieber

Nach ziemlich kurzer Eingewöhnung wirst du vermutlich anders denken.

va. wenn der Alphakanal mit bei sein soll. Da sehe ich auf einem Blick, die Transparenz.

Die siehst bei hsl(270deg 50% 40% / 80%) genauso.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Außerdem sind andere Farbmodelle wie HSL (und das muss noch nichtmal das beste sein) weitaus intuitiver als RGB.

Wenngleich besser als RGB, ist HSL auch nicht das beste. OKLCH FTW.

☞ OKLCH in CSS: why we moved from RGB and HSL

🖖 Живіть довго і процвітайте