Beiträge von kim88 im Thema „Firefox 115: Erweiterungen auf bestimmten Websites gesperrt“

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.

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

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.

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.

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

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.

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.