Man lernt nie aus-Thread

[Nina]

Selbst nach fast zwei Jahrzehnten als Webdesignerin stolpere ich doch noch immer wieder über Dinge, die mir nicht bekannt waren. Da es vielleicht anderen auch so geht, sammle ich diese hier. Ihr dürft gerne auch mit eigenen Sachen ergänzen.

[Nina]

Wenn der Text in einem Input bei zu wenig Platz umbrechen soll, reicht die Anweisung white-space: normal; (+ Breitenangabe) für das Input, das sich dann endlich wie gewünscht verhält.

[Bennie]

Könntest Du das präzisieren bzw. ein Beispiel zeigen?

Ich kann das nicht nachvollziehen bzw. nachstellen, Du meinst bei einem <input type="text"...> Feld?

[Bennie]

Auch wenn es im Grunde ein Problem ist was ich nie hatte, aber mich interessiert die Antwort trotzdem noch

[Franko]

CSS - Border-Image
Die Nutzung von CSS Border-Image hatte ich schon wieder verdrängt - ist aber hilfreich:

- https://www.w3schools.com/cssref/css...rder-image.asp
- https://css-tricks.com/almanac/prope.../border-image/
- https://caniuse.com/#feat=border-image

Test Image: border-image-test.png

Html:

<div class="border-img test">
Some lore ipsum
</div>

CSS:

  .border-img {
    border: 1px solid #fff;
    border-image-slice: 5 5 5 5; 
    border-image-width: auto;
    border-image-outset: 0;
    border-image-repeat: repeat;
  }

  .border-img-fill {
    border-image-slice: 5 5 5 5 fill; 
  }

 .test {
    display: block;
    padding: 110px;

   border-image-source: url(border-image-test.png);
 }

[Franko]

In Javascript/jQuery auf bestimmte Viewport Breiten reagieren
Manchmal möchte man in seinen Scripts abhängig von der Viewport Breite unterschiedliche Aufgaben realisieren.

Am einfachsten ist es hierzu dem "body" Element eine CSS Klasse zuzuweisen und dieser via Media Queries z.B. verschiedene CSS "color" Werte geben.
Mit "$("body.meinecssklasse").css("color")" könnte der Wert dann abgefragt werden ( Vorsicht: Im Fall von "color" werden dann die rgb Werte zurückgegeben ).

Ich hatte diese Vorgehensweise immer über "z-index" Werte realisiert:

<style>
    body.devicestate {
        position: absolute;
        top: -999em;
        left: -999em;
        z-index: 1;
    }

    @media all and (max-width: 1200px) {
        body.devicestate { z-index: 2; }
    }

    @media all and (max-width: 1024px) {
        body.devicestate { z-index: 3 }
    }

    @media all and (max-width: 768px) {
        body.devicestate { z-index: 4; }
    }
</style>

Und dann im Script sowas wie:

$( document ).ready(function() {      

    function getDeviceState() {
        
        var index = parseInt($("body.devicestate").css("z-index"));

        var states = {
            1: 'desktop',
            2: 'small-desktop',
            3: 'tablet',
            4: 'phone'
        };

        return states[index] || 'desktop';
    }

    if ( getDeviceState() == 'desktop' ) {
        console.log("Do wahtever in desktop view");
    }


    if ( getDeviceState() == 'tablet' ) {
        console.log("Do wahtever in tablet view");
    }
});

Das klappt selbstverständlich nur einmalig nach dem Seitenaufbau, reicht aber in den meisten Fällen aus.

Wer die Funktionalität dynamisch benötigt, also auf den manuellen Browser Resize reagieren möchte, muß dann das entsprechende Event abfangen.
Damit dies - "$(window).resize()" - nicht überhand nimmt und Dinge verlangsamt kann man z.B. die Lösung von David Walsh "JavaScript Debounce Function" implementieren.

Mittlerweile kann man dazu auch "matchMedia()" einsetzen - die Browser Unterstützung ist heutzutage gut. Beispiele:
- https://www.sitepoint.com/javascript-media-queries/
- https://www.drweb.de/matchmedia-medi...-nutzen-51859/

[Franko]

sass/scss import von .css files

