Interessante CSS-Funktionen, die Sie kennen sollten

Letzte Woche haben wir über Pseudo-Elemente und Pseudo-Klassen in CSS gesprochen. In diesem Beitrag haben wir gesehen, wie wir mit diesen CSS-Funktionen prägnanteren, verständlicheren und pflegeleichteren Code generieren können. Heute möchte ich einige zusätzliche CSS-Eigenschaften mit Ihnen teilen, um adaptive Websites zu erstellen, die die Vorlieben Ihrer Besucher berücksichtigen.

Seitenverhältnisse mit object-fit und object-position

object-fit ist eine CSS-Eigenschaft, mit der Sie festlegen können, wie ein Ersatzelement (z. B. ein Bild) in der Größe angepasst werden soll, damit es in seinen Container passt. Lassen Sie uns anhand eines konkreten Beispiels sehen, was das bedeutet, oder?

Angenommen, wir haben das folgende vertikale Bild:

und wir möchten es im folgenden Bereich anzeigen:

das ist 15em hoch und nimmt 80% der verfügbaren Breite ein. Im Prinzip könnte man meinen, dass wir unserem Bild nur eine bestimmte width und height setzen müssen, oder?

 .custom-size { height: 15em; width: 80%; }

Nun, wenn Sie das tun, werden Sie sehen, dass das Seitenverhältnis des Bildes durcheinander ist:

Um zu verhindern, dass ein Bild verzerrt wird, wenn eine bestimmte Breite und Höhe verwendet wird, verließen sich Entwickler früher (und einige tun dies immer noch) auf die CSS- background eines div . Anstatt das Bild mit dem img -Tag hinzuzufügen, haben wir also einen div -Container erstellt:

 <div></div>

Legen Sie die richtigen Abmessungen für das div fest und fügen Sie dann das eigentliche Bild über CSS mit den Eigenschaften background-size und background-position hinzu:

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

Und hier seht ihr das Ergebnis:

Das Skalieren und Zuschneiden von Bildern mithilfe von CSS- background für ein div -Tag ist eine schlechte Lösung, da Sie nicht mehr das semantisch korrekte HTML-Tag verwenden: img . Außerdem enthalten img -Tags eine Reihe cooler Eigenschaften, die zu schnelleren und zugänglicheren Websites führen: eine alt -Eigenschaft, die das Bild beschreibt, srcset , um es reaktionsfähig zu machen, loading , um es zu laden, und so weiter.

Wenn Sie ein Bild so skalieren und zuschneiden möchten, dass es in bestimmte Abmessungen passt, ohne das Bild selbst zu verzerren, müssen Sie lediglich die CSS-Eigenschaften object-fit und object-position verwenden, die sich wie background-size und background-position verhalten tun:

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

Wenn Sie die vorherigen Regeln auf ein img -Tag anwenden:

 <img class="custom-size" src="…/image.jpg" />

Dies ist das Ergebnis, das Sie erhalten:

genau das hat dich interessiert, oder?

Wenn Sie mehr über diese Immobilie erfahren möchten, finden Sie hier einen Link mit allen notwendigen Informationen.

Adaptives Design mit Medienabfragen

Medienabfragen sind ein Mechanismus, mit dem Sie CSS-Regeln zu Ihrer Website hinzufügen können, basierend auf den Eigenschaften des Geräts oder der Anwendung, von der aus Ihre Besucher auf das Internet zugreifen. Ich bin mir ziemlich sicher, dass Sie mit ihnen einigermaßen vertraut sind, da Medienabfragen die Grundlage für die Erstellung reaktionsschneller Websites sind, aber Sie können noch viel mehr damit machen!

Klassische Medienabfragen

Die Verwendung einer Medienabfrage in einem CSS-Stylesheet ist so einfach wie das Hinzufügen des Schlüsselworts @media mit zwei Dingen: einerseits eine Bedingung, die beschreibt, wann die Medienabfrage aktiv ist, und andererseits den Satz von CSS-Regeln, die dies tun sollen geladen werden, wenn die Bedingung erfüllt ist. Aus diesem Grund sind Medienabfragen die Grundlage für die Erstellung responsiver Designs: Sie wenden einfach das eine oder andere Regelwerk an, je nach width des Browsers des Besuchers.

Nehmen wir beispielsweise an, Sie möchten die Seitenleiste des folgenden Absatzes ändern:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Der Löwe auf der Veranda ist manchmal hässlich, aber ein zitterndes Outdoor-Element. Aber die Notwendigkeit für Unternehmer genannt thermischer Stress. Reservierte Mikrowelle, aber meine Tür ist immer oder manchmal Massenautor. Android und Nunc sodales interdum, tincidunt erat ac, tincidunt elit. Jedoch ultricies ac, arcu metus Sed congue. Der Einfachheit halber fürchten Sie leo-verstärktes Protein. Ist ein Tellus Orci, tempor id egestas nec, bekommen zumindest einige Spieler.

so dass es je nach Breite des Browsers alle Farben des Regenbogens verwendet. So können Sie dieses Verhalten über CSS erreichen:

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

Ganz einfach, oder? Wir müssen einfach jedes Mal eine andere Farbe anwenden, wenn die Breite des Browsers einen bestimmten Schwellenwert überschreitet. Beachten Sie, dass wir dies mit einem Mobile-First-Ansatz implementieren, da „neue“ Regeln angewendet werden, wenn der Bildschirm größer wird. Ändern Sie die Breite des Fensters und Sie sehen das Ergebnis.

