Probleme des Lebens mit CSS lösen

Oder: Wenn alles, was Sie haben, ein CSS-Hammer ist, sieht die Welt wie ein CSS-Nagel aus.

Immer wenn ich einen perfekt netten Kommentar höre wie: „Ja, die „Tech“-Branche repräsentieren!“ als Antwort auf meine reine CSS-Kunst, bekomme ich ein scharfes Gefühl der Panik.

Wie viele Leute, die beruflich mit UIs arbeiten, habe ich Schwierigkeiten, den Begriff „Tech“ auf mich selbst anzuwenden, ohne mich wie ein Betrüger zu fühlen. Das Hochstapler-Syndrom ist schwer abzuschütteln. Ein Front-End-Spezialist? Oh, du meinst die Sachen, die *nicht wirklich Code sind*? Das steigert das Gefühl vom *Betrüger* zum *Schurken*.

Obwohl 90 % meiner täglichen Arbeit mit JavaScript zu tun haben, habe ich das Gefühl, dass das „Tech“-Label eine glänzende Trophäe ist, die ich gierig von jemand Würdigerem geschnappt habe. Als ob es namenlose, hungernde Informatikabsolventen da draußen gäbe und ich ihnen die Ramen direkt aus dem Mund stehle.

Nehmen wir zum Beispiel dieses Szenario, das mit Informatik vertrauten Personen wahrscheinlich bekannt ist.

CS-Kurs-Problem: Schreiben Sie ein Skript, das diesen Datensatz N Mal sortiert und dann zufällig mischt, aber für jedes 8. Q geben Sie 12 Bäume, Stacks, Queues, Void, Flip-Flop aus und Sie hören nicht auf zu rocken, bis Sie die Summe der Ergebnisse 4x + 3y zurückgeben.

Mein Vorschlag: (12 Stunden und acht Gallonen Kaffee später) Fertig! Hier sind 1.200 Zeilen wunderschön formatierter Code! Es gibt dreiundvierzig Schleifen, zweiunddreißig Wenn/Dann-Bedingungen und dreiundachtzig Zeilen Kommentare, weil ich mich in der Datei verliere – aber ich habe das exakt gewünschte Ergebnis erzielt!

CS-Kurs-Antwort: Verwenden Sie drei Zeilen Rekursion.

Meine Antwort: …%#@& du.

Eine Übertreibung, aber es ist hilfreich, regelmäßig so gedemütigt zu werden. Es hilft Ihnen, als Programmierer, Problemlöser und Mensch zu wachsen. Außerdem bereitet es Sie auf reale Szenarien in Ihrer Karriere vor, in denen Sie regelmäßig auf interessante Herausforderungen stoßen werden, die ein wenig kreatives Denken erfordern.

Wenn es um die CSS-Seite der Dinge geht, wird Ihnen kein Arbeitgeber jemals bitten, ein detailliertes, malerisches CSS-Kunstwerk zu erstellen. Wenn doch, sollten Sie das sofort als Belästigung bei der Personalabteilung melden. Aber es ist sehr üblich, eine kleine und manchmal ungewöhnliche Anfrage zu haben. Eine, die vielleicht keine offensichtliche Lösung hat.

Das „tech-freie“ CSS – mit seinem eklatanten Mangel an Programmierfunktionen – mag Ihnen bei einer solchen Herausforderung nicht sofort in den Sinn kommen. Aber machen Sie sich keine Sorgen, es kann eines der wertvollsten Werkzeuge in Ihrem Algorithmen-Arsenal sein! Zum Beispiel.

CSS-Kurs-Problem: Eine Haftungsausschlussmeldung muss als Warnung angezeigt werden, wenn ein Benutzer auf ein bestimmtes Eingabefeld klickt.

Vorschlag: Ein Kinderspiel! Wir verwenden unseren treuen Freund JavaScript, um ein Klick- oder Fokusereignis auf dem Eingabeelement auszulösen. Dann laden wir die Disclaimer-Vorlage. Dann machen wir einen Ajax-Aufruf für Inhalte. Sobald unsere Promise() aufgelöst ist, fügen wir das Element zur Seite hinzu und finden heraus, wo wir es einfügen müssen, indem wir das Elternelement von event.target finden. Nachdem der Disclaimer geladen ist, müssen wir sicherstellen, dass wir ein weiteres Klickereignis auf dem Disclaimer selbst behandelt haben, um ihn auszublenden. Sobald wir ihn ausgeblendet haben, zerstören wir das Element. Wenn das Eingabefeld erneut geklickt wird, wiederholen wir diesen Vorgang.

CSS-Kurs-Lösung: input:focus + .disclaimer { display: block; }

Antwort: …%#@& ab.

Wieder eine Übertreibung (und die weltweit ineffizienteste JavaScript-Lösung), aber es ist nur eine leichte Übertreibung. Ich sehe diese Arten von Vorschlägen *viel* häufiger angewendet, als Sie erwarten würden. In der Lage zu sein, lächerlich schnelle Lösungen für Probleme zu liefern, die lange als langwierige JavaScript-Probleme galten? **Das ist einer der Wege, auf denen CSS es mir ermöglicht, mich wie ein Meister der Technik zu fühlen.**

Das ist nur eines von vielen Dingen, die ich an CSS liebe. Die begrenzte Menge an Regeln macht es gerade so spannend. Man erwartet nicht, dass CSS alle seine Bedürfnisse erfüllt, was es umso lohnender macht, wenn man doch einen Weg findet, wie es das kann.

