Darstellungsproblem nach Forenupdate

Fox2Fox

Habe ein Darstellungsproblem

Alle Schaltflächen werden so dargestellt

[attachment=1]A1.jpg[/attachment]

[attachment=0]A2.jpg[/attachment]

Wenn ich diesen Code für Stylish (den ich schon lange benutze) deaktiviere, dann sieht es korrekt aus

CSS

@namespace url(http://www.w3.org/1999/xhtml);


    @-moz-document regexp('(?!http*://www\\.*\\.com).*') {


    html *,body *{
    font-family:verdana, sans-serif!important;}
    }

Frage:

Ist es möglich, die Schriftart Verdana* zu benutzen und es wird trotzdem alles korrekt dargestellt?

edit:
*Auf allen Seiten

Sören Hentzschel

Mit dem universalen Selektor ("*") sprichst du alle Elemente an. Ergo auch die Elemente, welche eine andere Schriftart verwenden, wie in diesem Fall die Symbolschrift.

Zunächst einmal ist "html *,body *" vollkommen sinnlos. Da "*" wie gesagt alle Elemente anspricht, braucht es weder "html" davor noch "body" und schon gar nicht braucht man zwei Selektoren, die genau die gleichen Elemente ansprechen. Wenn man dadurch etwas erreicht, dann nur, dass die Engine mehr zu tun hat (schlecht für die Performance). Also reduzieren wir das erst einmal auf "*". Das ist nur noch ein Zeichen und von den angesprochenen Elementen her vollkommen identisch zu "html *,body *".

Hier in diesem Forum erkennst du solche Icons an einer CSS-Klasse, welche mit "fa-" beginnt. Du könntest das "*" also so erweitern:

CSS

*:not([class*='fa-']) {
  font-family: Verdana, sans-serif !important;
}

Natürlich gibt es keine Garantie, dass eine andere Webseite dieses Namensschema nicht für etwas anderes verwendet…

Fox2Fox

Scheint zu funktionieren

Der vollständige Code sieht nun so aus

CSS

@namespace url(http://www.w3.org/1999/xhtml);


    @-moz-document regexp('(?!http*://www\\.*\\.com).*') {


:not([class*='fa-']) {
  font-family: Verdana, sans-serif !important;
        }

Wäre das so OK?

Könntest du mir bitte auch diesen Code korrigieren?

CSS

/* AGENT_SHEET */
        @namespace url(http://www.w3.org/1999/xhtml);


    @-moz-document regexp("http?://(?!(.*\\.thunderbird-mail\\.de/)).*")
     {


            html *,body *{
            font-family:verdana, sans-serif!important;}
            }

Alles anzeigen

Mit diesem korrigierten Code klappt es nicht

CSS

/* AGENT_SHEET */
        @namespace url(http://www.w3.org/1999/xhtml);


    @-moz-document regexp("http?://(?!(.*\\.thunderbird-mail\\.de/)).*")
     {

     :not([class*='fa-']) {
  font-family: Verdana, sans-serif !important;
        }

Soll bei https://www.thunderbird-mail.de/board-list funktionieren und es sieht bei den meisten Schaltflächen so aus

[attachment=0]A1.jpg[/attachment]

Sören Hentzschel

Ersetze für diese Seite "fa-" durch "icon-".

Fox2Fox

Wenn ich den Code derart korrigiere

CSS

/* AGENT_SHEET */
        @namespace url(http://www.w3.org/1999/xhtml);


    @-moz-document regexp("http?://(?!(.*\\.thunderbird-mail\\.de/)).*")
     {

:not([class*='icon-']) {
  font-family: Verdana, sans-serif !important;
       }

taucht am unteren Ende diese Meldung auf

[attachment=0]A2.jpg[/attachment]

Sören Hentzschel

Da fehlt am Ende noch eine schließende Klammer ("}"). Es müssen immer so viele Klammern geschlossen sein wie geöffnet werden.

Fox2Fox

Muss noch mal konkret nachfragen

CSS

/* AGENT_SHEET */
        @namespace url(http://www.w3.org/1999/xhtml);


    @-moz-document regexp("http?://(?!(.*\\.thunderbird-mail\\.de/)).*")
     {

:not([class*='icon-']) {
  font-family: Verdana, sans-serif !important;
       }

Wohin genau soll die Klammer } platziert werden?

Sören Hentzschel

Ganz ans Ende.

Damit du es nachvollziehen kannst:

Die Struktur ist quasi:

- @-moz-document regexp("http?://(?!(.*\\.thunderbird-mail\\.de/)).*")
--- :not([class*='icon-'])
----- font-family: Verdana, sans-serif !important;

Die Klammern bilden diese verschachtelte Struktur ab. Fangen wir in der Mitte deines Codes an. Du hast einen CSS-Selektor (":not([class*='icon-'])") und zwischen zwei Klammern steht, was für diese Selektoren gelten soll. Das Ganze ist umschlossen von "@-moz-document regexp("http?://(?!(.*\\.thunderbird-mail\\.de/)).*")", weil das nur für diese Seite gelten soll. Das heißt, das danach eine Klammer öffnet, dann der mittlere Part kommt, und du den äußeren Teil danach wieder schließen musst.

Ob in der gleichen Zeile wie die vorherige Klammer oder in einer neuen Zeile ist egal. Du könntest auch alles in eine einzige Zeile schreiben.

Gute Einrückung hilft, die Übersicht zu behalten.

CSS

/* AGENT_SHEET */
@namespace url(http://www.w3.org/1999/xhtml);


@-moz-document regexp("http?://(?!(.*\\.thunderbird-mail\\.de/)).*") {
  :not([class*='icon-']) {
    font-family: Verdana, sans-serif !important;
  }
}

Fox2Fox

Danke! Aber der Code ändert leider nichts an der Darstellung, denn diese ist gleich geblieben.

Sören Hentzschel

Ich teste nur den eigentlichen Code-Teil:

CSS

:not([class*='icon-']) {
  font-family: Verdana, sans-serif !important;
}

… indem ich diesen direkt in die Entwickler-Werkzeuge von Firefox auf der Webseite kopiere. Der Part passt auf jeden Fall, das funktioniert. Das hab ich gerade nochmal getestet.

Stylish nutze ich nicht, dazu kann ich nichts sagen. Wahrscheinlich stimmt der Regex nicht. Der sieht eh unnötig kompliziert aus. Hat der Code vorher sicher funktioniert? Das matcht nämlich auch in meinem Regex-Tester nicht die Domain des Thunderbird-Forums.

Fox2Fox

Wenn ich diesen Code aktiviere

CSS

@namespace url(http://www.w3.org/1999/xhtml);


    @-moz-document regexp('(?!http*://www\\.*\\.com).*') {


:not([class*='fa-']) {
  font-family: Verdana, sans-serif !important;
        }

hat dieser Code keine Funktion

CSS

/* AGENT_SHEET */
@namespace url(http://www.w3.org/1999/xhtml);


@-moz-document regexp("http?://(?!(.*\\.thunderbird-mail\\.de/)).*") {
  :not([class*='icon-']) {
    font-family: Verdana, sans-serif !important;
  }
}

Wenn ich ersten Code deaktiviere, zweiten Code aktiviere, werden die Schaltflächen der Seite https://www.thunderbird-mail.de/board-list korrekt dargestellt, allerdings ist die Schrift dann nicht Verdana.

Der zweite Code war lange deaktiviert - ober er jemals funktionierte, kann ich nicht sagen.

Speravir

Zitat von Fox2Fox

[…]

Code

@-moz-document regexp('(?!http*://www\\.*\\.com).*')

[…]

Code

@-moz-document regexp("http?://(?!(.*\\.thunderbird-mail\\.de/)).*")

Fox2Fox, wenn ich mir das so ansehe … Du nutzt da eine Look Around Assertion, und zwar die negative look-ahead assertion, d. h. der Code soll nur dann matchen, wenn die URL nicht dem Klammerausdruck entspricht. Außerdem ist noch zu beachten, dass entsprechend MDN – @document - CSS eine Regel auf die vollständige URL matchen muss, was aber bei dir gewährleistet ist durch das universale Ende .*, das auf alle URL passt.

Ich verstehe nicht, wann der erste Code ausgeführt werden soll, aber für das Thunderbird-Forum sollte es meiner Ansicht nach so aussehen:

Code

@-moz-document regexp("https?://(.*\\.)?thunderbird-mail\\.de(/.*)?")

Dafür kann man aber viel einfacher domain nehmen.

Code

@-moz-document domain(thunderbird-mail.de)

Fox2Fox

Dann beschreibe ich noch mal, wie es funktionieren soll.

Grundsätzlich sollten alle Seiten mit Verdana dargestellt werden.

Das funktioniert auch mit diesem Code

CSS

@namespace url(http://www.w3.org/1999/xhtml);


    @-moz-document regexp('(?!http*://www\\.*\\.com).*') {


:not([class*='fa-']) {
  font-family: Verdana, sans-serif !important;
        }

Wenn dieser Code aktiv ist, werden allerdings die Schaltflächen auf https://www.thunderbird-mail.de/board-list
falsch dargestellt

[attachment=1]A2.jpg[/attachment]

Deaktiviere ich den Code, werden die Schaltflächen korrekt dargestellt.

[attachment=0]A1.jpg[/attachment]

HT-Frogger

Schaltflächen halten sich ausnahmsweise nicht (zumindest nicht immer) an die "*"-Einstellung. Die haben abweichende Schrift, warum weiß ich auch nicht (vom Betriebssysten???). Ich habe deshalb auf meiner HP folgendes angegeben:

input {
font-family:inherit;
font-weight:inherit; (nicht unbedingt erforderlich, probieren...)
}

Oder halt gleich Verdana definieren.

Gruß Harry

Fox2Fox

Ich hoffe ja immer noch auf einen funktionierenden Code...

Sören Hentzschel

Dir wurde doch schon alles genannt. Der CSS-Code von mir funktioniert, der Regex-Teil war falsch und Speravir hat dir "@-moz-document domain(thunderbird-mail.de)" als Alternative vorgeschlagen. Funktioniert es damit nicht?

2002Andreas

Bitte mal testen:

CSS

@namespace url(http://www.w3.org/1999/xhtml);


    @-moz-document regexp('(?!http*://www\\.*\\.com).*') {


:not([class*='icon'])  {
  font-family: Verdana, sans-serif !important;
        }}

Zitat von Sören Hentzschel

Der CSS-Code von mir funktioniert

Wenn ich den Code von dir aus Beitrag Nr. 10 nehme passt es z.B. auf

https://www.thunderbird-mail.de/board-list

aber z.B. nicht in unserem Forum.

Sören Hentzschel

Der Code war ja auch nur für das Thunderbird-Forum. Das Thunderbird-Forum verwendet ein WBB 4 als Forensoftware, welche "icon-" als Benennung für CSS-Klassen hat, das phpbb 3.2 verwendet "fa-". Darum steht da ja auch "@-moz-document domain(thunderbird-mail.de)".

HT-Frogger

Ich habe den Beitag #13 nachvollzogen. Wenn Du die Symbole links meinst, die sehen nicht nach Unicode aus, sondern eher nach Wingdings oder Webdings oder ähnlichem Zeichensatz. Wenn alles Verdana wird gehen die natürlich nicht mehr. Da muß man dann genau diese Elemente von der Verdana-Zuweisung ausnehmen. Vermutlich ist das auch mit CSS Anweisung "::before" gemacht und daher schwer nachzuvollziehen. So im Seitenquelltext sehe ich das nicht.

Gruß Harry

2002Andreas

Hallo Sören, sollte ich das falsch verstanden haben, dann sorry vorweg für meine Beiträge zum Thema.

Mit meinem Code sieht das bei Thunderbird und hier im Forum so aus:

[attachment=1]Screenshot (451).png[/attachment]

[attachment=0]Screenshot (450).png[/attachment]

CSS

@namespace url(http://www.w3.org/1999/xhtml);


    @-moz-document regexp('(?!http*://www\\.*\\.com).*') {


:not([class*='icon']) {
  font-family: Verdana, sans-serif !important;
        }}