Variablen in CSS nutzen

Zitat von Sören Hentzschel

Du hast Spaß daran, die Art und Weise, wie du dein CSS strukturierst, zu verändern, um hinterher „besseres“ im Sinne von leichter wartbarem CSS zu haben? Oh, ich hätte schon das nächste Thema für dich und das ist so brandheiß, dass es mindestens Firefox 117 erfordert und ich in meinem Artikel über Firefox 117 schrieb, dass diese CSS-Neuerung das Potenzial hat, „die Art und Weise, wie das CSS [von Websites] geschrieben wird, zu revolutionieren“. Ich spreche von der Verschachtelung von CSS.

Kann es sein, dass Du mich etwas veräppeln tust?

Das ist ja toll, dass nun auch Verschachtelungen im Firefox funktionieren,

aber für mich macht es das ganze nur unübersichtlicher.

Ich werde meine Dateien nur noch mal durchforsten, ob es noch weitere immer wiederkehrende gleiche Werte gibt

und dann eventuell, wenn ich zu dem Schluss komme, dass es sinnvoll ist, eine Variable dafür definieren.

Für die immer wiederkehrenden Farbwerte finde ich den Einsatz einer Variablen wirklich gut.

Zitat von Mira_Belle

Kann es sein, dass Du mich etwas veräppeln tust?

Eigentlich nicht, ganz im Gegenteil. Ansonsten hätte ich das in meinem Artikel ja auch nicht so formuliert. Ich schreibe CSS für Websites schon seit vielen Jahren nur noch auf diese Weise. Falls man sich jetzt fragt, wie das möglich ist, wenn das als CSS-Feature so neu ist, dass mindestens Firefox 117 erfordert wird: Ich schreibe Sass und lasse das dann automatisiert in CSS umwandeln. Als ich damit angefangen habe, gab es Verschachtelung und auch Variablen in CSS noch nicht, mit Sass hatte ich diese Werkzeuge schon Jahre vorher. Sobald die Browserunterstützung es zulässt (für Websites muss ich halt auch darauf achten, dass es beispielsweise nicht nur die neueste Safari-Version in iOS zulässt, d.h. das wird sicher noch ein, zwei Jahre dauern, bis es für mich realistisch einsetzbar ist), kann ich den Präprozessor beiseitelegen und nur noch natives CSS schreiben, weil das genau die zwei Gründe waren, wieso wir in der Firma Sass nutzen, alle anderen Sass-Features sind für uns vernachlässigbar. Und das ist großartig, weil es die Prozesse vereinfacht.

Zitat von Mira_Belle

aber für mich macht es das ganze nur unübersichtlicher.

Es ist in jedem Fall ungewohnt, wenn man das noch nie verwendet hat. Aber glaube mir: Sobald man sich daran erst einmal gewöhnt hat, will man CSS gar nicht mehr anders schreiben. Ich find's mittlerweile echt mühsam, CSS ohne Verschachtelung schreiben zu müssen. Das merke ich auf der Arbeit jedes Mal, wenn ich an einem ganz alten Projekt etwas anpassen muss, welches noch kein Sass verwendet. Das verbessert die Wartbarkeit so sehr. Ändert sich ein Klassenname, musst du den nicht mehr an zig Stellen anpassen, sondern nur noch ein einziges Mal. Die Wahrscheinlichkeit, dass man was übersieht, wird geringer. Und man sieht sofort, welcher Code zusammen gehört, weil alles schön gruppiert ist. Man sieht vor allem - vernünftige Einrückung natürlich vorausgesetzt - auf den ersten Blick, auf welcher Ebene sich was befindet, was den Code einfach übersichtlicher und leichter anpassbar macht. Bonuspunkt: Die Dateien werden kleiner, was für die Performance mit Sicherheit auch kein Nachteil ist.

Es lohnt sich in jedem Fall für jeden, der seinen Firefox anpasst, sich damit zu befassen, und wenn es nur ist, weil Mozilla selbst auch schon angefangen hat, im Firefox-Code Verschachtelung zu nutzen. Und das nicht nur in neuem Code, auch bestehender Code wurde teilweise schon umgeschrieben. Und da die Entwicklerwerkzeuge in dem Fall ebenfalls die Verschachtelung anzeigen und das CSS nicht umschreiben, hilft es für die Anpassung von Firefox sicherlich, wenn man versteht, was die Entwicklerwerkzeuge anzeigen, selbst wenn man sein eigenes CSS weiterhin ohne Verschachtelung schreiben möchte. Beispiel aus dem CSS für die Symbolleisten und wie die Entwicklerwerkzeuge von Firefox das anzeigen:

