Firefox 115: Erweiterungen auf bestimmten Websites gesperrt

evilware666

Moin Moin!

Quicky-News:

Firefox 115 blockiert Erweiterungen auf manchen Websites. Die Hintergründe sind schlecht dokumentiert. Benutzer können die Funktion deaktivieren, aber der Zweck der Quarantäneliste bleibt unklar.

Mehr Infos auf Deutsch

Mehr Infos auf Englisch

Mfg Evilware666

harihegen

Ich kann mir schon denken wozu das gut ist. Das müssten andere Browser aber auch umsetzen oder einbauen, das muss man mal beobachten.

Riley

Neuer Life Hack erst gar nicht mehr Updaten

Folgt mir für mehr Life Hacks

vs2-free-users

Doch mal auf qutebrowser wechseln muss ich aber erstmal noch warm mit werden.

vs2-free-users

Oder seamonkey aber ich glaube das ist untendrunter auch nur firefox ...

kim88

Oder Firefox ESR, wenn man nicht immer die neusten Feature sofort haben will.

"Nicht updaten" ist wenn man bedenkt wie viele Sicherheitslücken da pro Release geschlossen werden nicht der beste "Lifehack".

Gerade auch wenn man bedenkt, dass irgendwann Webseiten nicht mehr funktionieren.

Sehr viele Web Entwickler warten zurzeit sehr sehnsüchtig auf Firefox 116 - weil damit endlich Nested CSS in allen Browsern möglich ist.

Damit kann man sich viel Schreibarbeit sparen, CSS Dateien massiv kleiner machen und somit Webseiten beschleunigen.

Tealk

Zitat von kim88

Nested CSS

Ist das nicht einfach nur SASS?

kim88

Tealk beim schreiben mehr oder weniger ja - es gibt kleinere Syntax Unterschiede aber im grossen und ganzen kannst du es wie Sass schreiben.

Es ist dennoch ein Improvment, da SASS ja immer in CSS unkoventiert wird:
Also aus folgendem:

Code

.container {
    width: 200px;
    height 200px;
    background-color: #ff200;
    text-align: center;
    .link-text {
        color: #fff;
        line-height: 200px;
        font-weight: 700;
    }
}

Alles anzeigen

Wenn man das durch Sass durchlaufen lässt wird dadurch:

Code

.container {
    width: 200px;
    height 200px;
    background-color: #ff200;
    text-align: center;
}

.container .link-text {
    color: #fff;
    line-height: 200px;
    font-weight: 700;
}

Alles anzeigen

Was bei grösseren CSS Konstrukten halt zu grossen CSS Files führt. Da CSS normalerweise im <head> geladen wird, verlängert das eben die Ladezeit. Da alles was im <head> geladen wird erst komplett geladen werden muss bevor eine Seite angezeigt werden kann.

Ja hier gibt es Möglichkeiten nur das Critical CSS im Head zu laden, und das restliche nachzuladen - das führt aber gerade bei komplexen Webseiten zu einem extrem hohen Entwicklungs- und Testaufwand.

Bei Nested CSS, bleibt das CSS so wie es in SASS geschrieben ist, und der Browser kann das direkt so interpretieren, dass kann auch schon jeder Browser (sogar Safari).

Firefox kann es nun seit 115 (aber nur wenn man es in about:config aktiviert).

Mit 116 soll es dann final scharf geschalten werden.

Tealk

Ok, auf das Problem bin ich noch nie gestoßen xD Aber allein das SASS schreiben ist super, der CSS Syntax ist einfach so viel arbeit.

Vielleicht wäre es auch einfach was wengier komplexe webseiten zu machen *wegduck*

kim88

Tealk ich mache das was die Kunden von mir verlangen -> ist ja kein Hobby sondern Arbeit.

Wenn wir das SASS-Compiling aus dem Entwicklungsprozess stossen können - und quasi dennoch SASS schrieben können - ohne irgendwelche Abstriche dann wäre das gut.

Alles was Komplexität rausnimmt ist gut

Tealk

Mittlerweile sind wir ja schon bei 117 klappt das mit dem Nested CSS schon? Hast du da schon erfahrungen gesammelt kim88

kim88

Tealk ja das klappt einwandfrei. Vor einem breiten Einsatz würde ich noch abraten. Firefox ESR, bekommt die Unterstützung dafür erst mit der nächsten Hauptversion (irgendwann April/Juni) nächstes Jahr.

Tealk