Manchmal liegen framework styles nur mit .css files vor. Beispielsweise für node/npm die animate.css: s.: https://www.npmjs.com/package/animate.css
Diese kann man dennoch in seinem .scss file importieren - man muß nur die Extension (.css) weglassen:

@import 'pathToFile/animate';

Hierbei werden die (CSS) Inhalte der Datei direkt eingebunden.
Mit Angabe der Extension (.css) in der .scss wird eine CSS-Import Angabe generiert ala "@import url(pathToFile/animate.css);" - was nicht immer erwünscht ist.

Siehe auch: https://sass-lang.com/documentation/...#importing-css

[Franko]

Inline svg colorisieren

Update: siehe auch Inline svg colorisieren mit SVG Import im Template
Update: siehe auch "SVG als CSS-background verwenden und umfärben - auch mit dem IE"

Zur Nutzung von inline svg's ein Template anlegen und via Insert-Tag "{{file::}}" einbinden ala:

icon/svg-folder.html:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M13.136,4.014c0,0-2.783,0-3.578,0C8.267,4.014,8.269,2,7.356,2
	C6.012,2,4.701,2,3.444,2C3.163,2,2.99,2,2.863,2C1.835,2,1,2.835,1,3.864v8.243c0,1.029,0.835,1.863,1.863,1.863h10.272
	c1.029,0,1.864-0.834,1.864-1.863v-6.23C15,4.848,14.165,4.014,13.136,4.014z M10.5,8.971H8v2.5c0,0.276-0.224,0.5-0.5,0.5
	S7,11.747,7,11.471v-2.5H4.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5H7v-2.5c0-0.276,0.224-0.5,0.5-0.5S8,5.194,8,5.471v2.5
	h2.5c0.276,0,0.5,0.224,0.5,0.5S10.776,8.971,10.5,8.971z"/>
</svg>

Inhaltselement "HTML":

<div class="icon">{{file::icon/svg-folder.html5}}</div>

