So lernen Sie CSS

Ich bekomme viele Leute, die mich bitten, ihnen Tutorials zu verschiedenen Teilen von CSS zu empfehlen, oder fragen, wie man CSS lernt. Ich sehe auch viele Leute, die wegen CSS-Teilen verwirrt sind, teilweise wegen veralteter Vorstellungen von der Sprache. Da sich CSS in den letzten Jahren ziemlich verändert hat, ist dies ein wirklich guter Zeitpunkt, um Ihr Wissen aufzufrischen. Auch wenn CSS nur ein kleiner Teil dessen ist, was Sie tun (weil Sie an anderer Stelle im Stack arbeiten), sorgt CSS dafür, dass die Dinge am Ende so aussehen, wie Sie es auf dem Bildschirm haben möchten. Es lohnt sich also, einigermaßen auf dem neuesten Stand zu sein.

Daher zielt dieser Artikel darauf ab, die wichtigsten Grundlagen von CSS und Ressourcen für weitere Lektüre zu Schlüsselbereichen der modernen CSS-Entwicklung zu skizzieren. Viele davon sind Dinge hier im Smashing Magazine, aber ich habe auch einige andere Ressourcen und auch Leute ausgewählt, denen ich in Schlüsselbereichen von CSS folgen kann. Es ist kein vollständiger Leitfaden für Anfänger oder soll absolut alles abdecken. Mein Ziel ist es, die Breite des modernen CSS abzudecken, wobei ich mich auf einige Schlüsselbereiche konzentriere, die Ihnen helfen werden, den Rest der Sprache für Sie freizuschalten.

Sprachgrundlagen

Bei einem Großteil von CSS müssen Sie sich keine Gedanken über das Auswendiglernen von Eigenschaften und Werten machen. Sie können sie nachschlagen, wenn Sie sie brauchen. Es gibt jedoch einige wichtige Grundlagen der Sprache, ohne die Sie Schwierigkeiten haben werden, sie zu verstehen. Es lohnt sich wirklich, etwas Zeit darauf zu verwenden, sicherzustellen, dass Sie diese Dinge verstehen, da Ihnen dies auf lange Sicht viel Zeit und Frust ersparen wird.

Selektoren, mehr als nur Klasse

Ein Selektor tut, was er verspricht, er wählt einen Teil Ihres Dokuments aus, damit Sie CSS-Regeln darauf anwenden können. Während die meisten Leute damit vertraut sind, eine Klasse zu verwenden oder ein HTML-Element wie body direkt zu formatieren, gibt es eine große Anzahl fortgeschrittener Selektoren, die Elemente basierend auf ihrer Position im Dokument auswählen können, vielleicht weil sie direkt nach einem Element kommen. oder sind die ungeraden Zeilen in einer Tabelle.

Die Selektoren, die Teil der Level-3-Spezifikation sind (vielleicht haben Sie gehört, dass sie als Level-3-Selektoren bezeichnet werden), verfügen über eine hervorragende Browserunterstützung. Einen detaillierten Überblick über die verschiedenen Selektoren, die Sie verwenden können, finden Sie in der MDN-Referenz.

Einige Selektoren verhalten sich so, als ob Sie eine Klasse auf etwas im Dokument angewendet hätten. Zum Beispiel verhält sich p:first-child so, als ob Sie dem ersten p -Element eine Klasse hinzugefügt hätten, diese werden als Pseudo-Klassen- Selektoren bezeichnet. Die Pseudo-Element- Selektoren verhalten sich so, als ob ein Element dynamisch eingefügt wurde, zum Beispiel ::first-line ähnlich wie Sie eine span um die erste Textzeile wickeln. Es wird jedoch erneut angewendet, wenn sich die Länge dieser Zeile ändert, was nicht der Fall wäre, wenn Sie das Element eingefügt hätten. Sie können mit diesen Selektoren ziemlich komplex werden. Im Folgenden ist CodePen ein Beispiel für ein Pseudo-Element, das mit einer Pseudo-Klasse verkettet ist. Wir zielen auf das erste p -Element mit einer :first-child -Pseudoklasse ab, dann wählt der ::first-line Selektor die erste Zeile dieses Elements aus und verhält sich so, als ob eine Spanne um diese erste Zeile herum hinzugefügt wurde, um sie fett und fett zu machen ändern Sie die Farbe.

Vererbung und die Kaskade