So implementieren Sie den Dark Mode mit CSS

Dunkle Modi sind jetzt im Trend, sowohl auf dem Handy als auch auf dem Desktop. Wussten Sie, dass es eine Medienabfrage gibt, um zu sehen, ob Benutzer dunkle Modi bevorzugen? Mit der Medienabfrage prefers-color-scheme können Sie sehen, ob der Benutzer ein light oder ein dark Farbschema bevorzugt. Das bedeutet, dass Sie jetzt die Möglichkeit haben, zwei Versionen Ihrer Website zu erstellen, damit sie den Vorlieben all Ihrer Besucher entspricht.

Betrachten Sie beispielsweise das folgende HTML-Snippet:

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

und diese CSS-Regeln:

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

Abhängig von Ihrer Einrichtung sehen Sie, dass der „dynamische“ Teil des vorherigen HTML-Snippets entweder wie das helle oder das dunkle Design aussieht:

Ziemlich cool, oder? Und einfach!

Weitere interessante Anwendungsfälle mit Medienabfragen

Es gibt viele Medienabfragen, die Sie verwenden können (eine vollständige Liste finden Sie hier), aber ich möchte mich auf eine besonders konzentrieren. Insbesondere möchte ich Ihnen erklären, wie Sie unterschiedliche Stile anwenden, je nachdem, ob die Seite im Browser angezeigt wird oder gedruckt werden soll. Alles, was Sie tun müssen, ist das Schlüsselwort print oder screen für die Medienabfrage wie folgt zu verwenden:

 @media print { … } @media screen { … }

oder erstellen Sie zwei separate CSS-Dateien, eine für jeden Anwendungsfall, und fügen Sie sie mithilfe der media Eigenschaft eines link -Tags in Ihren HTML-Code ein:

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

Das Interessante daran ist, dass Sie ein Stylesheet erstellen können, das Ihre Website in einen Inhalt verwandelt, der zum Drucken bestimmt ist. So könnten Sie beispielsweise dynamische Teile des Webs ausblenden, die in einer gedruckten Version keinen Sinn ergeben (wie Menüs oder Formulare). Oder Sie können sogar dafür sorgen, dass einige Dinge sichtbar werden, die beim Drucken verloren gehen, wie zum Beispiel die Ziel-URL eines Links:

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

dessen Ergebnis folgendes ist:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, bei pharetra velit elementum. Name eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

CSS-Variablen

Lassen Sie uns abschließend über eine weitere erstaunliche CSS-Funktion sprechen: benutzerdefinierte CSS-Eigenschaften (auch bekannt als CSS-Variablen). Komplexe Websites haben sehr große Mengen an CSS, und es ist durchaus üblich, dass derselbe Wert immer wieder wiederholt wird. Beispielsweise werden Ihre Farbpalette, Ränder, Polster usw. überall verwendet. Nun, CSS-Variablen vereinfachen diese Komplexität. Und sie sind äußerst nützlich, um den Dunkelmodus einfach zu implementieren!

CSS-Variablen sind genau das, was Sie denken: eine Möglichkeit, einen bestimmten CSS-Wert hinter einem aussagekräftigen Namen zu speichern und wiederzuverwenden. Es ist viel einfacher zu verstehen, was --main-text-color ist, als #333 , nicht wahr?

Das Deklarieren einer benutzerdefinierten Eigenschaft erfolgt mithilfe eines benutzerdefinierten Eigenschaftsnamens, der mit einem doppelten Bindestrich ( -- ) beginnt, und einem Eigenschaftswert, der ein beliebiger gültiger CSS-Wert sein kann. Wie jede andere Eigenschaft wird dies in einem Regelsatz geschrieben, etwa so:

 element { --main-color: red; --main-padding: 2em 1em; }

Der Selektor, den Sie im Regelblock verwenden, in dem Sie die CSS-Variable definiert haben, bestimmt ihren Geltungsbereich. Das heißt, wenn Sie eine Variable innerhalb einer div.banner Regel definieren, ist diese Variable nur in diesem Bereich verfügbar. Am gebräuchlichsten ist es jedoch, Variablen im globalen Bereich mit der Pseudoklasse :root zu erstellen:

 :root { --main-color: red; --main-padding: 2em 1em; }

Um eine CSS-Variable zu verwenden, müssen Sie lediglich ihren Namen in der var Funktion angeben:

 p { color: var(--main-color); padding: var(--main-padding); }

CSS ist hier, um Ihnen zu helfen

Die HTML-Struktur einer Webseite ist wie das Fundament eines Hauses – Sie brauchen ein solides Fundament, wenn Sie etwas solides bauen wollen. Achten Sie beim Erstellen einer Webseite darauf, einen semantisch korrekten und sauberen HTML-Baum zu verwenden. Das Ergebnis ist eine Seite, die auf allen Browsern für alle Besucher funktioniert, und die Anwendung von CSS-Tricks darüber wird einfach und effektiv sein.

Ich hoffe euch hat der heutige Beitrag gefallen. Wenn ja, teilen Sie es mit Ihren Freunden

Beitragsbild von William Daigneault auf Unsplash.