Nun, sagen wir, es gibt eine Designherausforderung. Ihnen wird aufgetragen, diese Form im Browser zu implementieren.

Vorschlag 1: Es gibt keine „Umgekehrter-Randradius“-Eigenschaft, um diese Form in CSS zu erstellen, also ist das nicht möglich. Betten Sie einfach ein Bild ein. Duh.

Antwort 1: Okay, dann lernen Sie doch kein CSS, mir egal.

Nein, bitte kommen Sie zurück! Ich möchte, dass Sie lernen.

Es stimmt, dass niemand Sie bestraft, wenn Sie ein Bild verwenden. Es gibt keine CSS-Polizei, die diese Regel durchsetzt. Verdammt, es gibt nicht einmal eine Informatikpolizei, die Sie davon abhält, einen schrecklichen Algorithmus mit Milliarden von Zeilen anstelle eines wunderschön einfachen rekursiven zu verwenden. **Aber wenn es ein Konzept gibt, das zwischen CSS und CS geteilt werden kann, dann ist es, dass „nicht möglich“ selten die Antwort ist.**

Versuchen wir es also mit einer Brute-Force-Methode, ja?

Vorschlag 2: Beginnen Sie mit einem schwarzen Rechteck, dann schneiden Sie die Seiten mit zwei gerundeten `<div>`-Elementen aus, die der Farbe des weißen Hintergrunds entsprechen, so.

Antwort 2: Alles klar! Jetzt kommen wir voran. Die Form nimmt Gestalt an. Aber was ist, wenn der Hintergrund variiert? Oder ein Gradient? Oder ein Bild? Wie würde das aussehen?

Hm. Sieht nicht mehr ganz so schön aus. Wie erlauben wir also unserem natürlichen Hintergrund durchzuscheinen und behalten gleichzeitig eine nach innen abfallende Form bei – etwas, das CSS von Natur aus nicht unterstützt?

Vorschlag 3: Behalten Sie das Rechteck bei. Behalten Sie die gebogenen Divs bei. Aber füllen Sie das Rechteck nicht mit Farbe und füllen Sie auch die gebogenen Divs nicht mit Farbe. Verwenden Sie stattdessen die schwarze Farbe *außerhalb* der gebogenen Divs mit `box-shadow`. Das Rechteck benötigt einfach ein `overflow: hidden;`, um diese `box-shadow`-Farbe innerhalb seiner Grenzen zu halten.

Antwort 3: Gut gemacht! Wunderschön!

Die obige Technik wurde in Ana Tudors ausgezeichnetem Beitrag zu eingekerbten Ecken im Jahr 2018 noch detaillierter beschrieben. Und es ist ein ausgezeichnetes Konzept, das man im Hinterkopf behalten sollte, wenn man mit Problemen wie „nicht mit CSS möglich“ konfrontiert wird. Es ist eines, das ich gerne beim Erstellen von Kunst verwende.

Nehmen wir zum Beispiel diesen Teil eines meiner CSS-Gemälde.

Der menschliche Hals ist normalerweise nicht bequem in einer perfekten rechteckigen Form verpackt. Aber HTML ist es, also damit müssen wir arbeiten.

Aber Moment, ist diese Halsform nicht ziemlich ähnlich der geschwungenen schwarzen Form, die wir oben umrissen haben?

Ja, alles begann mit einem großen Rechteck. In diesem Fall verwendeten unsere nach außen gebogenen Divs eine weichere Mischung auf ihrem Box-Shadow.

Außerhalb der Arbeit komme ich immer wieder auf CSS für künstlerische Inspiration zurück.

Denn etwas an diesen Einschränkungen *ruft* mich. Ich weiß, dass ich nicht allein bin, wenn ich sage, dass eine starre Einschränkung der beste Katalysator für Kreativität ist. Totale künstlerische Freiheit kann ein lähmendes Konzept sein.

Das kann manchmal beim Programmieren der Fall sein. Wenn Ihnen die mächtigsten Programmiersprachen der Welt zur Verfügung stehen, scheint es natürlich, dass Sie keine Schwierigkeiten haben sollten, jedes Programmierproblem zu lösen. Bei all diesen erstaunlichen Werkzeugen, die unzählige Lösungen für dasselbe Problem bieten, ist es kein Wunder, dass wir manchmal vor Informationsüberflutung erstarren.

Sicher, CSS kann als kein „echter“ Bestandteil des Tech-Stacks angesehen werden. Ich würde dem nicht einmal widersprechen. Mal ehrlich, reines CSS dreht sich nicht um Rekursion, Datenspeicherung oder Datenbankabfragen. Sein Hauptzweck ist in der Tat die Verschönerung – was nicht gerade zur Stigmatisierung von Front-Endern als keine „echten“ Techies oder Programmierer beiträgt.

CSS hat nie kühne Behauptungen oder Versprechungen gemacht. Es hat lediglich Hilfe angeboten, und es stellt sich heraus, dass seine Hilfe geradezu heroisch sein kann.

Wenn Sie ein Front-Ender sind, der sich mit einer Horde von DevOps-Leuten auseinandersetzen muss, die ihr CSS verspotten, warten Sie einfach ab und sehen Sie, wie die Reaktion ist, wenn Sie heimlich ein `body { display: none; }` auf die Produktion schmuggeln. Wir werden sehen, wer dann lacht!^*

---

^* Sie werden immer noch die sein, die lachen, weil Sie gefeuert werden. Bitte tun Sie das nicht.