Die Kaskade definiert, welche Regel gewinnt, wenn mehrere Regeln auf ein Element zutreffen könnten. Wenn Sie schon einmal in einer Situation waren, in der Sie nicht verstehen konnten, warum einige CSS nicht zu funktionieren scheinen, ist es wahrscheinlich, dass die Kaskade Sie ins Stolpern bringt. Die Kaskade ist eng mit der Vererbung verbunden, die definiert, welche Eigenschaften von den untergeordneten Elementen des Elements, auf das sie angewendet werden, geerbt werden. Es ist auch mit Spezifität verbunden; Unterschiedliche Selektoren haben unterschiedliche Spezifitäten, die steuern, wer gewinnt, wenn es mehrere Selektoren gibt, die auf ein Element angewendet werden könnten.

Hinweis : Um all diese Dinge zu verstehen, würde ich vorschlagen, The Cascade and Inheritance in der MDN-Einführung in CSS zu lesen.

Wenn Sie Schwierigkeiten haben, etwas CSS auf ein Element anzuwenden, dann sind Ihre Browser-DevTools der beste Ausgangspunkt, sehen Sie sich das Beispiel unten an, in dem ich ein h1 -Element habe, das von der Elementauswahl h1 anvisiert wird und die Überschrift orange macht. Ich verwende auch eine Klasse, die h1 auf rebeccapurple setzt. Die Klasse ist spezifischer und daher ist h1 lila. In DevTools können Sie sehen, dass die Elementauswahl durchgestrichen ist, da sie nicht zutrifft. Sobald Sie sehen können, dass der Browser Ihr CSS erhält (aber etwas anderes hat es außer Kraft gesetzt), können Sie herausfinden, warum.

Das Box-Modell

Bei CSS dreht sich alles um Boxen. Alles, was auf dem Bildschirm angezeigt wird, hat eine Box, und das Box-Modell beschreibt, wie die Größe dieser Box berechnet wird – unter Berücksichtigung von Rändern, Polsterung und Rändern. Das Standard-CSS-Box-Modell nimmt die Breite, die Sie einem Element gegeben haben, und fügt dieser Breite dann die Polsterung und den Rahmen hinzu – was bedeutet, dass der Platz, der vom Element eingenommen wird, größer ist als die Breite, die Sie ihm gegeben haben.

In jüngerer Zeit konnten wir uns für ein alternatives Box-Modell entscheiden, das die angegebene Breite des Elements als Breite des sichtbaren Elements auf dem Bildschirm verwendet. Jede Auffüllung oder Umrandung wird den Inhalt der Box von den Rändern her einschieben. Dies ist für viele Layouts viel sinnvoller.

In der Demo unten habe ich zwei Boxen. Beide haben eine Breite von 200 Pixel, einen Rand von 5 Pixel und eine Auffüllung von 20 Pixel. Die erste Box verwendet das Standard-Box-Modell, nimmt also eine Gesamtbreite von 250 Pixeln ein. Das zweite verwendet das alternative Box-Modell, ist also tatsächlich 200 Pixel breit.

Browser DevTools können Ihnen erneut dabei helfen, das verwendete Box-Modell zu verstehen. In der folgenden Abbildung verwende ich Firefox DevTools, um eine Box mit dem standardmäßigen content-box Box-Modell zu inspizieren. Die Tools sagen mir, dass dies das verwendete Box-Modell ist, und ich kann die Größe sehen und wie der Rand und die Polsterung zu der von mir zugewiesenen Breite hinzugefügt werden.

Hinweis : Vor IE6 verwendete Internet Explorer das alternative Box-Modell, bei dem der Inhalt durch Auffüllen und Rahmen von der angegebenen Breite weg verschoben wurde. Daher verwendeten Browser eine Zeit lang unterschiedliche Box-Modelle! Wenn Sie heute von Interoperabilitätsproblemen frustriert sind, seien Sie froh, dass sich die Dinge verbessert haben, sodass wir es nicht mit Browsern zu tun haben, die die Breite der Dinge anders berechnen.

Es gibt eine gute Erklärung des Box-Modells und der Box-Größe auf CSS-Tricks sowie eine Erklärung, wie Sie das alternative Box-Modell weltweit am besten auf Ihrer Website verwenden können.

Normaler Fluss

