Es war schon 2008, als Chris seinen "Ah-ha!"-Moment bei der Arbeit mit CSS teilte. Sie wissen schon, diese metaphorische Glühbirne, die aufleuchtet, wenn man von Nichtwissen, was zur Hölle CSS ist, zu einem plötzlichen grundlegenden Verständnis seiner Funktionsweise gelangt.
Für Chris war es die Kombination aus drei Konzepten
- Jedes Seitenelement ist eine Box
- Ich kann die Größe und Position dieser Boxen steuern
- Ich kann diesen Boxen Hintergrundbilder geben
Es ist lustig, wie etwas scheinbar so Einfaches zu einer Fähigkeit heranwachsen kann, die eine Karriere definiert, sei es die Gestaltung von Websites für Kunden oder das Starten eines Blogs wie diesem.
Es gibt eine zeitlose Qualität darin, den "Ah-ha!"-Moment für jeden in Erinnerung zu rufen. Das CSS-Tricks-Team ist in den acht Jahren, seit Chris diesen Beitrag schrieb, gewachsen, also dachten wir, es wäre lustig, uns selbst zu befragen und die Momente zu teilen, in denen CSS für jeden von uns Sinn zu machen begann.
Geoff Graham
CSS begann für mich Sinn zu machen, als ich erkannte, dass es sich um ein Dokument handelte, das Stile enthielt, die von einer HTML-Datei verwendet wurden, und dass Klassen Platzhalter dafür waren, wo Stile eingefügt werden sollten.
Das ähnelt Chris' Erfahrung, ist aber eher auf der Dokumentenebene angesiedelt. Ich fragte mich, wie ein Webbrowser die Darstellung einer Seite einfach basierend auf dem Inhalt des HTML-Dokuments ändern konnte, und alles, was ich sah, war so etwas wie hier
<div class="header">
<h1>A Headline</h1>
<h2>A clever subtitle</h2>
</div>
<div class="content">
<p>The content and all that.</p>
</div>
<div class="footer">
<p>Copyright 2006</p>
</div>Ich konnte um mein Leben nicht verstehen, wie dieser Markup-Brocken in ein vollwertiges Design umgewandelt werden konnte. Das heißt, bis ich die verlinkte CSS-Datei im <head>-Abschnitt des Dokuments sah.
<link rel="stylesheet" href="path/to/style.css" />Das Öffnen dieser Datei ließ das alte Hamsterrad in meinem Gehirn anlaufen und führte dazu, dass ich mir den Markup-Code Element für Element ansah. Wo ich mir den HTML-Markup als Ganzes ansah, begann ich, ihn in Blöcken zu betrachten
<div class="header">
<h1>A Headline</h1>
<h2>A clever subtitle</h2>
</div>...wobei dieser Block den Regeln für .header im Stylesheet entspricht. Ich konnte sehen, wie die Höhe dieses Blocks festgelegt wurde, ein Hintergrundbild, und sogar die Farbe und Größe des Textes darin geändert werden konnte.
Robin Rendle
Ich saß in meinem Hinterhof und fummelte mich durch Jeffrey Zeldmans Designing with Web Standards, als es mich traf: Webdesign konnte weit über die Gestaltung der Website meiner albernen Band hinausgehen. Mit einem einzigen Befehl war es möglich, dass Websites ihre Eingeweide, ihre interne Logik, preisgaben, da der Web Inspector mir erlaubte, mit dem Ändern eines der Werte für padding oder margin Boxen auf dem Bildschirm zu verschieben.
Es war jedoch erst, als ich mit dieser CSS-Zeile experimentierte, dass ich angefixt war
.element {
float: right;
}Mit dieser winzigen Codezeile konnte ich die ganze Seite kaputt machen, ich konnte Textspalten aneinanderknallen und Bilder ins Nichts schleudern; die geschätzten Worte des Autors konnte ich quetschen und dehnen, egal wie hässlich das Endergebnis auch sein mochte.
Mir ist jetzt klar, dass alles hier in dieser rücksichtslosen Zerstörung fremder Websites begann, Sinn zu ergeben. Selbst heute, als professioneller Webdesigner, macht es mir immer noch Spaß, Dinge kaputt zu machen und Websites wie meinen persönlichen Spielplatz zu behandeln.
Sarah Drasner
Ich bin ein alter Hase, ich habe Webseiten noch zu Zeiten von Tabellen gebaut, bevor CSS existierte. Als es herauskam, war ich skeptisch. Für mich war der große Wendepunkt CSS Zen Garden. Diese Seite hat so erstaunlich gezeigt, wie Präsentation und Inhalt entkoppelt werden können, und die schiere *Macht* von CSS in Bezug auf Layout und Kontrolle. Die Möglichkeit, mich nicht wiederholen zu müssen und etwas einmal zu deklarieren und es überall propagieren zu lassen, machte mich ganz aufgeregt.
Aber mein "Ah-ha!"-Moment beim *Arbeiten* mit CSS war etwas anders. Meiner war Chris' sehr ähnlich, insofern als er mit Boxen begann, aber mit einer leichten Variation
- Es gibt Elemente, die wie Boxen funktionieren, deren Position und Abstände man steuern kann.
- Es gibt Elemente, die wie Text funktionieren, die man durch Zeilenhöhe, Schriftart usw. steuert.
- Wenn ich darüber nachdenke, wie der *Browser* die Elemente und Stile sieht, kann ich ihn debuggen.
Danach kam ich zum schieren kreativen Wunder der Arbeit mit CSS. Es begann dort, wo Code auf Design trifft, hat sich aber seither weiterentwickelt. Fantasievolle Programmierung, wie Animationen, generative Codes und all der zusätzliche Zauber wie For-Schleifen. Organisatorische Kraft für die Architektur von Designsystemen, mit Mixins, Extends und Variablen, die SASS ermöglicht.
Was war dein Moment?
Viele Leute teilten ihre Erfahrungen im letzten Beitrag von Chris, aber es wäre interessant zu wissen, was dieser Moment für andere ist, die vielleicht angefangen haben, mit CSS zu arbeiten, seitdem er veröffentlicht wurde.
Wir haben die Frage auch auf Twitter gestellt
Vor langer Zeit sprachen wir über deinen "CSS Ah-ha! Moment"https://#/UGKciONYUl
Machen wir das nochmal!
Wann hast du angefangen, CSS zu "verstehen"?
— CSS-Tricks (@Real_CSS_Tricks) 6. Juli 2016
Wir haben einige interessante Antworten bekommen! Hier sind ein paar
@Real_CSS_Tricks head { display: block;} war ein großer Moment für mich
— James Nowland (@jnowland) 6. Juli 2016
@Real_CSS_Tricks dass position: absolute relativ zum nächstgelegenen positionierten Vorfahrenelement positioniert wird
— Patrick Marx (@ptrckmrx) 7. Juli 2016
@Real_CSS_Tricks Wahrscheinlich, als ich einen Pakt mit dem Teufel schloss.
— Billy Purvis (@mrmonkeytech) 6. Juli 2016
Was war dein Moment? Hast du den Quellcode einer Website angesehen, um Antworten zu finden? Oder hat dir vielleicht ein Freund die Seile gezeigt? Vielleicht war es sogar ein Blogbeitrag, den du gelesen und immer noch als Lesezeichen gespeichert hast, um ihn zu teilen. Was auch immer es ist, bitte teile es in den Kommentaren!
Mensch, mein Moment war irgendwo zwischen 1998-1999 – ja, immer noch CSS 1 –, als ich darüber in einer Zeitschrift las und erkannte, dass ich damit Boxen und Typografie positionieren und dekorieren konnte.
Meine waren das Finden von zwei Programmen namens Teleport Pro und Hot Dog Pro. Die Fähigkeit von Teleport Pro war, eine Website in ihrer Gesamtheit herunterzuladen und dann jedes Element zu zerlegen und wieder zusammenzusetzen, um zu versuchen herauszufinden, wie sie es gemacht haben. Mein Ah-ha-Moment war, als ich endlich herausfand, wie man einen Header, 3 nebeneinander liegende Blöcke und einen Footer mit Floats und (später) Positionen stapelt. Es war ein magischer Moment, als ich mein erstes tabellenfreies Design hatte… ich lächelte tagelang :)
Mein großes Erleuchten in der alten Denkfabrik kam in meinem ersten HTML-Kurs im Sommersemester nach dem Beginn meines Studiums. In dem Moment, als ich herausfand, dass die Klasse .thisClass { diese Dinge } tun kann aus dieserDatei.css, war ich so gut wie auf dem Weg.
Es hilft SEHR, dass CSS sehr wohl eine englische Sprache, äh, Sprache ist. Ich habe oft Leute erzählt, dass es wirklich nicht schwer ist, sie zu durchschauen, und das stimmt tatsächlich; mein Mitbewohner wusste genauso wenig darüber, als ich mit diesem Kurs anfing, wie ich, und kennt jetzt die Grundlagen, nur indem er mir zusieht, wie ich meine Hausaufgaben mache.
Als ich anfing, Bootstrap zu verwenden. Als ich mich wirklich in das Framework einarbeitete, zwang es mich, CSS-Deklarationsklassen als Komponenten zu betrachten, die mehrfach auf verschiedene HTML-Elementtypen angewendet werden konnten. Davor war ich hyperfokussiert auf die HTML-Elemente selbst und versuchte, Deklarationen zusammenzufügen, die für dieses Element spezifisch waren.
Mein Moment kam durch die Verwendung eines Firefox-Plugins namens Stylish. Stylish erlaubt es Ihnen, eine bestehende Seite zu nehmen und einen "Benutzerstil" zu verwenden, der von jemandem erstellt wurde, um diese Seite besser aussehen oder besser funktionieren zu lassen. Und einige dieser Benutzerstile sind so einfach, dass ich sie leicht schreiben konnte. Meine Erleuchtung kam, als mir klar wurde, dass ich CSS (mit Stylish) verwenden konnte, um Websites zu ändern, die ich häufig besuche. Ich konnte sogar eine neue, unentwickelte Website als eine sehr einfache "bestehende Website" behandeln und sie von dort aus gestalten.
Meine waren die Arbeit mit Position und Float. Wie sich Elemente veränderten, wenn absolute Positionierung angewendet wurde.
Das Beste war, als ich lernte, dass Float das Element aus dem normalen Dokumentfluss heraushebt und eine genauere Positionierung erfordert.
Als ich den kaskadierenden Teil verstand, den Unterschied zwischen Block/Inline, wie Positionierung wirklich funktioniert und Spezifität
Verdammt, ich bin alt. Das erste Mal, als ich CSS arbeiten sah, war auf den Hilfe-Seiten von Windows 98. Bis dahin wurde CSS von Netscape nicht unterstützt. IE hatte CSS seit IE3 implementiert, aber niemand hat es benutzt. Wir benutzten Tabellen als Rasterlayout.
Dann bemerkte ich, dass die Hilfe-Seiten von Windows wie HTML aussahen (eigentlich CHM), aber es war irgendwie anders.
Ich fand einen Weg, CHM-Dateien zu dekompilieren, und es gab eine vollständige Dateistruktur mit HTML, Bildern und CSS. Ich bemerkte, dass es sich von dem HTML unterschied, mit dem ich arbeitete. Es wurde nicht mit Tabellen oder Tags erstellt, und als ich die CSS-Dateien öffnete, enthielten sie Farben, Größen, Ränder, und ich konnte sie ändern.
Es hat alles verändert. Ich wollte keine Tabellen mehr. Ich habe nach wie vor lange mit Tabellen gearbeitet, da CSS noch nicht vollständig war und Designer ihre Arbeitsweise nicht ändern wollten. Aber schließlich begann ich, die Dinge einzuführen, die ich fand, als Browser sie verstehen konnten.
Der Moment, als ich das Box-Modell verstand, war der Moment, als ich erkannte, dass ich eine gewisse Kontrolle über dieses Ding namens 'css' hatte.
Der Moment, als mir klar wurde, dass display:block im Grunde nur Elemente vertikal anordnet, während display: inline* sie horizontal anordnet.
Aber es hielt nicht an...
Der Moment, als mir klar wurde, dass andere Leute in meinem Team CSS weitaus besser kennen, als ich es je könnte, und dass das Beste, was ich tun konnte, darin bestand, sicherzustellen, dass sie die Zeit hatten, ihre beste Arbeit zu leisten...
Als ich herausfand, dass padding-top in Prozent (padding-top:25%;) vom Breite seines Elternteils und nicht von der Höhe berechnet wird.
Ich hatte zwei "AH HA"-Momente in CSS, beide hatten mit Position und Web-Layout zu tun.
1) Die Eigenschaften top und left von position: absolute beginnen basierend auf dem nächsten übergeordneten Element, das position: relative hat; (Meine Websites waren überall verstreut, weil ich position: absolute ÜBERALL benutzte)
2) Das zweite war, dass ich mit margin und padding das gewünschte Layout erstellen konnte, anstatt "position" zur Layout-Erstellung zu verwenden. Ich konnte dann vorhersagen, wie die Website zu dieser Zeit auf den meisten Bildschirmgrößen angezeigt würde.
Das Erlernen dieser Dinge gab mir das Selbstvertrauen, eine Website tatsächlich live zu schalten, anstatt sie lokal zu halten.
Mein größter "Aha"-Moment war, als mir klar wurde, dass ich Elemente relativ zu relativ positionierten Elternelementen absolut positionieren konnte. Das hat alles verändert für mich ... lange bevor Flexbox eine Sache war, natürlich.
Ein weiterer großer "Aha"-Moment in meiner Karriere war, nachdem ich meine erste handcodierte Website für einen echten Kunden vollständig fertiggestellt hatte und feststellte, dass sie in IE5 völlig anders gerendert wurde als in Firefox. *facepalm* Damals betrachtete ich mich noch ausschließlich als Designer, arbeitete ausschließlich auf einem Mac und die Konzepte der Cross-Browser-Kompatibilität und der Betriebssystemvirtualisierung waren mir völlig neu. Ich hatte einen stressigen, frustrierenden, aber letztendlich erhellenden Crashkurs in die hässlichere Seite der Frontend-Entwicklung. Es war wirklich der Beginn meiner Entwicklungskarriere.
CSS hat einen langen... langen Weg hinter sich. Jetzt, wo ich CSS (SCSS!) im Kontext von Web-/Mobilanwendungen schreibe, bin ich ständig beeindruckt von den Technologien und Methoden, die aus der Branche kommen, wie Pre-/Post-Prozessoren und BEM, die meinen Code überschaubar, kugelsicher machen und meine Kollegen zum Staunen bringen.
begann nur mit CSS, um die Farben von Links zu ändern, anstatt zu verwenden, und liebte es, dass ich es nur einmal tun und es auf alle Anker-Tags anwenden konnte. Es dauerte eine Weile, bis ich tatsächlich Klassennamen verwendete. Aber der große AHA-Moment war, als ich zum ersten Mal Position Is Everything sah und Blogs über CSS und Browserunterschiede und DOM-Rendering las. Als mir endlich klar wurde, wie Browser CSS benutzten, wurde es einfacher zu debuggen und Browserprobleme zu kompensieren *hüstel* IE *hüstel*
Oh Mist. Ich habe versucht, HTML-Tags in meiner Antwort anzuzeigen, anstatt sie tatsächlich zu *verwenden*, und den Beitrag vermasselt.
Meine war, Eric Meyer auf An Event Apart zu sehen, wie er eine Tabelle zerlegte und sie als Balkendiagramm wieder zusammensetzte. Allein die Erkenntnis, dass alle Elemente gleich sind, sie haben nur Standardwerte, die vom Browser festgelegt werden. Und 99% der Zeit kann man diese Standardwerte mit allem überschreiben, was man will.
Meine war das Lesen von Büchern über CSS und die Entdeckung, dass ein Dropdown-Menü damit erstellt werden konnte!
Ich erlebe gerade eine ähnliche Erleuchtung, da viele Dinge, die ich früher mit JavaScript/jQuery gemacht habe, jetzt mit CSS gemacht werden können und weit genug verbreitet sind, dass ich mich auf ihre Funktion verlassen kann.
Meine war, als mir klar wurde, dass alle Elemente nur Boxen (display: block) oder Text (display: inline) sind.
Mein CSS-Moment war, als ich entdeckte, dass ich Text zum Leuchten bringen, Hintergründe konfigurieren und viele interessante Effekte erzielen konnte, ohne die HTML-Seiten anzufassen. Mein Lieblings-CSS-Feature waren schon immer die Verläufe.
Es war für mich auch CSS Zen Garden. Ich war neu in CSS, und Zen zeigte mir das Konzept von Wrappern und wie man alles innerhalb dieser Wrapper platziert (und kontrolliert).
body {background-image: url("mein-bild.jpg");
Damals wusste ich, dass CSS großartig ist. Ich musste nicht auf jede Seite gehen und mein Bild oben ändern.
Ich habe einen umfangreichen Hintergrund im Printdesign – PageMaker / InDesign (und das gefürchtete Quark). Ich war es bereits gewohnt, eine Bibliothek von "Stilen" zu verwenden – im Wesentlichen eine Reihe von Elementen zu erstellen, dann einfach diesen Elementnamen auf etwas auf der Seite anzuwenden, und es änderte und passte sich im Handumdrehen an.
Seltsamerweise glaube ich, dass die Korrelation dazu, wie CSS funktionierte, direkt an mir vorbeigeflogen ist, während ich es vor Augen hatte. Um die Jahrhundertwende jonglierte ich mit vielen Print- und Webprojekten und machte die Web-Sachen weiterhin auf die harte Tour. HTML war einfach genug – da HTML 3.x zu dieser Zeit geradeaus war. Spulen wir ein paar Jahre vor, und ich "humpelte" durch die CSS-Nutzung – ich benutzte es, aber ich konnte niemanden in meiner Nähe finden, der die Unterschiede zwischen Dingen wie einer ID und einer KLASSE erklärte und wann man sie benutzen sollte und wann nicht. Warum ich keinen DIV anstelle eines P-Tags verwenden konnte (ich hasste die vordefinierten Stile, die mit P-Tags verbunden waren – und tue es immer noch). Hauptsächlich Bild-Mist in einem Porzellanladen – managebar, aber eine Riesensache.
Auf jeden Fall klickte es irgendwann in meinem Gehirn, die Print-Stile – dasselbe – ich war es bereits gewohnt, Schriftgrößen und Farben und Abstände usw. zu verwenden… Um meinen Punkt zusammenzufassen, es war mehr ein Duuuuh… als ein Ah-ha-Moment.
Danach war ich verärgert, bis CSS 3 normalisierter wurde, weil ich an die massive Kontrolle in der Printwelt gewöhnt war, die in CSS 2.x einfach nicht verfügbar war. Ich fand es für ein paar weitere Jahre restriktiv. Dann kam CSS 3 mit einer Menge proprietärer Tags – aber ich sprang trotzdem darauf an, weil es viel mehr dem Einrichten eines Print-Layouts ähnelte – es war mir egal, ob sie in IE nicht funktionierten.
Als ich zum ersten Mal http://www.csszengarden.com/ sah und erkannte: "Man braucht keine Tabellen!"
Als Teil meines Studiums der Interaktiven Multimedia-Gestaltung in Belfast musste ich 2003 meine eigene persönliche Website/Blog erstellen. Ich fand im Grunde eine Vorlagenseite und riss eine der Vorlagen heraus. Was mir das lehrte, war, wie man durch eine HTML-Datei und ihr entsprechendes CSS geht und sieht, wie alles zusammengesetzt war. Firefox war gerade erst herausgekommen, also hatte ich Firebug zum Erkunden.
Den Ah-ha-Moment hatte ich wirklich, als ich anfing, Rachel Andrews' Buch The CSS Anthology zu lesen. Es brachte mir tolle Dinge bei, und CSS Mastery, ich bin mir nicht sicher, von wem es war.
Ich muss zustimmen, dass CSS Zen Garden meiner war. Zu sehen, wie die Markup unverändert blieb, und die Bandbreite der Themen, die Leute entwickelten, war erstaunlich.
Ich bin ein Webdesign-Student mit viel zu lernen. Ich habe diesen Blog gestern gefunden, als ich versuchte herauszufinden, wo ich die schließenden div-Tags für eine Website einfügen sollte, die ich für meinen Kurs entwerfe. Meine Klasse ist online, und ich war von meinen Fortschritten enttäuscht, aber ich versuche, einfallsreich zu sein und Dinge selbst herauszufinden, ohne den Ausbilder um Hilfe zu bitten. Ich habe einen B.A. in University Studies und habe, während ich Mathematik und Naturwissenschaften auf hohem Niveau vermieden und die Hälfte meiner Kurse auf Spanisch belegt habe, fast einen 4.0 erreicht und bin bei Duolingo in Italienisch, Französisch und Portugiesisch super, daher war es ernüchternd, Stunden damit zu verbringen, härter/nicht klüger zu arbeiten und nichts zu erreichen. Die Abteilung für Berufsrehabilitation bezahlt ein sechsmonatiges Zertifikatsprogramm, da ich stark hörgeschädigt bin und nicht als internationaler TEFL-Lehrer arbeiten kann, wie ich es geplant hatte. Während ich mich wirklich panisch über die Aussichten fühlte, in meiner aktuellen Position festzustecken und das Programm nicht abschließen zu können, fiel mir ein, den Texteditor auf meinem Bürocomputer zu verwenden, um Video-Tutorials auf meinem Smartphone zu verfolgen. Ich weiß nicht, ob mein Arbeitgeber die Bedeutung der Indexdateien mit den bunten Kästchen, die ich nur mit CSS mit dem Wort "test" erstellt habe, überhaupt verstehen würde. Das war super hilfreich. Außerdem erkannte ich, dass ich, besonders nachdem ich den ganzen Tag am Computer bei meinem jetzigen Job gearbeitet hatte, der Versuch, die Online-Unterrichtsstunden Seite an Seite mit meinen Sublime-Dokumenten auf meinem 13-Zoll-MacBook Pro zu verfolgen, meine geistige Gesundheit ruinierte und ich die Unterrichtsstunden tatsächlich ausdrucken musste. Ich hatte eine schreckliche Zeit, den Überblick zu verlieren, welcher schließende div-Tag zu welchem div gehörte, aber schließlich fand ich heraus, wie man < !–blah blah blah Tag endet hier– > verwendet. Nachdem ich nach Hause gegangen war und meine Tags sortiert hatte, wurde mein Code fehlerfrei vom Validator durchlaufen – obwohl ich noch viel über Floats, absolute/relative Positionierung zu lernen habe. Ich fange an, mich kompetent genug zu fühlen, um die richtigen Fragen zu stellen und Blogs wie diesen zu finden. Danke!
So cool, von jemandem zu hören, der es gerade jetzt tut. Viel Kraft!
Mein großer CSS-"Ahahahaha"-Moment kam, nachdem ich meine zweite jemals erstellte Website fertiggestellt hatte, die als ActionScript3-Monstrum auf OOP-Basis erstellt wurde. Danach wusste ich, dass HTML/CSS der richtige Weg war. LOL.
:hover hat es für mich getan
Ich habe CSS Zen Garden bereits in einem anderen Kommentar erwähnt, aber ich muss auch Maxdesigns Listamatic-Tutorials danken. Das mühsame (schmerzhafte) Formen von Listen hat mir viel über das Box-Modell beigebracht.
Tatsächlich ist die Seite immer noch online: http://css.maxdesign.com.au/listamatic/
Kudos sowohl an CSS Zen Garden (auch mein erster Aha!-Moment) als auch an Listamatic. Die beiden zusammen waren fantastische Beispiele, wenn man Schülern zeigte, was CSS leisten kann.
Ich schätze, es war, als ich BEM brauchte, um bei einem riesigen Projekt mentale Gesundheit zu schaffen. Davor war CSS nur eine hackelige Art, Dinge zu stylen.
Nach BEM wurde es zu einer organisierten Art, das Layout einer Komponente (oder einer Gruppe von Komponenten) zu definieren.
CSS Modules hat mich dann umgehauen :)
Mein erster Aha!-Moment bei der Arbeit mit CSS war, als wir in der Schule beauftragt wurden, eine kleine Website zu erstellen, um einige Dinge anzuzeigen, an die ich mich nicht einmal erinnere. Ich erkannte, dass ich Tabellen weniger hässlich aussehen lassen und sogar einen abgerundeten unteren Rand für die seitliche Navigation über ein zusätzliches Element mit Hintergrundbild hinzufügen konnte (ca. 2005/2006, also keine Möglichkeit, border-radius damals zu verwenden).
Dann kam CSS3 und war mir damals zu komplex.
Der zweite Aha!-Moment war vor kurzem, als ich von box-sizing: border-box; erfuhr.
Ich muss auch @ptrckmrx bei position: absolute zustimmen – das verursachte viel weniger Kopfzerbrechen, sobald ich verstand, wie es funktioniert.
hm .. überall junge Leute, scheint's o.O
Ich habe HTML auf die harte Tour gelernt, d.h. das Handwerk mit blinden Tabellen und Spacer-GIFs. Dann, muss um 2001, 2002 oder so gewesen sein, wurde CSS plötzlich wichtig, und alle redeten darüber. Weg von den Tagen, in denen man Bilder mühsam zerhackte und sie wieder zu einem Layout zusammensetzte (ok, nicht wahr: FireWorks hat das damals schon recht gut gemacht).
Was mich wirklich angefixt hat, war kein schicklicher Artikel oder ein Buch, das ich gelesen habe, nicht einmal Taming Lists, obwohl das sicherlich massive Auswirkungen hatte. Was mich wirklich dazu gebracht hat, war diese Layerebene, die man nur richtig in Dreamweaver verwalten konnte. Hat mich sehr beeindruckt. Viel Spaß gemacht. DANACH hat Taming Lists mich endlich von den „Warum? Tabellen eignen sich viel besser für die Navigation“-Altforderen zu den „Oh, CSS funktioniert tatsächlich – egal wie kaputt das Boxmodell ist, IE war schon immer eine Qual“-Neudeutsch-Kids gebracht :)
Ein interessantes Stück aus der Ferne, Ferne Vergangenheit: Bild (Map) Listen. Eine Kombination aus listenbasierten Bild-Maps mit Hover-Hintergrundbildern; ein noch existierendes Beispiel ist meine Website von vor 11 Jahren (aber Vorsicht vor der Hässlichkeit): http://old.f2w.de
Jetzt das Perverse: Mit CSS-Transformationen könnte man das tatsächlich in etwas Modernes verwandeln :D
cu, w0lf.
Ich denke, ein großer Aha-Moment für mich war die Entdeckung von reset.css. Aha! Obwohl ich CSS schon Jahre vorher benutzt hatte und viele andere Aha-Momente hatte, scheint mir das sehr gut in Erinnerung geblieben zu sein.
Andere waren
Zeilenhöhe
Elemente, die sich wie Boxen verhalten
Elemente, die sich wie Text verhalten
absolute Positionierung von Kindelementen eines relativen Elements (wobei position: relative für einige Browser erforderlich ist, um korrekt angezeigt zu werden)
% Breite oder Höhe eines Bildes (usw.) bezogen auf den Eltercontainer
Das sind nur ein paar. :-)
Als ich endlich herausfand, wie man Elemente am besten floated, dachte ich davor, ich wüsste es… dann wusste ich es tatsächlich. Das war ein guter Tag. Oh, und Pseudo-Elemente waren beim ersten Mal großartig, etwas aus dem Nichts erschaffend. Und endlich konnten Tabellenzeilen sich wie Divs verhalten. Mein Kopf. Explodiert.