Sören Hentzschel

1. Danke für den Link.

2. Erstaunlich, ich verstehe teilw. den Code in SCCS!

Was ich nicht kapiere ist, was muss ich tun um "alten" CSS-Code in SCSS umzuwandeln.

Gibt es ein Plug-in für Visual Studio Code, oder wie funktioniert das?

Zitat von Mira_Belle

Was ich nicht kapiere ist, was muss ich tun um "alten" CSS-Code in SCSS umzuwandeln.

Gibt es ein Plug-in für Visual Studio Code, oder wie funktioniert das?

Ausgehend davon, dass wir hier nur von Firefox-Anpassungen sprechen und Firefox seit Version 117 die Verschachtelung nativ unterstützt, musst du dich mit Sass gar nicht mehr befassen. Das ist in der Webentwicklung eher ein Thema, weil das CSS dann auch für Nutzer anderer und auch älterer Browser kompatibel sein muss, da lässt sich dieses CSS-Feature noch nicht produktiv einsetzen. Daher verwende ich immer noch Sass.

Das Konzept der Verschachtelung ist in CSS aber praktisch identisch zur SCSS-Syntax von Sass. Wenn du das bei Sass verstehst, verstehst du es auch in CSS. Es gibt einen kleinen Unterschied bei der Spezifität, den ich bei Bedarf gerne erklären kann, aber die Syntax ist die gleiche.

Ich nutze kein Visual Studio Code und kann daher nichts zu Plugins dafür sagen. Es gibt aber in jedem Fall Online-Tools. Das hier scheint auf den ersten Blick gut zu funktionieren:

Auch wenn das von CSS nach Sass ist, kann man das verwenden, um aus „traditionellem“ CSS verschachteltes CSS zu machen. Zum Verständnis empfehle ich trotzdem, den bereits verlinkten Artikel von Google zu lesen, weil da viele Beispiele drin sind:

CSS Nesting - Chrome for Developers

One of our favorite CSS preprocessor features is now built into the language: nesting style rules.

developer.chrome.com

Danke Sören Hentzschel

Ich habe nun etwas mit dem Konvertierung-Tool herumgespielt,

wenn ich das richtig verstanden habe, wird also nicht nach Selektoren gruppiert,

sondern nach Eigenschaften.

Wahrscheinlich gibt es noch weitere Veränderungen, aber das habe ich jetzt so ganz auf der Schnelle nicht gesehen.

Auf jeden Fall werde ich mich des Themas mal annehmen, es ist sehr interessant.

Hier mal ein Beispiel, wo mir das aufgefallen ist.

CSS:

  #editBookmarkPanelImage,
  #editBookmarkHeaderSeparator {
    display: none !important;
  }
  .editBMPanel_tagsRow {
    display: none !important;
  }
  .editBMPanel_keywordRow {
    display: none !important;
  }
  #editBookmarkPanel {
  border-radius: 8px !important;
  }
  #editBMPanel_namePicker {
    outline: 1px solid var(--uc-color-orange-normal) !important;
    outline-offset: -1px !important;
  }
  #editBMPanel_namePicker:hover {
    outline: 1px solid var(--uc-color-orange-normal) !important;
    outline-offset: -1px !important;
  }
  #editBMPanel_locationField {
    outline: 1px solid var(--uc-color-orange-normal) !important;
    outline-offset: -1px !important;
  }
  #editBMPanel_locationField:hover {
    outline: 1px solid var(--uc-color-orange-normal) !important;
    outline-offset: -1px !important;
  }

Und so als SCSS:

  #editBookmarkPanelImage, 
  #editBookmarkHeaderSeparator,
  .editBMPanel_tagsRow,
  .editBMPanel_keywordRow {
    display: none !important;
  }
  #editBookmarkPanel {
    border-radius: 8px !important;
  }
  #editBMPanel_namePicker,
  #editBMPanel_locationField {
    outline: 1px solid var(--uc-color-orange-normal) !important;
    outline-offset: -1px !important;
 
    &:hover {
      outline: 1px solid var(--uc-color-orange-normal) !important;
      outline-offset: -1px !important;
    }
  }

Zitat von Mira_Belle

Ich habe nun etwas mit dem Konvertierung-Tool herumgespielt,

wenn ich das richtig verstanden habe, wird also nicht nach Selektoren gruppiert,

sondern nach Eigenschaften.

