Heilbronn Digital

Kategorie: CSS

  • LESS: Viewport Größen mit Pixelangaben verrechnen

    Wenn man mit calc die viewport height bzw. viewport width mit einer Pixelangabe verrechnen möchte, stolpert man oft über eine „inkorrektes“ Ergebnis

    Bsp: min-height: calc( 100vh – 90px) ergibt min-height: calc(10vh)

    Der Grund hierfür ist dass LESS die Viewport Höhe nicht korrekt erkennt und berechnen kann.

    Lösung: min-height: calc( ~“100vh“ – 90px)

    Durch escapen kann LESS nun den korrekten Wert berechnen und gibt keinen CSS Fehler aus.

    Die Pixelangabe lässt sich natürlich auch durch eine less-Variable ersetzen.

  • SVGs im Hintergrund: Paint it black – oder in jeder anderen beliebigen Farbe

    Früher hat man gerne mit png oder Sprites für die Darstellung von Icons auf einer Webseite gearbeitet, dann kam FontAwesome mit einer großen Sammlung standarisierter Icons – und manchmal schafft man halt auch mit SVG.

    Die Farbe von inline eingebundenen SVG lassen sich ja recht einfach anpassen:

    Bsp. für ein SVG mit direkter Einbindung in HTML, das SVG stellt eine Lupe dar.

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<path class="st0" d="M63.3,59.8L52.5,49l0.1-0.2c1.9-2.7,3-5.9,3-9.3c0-8.8-7.2-16-16-16s-16,7.2-16,16s7.2,16,16,16
	c3.3,0,6.5-1,9.3-3l0.2-0.1l10.8,10.8c1,1,2.5,1,3.5,0l0,0c0.5-0.5,0.7-1.1,0.7-1.7C64,60.9,63.7,60.2,63.3,59.8z M39.6,52.2
	c-7,0-12.6-5.7-12.6-12.6S32.6,27,39.6,27s12.6,5.7,12.6,12.6S46.5,52.2,39.6,52.2z" style="
    fill: #000000;
"></path>

</svg>

    CSS

    svg .st0 {
    fill: #FF0000;
}

    Und schon ist die Lupe rot statt schwarz.

    Möchte man SVG jedoch als Hintergrundgrafik nutzen und bei Hover die Farbe ändern, hat man keinen Zugriff auf das SVG an sich. Viele weichen an der Stelle auf die klassische Einbindung aus und erledigen dies durch Icons (einzelne oder Sprites). Das hat jedoch den Nachteil dass man jeden Status vorsehen muss.

    Dabei kann man dies recht einfach mit LESS durch ein mixin erledigen. Denn LESS kann

    .icon-fill(@src, @fill) {
   @data-uri: data-uri('image/svg+xml;charset=UTF-8', "@{src}");
   @replace-src: replace("@{data-uri}", "fill\%3D\%22\%23[\w]{3,6}\%22", escape('fill="@{fill}"'), "g");
   background-image:e(@replace-src);
}

    LESS

    a {
   &:before {
      .icon-fill("../images/icons/ICON.svg", "#FFFFFF");
   }
   &:hover {
      &:before {
         .icon-fill("../images/icons/ICON.svg", "#000000");
      }
   }
}

    Übergeben wird nur der Pfad zum SVG sowie die gewünschte Farbe. In oben aufgeführten Fall ersetzt LESS bei der Generierung der späteren CSS Datei sämtliche Farbangaben im SVG, welche im „fill“-Attribut stehen, zunächst durch #FFFFFF (weiß). Für den :hover-Status werden diese dann durch #000000 (schwarz) ersetzt. Somit muss man nur eine einzige Grafik erstellen. Die gewünschte farbliche Anpassung kann dadurch extrem schnell ausgeführt werden. Man trägt die gewünschte Farbe ein, kompiliert mit gulp oder grunt, fertig.

    Wenn die Farbangaben als CSS im SVG hinterlegt sind, funktioniert das oben aufgeführte Script nicht – hierfür muss es angepasst werden.

    Gefunden bei zslabs.com

     

  • Zählen mit CSS

    Mit reinem CSS3 lassen sich Elemente durchzählen – eine Option die man beim erstellen einer Webseite nicht ausser Acht lassen sollte, wenn es z.B. darum geht Listen für mobil anzupassen.

    Hierbei ist zu beachten, dass sich die Styles hier nicht auf das Elternelement basierend auf der Anzahl der Kindelemente anwenden lassen. Man kann jedoch mit CSS auf Kindelemente basierend auf der Anzahl ihrer Geschwister zugreifen.

    So lassen sich z.B. Breiten anhand der Anzahl der Elemente innerhalb eine Liste festlegen, ohne dies umständlich durch JS berechnen zu müssen.

    Im nachfolgenden Beispiel werden die Elemente einer Liste in der Breite verändert. In der Voreinstellung haben alle Listenelemente die Breite 33.3333%. Das sieht jedoch bei 5 Listenpunkten unschön aus, da zwei Elemente umbrechen. Hier wäre es wünschenswert wenn das erste und letzte Element jeweils 100% Breite einnehmen und dadurch eine 1-3-1 Darstellung erreicht wird.

    HTML:

    <ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4</li>
    <li>Element 5</li>
</ul>

    CSS

    ul {
    li {
        width: 33.33333%;
    }
}

     

    Durch nachfolgendes CSS werden die Breiten des ersten und letzten Elements in der Liste angepasst, wenn diese fünf Listenpunkte enthält.

    ul {
    > *:nth-last-child(n+5) ~ *:last-child,
    > *:nth-last-child(n+5):first-child {
        width: 100%;
    }
}

    Sollte die Liste mehr oder weniger Einträge enthalten muss das CSS natürlich angepasst werden.

     

    Ein weiterer Anwendungsfall wäre die Einschränkung einer langen Liste. Üblicherweise erledigen das viele per Javascript. Wenn man jedoch auch z.B. eine Animation bei der ersten Darstellung der Listenpunkte verzichten kann, ist folgendes CSS hilfreich:

    .list .item {
    display: none;
}

.list .item:nth-child(-n+5){
    display:block;
}

    Zunächst werden alle Einträge ausgeblendet. Der Selektor :nth-child(-n+5) setzt die ersten fünf Einträge wieder sichtbar.