Wenn Sie ein Dokument mit etwas HTML-Markierung des Inhalts haben und es in einem Browser anzeigen, wird es hoffentlich lesbar sein. Überschriften und Absätze beginnen in einer neuen Zeile, Wörter werden als Satz mit einem einzelnen Leerzeichen dazwischen angezeigt. Tags zur Formatierung, wie z. B. em, unterbrechen den Satzfluss nicht. Dieser Inhalt wird im Normal-Flow- oder Block-Flow-Layout angezeigt. Jeder Teil des Inhalts wird als „im Fluss“ beschrieben; es kennt den Rest des Inhalts und überschneidet sich daher nicht.

Wenn Sie eher mit als gegen dieses Verhalten arbeiten, wird Ihr Leben viel einfacher. Dies ist einer der Gründe, warum es sehr sinnvoll ist, mit einem korrekt markierten HTML-Dokument zu beginnen, da Ihr Inhalt aufgrund des normalen Flusses und der eingebauten Stylesheets, die Browser haben, die es respektieren, an einer lesbaren Stelle beginnt.

Kontexte formatieren

Sobald Sie ein Dokument mit Inhalt im normalen Fluss haben, möchten Sie möglicherweise ändern, wie einige dieser Inhalte aussehen. Sie tun dies, indem Sie den Formatierungskontext des Elements ändern. Als ein sehr einfaches Beispiel: Wenn Sie möchten, dass alle Ihre Absätze zusammenlaufen und nicht in einer neuen Zeile beginnen, können Sie das p -Element so ändern, dass es display: inline , indem Sie es von einem Block in einen Inline-Formatierungskontext ändern.

Formatierungskontexte definieren im Wesentlichen einen äußeren und einen inneren Typ. Das Äußere steuert, wie sich das Element neben anderen Elementen auf der Seite verhält, das Innere steuert, wie die untergeordneten Elemente aussehen sollen. Wenn Sie also beispielsweise display: flex sagen, setzen Sie das Äußere auf einen Blockformatierungskontext und die untergeordneten Elemente auf einen Flex-Formatierungskontext.

Hinweis : Die neueste Version der Anzeigespezifikation ändert die display , um den inneren und äußeren Wert ausdrücklich zu deklarieren. Daher könnte man in Zukunft sagen display: block flex; ( block ist das Äußere und flex ist das Innere).

Lesen Sie mehr über display bei MDN.

Im oder außerhalb des Flows sein

Elemente in CSS werden als „im Fluss“ oder „nicht im Fluss“ beschrieben. Elementen im Fluss wird Raum gegeben und dieser Raum wird von den anderen Elementen im Fluss respektiert. Wenn Sie ein Element aus dem Fluss nehmen, indem Sie es schweben lassen oder positionieren, wird der Platz für dieses Element nicht mehr von anderen Elementen im Fluss respektiert.

Am auffälligsten ist dies bei absolut positionierten Items. Wenn Sie einem Element position: absolute angeben, wird es aus dem Fluss entfernt, müssen Sie sicherstellen, dass es nicht zu einer Situation kommt, in der das Out-of-Flow-Element einen anderen Teil Ihres Layouts überlappt und unlesbar macht.

Floating-Elemente werden jedoch ebenfalls aus dem Fluss entfernt, und während der folgende Inhalt die verkürzten Linienkästchen eines Floating-Elements umschließt, können Sie durch Platzieren einer Hintergrundfarbe auf dem Kästchen der folgenden Elemente sehen, dass sie aufgestiegen sind und ignorieren Speicherplatz, der vom schwebenden Element verwendet wird.

Auf MDN können Sie mehr über In-Flow- und Out-of-Flow-Elemente lesen. Es ist wichtig, sich daran zu erinnern, dass Sie, wenn Sie ein Element aus dem Fluss nehmen, die Überlappung selbst verwalten müssen, da die regulären Regeln des Blockfluss-Layouts nicht mehr gelten.

Layout

Seit über fünfzehn Jahren gestalten wir Layouts in CSS ohne ein für den Job konzipiertes Layoutsystem. Dies hat sich geändert. Wir haben jetzt ein perfekt funktionierendes Layoutsystem, das Grid und Flexbox umfasst, aber auch mehrspaltiges Layout und die älteren Layoutmethoden, die für ihren eigentlichen Zweck verwendet werden. Wenn Ihnen CSS-Layout ein Rätsel ist, besuchen Sie das MDN Learn Layout-Tutorial oder lesen Sie meinen Artikel Erste Schritte mit CSS-Layout hier im Smashing Magazine.