Bei der Verschachtelung geht es um die Gruppierung der Selektoren. Offensichtlich fasst das verlinkte Tool auch noch Regeln zusammen, welche den gleichen Inhalt haben. Das kann man natürlich machen, sofern man das nicht aus Gründen der Übersichtlichkeit bewusst getrennt hat. Das hat jedenfalls nichts mit der Verschachtelung oder Sass zu tun, sondern scheint ein zusätzliches Feature dieses Konverters zu sein. Ein „Muss“ ist es jedenfalls nichts, das zusammenzufassen.

SCSS ist nett, aber für alle mit der v115 ESR wohl nicht nutzbar, wenn es erst ab v117 nativ unterstützt wird. Daher kann ich meine CSS nicht umstellen, weil die für alle Firefox funktionieren müssen, sei es userChrome und vermutlich auch Stylus. SASS ist wohl übersichtlicher, aber nichts für mich.

Da geht jetzt ein bisschen was durcheinander: SCSS ist eine Syntax von Sass. Es gibt auch noch eine alternative Sass-Schreibweise ohne Klammern und Semikola, bei der die Einrückung dann nicht mehr nur einen optischen Zweck erfüllt, daher diese zweite Bezeichnung. Jedenfalls unterstützt Firefox ab Version 117 kein Sass oder SCSS, sondern die Verschachtelung in CSS. Wenn man Sass verwendet, muss man das in CSS konvertieren, damit der Browser das versteht, weil der Browser mit *.scss oder *.sass-Dateien nichts anzufangen weiß. Was die Übersichtlichkeit betrifft, macht es keinen Unterschied, ob Sass oder CSS, weil die Verschachtelung in beiden Fällen komplett gleich aussieht. Gegenüber der Nicht-Verschachtelung ist es wie gesagt eine Sache der Gewohnheit, aber sobald man es gewohnt ist, merkt man, dass das übersichtlicher ist.

Richtig ist, dass die Verschachtelung erst ab Firefox 117 unterstützt wird. Aber da wie gesagt Firefox selbst bereits davon Gebrauch macht, sollte sich jeder, der seinen Firefox anpasst und nicht ausschließlich Firefox ESR 115 nutzt, damit befassen, unabhängig davon, ob man selbst vorhat, Verschachtelung im eigenen CSS zu nutzen, oder nicht, damit man versteht, was die Entwicklerwerkzeuge von Firefox anzeigen und was man dementsprechend überschreiben muss. Da du ja schreibst, dass es bei dir für alle Firefox-Versionen funktionieren muss, ist das Thema zumindest von der Verständnis-Seite her also auch für dich relevant, selbst wenn du deine Anpassungen so schreibst, dass sie mit Firefox ESR 115 kompatibel sind.

Zitat von Sören Hentzschel

Es gibt auch noch eine alternative Sass-Schreibweise ohne Klammern und Semikola

Genau die hat mir der Converter css2sass angeboten (bei "SASS"), ist ok, ohne besagtes, einfach zu lesen.

Und bei SCSS dachte ich, das wäre diese Verschachtelung, denn genau die hat es bei "SCSS" angeboten, ich habe da solche Einträge.

Ich habe gestern noch Blumentals RapidCSS probiert, weil da auch was von SASS, LESS etc in der Beschreibung steht, aber gefunden habe ich es noch nicht. Es kennt auch kein calc() oder "fit-content", flex: none muss ich als flex: 0 0 auto (aus dem MDN) schreiben, damit es akzeptiert wird. Angesprochenes VSC muss ich noch testen. Dafür erkennt RapidCSS ne ganze Menge Fehler, und doppelte, und formatiert CSS nach meinem Gusto. TopStyle 5 ist da nicht so gut, kann aber Orphans (Verweiste/nicht genutzte) finden, wenn ich eine fremde Seite komplett lade und nachbearbeite zur Sicherung. War mal so, inzwischen drucke ich als PDF und bearbeite das nach, ist einfacher. DreamWeaver 8 aus 2005 ist seit langem keine dolle Hilfe mehr. Ja, solange die 115esr noch aktuell ist, bis 2024, bin ich etwas gebunden, auch wenn nur noch für Kontrollzwecke, allenfalls noch Windows 8, wenn ich das für einen bestimmten Zweck anwerfe. Neue Geräte sind erst 2024 geplant.

Zitat

Beim Schreiben von HTML ist Ihnen wahrscheinlich aufgefallen, dass es eine klare verschachtelte und visuelle Hierarchie gibt. Bei CSS hingegen ist das nicht der Fall.