Zitat von kim88

Firefox ESR, bekommt die Unterstützung dafür erst mit der nächsten Hauptversion (irgendwann April/Juni) nächstes Jahr.

Gut würd mich persönlich weniger stören xD

Tealk

kim88 weißt du zufällig ob Nested CSS auch for schleifen und so späße kann?

kim88

Nein kann es nicht.

Oft braucht man aber keine for-schleifen, man kann in der Regel fast alles mit dem Pseudo-Selektor: :nth-child() regeln.

Tealk

Sowas auch?

Code

@for $i from 1 through 8
  input#attr_usable_wounds[value="#{$i}"]
    @for $j from ($i + 2) through 10
      & ~ div.wounds_#{$j}
        display: none

roll20-character-sheet/ButterflyAspect.sass an attribut-fertigkeiten-rework

codeberg.org

kim88

Tealk Also für mich persönlich ist das schlechtes HTML Markup und daraus resultierendes schlechtes CSS Design. Klar ist es mit SASS oder LESS schnell geschrieben. Das kompilierte CSS wird dennoch riesig gross.

Kompiliert ist dein CSS sowas in der Art (hab hier nur den Anfang):

Code

input#attr_usable_wounds[value="1"] ~ div.wounds_3,
input#attr_usable_wounds[value="1"] ~ div.wounds_4,
input#attr_usable_wounds[value="1"] ~ div.wounds_5,
input#attr_usable_wounds[value="1"] ~ div.wounds_6,
input#attr_usable_wounds[value="1"] ~ div.wounds_7,
input#attr_usable_wounds[value="1"] ~ div.wounds_8,
input#attr_usable_wounds[value="1"] ~ div.wounds_9,
input#attr_usable_wounds[value="1"] ~ div.wounds_10 {
  display: none;
}

input#attr_usable_wounds[value="2"] ~ div.wounds_4,
input#attr_usable_wounds[value="2"] ~ div.wounds_5,
input#attr_usable_wounds[value="2"] ~ div.wounds_6,
input#attr_usable_wounds[value="2"] ~ div.wounds_7,
input#attr_usable_wounds[value="2"] ~ div.wounds_8,
input#attr_usable_wounds[value="2"] ~ div.wounds_9,
input#attr_usable_wounds[value="2"] ~ div.wounds_10 {
  display: none;
}

Alles anzeigen

Und hier sehen wir, das wir am Ende ein riesiges CSS Markup für etwas ziemlich simples haben.

Ich würde das (auch wenn ich mit SASS arbeite) das mit nth-child schreiben. Daher statt die divs zu nummerieren würde ich dem div immer die klasse "wounds" geben (egal welcher Nummer)

dann kann man mit CSS so arbeiten:

Code

input#attr_usable_wounds[value="1"]:checked ~ div.wounds:nth-child(n+4) {
  display: none;
}

input#attr_usable_wounds[value="2"]:checked ~ div.wounds:nth-child(n+5) {
  display: none;
}

Daher diese viele Zeilen von oben, kann man auf diese wenigen reduzieren. Mit "nth-child(n+ZAHL)" bedeutet jeder Select (also hier das entsprechende "div" ab dem ZAHL (ab dem 4. im oberen Teil und ab dem 5. im zweiten Teil) ist betroffen.

Dadurch hat man am Ende ein wesentlich kleineres CSS das man ausliefert und dadurch angenehmere Seitenladezeiten.

Logischerweise kann man es noch weiter kürzen:

Code

input#attr_usable_wounds[value="1"]:checked ~ div.wounds:nth-child(n+4),
input#attr_usable_wounds[value="2"]:checked ~ div.wounds:nth-child(n+5) {
  display: none;
}

kim88

Kleiner Nachtrag

nth-child kann man heute übrigens problemlos nutzen. Alle Browser haben seit langer Zeit Support für das Ding. Nur wenn man noch zwingend den Internet Explorer unterstützen muss, muss man darauf verzichten.

Tealk

Cool danke, damit hab ich es jetzt auf folgendes reduzieren können:

Code

@for $i from 1 through 10
  input#attr_usable_wounds[value="#{$i}"] ~div.wounds:nth-child(n+#{$i + 3})
    display: none

Und Roll20 Schluckt das, sehr gut

Firefox 115: Erweiterungen auf bestimmten Websites gesperrt

Jetzt mitmachen!

Tags

6 Benutzer haben hier geschrieben

Benutzer online in diesem Thema