Ergebnis 1 bis 15 von 15

Thema: Man lernt nie aus-Thread

  1. #1
    Haupt-Administratorin der Contao-Foren
    Buchautorin 'Contao für Redakteure'
    Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Mecklenburg-Vorpommern
    Beiträge
    4.743
    Partner-ID
    11474
    User beschenken
    Wunschliste

    Standard Man lernt nie aus-Thread

    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.

  2. #2
    Haupt-Administratorin der Contao-Foren
    Buchautorin 'Contao für Redakteure'
    Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Mecklenburg-Vorpommern
    Beiträge
    4.743
    Partner-ID
    11474
    User beschenken
    Wunschliste

    Standard

    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.

  3. #3
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    663

    Standard

    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?

  4. #4
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    663

    Standard

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

  5. #5
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.051
    Partner-ID
    6122

    Standard

    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:
    HTML-Code:
    <div class="border-img test">
    Some lore ipsum
    </div>
    CSS:
    Code:
      .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);
     }
    Geändert von Franko (18.02.2019 um 15:15 Uhr)
    Carpe diem ...

  6. #6
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.051
    Partner-ID
    6122

    Standard

    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:

    HTML-Code:
    <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:

    Code:
    $( 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/
    Geändert von Franko (25.07.2019 um 14:51 Uhr)
    Carpe diem ...

  7. #7
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.051
    Partner-ID
    6122

    Standard

    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:

    Code:
    @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
    Geändert von Franko (31.07.2019 um 11:19 Uhr)
    Carpe diem ...

  8. #8
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.051
    Partner-ID
    6122

    Standard

    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:
    Code:
    <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":
    Code:
    <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:
    Code:
    .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:
    Code:
    <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":
    Code:
    <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 ...
    Geändert von Franko (15.08.2019 um 15:41 Uhr)
    Carpe diem ...

  9. #9
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.051
    Partner-ID
    6122

    Standard

    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
    Carpe diem ...

  10. #10
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.051
    Partner-ID
    6122

    Standard

    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-Code:
    <?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($replaceWithexplode($findStr$strSVGContent2));
    ?>
    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 ...
    Geändert von Franko (02.08.2019 um 13:04 Uhr)
    Carpe diem ...

  11. #11
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.051
    Partner-ID
    6122

    Standard Masonry-Layout mit CSS "column-width"

    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:
    HTML-Code:
    <!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>
    Carpe diem ...

  12. #12
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.051
    Partner-ID
    6122

    Standard SVG als CSS background verwenden und umfärben - auch mit dem IE

    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:

    HTML-Code:
    <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
    Geändert von Franko (16.08.2019 um 09:05 Uhr)
    Carpe diem ...

  13. #13
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.051
    Partner-ID
    6122

    Standard Weitere Masonry Layout Alternative

    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 ...
    Carpe diem ...

  14. #14
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.051
    Partner-ID
    6122

    Standard CSS Framework Alternative von Adobe (Open Source)

    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
    Carpe diem ...

  15. #15
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.051
    Partner-ID
    6122

    Standard Das HTML5 Element <template>

    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 ...
    Geändert von Franko (16.01.2020 um 10:28 Uhr)
    Carpe diem ...

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
  •