Mit Sass können Sie Ihre CSS-Selektoren so verschachteln, dass sie der gleichen visuellen Hierarchie wie Ihr HTML folgen. Seien Sie sich bewusst, dass übermäßig verschachtelte Regeln zu überqualifiziertem CSS führen, das sich als schwer zu pflegen erweisen könnte und allgemein als schlechte Praxis angesehen wird.

Also, da ich mit HTML nichts am Hut habe und mir das mit dem Nesting echt schwerfällt, belasse ich es vorerst damit!

Und wenn ich einen "SCSS"-Code so nicht auf Anhieb verstehe, gibt es ja genug Möglichkeiten Sass to Css zu konvertieren.

Zitat von .DeJaVu

Und bei SCSS dachte ich, das wäre diese Verschachtelung, denn genau die hat es bei "SCSS" angeboten

Die Verschachtelung ist ein Feature von Sass, Sass bietet noch ein paar andere Features. Sass selbst ist ein sogenannter Präprozessor. Das von dir erwähnte Less oder auch Stylus oder PostCSS sind andere Präprozessoren. Die haben alle gemeinsam, dass sie CSS um Dinge erweitern, die CSS von Haus aus nicht kann (oder ursprünglich nicht konnte), und in einem letzten Schritt in richtiges CSS umgewandelt werden müssen.

Der Zusammenhang bei der Verschachtelung ist ganz einfach der, dass die Syntax identisch ist. Das ist praktisch, weil man dann die Konverter-Tools von CSS nach Sass verwenden kann, um sein eigenes CSS automatisiert anzupassen. Aber da muss man auch etwas aufpassen. Ich hatte gestern ein Tool verlinkt und das war erst das dritte, welches ich gefunden hatte und das einen ganz einfachen Testanwendungsfall zum gewünschten Ergebnis gebracht hatte. Die zwei, die ich vorher getestet hatte, hatten nicht das gewünschte Ergebnis gebracht. Es war nicht falsch, hat die Verschachtelung aber eben auch nur zur Hälfte umgesetzt. Ich bevorzuge eh, sowas von Hand zu machen. Außerdem gibt es da einen Fallstrick bezüglich der Spezifität, siehe meine Antwort an Mira_Belle:

Zitat von Mira_Belle

Also, da ich mit HTML nichts am Hut habe und mir das mit dem Nesting echt schwerfällt, belasse ich es vorerst damit!

Das mit dem HTML ist nur ein Vergleich zur Veranschaulichung. Ob man mit HTML etwas „am Hut hat“ oder nicht, spielt für die Verschachtelung in CSS gar keine Rolle. Selbst ein HTML-Experte zu sein, würde dir keinen Vorteil dafür bringen.

So schwer ist das mit dem Verschachteln aber eigentlich nicht. Wenn du CSS schreibst, weißt du ja schon, dass es mit dem Leerzeichen eine Ebene tiefer geht. Statt es so zu schreiben, packst du das halt wirklich eine Ebene tiefer. Und wenn du ein Element ansprechen möchtest, welches beispielsweise zwei Klassen haben muss (also kein Leerzeichen zwischen den Klassenbezeichnungen), machst du es genauso, bloß stellst du noch ein & davor. Mit dem Wissen sind vermutlich bereits 95 Prozent der Anwendungsfälle abgedeckt. Die größte Hürde ist wirklich nur die Gewöhnung. Wenn man das erstmal drin hat, denkt man darüber gar nicht mehr nach.

Beispiel:

.foo {
  color: hotpink;
}

.foo .bar .blub {
  color: rebeccapurple;
}

.foo .bar.blub {
  color: deeppink;
}

=>

.foo {
  color: hotpink;

  .bar {
    .blub {
      color: rebeccapurple;
    }

    &.blub {
      color: deeppink;
    }
  }
}

Zitat von Mira_Belle

Und wenn ich einen "SCSS"-Code so nicht auf Anhieb verstehe, gibt es ja genug Möglichkeiten Sass to Css zu konvertieren.

Richtig, das hilft dir dann auch in vielen Fällen - aber nicht immer. Ich deutete ja schon an, dass es einen Unterschied zwischen der Verschachtelung in Sass und CSS bezüglich der Spezifität gibt. Beispiel:

#foo, .bar {
  .blub {
    color: rebeccapurple;
  }
}

Wenn das Sass ist, wird in CSS daraus:

#foo .blub, .bar .blub {
  color: rebeccapurple;
}

