Gleich zur Sache: Die CSS-Tricks-Almanach Habe diese Woche eine große Aktualisierung bekommen!
Ich vermute, Sie kennen diesen riesigen alten Abschnitt mit CSS-Tricks namens „ Almanach. Hier veröffentlichen wir Referenzen für CSS Selektoren Und Eigenschaften. Das ist eigentlich alles, was wir dort seit Anbeginn der Zeit veröffentlicht haben … oder zumindest seit 2009, als die meisten Originalarbeiten daran stattfanden. Das könnte genauso gut der Beginn einer Zeit in Web-Jahren sein. Wir könnten es sogar Year 1 BR nennen, oder ein Jahr vor reaktionsschnell.
Das muss ich dir nicht sagen Wie anders das Schreiben von CSS heute ist im Jahr 14 AR. Ganz einfach: Der Almanach hat mit CSS nicht Schritt gehalten, das viel, viel mehr ist als nur Eigenschaften und Selektoren. Die Wahrheit ist, dass wir den Almanach wegen seiner Konfiguration im Backend nie wirklich anfassen wollten, und ich bin mir ziemlich sicher, dass ich dort ein oder zwei Geister entdeckt habe, als ich darin herumgestochert habe.
Wenn Sie Alamanc jetzt besuchen, finden Sie eine größere Auswahl an CSS-Informationen, einschließlich spezieller Abschnitte für Pseudoklassenselektoren, FunktionenUnd at-Regeln zusätzlich zum bestehenden Eigenschaften Und Selektoren Abschnitte. Wir haben noch viel Arbeit vor uns, um diese auszufüllen (Du solltest helfen!), aber die Architektur ist vorhanden und es gibt Raum, die Dinge bei Bedarf noch etwas zu vergrößern.
Die Arbeit war nicht trivial und so gruselig, wie ich es mir vorgestellt hatte. Lassen Sie mich Ihnen einiges von dem zeigen, was ich getan habe.
Die Situation
Wir betreiben stolz WordPress und das seit dem ersten Tag. Das hat viele Vorteile, insbesondere was die Vorlagen betrifft. Es ist vielleicht nicht jedermanns Lieblingsmarmelade, aber ich finde sie mehr als cool und habe mich darauf eingelassen – Verdammt, die Torpedos!
Wenn Sie mit WordPress vertraut sind, wissen Sie, dass Inhalte größtenteils in zwei Arten unterteilt werden: Seiten Und Beiträge. Der Unterschied zwischen den beiden ist ziemlich minimal – und kaum zu unterscheiden, da beide die gleiche Bearbeitungsoberfläche verwenden. Natürlich gibt es Nuancen, aber die Seiten unterscheiden sich größtenteils darin, dass sie hierarchisch sind, was bedeutet, dass sie sich am besten für den Aufbau von Eltern-Kind-Seitenbeziehungen für eine schön strukturierte Sitemap eignen. Beiträge hingegen sind eher meta-gesteuert in dem Sinne, dass wir Dinge organisieren können, indem wir sie mit Tags versehen oder sie einer Kategoriegruppe oder einer anderen benutzerdefinierten Taxonomie zuordnen, die uns zur Verfügung steht.
Der Almanach basiert auf Seiten, nicht auf Beiträgen. Die Hierarchie der Seiten ist oberstes Gebot, und Alamanc ist ein stark strukturierter Bereich mit einem typischen Sitemap-ähnlichen Ablauf, der zufälligerweise der alphabetischen Reihenfolge folgt. Nehmen wir zum Beispiel einen Eintrag für eine CSS-Eigenschaft aspect-ratiogeht: Almanach → Eigenschaften → A → Seitenverhältnis.
Das hört sich nicht nach einer schlechten Sache an, oder? Das ist nicht der Fall, aber Seiten sind in einer Vorlage schwieriger abzufragen als Beiträge, die viel mehr Metadaten enthalten, die wir zum Filtern usw. verwenden können. Seiten hingegen nicht so sehr. (Na ja, offensichtlich nicht so sehr.) Sie werden aufgrund der Hierarchie normalerweise als strukturierte Objekte zurückgegeben. Es bedeutet aber auch, dass wir alle diese Seiten manuell erstellen müssen, im Gegensatz zu Tags und Kategorien, die automatisch Archive generieren. Es fühlt sich so verdammt albern an, eine leere Seite für den Buchstaben „A“ zu erstellen, der ein untergeordnetes Element der Seite „Eigenschaften“ ist – die ein untergeordnetes Element des Almanachs selbst ist –, nur damit eine logische Stelle zum Einfügen von Eigenschaften vorhanden ist, die mit dem Buchstaben A beginnen. Und das muss sowohl für Eigenschaften als auch für Selektoren geschehen.
Das eigentliche Problem besteht darin, dass der Almanach einfach ausgeblendet wurde. Wir möchten dort andere CSS-artige Dinge veröffentlichen, wie Funktionen und At-Regeln, aber der Almanach wurde immer nur für die Anzeige von zwei Gruppen erstellt. Deshalb haben wir nie etwas anderes veröffentlicht. Aus diesem Grund befanden sich auch allgemeine Selektoren und Pseudoselektoren im selben Bereich.
Der Bereich, mit dem ich gearbeitet habe, war die Erweiterung des Platzes für mehr Inhalte, da ich wusste, dass ich nebenbei einige Möglichkeiten haben würde, Dinge zu gestalten.
Eine Vorlage, um sie alle zu beherrschen
So wurde es gemacht. Bei der ursprünglichen Vereinbarung handelte es sich um eine einzige Vorlage, die für den Almanach-Index und die alphabetischen Seiten verwendet wurde, auf denen Selektoren und Eigenschaften aufgelistet sind. Es war wirklich ordentlich. Die Seite überprüfte zunächst, ob es sich bei der aktuellen Seite um die Almamac-Seite handelt, die sich an der Spitze der Seitenhierarchie befindet. Wenn es sich um diese Seite handelt, gibt die Vorlage die Ergebnisse für Selektoren und Eigenschaften auf derselben Seite in zwei verschiedenen Spalten aus.
Das ist tatsächlich der halbe Ausschnitt. Beachten Sie, dass es nur für a markiert ist $selector_query. Es durchläuft dieses Ding noch einmal für eine Weile $property_query.
Von da an muss die Funktion 26 Mal aufgerufen werden: einmal für jeden Buchstaben des Alphabets. Es benötigt drei Parameter, nämlich den Buchstaben (z A) und die Seiten-IDs für die „A“-Seiten (z. B 14146, 13712), die untergeordnete Elemente der Selektoren und Eigenschaften sind.
Und wenn wir gerade nicht auf der Indexseite sind? Die Vorlage gibt nur die alphabetische Liste der untergeordneten Seiten für diesen bestimmten Abschnitt aus, z. B. Eigenschaften. Für all das reicht eine Vorlage.
Untergeordnete Seiten abfragen
Ich hätte das ändern können letterOutput() Funktion, um mehr Seiten-IDs zu verwenden, um die Briefseiten für andere Abschnitte anzuzeigen. Aber ganz ehrlich, da wollte ich einfach nicht hin. Ich habe mich stattdessen dafür entschieden, die Funktion auf ein Seiten-ID-Argument statt auf zwei zu reduzieren und dann die Vorlage aufzuteilen: eines für den Hauptindex und eines für die „Unterabschnitte“, wenn Sie so wollen. Ja, das bedeutet, dass ich am Ende mehr Vorlagen in meinem WordPress-Themenverzeichnis hatte, aber das ist hauptsächlich für mich und es macht mir nichts aus. Ich kann überprüfen, auf welcher Unterseite ich mich befinde (ob es sich um einen Eigenschaftenindex, einen Auswahlindex, einen At-Rules-Index usw. handelt) und nur die untergeordneten Seiten für diese einzeln abrufen.
Das andere Problem mit der Funktion? Das gesamte generierte Markup wird in a eingeklemmt while()Stellungnahme. Selbst wenn ich die Abfrage abschnittsweise analysieren wollte, um eine einzelne Vorlagenarchitektur beizubehalten, kann ich eine nicht löschen if() Anweisung überall dort, wo ich will, ohne eine zu verursachen Schwerwiegender PHP-Fehler oder Hinweis. Auch hier hatte ich kein Interesse daran, die Funktion im Großen und Ganzen neu zu gestalten.
Briefarchive
Das Veröffentlichen all dieser leeren Unterseiten für die Buchstaben jedes Abschnitts und das anschließende Anhängen an die richtige übergeordnete Seite ist eine Menge manueller Arbeit. Ich weiß es, weil ich es getan habe. Es gibt sicherlich einen besseren, sogar programmatischen Weg, aber Dinge von Seiten in Beiträge umzuwandeln und aus diesem Blickwinkel zu arbeiten, gefiel mir nicht und ich arbeitete auf Zeit. Es gelingt uns nicht immer, eine „ideale“ Vorgehensweise zu finden.
Es ist eine Fehlbezeichnung, diese Briefseiten im WordPress-Sprachgebrauch als „Archive“ zu bezeichnen, aber so betrachte ich die untergeordneten Seiten für die verschiedenen Abschnitte – und so wäre es auch gewesen, wenn die Dinge als Beiträge statt als Seiten strukturiert wären. Wenn ich einen Abschnitt für Pseudo-Selektoren habe, benötige ich einzelne Seiten für die Buchstaben A bis Z, die wiederum als übergeordnete Seiten für die einzelnen Pseudo-Selektoren fungieren. Drei neue Abschnitte mit jeweils 26 Buchstaben bedeuten, dass ich 78 neue Seiten erstellt habe. Ja.
Zu einer Briefseite gelangen Sie entweder über die Brotkrümel einer Almanachseite (wie diese für die). aspect-ratio Eigenschaft) oder indem Sie auf den großen Buchstaben in einem der Abschnitte klicken (wie dieser für Eigenschaften).
Wir haben diese Seiten nie ernst genommen. Sie dienen der Strukturierung, aber es ist nicht so, dass viele Leute jemals auf ihnen landen. Sie sind im Wesentlichen Platzhalter. Hilfreich ja, aber trotzdem Platzhalter. Wir haben diese Seiten so ernst genommen, dass wir sie nie offiziell gestaltet haben. Es ist ein Modell der CSS-Vererbung.
Ja, Sie können jetzt mit dem Schwärmen aufhören.
Hier habe ich die Gelegenheit genutzt, die Dinge optisch nachzubessern. Ich habe beim Design mit großen, bulligen Dingern gearbeitet seit ich zu diesem Job zurückgekehrt bin vor ein paar Monaten. Dinge wie die übergroßen Überschriften und die dicken Schatten, die Sie sehen.
Es ist nicht meine natürliche Ästhetik, aber ich denke, dass es gut mit CSS-Tricks funktioniert … und vielleicht, nur vielleicht, läuft Chris Coyier deswegen eine Freudenträne über das Gesicht. Vielleicht.
Navigieren
Die auf der Hauptindexseite angezeigte Navigation wurde um eine weitere Verbesserung erweitert. Ich habe die alphabetische Navigation oben durch eine Navigation ersetzt, die Sie zu jedem Abschnitt führt, und jetzt können wir die Seite direkt in WordPress bearbeiten, ohne herumarbeiten zu müssen.
Vorher (oben) und nachher (unten)
Das Einzige, was mich stört, ist, dass ich das verdammte Ding fest codiert habe, anstatt daraus ein richtiges WordPress-Menü zu machen, das ich vom Admin aus verwalten kann. [Adds a TODO to his list.]
Da ich den Alamanc-Index von der vollständigen Anzeige der Selektor- und Eigenschaftslisten befreit habe, kann ich ihn wirklich als Index für die größere Anzahl von Abschnitten verwenden, die wir hinzufügen.
Es wird vielleicht eine Zeit kommen, in der wir den Inhalt der Hauptseite durch die Navigation weniger überflüssig machen wollen, aber ich betrachte dies als einen guten Anfang, auf dem wir aufbauen können. Außerdem stimmt es jetzt, was die Kopfzeilen betrifft, besser mit den übrigen Seiten der „obersten Ebene“ überein, die im Hauptmenü der Website verlinkt sind, und das kann nicht schlecht sein.
Oh ja, und während wir gerade über das Navigieren reden, wurden die neuen Abschnitte zur bestehenden linken Seitenleiste auf einzelnen Almanach-Seiten hinzugefügt, um zu helfen, zu anderen Einträgen in jedem Abschnitt zu springen, ohne zum Index zurückkehren zu müssen.
Ja, so wenig Inhalt haben wir im Moment wirklich!
Verweisen Sie schnell auf Dinge
Die letzte Verbesserung, die ich nennen möchte, ist geringfügig, aber ich denke, dass sie einen positiven Unterschied macht. Wenn Sie zu einer Unterseite des Index wechseln – d. h. Selektoren, Eigenschaften, Pseudos, Funktionen, At-Regeln — Für jedes Element stehen sofort ein Snippet und eine High-Level-Definition zur Verfügung, ohne dass Sie zur vollständigen Seite springen müssen.
Wir haben immer großen Wert darauf gelegt, schnell zu den Beispielen zu gelangen, und ich denke, das hilft dieser Sache ziemlich.
„Das hättest du auch tun können [x]…“
Ja, es gibt noch viel mehr Möglichkeiten, die Dinge zu verschärfen. Das einzige Ziel, das ich vor Augen hatte, war, die Dinge gerade so weit zu ändern, dass der Almanach mehr als nur Selektoren und Eigenschaften abdeckt, und vielleicht hier und da ein paar Styling-Freiheiten zuzulassen. Es gibt noch viel mehr, was ich tun möchte, und vielleicht schaffen wir es, wenn auch schrittweise.
Was für Dinge? Nun, zum einen die fest codierte Indexnavigation. Aber darüber hinaus möchte ich die Hauptseite weiter vorantreiben. Früher erfüllte es einen großartigen Zweck und ich habe das so gut wie ausgelöscht. Es wäre gut, eine Möglichkeit zu finden, alle Einträge – für alle Abschnitte – aufzulisten, so wie wir es getan haben, als es nur zwei Abschnitte waren. Das ist etwas, worauf ich näher eingehen möchte.
Und ja, wir wollen sogar abdecken mehr Dort sind CSS-Elemente enthalten, wie allgemeine Terminologie, Medien- und Benutzerpräferenzabfragen, möglicherweise Spezifikationen … Sie verstehen, worauf es ankommt. Der Almanach ist für uns hier im Team genauso eine Ressource wie für Sie, und wir greifen täglich darauf zurück. Wir möchten, dass es voller nützlicher Informationen ist.
Das ist alles.
Sie können jetzt einfach mit dem Lesen aufhören Gehen Sie zum Almanach für einen virtuellen Spaziergang.