Glauben Sie nicht, dass Methoden wie Grid und Flexbox irgendwie konkurrieren . Um Layout gut zu nutzen, finden Sie manchmal eine Komponente am besten als Flex-Komponente und manchmal als Grid. Gelegentlich möchten Sie das Spaltenflussverhalten von Multicol. All dies sind gültige Entscheidungen. Wenn Sie das Gefühl haben, dass Sie gegen das Verhalten ankämpfen, ist das im Allgemeinen ein sehr gutes Zeichen dafür, dass es sich lohnen könnte, einen Schritt zurückzutreten und einen anderen Ansatz zu versuchen. Wir sind so daran gewöhnt, CSS zu hacken, damit es tut, was wir wollen, dass wir wahrscheinlich vergessen, dass wir eine Reihe anderer Optionen zum Ausprobieren haben.

Layout ist mein Hauptfachgebiet und ich habe eine Reihe von Artikeln hier im Smashing Magazine und anderswo geschrieben, um zu versuchen, die neue Layout-Landschaft zu zähmen. Zusätzlich zu dem oben erwähnten Layout-Artikel habe ich eine ganze Serie über Flexbox – beginnen Sie mit What Happens When You Create a Flexbox Flex Container. Auf Grid By Example habe ich eine ganze Reihe kleiner Beispiele für CSS Grid – plus ein Video-Screencast-Tutorial.

Außerdem – und speziell für Designer – sehen Sie sich Jen Simmons und ihre Layout Land-Videoserie an.

Ausrichtung

Ich habe Alignment von Layout im Allgemeinen getrennt, da die meisten von uns Alignment als Teil von Flexbox kennengelernt haben, diese Eigenschaften jedoch für alle Layoutmethoden gelten und es sich lohnt, sie in diesem Zusammenhang zu verstehen, anstatt über „Flexbox Alignment“ nachzudenken „CSS-Rasterausrichtung.“ Wir haben eine Reihe von Ausrichtungseigenschaften, die nach Möglichkeit auf eine gemeinsame Weise funktionieren. Sie weisen dann einige Unterschiede aufgrund des Verhaltens verschiedener Layoutmethoden auf.

Auf MDN können Sie sich mit Box Alignment und seiner Implementierung für Grid, Flexbox, Multicol und Block Layout befassen. Hier im Smashing Magazine habe ich einen Artikel, der sich speziell mit der Ausrichtung in Flexbox befasst: Alles, was Sie über die Ausrichtung in Flexbox wissen müssen.

Dimensionierung

Ich habe einen Großteil des Jahres 2018 damit verbracht, über die intrinsische und extrinsische Größenspezifikation zu sprechen und wie sie sich insbesondere auf Grid und Flexbox bezieht. Im Web sind wir daran gewöhnt, die Größe in Längen oder Prozentsätzen festzulegen, da wir auf diese Weise Raster-Layouts mit Floats erstellen konnten. Moderne Layoutmethoden können jedoch einen Großteil der Raumverteilung für uns übernehmen – wenn wir sie zulassen. Es lohnt sich, zu verstehen, wie Flexbox Speicherplatz zuweist (oder die Grid fr -Einheit funktioniert).

Hier im Smashing Magazine habe ich über die Größenanpassung im Layout im Allgemeinen und auch für Flexbox in How Big Is That Flexible Box? geschrieben.

Sich anpassendes Design

Unsere neuen Layoutmethoden von Grid und Flexbox bedeuten oft, dass wir mit weniger Medienabfragen auskommen, als wir mit unseren älteren Methoden benötigten, da sie flexibel sind und auf Änderungen des Ansichtsfensters oder der Komponentengröße reagieren, ohne dass wir die ändern müssen Breiten der Elemente. Es wird jedoch Stellen geben, an denen Sie einige Haltepunkte hinzufügen möchten, um Ihre Designs weiter zu verbessern.

Hier sind einige einfache Anleitungen zu Responsive Design, und für Medienabfragen im Allgemeinen lesen Sie meinen Artikel Verwenden von Medienabfragen für Responsive Design im Jahr 2018. Ich werfe einen Blick darauf, wofür Medienabfragen nützlich sind, und zeige auch die kommenden neuen Funktionen Medienabfragen in Level 4 der Spezifikation.

Schriftarten und Typografie

Neben dem Layout hat sich auch die Verwendung von Schriftarten im Web im letzten Jahr stark verändert. Variable Schriftarten, die es einer einzelnen Schriftartdatei ermöglichen, unbegrenzte Variationen zu haben, sind hier. Um einen Überblick darüber zu bekommen, was sie sind und wie sie funktionieren, sehen Sie sich diesen exzellenten Kurzvortrag von Mandy Michael an: Variable Fonts and the Future of Web Design. Außerdem würde ich Dynamic Typography With Modern CSS and Variable Fonts von Jason Pamental empfehlen.

Um Variable Fonts und ihre Möglichkeiten zu erkunden, gibt es eine unterhaltsame Demo von Microsoft sowie eine Reihe von Playgrounds, um Variable Fonts auszuprobieren – Axis Praxis ist die bekannteste (ich mag auch den Font Playground).

Sobald Sie anfangen, mit variablen Schriftarten zu arbeiten, wird sich dieser Leitfaden auf MDN als unglaublich nützlich erweisen. Um zu erfahren, wie Sie eine Fallback-Lösung für Browser implementieren, die Variable Fonts nicht unterstützen, lesen Sie Implementing a Variable Font With Fallback Web Fonts von Oliver Schondorfer. Der Firefox DevTools Font Editor unterstützt auch das Arbeiten mit variablen Schriftarten.

Transformationen und Animation

CSS-Transformationen und -Animationen sind definitiv etwas, das ich auf einer Need-to-Know-Basis nachschlage. Ich muss sie nicht oft verwenden, und die Syntax scheint mir zwischen den Verwendungen direkt aus dem Kopf zu springen. Zum Glück hilft mir die Referenz auf MDN und ich würde vorschlagen, mit den Leitfäden zur Verwendung von CSS-Transformationen und zur Verwendung von CSS-Animationen zu beginnen. Zell Liew hat auch einen netten Artikel, der CSS-Übergänge gut erklärt.

Um einige der möglichen Dinge zu entdecken, werfen Sie einen Blick auf die Animista-Website.

Eines der Dinge, die bei Animationen verwirrend sein können, ist die Vorgehensweise. Zusätzlich zu dem, was in CSS unterstützt wird, müssen Sie möglicherweise JavaScript, SVG oder die Webanimations-API einbeziehen, und diese Dinge werden in der Regel alle in einen Topf geworfen. In ihrem Vortrag „Choose Your Animation Adventure“, aufgenommen bei An Event Apart, erklärt Val Head die Optionen.

Verwenden Sie Cheatsheets als Erinnerung, nicht als Lernwerkzeug

Wenn ich Grid- oder Flexbox-Ressourcen erwähne, sehe ich oft Antworten, die besagen, dass sie Flexbox ohne ein bestimmtes Cheatsheet nicht ausführen können. Ich habe kein Problem mit Cheatsheets als Gedächtnisstütze zum Nachschlagen der Syntax, und ich habe einige meiner eigenen veröffentlicht. Das Problem, sich ausschließlich auf diese zu verlassen, besteht darin, dass Sie beim Kopieren der Syntax übersehen können, warum die Dinge funktionieren. Wenn Sie dann auf einen Fall stoßen, in dem sich diese Eigenschaft anders zu verhalten scheint, scheint diese scheinbare Inkonsistenz verwirrend oder ein Fehler der Sprache zu sein.

Wenn Sie sich in einer Situation befinden, in der CSS etwas sehr Seltsames zu tun scheint, fragen Sie warum . Erstellen Sie einen reduzierten Testfall, der das Problem hervorhebt, fragen Sie jemanden, der mit der Spezifikation besser vertraut ist. Viele der CSS-Probleme, nach denen ich gefragt werde, sind darauf zurückzuführen, dass diese Person glaubt, dass eine Eigenschaft anders funktioniert als in Wirklichkeit. Aus diesem Grund spreche ich viel über Dinge wie Ausrichtung und Größenbestimmung, da dies Orte sind, an denen diese Verwirrung häufig vorkommt.

Ja, es gibt seltsame Dinge in CSS. Es ist eine Sprache, die sich im Laufe der Jahre entwickelt hat, und es gibt Dinge daran, die wir nicht ändern können – bis wir eine Zeitmaschine erfinden. Sobald Sie jedoch einige Grundlagen beherrschen und verstehen, warum sich die Dinge so verhalten, wie sie es tun, werden Sie mit den schwierigeren Stellen eine viel einfachere Zeit haben.