ALLES ÜBER dyncss UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

dyncss

Weniger im Allgemeinen

Die Parser-Bibliotheken können spezielle Informationen basierend auf der Sprache, die Sie verwenden möchten, bereitstellen.

Frontend

Beispiel TYPOScript:

page.includeCSS.testLess = EXT:dyncss_test/Ressourcen/Public/Stylesheets/Example.less

Beispiel Überschreibungen (dynamische Farbeinstellungen, dynamische Bildüberschreibungen):

plugin.tx_dyncss { {
    register = LOAD_REGISTER
    register {
        inputColor1.cObject = TEXT
        inputColor1.cObject {
            wert = {$lessColorScheme}}
            split {
                token.char = 124
                returnKey = 0
            }
        }
        inputColor2 < .inputColor1
        inputColor2.cObject.split.returnKey = 1
    }
    Übersteuerung {
        inputColor1 = TEXT
        inputColor1 { {
            daten = Register:inputColor1
        }
        inputColor2 = TEXT
        inputColor2 { {
            daten = Register:inputColor2
        }
        logo = IMG_RESOURCE
        logo {
            stdWrap.wrap = url("|")
            datei = GIFBUILDER
            datei {
                XY = [20.w],[20.h]
                20 = BILD
                20.datei = GIFBUILDER
                20.datei {
                    XY = 128,22
                    backColor.data = Register:inputColor1
                }
                20.mask = EXT:beispiel/css/farben/weniger/bilder/logo_sw.png
            }
        }
    }
    registerReset = RESTORE_REGISTER zurücksetzen
}

Beispiel weniger Datei:

    @linkColor: blau;
    @logo: url(someWeirdUrl);

    a {
        farbe: @linkColor;
    }

    h1 {
        a {
            farbe: aufhellen (@linkColor, 20%);
        }
    }
    #logo {
        hintergrundbild:@logo
    }

Backend: In backend.php aufnehmen

Um zu sehen, wie es funktioniert, werfen Sie bitte einen Blick in dyncss_test.

Caching

Im Produktionsmodus wird CSS nur dann neu gerendert, wenn die oberste weniger oder sass-Datei, die direkt von Typoscript eingebunden wird, geändert wird.
Im Entwicklungsmodus lösen auch Änderungen in Dateien, die innerhalb einer less oder sass Datei importiert werden, ein neues Rendering aus.
Der Entwicklungsmodus wird entweder durch den TYPO3-Anwendungskontext "Entwicklung" oder durch die Voreinstellung "Entwicklung" im Installationstool ausgelöst. Zusätzlich erfolgt eine Referenzierung, wenn Sie TS-Werte ändern, die in den weniger Dateien verwendet werden.

Zusätzlich haben wir einen neuen Clear Cache-Button hinzugefügt, um den dyncss-Cache einfach zu löschen.

Quellkarten

Wenn die Kompilierbibliothek Source Maps unterstützt, können Sie diese Funktion aktivieren, indem Sie den Debug-Modus von dyncss in den Extensionmanager-Einstellungen aktivieren.

Normalerweise werden die Quellkarten an die erzeugten CSS-Dateien angehängt, um Verwechslungen zu vermeiden.

WICHTIG

Sie müssen die CSS-Konzentration deaktivieren, damit die Sourcemaps funktionieren.

Dies kann mit dem folgenden TS basierend auf Ihrer Umgebung erfolgen:

themes.configuration.css.concatenate = 0
page.config.concatenateCss = 0

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

Verteilung:DYNCSS ist auf

1.32 % aller TYPO3 installiert.

  • 2.92 % aller TYPO3 8.7.x Installationen installiert
  • 2.41 % aller TYPO3 7.6.x Installationen installiert
  • 25 % aller TYPO3 7.2.x Installationen installiert
  • 0.89 % aller TYPO3 6.2.x Installationen installiert
  • 0.53 % aller TYPO3 6.1.x Installationen installiert
  • 0.41 % aller TYPO3 4.7.x Installationen installiert
  • 0.81 % aller TYPO3 4.5.x Installationen installiert
  • 0.81 % aller TYPO3 4.4.x Installationen installiert
  • 2.07 % aller TYPO3 4.3.x Installationen installiert
  • 0.85 % aller TYPO3 4.2.x Installationen installiert
  • 2.73 % aller TYPO3 4.1.x Installationen installiert
  • 0.65 % aller TYPO3 4.0.x Installationen installiert

DYNCSS Version:Verteilung nach installierten Versionen

  • 77.67 % DYNCSS v.0.8.2
  • 0.49 % DYNCSS v.0.8.0
  • 21.36 % DYNCSS v.0.7.9
  • 0.49 % DYNCSS v.0.7.8

PHP Version:DYNCSS wird benutzt mit

  • 0.53 % PHP/7.2
  • 7.45 % PHP/7.1
  • 17.02 % PHP/7.0
  • 19.15 % PHP/5.6
  • 13.3 % PHP/5.5
  • 4.79 % PHP/5.4
  • 23.94 % PHP/5.3
  • 12.77 % PHP/5.2
  • 1.06 % PHP/4.4

responsive - image 4

Gosign-Responsive Index: TYPO3 Installationen nutzen DYNCSS zu

  • 32 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
  • 23 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
  • 16 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
  • 29 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

speed test - image 5

Pagespeed: TYPO3 Installationen nutzen DYNCSS zu

  • 22 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 39 % wenn der Pagespeed zwischen 60 % und 80 % ist
  • 18 % wenn der Pagespeed zwischen 40 % und 60 % ist
  • 11 % wenn der Pagespeed zwischen 20 % und 40 % ist
  • 13 % wenn der Pagespeed zwischen 0 % und 20 % ist


Stichprobe n=36680 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de>

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.

[wpforms id="1559"]