Wenn das gleiche Beispiel aber eine Verschachtelung in nativem CSS ist, bedeutet das intern das hier:

:is(#foo, .bar) .blub {
  color: rebeccapurple;
}

Welchen Unterschied macht das?

Wenn es darum geht, das Element .bar .blub anzupassen, hat das Sass-Ergebnis eine Spezifität von 0-2-0 (zwei Klassen), das CSS-Ergebnis aber eine Spezifität von 1-1-0 (eine ID, eine Klasse), weil sich :is() nach der höchsten Spezifität richtet und diese dann für alle angesprochenen Elemente anwendet. Das klingt jetzt vielleicht etwas theoretisch. Aber das Ergebnis wäre, dass der Selektor, den dir der Sass-Konverter gibt, nicht ausreichend wäre, um das CSS des Elements in Firefox zu überschreiben, weil die Spezifität zu gering ist. Deshalb ist es wirklich besser, die Funktionsweise zu verstehen, als sich nur auf Konverter-Tools zu verlassen.

Wegen VSC:

CSS, SCSS, and Less support in Visual Studio Code

Find out how Visual Studio Code can support your CSS, SCSS and Less development.

code.visualstudio.com

Zitat

Visual Studio Code has built-in support for editing style sheets in CSS .css, SCSS .scss and Less .less. In addition, you can install an extension for greater functionali

Weiter unten stehen Beispiele.

PS kennst du "prepros"

Your Friendly Web Development Companion

Kommen wir hier vielleicht etwas vom Thema ab?

Das Nesting hört sich interessant an, auch wenn ich mich noch etwas schwer tue für das Ganze eine wirklich hilfreiche Nutzung im Browser CSS zu finden.

Etwas wie :has wäre da schon was Anderes.

Aber einen massgeblichen Bezug zur Verwendung von Variablen sehe ich nicht momentan.

Zitat von .DeJaVu

PS kennst du "prepros"

Your Friendly Web Development Companion

Nein, ich kenne das nicht. Mein Workflow ist üblicherweise etwas anders. Nur von den Bildern her macht Prepros einen guten Eindruck. Aber wie gesagt muss man sich dessen bewusst sein, dass ein Sass-Konverter nicht zwingend das Ergebnis liefert, welches Verschachtelung in nativem CSS bedeutet, siehe Beispiel in #51.

Zitat von Horstmann

Das Nesting hört sich interessant an, auch wenn ich mich noch etwas schwer tue für das Ganze eine wirklich hilfreiche Nutzung im Browser CSS zu finden.

Solange du kein neueres macOS und damit keine Firefox-Version größer als 115 einsetzen kannst, hilft es dir auch nicht. Aber ab Firefox 117 sollte man das grundlegende Konzept verstehen, um das CSS von Firefox zu verstehen, falls man seinen Browser in einem Bereich anpasst, in dem Firefox Gebrauch davon macht. Tendenz in jedem Fall steigend. Die Basis der Anpassungen liegt ja darin, sich das CSS von Firefox mit den Entwicklerwerkzeugen anzusehen und dann zu verändern.

Generell liegen die Vorzüge der Verschachtelung wie gesagt in einer deutlich besseren Lesbarkeit und Wartbarkeit.

Zitat von Horstmann

Etwas wie :has wäre da schon was Anderes.

Das ist wiederum eine ganz eigene Baustelle, zumal die Verschachtelung ja vor allem sogenannter syntactic sugar ist und anders als :has keine neuen Anwendungsfälle eröffnet. Aber für's Protokoll: Die Unterstützung für :has ist seit 13 Tagen standardmäßig in Firefox Nightly aktiviert. In einer finalen Version wird das definitiv nichts vor Firefox 120. Ausgehend von den Web Platform Tests (WPT) könnte das sogar noch klappen:

web-platform-tests dashboard

94 Prozent der Tests werden bereits bestanden. Performance-Verbesserungen stehen aber auch noch auf dem Programm. Vielleicht wird es also auch erst Firefox 121.

Zitat von Horstmann

Kommen wir hier vielleicht etwas vom Thema ab?

Klar, man könnte die Diskussion abtrennen. Es war nicht der Plan meiner ursprünglichen Bemerkung, daraus ein großes Thema zu machen.

Zitat von Sören Hentzschel

Ich spreche von der Verschachtelung von CSS.

Aha, ich hatte solche Regeln mit & schon gesehen und mich gefragt, was das sein soll. Finde ich übrigens etwas besser lesbar als ohne, zumal ja, wie zu lesen ist, in manchen Fällen ein Unterschied zur Variante ohne Kaufmanns-Und besteht.

