Ergebnis 1 bis 9 von 9

Thema: Wie veraltete CSS-Eigenschaft "clip" in CSS-Regel für ".invisible" entfernen?

  1. #1
    Contao-Nutzer
    Registriert seit
    23.11.2023.
    Beiträge
    26

    Frage Wie veraltete CSS-Eigenschaft "clip" in CSS-Regel für ".invisible" entfernen?

    Leider befindet sich in der CSS-Regel für die Klasse ".invisible" die veraltete Eigenschaft "clip".
    Bei Contao-Updates macht diese Eigenschaft regelmäßig Probleme, gerade geschehen beim Update von 5.3.3 auf 5.3.4.

    Ein zeitgemäßer Ersatz für
    "clip: rect(0 0 0 0);"
    wäre z.B.
    "clip-path: circle(0);"

    Wie kann ich dauerhaft dafür sorgen, dass "clip: rect(0 0 0 0);" bei Updates nicht wieder "aktiv" wird?

    Einen Workaround für ".invisible", bei dem die veraltete Eigenschaft mit der zeitgemäßen Eigenschaft überschrieben wird, möchte ich vermeiden.
    Bei diesem Workaround muss für ".invisible:focus" dann zudem die veraltete Eigenschaft "clip: auto;" zusätzlich zu "clip-path: none;" notiert werden.

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.767
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Am einfachsten geht so etwas m. E., wenn man das Contao-Framework gar nicht verwendet und nur eigenes CSS einsetzt.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Contao-Nutzer
    Registriert seit
    23.11.2023.
    Beiträge
    26

    Frage

    Das stimmt wohl.

    Aber "Layout-Builder" und "Responsives Layout" bringen doch schon einige sinnvolle "Features" mit.
    Deshalb habe ich sie aktiviert.

    Dann muss ich mir wohl die Arbeit machen, die sinnvollen "Features" aus den beiden genannten CSS-Frameworks herauszufiltern und in das eigene CSS zu integrieren.

    Ich dachte, es gibt vielleicht eine einfachere Methode.

    Da "Responsives Layout" den "Layout-Builder" zwingend voraussetzt, wäre es hilfreich, wenn ich wüsste, welche CSS-Regeln zu "Responsives Layout" und welche CSS-Regeln zum "Layout-Builder" gehören.

    Wie kann ich das herausfinden?
    Geändert von gbecker (12.04.2024 um 11:43 Uhr)

  4. #4
    Contao-Fan Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    343

    Standard

    Moin,

    das sollte schnell gemacht sein, Du findest die CSS-Dateien bei github:

    https://github.com/contao-components...o/tree/9.x/css

    Welche davon jetzt genau zum Layout Builder und zum responiven Layout gehören, weiß ich allerdings nicht. Die .invisible Anweisung steht in der layout.css.

    Gruß
    Mathias
    “Ah," said Mr Pin. "Right. I remember. You are concerned citizens." He knew about concerned citizens. Wherever they were, they all spoke the same private language, where 'traditional values' meant 'hang someone'.”
    ― Terry Pratchett, The Truth

  5. #5
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Die Zuordnung scheint mir doch recht eindeutig durch die Namen der CSS-Dateien gegebenzu sein.
    layout.css und responsive.css.

  6. #6
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.865
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von gbecker Beitrag anzeigen
    ... gerade geschehen beim Update von 5.3.3 auf 5.3.4.
    sofern du die 'Bildausrichtung' im CE Text verwendest müsstest du sowieso auch dein CSS anpassen » auch hier wurde in 5.x nachgebessert.
    Ich denke, dass wenn du dir ein custom.css vorrichtest, welches du dann in jede Installation mit aufnimmst und dieses stetig erweiterst, wirst du dann schon relativ rasch einen neuen, funktionierenden workaround für "veraltetet und nicht mehr vorhandene" Anweisungen haben.
    Grüsse
    Bernhard


  7. #7
    Contao-Nutzer
    Registriert seit
    23.11.2023.
    Beiträge
    26

    Daumen hoch

    Besten Dank für die Hinweise.
    Ich bin dem Vorschlag von mlweb gefolgt und "Responsives Layout" sowie "Layout-Builder" durchgegangen, um die benötigten CSS-Regeln herauszufiltern. Der Umfang der benötigten CSS-Regeln hielt sich erfreulicherweise stark in Grenzen, sodass ich auf die Einbindung von "Responsives Layout" und "Layout-Builder" nun ganz verzichten kann.

  8. #8
    Contao-Nutzer
    Registriert seit
    23.11.2023.
    Beiträge
    26

    Fehler Update: Verzicht auf Verwendung von "Responsives Layout" und "Layout-Builder"

    Wer mit dem Gedanken spielt, auf den Einsatz der Contao-eigenen CSS-Frameworks "Responsives Layout" und "Layout-Builder" zu verzichten, sollte auf jeden Fall die CSS-Regel
    Code:
    .block {
      overflow: hidden;
    }
    aus der Layout-Builder-CSS-Datei in die eigene CSS-Datei (custom.css) übernehmen.

    Beim Herausfiltern der benötigten CSS-Regeln habe ich diese unscheinbare Regel übersehen.
    Sie sorgt dafür, dass die Navigation auf dem Smartphone korrekt angezeigt wird. Die CSS-Klasse ".block" wird in den Navigationsmodulen verwendet.

    Ich hatte diese Regel nicht übernommen, weil beim Testen im simulierten Smartphone-Mode des Browsers kein Unterschied sichtbar wird, wenn diese Regel fehlt.
    Der Unterschied ist erst beim Testen auf dem Smartphone aufgefallen.

    Möglicherweise gibt es noch weitere CSS-Regeln in "Responsives Layout" und "Layout-Builder", die, wenn sie fehlen, nur beim Testen auf dem Smartphone auffallen.

  9. #9
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.767
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das ist eine Geschmacksfrage. Manch einer - ich z.B. - will das nicht pauschal für alle Elemente mit der Klasse block haben. Das sind standardmäßig deutlich mehr als die Navigationsmodule, z.B. auch die Artikel.
    Man kann so etwas auch ganz gezielt bei bestimmten Elementen einsetzen.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •