CSS unterrichten

Ich benutze CSS als Webentwicklerin, seit CSS etwas ist, das wir tatsächlich nutzen können. Meine ersten Webseiten wurden mit <font>-Tags und <table>s für das Layout erstellt. Ich erinnere mich an Diskussionen darüber, ob diese ganze CSS-Sache überhaupt eine gute Idee war. Ich war schnell überzeugt, hauptsächlich wegen der Möglichkeit, die Schriftart einer ganzen Website an einer Stelle einfach zu ändern. Die Verwaltung gemeinsamer Stile war zu einer Zeit, als die meisten Websites nur ein Stapel von HTML-Seiten ohne Inhaltsverwaltung oder irgendeine Form von Templating waren, unglaublich nützlich. Ich war eine frühe Anwenderin von CSS anstelle von Tabellen für das Layout, trotz der Stimmen, die fragten: „Aber was ist mit Netscape 4?“

CSS ist eine bemerkenswerte Sprache. Diese frühen Websites wurden in einer Zeit entwickelt, in der das Beste, was Standards-Befürworter hoffen konnten, war, dass Browser das vorhandene CSS unterstützen würden; dass Entwickler ihr HTML und CSS validieren und das vorhandene CSS *verwenden* würden. Dennoch wird eine Website, die damals gebaut wurde und noch online ist, oder eine, die über die Wayback Machine aufgerufen wird, auch in einem modernen Browser funktionieren. Das zeigt die Sorgfalt, die die CSS Working Group und andere Gruppen, die an der Erweiterung der Web-Plattform arbeiten, darauf verwendet haben, **das Web nicht zu brechen**.

Ich unterrichte CSS fast so lange, wie ich CSS benutze. Ich bin unfähig, einen Gedanken zu haben, ohne ihn in Worte zu fassen. Ich schreibe Dinge auf, um sie mir zu merken, ich schreibe Dinge auf, um sie für mich verständlich zu machen. Das hinterlässt mir viele Worte, und schon früh in meiner Karriere hatte ich die Idee, dass sie für andere nützlich sein könnten, also begann ich, sie zu veröffentlichen. Im Laufe der Jahre habe ich gelernt, wie man Leute unterrichtet, und die Dinge entdeckt, die verschiedenen Konzepten helfen, bei Leuten mit unterschiedlichen Lern- und Informationsverarbeitungswegen zu „klicken“. Seit den frühen Tagen des CSS-Layouts unterrichten wir es im Folgenden.

• Das ist ein Block-Element
• Das ist ein Inline-Element
• Sie können Block-Elemente in Inline-Elemente und umgekehrt verwandeln, indem Sie die Eigenschaft display verwenden.
• Das ist das Box-Modell, es ist sehr wichtig und auch irgendwie seltsam.

Typischerweise würden wir CSS unterrichten, indem wir direkt einsteigen, ein Layout gestalten und dabei die seltsame Sammlung von Hacks erklären, die ein Layout ermöglichten. Im Gegensatz zu anderen Sprachen, bei denen wir vielleicht mit den Kernfundamenten der Programmierung beginnen, hatten wir in CSS nur sehr wenige Konzepte zu lehren, abgesehen vom Erstellen von Dingen und dem Erklären der Seltsamkeiten im Kontext tatsächlicher Layouts. Das Box-Modell war wichtig, weil es alles war, was wir wirklich für das Layout hatten. Es war entscheidend für unsere Methode, Dingen eine Größe zu geben und sie so zu verschieben, dass sie sich mit anderen sorgfältig dimensionierten Dingen ausrichten lassen, um etwas zu schaffen, das wie ein Raster aussieht. Wenn man das Standard-Box-Modell nicht verstanden hat und dass die von Ihnen festgelegte Breite nicht die tatsächliche Breite war, die das Element einnahm, würden sich Ihre sorgfältig berechneten Prozentsätze zu mehr als 100% addieren und schlechte Dinge würden passieren.

In den letzten Jahren wurden uns all diese neuen Werkzeuge an die Hand gegeben: Flexbox und Grid bieten uns ein für CSS entwickeltes Layoutsystem. Weniger offensichtlich ist jedoch, dass eine Reihe von Konzepten entstehen, die uns zum ersten Mal eine echte Möglichkeit bieten, CSS-Layout zu erklären. Es hat eine Art Refactoring der Sprache stattgefunden, die sie von einer Sammlung von Hacks zu etwas gemacht hat, das als kohärentes System gelehrt werden kann. Wir können mit dem normalen Fluss beginnen und uns dann dem widmen, was es bedeutet, den Wert von display zu ändern, denn hier liegen all unsere neuen Layout-Fähigkeiten. Wir können erklären, wie display zwei Dinge steuert – den äußeren Wert von block und inline und den inneren Formatierungskontext – der vielleicht Grid, Flex oder normaler Fluss sein kann.

Das frühzeitige Erklären von Writing Modes ist unerlässlich. Nicht, weil unsere Anfängerinnen und Anfänger sofort vertikale Skripte formatieren oder sogar vertikalen Text kreativ einsetzen müssen. Es ist wichtig, weil Writing Modes erklären, warum wir über Start und Ende sowie über Block- und Inline-Dimensionen sprechen und nicht über die physischen oberen, rechten, unteren und linken Ecken ihres Bildschirms. Das Verständnis dieser Dinge erleichtert die Ausrichtung in Grid und Flexbox sowie die linienbasierte Positionierung in Grid erheblich. Das Box-Modell kann dann auf eine kurze Erklärung reduziert werden, dass width und height (oder inline-size und block-size) sich auf die content-box beziehen und wir sie mit der Eigenschaft box-sizing auf die border-box umstellen können. In einer Welt, in der wir Dingen keine Größe geben und sie herumschieben, wird das Box-Modell nur noch Teil unserer Diskussion über Box Sizing, zu der auch die intrinsischen Größen gehören, die bei der Arbeit mit Flexbox und Grid weitaus nützlicher sind.

Schließlich müssen wir uns auf die Idee des konditionalen CSS konzentrieren. Media Queries und Feature Queries bedeuten, dass wir die Umgebung unseres Nutzers anhand von Metriken wie der Bildschirmgröße, der Verwendung eines Zeigegeräts oder eines Touchscreens und den Fähigkeiten seines Browsers testen können. Wir können nie sicher sein, wie unsere Websites angetroffen werden, aber wir haben in CSS zunehmend die Möglichkeit, uns für die Umgebung zu optimieren, sobald wir dort sind. Eine der größten Fähigkeiten, die wir einer Person auf ihrem Weg als Webentwicklerin oder Webentwickler vermitteln können, ist das Verständnis dieser Wahrheit. Die Person, die Ihre Website besucht, hat vielleicht einen Touchscreen, sie benutzt vielleicht einen Screenreader, sie ist vielleicht auf einem Gerät mit kleinem Bildschirm und sie benutzt vielleicht IE11. In all diesen Fällen gibt es Dinge, die Sie tun möchten, die in ihrer Situation nicht funktionieren werden. Ihre Aufgabe ist es, damit umzugehen, und CSS hat Ihnen die Werkzeuge dafür gegeben.

Als ich meine Reise im CSS-Layout mit dem Hintergrund von Leuten begann, die sich über Netscape 4 beschwerten, setze ich diese heute gegen eine Kulisse von Leuten fort, die sich über IE11 beschweren. Mit dem Erwachsenwerden unserer Branche würde ich mir wünschen, dass wir diese Beschwerden hinter uns lassen. Ich denke, das beginnt damit, dass wir CSS als robuste Sprache unterrichten, eine, die so konzipiert wurde, dass wir Informationen für mehrere Umgebungen, für viele verschiedene Menschen, über ein Meer von sich ständig ändernden Geräten präsentieren können.