Ergänzend, da gerade im Nightly-Blog gesehen:

Also falls jemand noch nicht geglaubt hat, dass das die Zukunft von CSS in Firefox ist…

Zitat von Sören Hentzschel

Ergänzend, da gerade im Nightly-Blog gesehen:

Wie, Wetterregeln? Direkt im Firefox ohne Addon?

Zitat von Speravir

… solche Regeln mit & … Finde ich übrigens etwas besser lesbar als ohne.

Wobei das schon schwierig ist (nicht im Beispiel, aber bestimmt bei umfangreicheren Regeln): Appending the & nesting selector (MDN), was andererseits ohne & gar nicht möglich ist.

Zitat von Speravir

Wie, Wetterregeln? Direkt im Firefox ohne Addon?

Die Regeln für das Wetter beziehen sich auf die Anzeige des aktuellen Wetters in der Adressleiste:

Dieses Feature (welches auch abhängig vom Land des Benutzers ist und nicht überall funktionieren wird) ist standardmäßig noch nicht aktiviert.

Zitat von Speravir

Appending the & nesting selector (MDN), was andererseits ohne & gar nicht möglich ist.

Stimmt, das ist ein interessanter Fall, den ich in meinen Erklärungen weggelassen hatte, um es erst einmal nicht zu kompliziert zu machen. Aber das kann auch sehr praktisch sein. Bei so kurzen Beispielen, die zum Erklären natürlich Sinn ergeben, kommt oft leider gar nicht richtig an, wo jetzt der Vorteil liegt. Das merkt man erst so richtig, wenn das CSS komplexer wird.

Zitat von Sören Hentzschel

Zitat von Horstmann

Das Nesting hört sich interessant an, auch wenn ich mich noch etwas schwer tue für das Ganze eine wirklich hilfreiche Nutzung im Browser CSS zu finden.

Solange du kein neueres macOS und damit keine Firefox-Version größer als 115 einsetzen kannst, hilft es dir auch nicht. Aber ab Firefox 117 sollte man das grundlegende Konzept verstehen, um das CSS von Firefox zu verstehen, falls man seinen Browser in einem Bereich anpasst, in dem Firefox Gebrauch davon macht. Tendenz in jedem Fall steigend. Die Basis der Anpassungen liegt ja darin, sich das CSS von Firefox mit den Entwicklerwerkzeugen anzusehen und dann zu verändern.

Salz in die Wunde!

Muss aber wirklich bald mal neue Macs anschaffen...

Zitat von Sören Hentzschel

Zitat von Horstmann

Etwas wie :has wäre da schon was Anderes.

Das ist wiederum eine ganz eigene Baustelle, zumal die Verschachtelung ja vor allem sogenannter syntactic sugar ist und anders als :has keine neuen Anwendungsfälle eröffnet. Aber für's Protokoll: Die Unterstützung für :has ist seit 13 Tagen standardmäßig in Firefox Nightly aktiviert. In einer finalen Version wird das definitiv nichts vor Firefox 120. Ausgehend von den Web Platform Tests (WPT) könnte das sogar noch klappen:

https://wpt.fyi/results/css/se…nterop-2023-has

Prima, danke für die Info.

Zitat von Sören Hentzschel

Ergänzend, da gerade im Nightly-Blog gesehen:

Also falls jemand noch nicht geglaubt hat, dass das die Zukunft von CSS in Firefox ist…

Für aktuelle bestehende, eigene CSS Anpassungen, könnte das evtl. bedeuten dass u.U. (kleinere) Probleme mit der Spezifität auftreten können, wenn der Fx Code das Nesting implentiert?

Dass also die Spezifität im eigenen CSS Code hier und da evtl. angepasst werden müsste, um Fx CSS zu überschreiben?

Eine hypothetische Frage zu diesem Zeitpunkt, nur so aus Interesse.

Zitat von Horstmann

Zitat von Sören Hentzschel

Zitat von Horstmann

Das Nesting hört sich interessant an, auch wenn ich mich noch etwas schwer tue für das Ganze eine wirklich hilfreiche Nutzung im Browser CSS zu finden.

Die Basis der Anpassungen liegt ja darin, sich das CSS von Firefox mit den Entwicklerwerkzeugen anzusehen und dann zu verändern.

Gibt es eine funktionierende Möglichkeit, die userContent.css Zuordnung zu Developer Tools hinzuzufügen?