Da im svg das "fill-Attribut" auf "currentColor" gesetzt wird kann man es via CSS über den parent container so ansprechen:
( siehe auch: https://blog.kulturbanause.de/2015/0...yword-von-css/)

CSS Style:

.icon {
  color: #ff0000;
}

Hierüber kann man die Icon-Farbe generell setzen.
Wenn man die Farbe ändern möchte OHNE das CSS anpassen zu müssen:

icon/svg-folder.html:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="<?= (is_null(\Contao\Input::get('color')) ? 'currentColor' : \Contao\Input::get('color'))  ?>" d="M13.136,4.014c0,0-2.783,0-3.578,0C8.267,4.014,8.269,2,7.356,2
	C6.012,2,4.701,2,3.444,2C3.163,2,2.99,2,2.863,2C1.835,2,1,2.835,1,3.864v8.243c0,1.029,0.835,1.863,1.863,1.863h10.272
	c1.029,0,1.864-0.834,1.864-1.863v-6.23C15,4.848,14.165,4.014,13.136,4.014z M10.5,8.971H8v2.5c0,0.276-0.224,0.5-0.5,0.5
	S7,11.747,7,11.471v-2.5H4.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5H7v-2.5c0-0.276,0.224-0.5,0.5-0.5S8,5.194,8,5.471v2.5
	h2.5c0.276,0,0.5,0.224,0.5,0.5S10.776,8.971,10.5,8.971z"/>
</svg>

Inhaltselement "HTML":

<div class="icon">{{file::icon/svg-folder.html5?color=#00ff00}}</div>

Wird kein Farbwert übergeben greift dann die CSS Anweisung - ansonsten halt der übergebene Farbwert ...

[Franko]

Short'nSweet - Multiple Backgrounds mit CSS linear-gradient and repeating-linear-gradient

Mit purem CSS komplexe Hintergrundmuster erstellen ohne die OldSchool Image patterns - Infos:

- https://www.youtube.com/watch?v=muE2B0Zylbw
- https://caniuse.com/#feat=css-repeating-gradients
- https://www.gradientmagic.com/

Wer das ganze auch animieren möchte ohne background-position/background-size heranzuziehen - siehe Vorschlag:

- https://medium.com/@dave_lunny/anima...s-d2fd7671e759

[Franko]

Update: Inline svg colorisieren mit SVG Import im Template

Die oben beschriebene Vorgehensweise zur Nutzung von Inline SVG als Template bedingt evtl. die doppelte Pflege von svg Daten:
Einmal als Template (.html5) im template-Verzeichnis und evtl. auch noch als .svg Datei im files-Verzeichnis zur Nutzung in CSS Styles.

Wie im Beitrag beschrieben kann man dies umgehen:

- Man legt die .svg Dateien im files-Verzeichnis ab
- Man importiert diese im Template (z.B. icon/svg-folder.html5) ala:

<?php
  
  $strSVGContent = file_get_contents('files/icons/folder.svg');

  $findStr = 'fill="currentColor"';
  $replaceWith = 'fill="' . (is_null(\Contao\Input::get('color')) ? 'currentColor' : \Contao\Input::get('color')) . '"';

  // replace only first fill attribute
  // or by using preg_match() / preg_match_all() to find matches between quotes after fill attribute like
  // preg_match('/fill\h*=.*?\"(.*?)\"/', $strSVGContent, $match);

  echo implode($replaceWith, explode($findStr, $strSVGContent, 2));
?>

Der Zugriff dann wie oben beschrieben mit "{{file::icon/svg-folder.html5}}" oder "{{file::icon/svg-folder.html5?color=#00ff00}}".
Die Pflege/Aktualisierung der eigentlichen .svg Datei dann nur noch im jeweiligen files-Verzeichnis ...

[Franko]

Ich unterschätze oft die Möglichkeiten der CSS-Elemente "column-width", "column-count" [1,2] usw..

Auch geführt unter "CSS-Columns" bzw. "Multi-Column-Layout".
Dies hat nichts mit CSS-Grid oder Flexbox zu tun kann aber damit kombiniert eingesetzt werden und die Browser Unterstützung ist gut.

[1] w3schools- CSS Multi-column Layout
[2] Caniuse

Rachel Andrew hat hierzu einen schönen Beitrag geschrieben.

Ein Masonry-Layout, also Spalten mit gleicher Breite aber unterschiedlicher Höhe wobei diese untereinander passend angeordnet werden, kann damit leicht umgesetzt werden.
Typischerweise mit Fotos gilt aber grundsätzlich für jede Art von Inhalten.
Mit CSS-Grid bzw. Flexbox ist dies so ohne weiteres nicht möglich ( selbst mit Angaben ala "justify-content: flex-end" etc. ).

Dazu benötigt es lediglich einen umschließenden Container mit min. "column-width" Angabe.
In Contao könnte man dies über z.B. einen separaten Artikel mit einzelnen ( Bild- ) Inhalten oder gleich via Inhaltselement "Galerie" realisieren.

Demo index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
<style>
  body {
    color: #666666;
    background-color: #ebebeb;
  }

  .block {
    display: block;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    column-count: 4;
    column-width: 14em;
    column-gap: 1em;
  }    

  .item {
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #cccccc;
    margin-bottom: 1em;
    break-inside: avoid;
  }

  figure {
    margin: 0;
    break-inside: avoid;
  }

  img {
    max-width: 100%;
    height: auto;
  }
</style>

<div class="container block">

  <div class="item">
  <figure>
    <img src="https://source.unsplash.com/yEOCA6oiVqg/" />
    <figcaption>Image yEOCA6oiVqg</figcaption>
  </figure>
  </div>

  <div class="item">
  <figure>
    <img src="https://source.unsplash.com/SaovgEQMo00/" />
    <figcaption>Image SaovgEQMo00</figcaption>
  </figure>
  </div> 
  
  <div class="item">
  <figure>
    <img src="https://source.unsplash.com/lLtBNeVOHFE/" />
    <figcaption>Image lLtBNeVOHFE</figcaption>
  </figure>
  </div>

  <div class="item">
  <figure>
    <img src="https://source.unsplash.com/C68WT0YKGxo/" />
    <figcaption>Image C68WT0YKGxo</figcaption>
  </figure>
  </div>

  <div class="item">
  <figure>
    <img src="https://source.unsplash.com/ATtLrdUekdI/" />
    <figcaption>Image ATtLrdUekdI</figcaption>
  </figure>
  </div>

  <div class="item">
  <figure>
    <img src="https://source.unsplash.com/_LuLiJc1cdo/" />
    <figcaption>Image _LuLiJc1cdo</figcaption>
  </figure>
  </div>

  <div class="item">
  <figure>
    <img src="https://source.unsplash.com/V9rsiNN5flQ/" />
    <figcaption>Image V9rsiNN5flQ</figcaption>
  </figure>
  </div>

  <div class="item">
  <figure>
    <img src="https://source.unsplash.com/lrPBS8b4G14/" />
    <figcaption>Image lrPBS8b4G14</figcaption>
  </figure>
  </div>

  <div class="item">
  <figure>
    <img src="https://source.unsplash.com/lqxMW8r-qJY/" />
    <figcaption>Image lqxMW8r-qJY</figcaption>
  </figure>
  </div>

  <div class="item">
  <figure>
    <img src="https://source.unsplash.com/7j2D2o9NcYc/" />
    <figcaption>Image 7j2D2o9NcYc</figcaption>
  </figure>
  </div>

</div>

</body>
</html>

[Franko]

kulturbanause beschreibt in seinem Blog "SVG als CSS-background verwenden und umfärben"
wie man grundsätzlich SVG's mit CSS "background-image" anlegt und bequem via Sass/Scss einfärben kann.
Eine praktische Alternative zu Inline-SVG's.

Dies ist notwendig, da hierbei die u.a. oben beschriebene Nutzung des SVG fill-Attributes mit "currentColor" nicht greift.
In den Blog-Beispielen wird die Data-Uri wie folgt gesetzt:

background-image: url("data:image/svg+xml;utf8,<svg> … </svg>");

Was soweit korrekt ist - entsprechend dem Beitrag: Probably Don’t Base64 SVG

Aber:
Dies funktioniert in aktuellen Browser-Versionen von Chrome, Firefox und auch ( IE- ) Edge - nicht aber in älteren IE's.
Der Grund ist die Formatierung der Data-Uri selbst.
Infos hierzu unter: Optimizing SVGs in data URIs

In der Zusammenfassung:
- Die Data-Uri für SVG's sollte in Double-Quotes gesetzt werden
- Die Angabe von "charset=UTF-8" kann hierbei komplett entfallen ( optional - aber in keinem Fall die Short-Form ";utf8" )
- Die SVG Angaben selbst sollten bez. "<", ">" usw. codiert werden

Dann klappt es auch in älteren IE's.
Ein ( gerendertes ) Beispiel entsprechend des Blog-Beitrages:

<style>
  .item {
    display: block;
    height: 100px;
    width: 100px;
    background-size: 100%;
    margin: 1em;
  }  

  /* Kulturbanause Demo */
  /* see: https://blog.kulturbanause.de/2019/08/svg-als-css-background-verwenden-und-umfaerben/#comment-564152 */
  /* see: https://css-tricks.com/probably-dont-base64-svg/ */

  .icon-star {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="red" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>'); 
  }  

  /* Work also with older IE */
  /* see: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris */

  .icon-star-modified {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166 166'%3E%3Cpolygon fill='lime' points='83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8'/%3E%3C/svg%3E");
  }  
</style>

<p>Not with IE</p>
<div class="item icon-star"></div>

<hr/>

<p>Work with older IE</p>
<div class="item icon-star-modified"></div>

Die Codierung der Data-Uri kann autom. via Sass/Scss [1], mit Node-Modul [2] oder über diesen Webpack-Loader [3] umgesetzt werden:

[1] https://codepen.io/jakob-e/pen/doMoML
[2] https://github.com/tigt/mini-svg-data-uri
[3] https://github.com/bhovhannes/svg-url-loader

[Franko]

Eine weitere Umsetzung eines Masonry Layout bietet colcade.js
Vom gleichen Autor des bekannten https://masonry.desandro.com/ aber nach eigenen Aussagen:

Masonry is great, but it has grown big as it has grown older. Colcade is designed to be small & fast. I recommend using Colcade over Masonry, but read over this feature comparison.

Im Unterschied muß man die Spalten Anzahl im HTML Quellcode zwar selbst setzen (und benötigt dann in Contao auch entsprechend angepaßte templates),
allerdings ist man dann frei bei der eigentlichen CSS Umsetzung (klassisch mit float oder via flexbox):
Beispiele findet man in der Beschreibung.

Wie gesagt: Eine weitere Alternative ...

[Franko]

Hallo,
nur als Info.
Eine weitere CSS Framework Alternative zum stöbern - Adobe Spectrum:

- https://spectrum.adobe.com/
- https://opensource.adobe.com/spectrum-css/
- https://github.com/adobe/spectrum-css

[Franko]

Ein aktueller CSS-Tricks Beitrag
beruft sich auf einen Blog Eintrag von Christian Schaefer: https://schepp.dev/posts/ad-integration-in-2020/

Hier wird u.a eine nützliche Umsetzung des HTML5 <template>Elements aufgeführt.
Innerhalb eines eigenen Contao Templates umgesetzt kann das durchaus hrilfreich sein ...

[bwl21]

Update: Inline svg colorisieren mit SVG Import im Template

<?php
  
  $strSVGContent = file_get_contents('files/icons/folder.svg');

  $findStr = 'fill="currentColor"';
  $replaceWith = 'fill="' . (is_null(\Contao\Input::get('color')) ? 'currentColor' : \Contao\Input::get('color')) . '"';

?>

nach langem Suchen bin ich auf diesen Beitrag gestoßen und habe \contao\Input::get gefunden um die Argumente eines {{file::*}} inserttags zu lesen. Die Frage ist: wo hätte ich diese Dokumentation finden können?

[BugBuster]

Im Handbuch findet man etwas, nur nicht beim Insert Tag selbst, da wird nur erwähnt das Parameter möglich sind.
Aber die Parameter sind halt GET Parameter wie bei URLs, damit ist klar wie man darauf zugreifen kann.
https://docs.contao.org/manual/de/an...g-mit-argument

[Franko]

Einfaches Styling von Listen (Element <li>) mit "::marker":

https://css-tricks.com/almanac/selectors/m/marker/
https://developer.mozilla.org/en-US/...b/CSS/::marker

[Franko]

FYI
CSS :is() Pseudo Class Vorteile:

• https://www.youtube.com/watch?v=McC4QkCvbaY
• https://developer.mozilla.org/en-US/docs/Web/CSS/:is
• https://css-tricks.com/almanac/selectors/i/is/

[Franko]

FYI
Wer seine CodePen's (nicht nur s.a. Tutorial) variabel über Eingaben ermöglichen will
kann dazu u.a. die Library Tweakpane nutzen.

Über CDN eingebunden sieht das dann in CodePen z. B. so aus:

• https://codepen.io/cocopon/pen/ExxqpPQ
• https://codepen.io/tomhermans/pen/xxLVBqg

Oder für codesandbox Nutzer z.B.:
https://codesandbox.io/s/t18b4

Hilfreich zum Test eigener Snippets/CSS zur weiteren Nutzung.

[Franko]

Unabhängig von Präprozessoren wie SASS/LESS oder der Nutzung über CSS Custom-Properties
bietet die HSL Umsetzung zur Farbverwaltung einige Vorteile.

Möchte man ein "Dark Mode" Theme anbieten werden hier ("A Complete Guide to Dark Mode on the Web") die grundsätzlichen Vorgehensweisen erklärt.

In Zusammenhang mit HSL (s.a. "Switching from HEX & RGB to HSL") könnte man dann die entsprechenden Farben leicht modifizieren und bereit stellen:

• https://lea.verou.me/2021/03/inverte...ess-variables/
• https://tsh.io/blog/why-should-you-u...tation-in-css/
• https://css-tricks.com/creating-colo...a-little-calc/

Weitere Infos bez. HSL Modifikationen (complement, invert usw.) z.B.:

• https://codesalad.dev/blog/color-man...les-and-hsl-16

[Franko]

Tutorials zur Definition und Nutzung verschiedener CSS units zwecks responsive Fonts (Sizes) findet man leicht.

Die App "Fluid Typography Editor" nimmt das Rätselraten bei der Größenanpassung und Skalierung der Schriftgrößen auf verschiedenen Bildschirmen ab,
bzw. erleichtert die Übersicht bei Eingabe versch. Parameter. Hierbei wird die CSS Funktion clamp() genutzt (s.a.: caniuse).

https://modern-fluid-typography.vercel.app/
https://github.com/codeAdrian/modern...ography-editor

[Franko]

Wir nutzen aktuell .svg, zumeist für verlustfreie Logo's o. Illustrationen, entweder innerhalb <img> oder inline zwecks weiterer Möglichkeiten.
SVG bietet uns aber darüber hinaus mehr Möglichkeiten über die SVG-Filter.

Wir kennen z.B. den CSS-Filter »blur()«
Alle CSS-Filter sind jedoch lediglich vereinfachte Versionen der SVG-Filter.
Der primitive SVG-Filter, als Pendant zu »CSS blur()« wäre »feGaussianBlur mit erweiterten Funktionen.
Eine exemplarische, praktische Nutzung (mit den Unterschieden) findet ihr hier: https://tympanus.net/codrops/2019/01...g-filters-101/

Die Browser Unterstützung für SVG-Filter ist sogar zumeist besser als für die CSS-Filter!

Zur Nutzung der SVG-Filter definiert man lediglich ein inline .svg mit einem o. mehreren Filtern (s.u.)
und nutzt dann »url()« zur Referenzierung des Filters.
Eine einfache Erklärung u. Einführung dazu findet ihr hier: https://www.youtube.com/watch?v=bm6tkPzDObY

Innerhalb der .svg kann man auch mehrere (primitive) Filter kombinieren, ähnlich wie in Photoshop (stacked) und darüber zahlreiche Effekte kreieren.
Wunderbar verdeutlicht von Sara Soueidan: https://www.youtube.com/watch?v=PHKLzpt-syI

Die "After Effects" user haben sicherlich sofort ein »Déjà-vu« hinsichtlich Effekt-Kombis ala "fractal-noise", »displacement-map« etc. (entweder zur Nutzung als content o. mask via alpha/luma).
Und JA - im Grunde genommen bieten SVG-Filter eben diese Effekt Variationen s.a.: »feTurbulence (fractalNoise)«, feDisplacementMap«, »feComposite« oder »feColorMatrix«

Samples: Animiertes Wasser (no video), Starfields,
Texturen, clouds, smoke usw..

Selbstverständlich kann man manche Umsetzungen auch weiterhin als reine, statische Images/videos implementieren.
Die svg Umsetzungen in dieser Form können jedoch oftmals unterhalb von 1k liegen.

Animationen sind möglich, sowohl in svg selbst (SMIL) oder via CSS.
Diese sind jedoch ressourcen intensiv und sollten sparsam gesetzt werden.

Falls Ihr selbst hierzu Beispiele haben solltet: Let us know

[Kopfnuss]

Bin letztens auf die CSS math functions gestoßen und will einfach den Link zu einer Vorstellung mit euch teilen.

Darin geht es unter anderem wie man 100% - 200px in CSS rechnet. Damit wird es interessant das man einen festen Seiten Bereich hat mit 200px und der Hauptbereich sich an den Viewport anpasst.
In dieser Vorstellung werden noch andere Verwendungsmöglichkeiten angerissen, unter anderem wie man die Schriftgröße automatisch an den Viewport anpassen kann oder wie die Schriftgröße sich automatisch an eine Boxgröße anpasst.

https://stackdiary.com/css-math-functions/

[Franko]

In »Masonry-Layout mit CSS "column-width"« wird eine einfache Alternative zwecks Masonry Layouts, unabhängig von weiteren script Lösungen, beschrieben.

Das "Problem" dieser "Fake Masonry" ist die Reihenfolge der Darstellung:
Die Leserichtung sollte von links nach rechts erfolgen, nicht in Form von Spalten ( Zumindest für reine Image-Galleries wäre dies aber zumeist vernachlässigbar ).

s.a.: https://kulturbanause.de/blog/respon...ayout-mit-css/

Eine neue Lösung existiert in Zusammenhang mit CSS-Grid und

grid-template-rows: masonry;

Infos hierzu: Native CSS Masonry Layout In CSS Grid

Leider zur Zeit nur experimentell in Firefox.
Aber man kann zumindest aktuell beide Lösungen (in jedem Fall f. Image-Galleries) via @supports realisieren.

[Franko]

Wer einen »Duotone Effekt« (Photoshop like) für seine Images benötigt, nutzt sicher die CSS Eigenschaft: mix-blend-mode.
Dies evtl. in Kombi mit den Pseudo-Elementen (::after / ::before) und isolation - s.a.:

- https://css-tricks.com/almanac/prope...ix-blend-mode/
- https://cssduotone.com/

Alternativ könnte man dazu aber auch gezielt jeden einzelnen Kanal mit dem SVG-Filter feColorMatrix kontrollieren:
Sample: https://codepen.io/lentilz/pen/mPOKdG/

[Franko]

Wer schnell ein statisches "Hamburger" Symbol benötigt (kein CSS/svg, o. animation):
https://graphemica.com/%E2%98%B0

[Franko]

Zum finden/testen passender Farb-Kombinationen (inkl. Monochrom, Komplementär, Variationen etc.)
existieren zahlreiche Tools wie z.B. »Adobe Color Webapp«.

Ein weiteres Hilfsmittel mit weiteren Vorschau-Möglichkeiten zwecks Entscheidung bietet:
https://huemint.com/

[zonky]

Zum finden/testen passender Farb-Kombinationen (inkl. Monochrom, Komplementär, Variationen etc.)

zu empfehlen ist dann auch mal einen Blick auf die Farbkontraste zu werfen https://www.google.com/search?q=barr...bkontrast+test

Oft gesehene Sachen wie "Hellgraue Schrift" auf "Hellhellgrauem Grund" können den Grafikern/Designern damit um die Ohren geworfen werden ;-)

[Franko]

Wenn man über die devilbox lokal
einen Contao Multidomain-Betrieb (https://docs.contao.org/manual/de/la...omain-betrieb/) aufsetzen möchte,
hilft diese Info:

https://devilbox.readthedocs.io/en/l...ubdomains.html

Klappt bei mir ohne Überschreibung der vhost sondern einfach via Ordner/Symlink in Zusammenhang mit AUTO DNS.

[Franko]

Etwas detaillierter hier:
https://community.contao.org/de/show...l=1#post560125

[McMatty]

Update: Inline svg colorisieren mit SVG Import im Template

Die oben beschriebene Vorgehensweise zur Nutzung von Inline SVG als Template bedingt evtl. die doppelte Pflege von svg Daten:
Einmal als Template (.html5) im template-Verzeichnis und evtl. auch noch als .svg Datei im files-Verzeichnis zur Nutzung in CSS Styles.

Wie im Beitrag beschrieben kann man dies umgehen:

- Man legt die .svg Dateien im files-Verzeichnis ab
- Man importiert diese im Template (z.B. icon/svg-folder.html5) ala:

<?php
  
  $strSVGContent = file_get_contents('files/icons/folder.svg');

  $findStr = 'fill="currentColor"';
  $replaceWith = 'fill="' . (is_null(\Contao\Input::get('color')) ? 'currentColor' : \Contao\Input::get('color')) . '"';

  // replace only first fill attribute
  // or by using preg_match() / preg_match_all() to find matches between quotes after fill attribute like
  // preg_match('/fill\h*=.*?\"(.*?)\"/', $strSVGContent, $match);

  echo implode($replaceWith, explode($findStr, $strSVGContent, 2));
?>

Der Zugriff dann wie oben beschrieben mit "{{file::icon/svg-folder.html5}}" oder "{{file::icon/svg-folder.html5?color=#00ff00}}".
Die Pflege/Aktualisierung der eigentlichen .svg Datei dann nur noch im jeweiligen files-Verzeichnis ...

Hallo Franco

Danke. Mir gefällt das mit dem Inline so wie beschrieben. Jetzt könnte/kann man das auch mit der Größe machen. Ich wäre dann also flexibel, und könnte im Inline auf diese Art auch die Größe individuell festlegen.
Nun, einzeln habe ich das nach deinem Vorbild mit der Größe hinbekommen, aber nur entweder Color oder Height.
Kann man da im Template (mit && oder so - ich kenne mich leider mit php nicht aus) und auch im Inline Zugriff diese zwei Attribute kombinieren?

Wäre dankbar für kurze Info dazu
Grüße
Matt

[Franko]

Naja, alles schon etwas älter.
Aktuell könnte man sowas auch über dieses Inhaltselement lösen:
https://docs.contao.org/manual/de/ar...elles-template

[McMatty]

Naja, alles schon etwas älter.
Aktuell könnte man sowas auch über dieses Inhaltselement lösen:
https://docs.contao.org/manual/de/ar...elles-template

Älter ... ich weiß, aber wenn's funktioniert/funktionieren würde ...

Ich kann mir den Head des svg anpassen und nach deinem Muster das SVG Template erstellen.
- Kann man beide Attribute (also color-Variante und das Gleiche noch einmal als height-Variante) in dem PHP von dir kombinieren?
- Kann man beide Attribute gemeinsam (color=... height= ...) im Inline definieren?

EDIT: Nach etwas Überlegung habe ich festgestellt, dass für Inline SVG die Variante mit .svg und .html5 (das die svg Datei abruft) nach der alten Anleitung eigentlich überflüssig ist ("... nur eine Datei warten ..."). Die .svg Datei als img eingefügt lässt sich ohnehin nicht über diesen Weg oder css stylen (ohne ein Umwandlungsscript). Also kann man genausogut das komplette svg in das Template einfügen und dann als Inline mit ....html5?fill=...[&]height=... jeweils individuell stylen. Die .svg Datei ist da überflüssig. Bei komplexeren Grafiken (Farben, Linien) sind wohl per copy and paste auch die weiteren Attribute veränderbar.

Somit ist das für mich und meine handvoll Icons eine easy Methode ... bis es vllt. eine einfache Anleitung gibt, wie das mit dem neuen Inhaltselement indiv. Templ. und svg funktioniert

[mlweb]

Da steht was von ab Contao 4.13 (ich bleibe vorerst bei LTS 4.9)

Contao 4.13 ist auch eine LTS
Contao 4.9 erhält nur noch bis Februar Bug-Fix-Releases und danach nur noch Security-Fixes

Es gibt eigentlich keinen wirklichen Grund nicht auf Contao 4.13 upzudaten.

[McMatty]

Contao 4.13 ist auch eine LTS
Contao 4.9 erhält nur noch bis Februar Bug-Fix-Releases und danach nur noch Security-Fixes

Es gibt eigentlich keinen wirklichen Grund nicht auf Contao 4.13 upzudaten.

Ah, OK und danke. Ich hatte mich zuletzt mit den Versionen nicht mehr beschäftigt, nach dem Motto "don't touch a running system". Nachdem ich aber gerade ein wenig experimentiert habe, kann ich ja auch das probieren.

Edit: erfolgreich auf 4.13

Grüße aus dem Mostviertel

[McMatty]

Naja, alles schon etwas älter.
Aktuell könnte man sowas auch über dieses Inhaltselement lösen:
https://docs.contao.org/manual/de/ar...elles-template

OK, nun wäre die Frage, wie ich das mit den SVGs zusammenbinde bzw. generell, wie das Individuelle Template genutzt wird.
Die Bedeutung der einzugebenden Schlüssel/Wert Paare in der BE Maske kann ich auch noch nicht "einordnen".

Es gibt offenbar zu dem Thema Contentelement Individuelles Template so gut wie noch keine (beispielhafte) Dokumentation(?).

Grüße
Matt

Edit: Bis dahin ist die Version mit dem angepassten Header des SVG für Höhe UND Farbe (weitere Attribute evtl. auch möglich), dann als html5 ab in Templates und per Inline individuell die Höhe und Farbe angegeben eine passable Lösung für das gelegentliche Icon ...

[wanst]

[…] clamp() […]

Danke für die Tutorials! In Contao (4.13.26) funktioniert clamp() nicht, wenn es in einer LESS-Datei steht. Dann wird nur ein Wert übernommen.

Hab dazu mal einen eigenen Forenbeitrag erstellt: clamp() + LESS ???. Lösungsvorschläge bitte eher dort, sprengt hier sicher den Rahmen.

[EDIT:]

Lösung für Contao+LESS: Den Teil in der LESS-Datei escapen:

font-size: ~"clamp(18px, 3vw, 2rem)";

[benisfroms]

Es ist wirklich interessant, wie sich die Webdesign-Welt ständig weiterentwickelt und man immer wieder Neues lernt. Das Teilen solcher Erfahrungen kann sehr hilfreich sein, um sich gegenseitig zu unterstützen. Vielleicht könntest du anfangen, deine Entdeckungen zu dokumentieren, um eine nützliche Ressource für andere zu schaffen.