Re-travail de l'almanac CSS

CSS-Tricks Almanac a un nouveau look!

Je crois que vous connaissez déjà cette grande partie de CSS-Tricks - Almanac (Annuaire). Nous publions ici la documentation de référence pour les sélecteurs et les propriétés CSS. Nous ne l'avons publié que depuis les temps anciens… ou du moins depuis 2009 (lorsque la plupart des travaux originaux ont été achevés). À l'ère des pages Web, c'était presque le début des temps. Nous pouvons même l'appeler la 1ère année avant la conception réactive (BR), ou la 14e année après la conception réactive (AR).

Vous n'avez pas besoin de moi pour vous dire que la rédaction de CSS aujourd'hui dans la 14e année après la conception réactive est très différente d'AVANT. En bref, Almanac n'a pas suivi le rythme de CSS, qui est bien plus que des propriétés et des sélecteurs. En fait, nous avons hésité à modifier Almanac en raison de la façon dont il est configuré sur le backend, et je suis sûr d'avoir vu un fantôme ou deux là-bas quand je l'ai touché.

Désormais accès à Almanac, vous trouverez une gamme plus large d'informations CSS, y compris les sections dédiées de sélecteurs de pseudo-classe, de fonctions et de règles @ en plus des propriétés et des sections de sélecteur existantes. Nous avons encore beaucoup de travail à faire (vous devriez aider!), Mais l'architecture existe déjà et il y a de la place pour se développer si nécessaire.

Ce travail n'est pas facile et est aussi effrayant que je le pensais. Laissez-moi vous guider à travers certaines des choses que je fais.

Statut actuel

Nous avons fièrement dirigé WordPress depuis le premier jour. Il y a de nombreux avantages à cela, surtout en ce qui concerne les modèles. Ce n'est peut-être pas le favori de tout le monde, mais j'en suis très satisfait et résolument consacré à cela - tout!

Si vous connaissez WordPress, vous savez que le contenu est principalement divisé en deux types: page et Article . La différence entre les deux est minimale - presque indiscernable, car ils utilisent tous deux la même interface d'édition. Bien sûr, il y a certaines nuances, mais la principale différence entre les pages est qu'elles sont en couches, ce qui signifie qu'ils sont les mieux adaptés à l'établissement des relations parent-enfant, créant ainsi un plan de site bien structuré. Dans le même temps, les articles se concentrent davantage sur les métadonnées, et nous pouvons organiser le contenu en ajoutant des balises ou en les mettant dans des groupes de catégories ou toute taxonomie personnalisée que nous pouvons obtenir à portée de main.

Almanac est construit sur des pages, pas des articles. Les pages excellent dans les structures hiérarchiques, tandis que l'almanac est une zone hautement structurée avec un flux de map de site typique qui suit simplement l'ordre alphabétique. Par exemple, une entrée pour un attribut CSS, tel que aspect-ratio, a le ratio Path: Almanac → Property → A → Aspect.

Cela semble bon, non? Pas mal, mais l'interrogation des pages dans les modèles est plus difficile que les articles, qui ont plus de métadonnées pour le filtrage, etc. D'un autre côté, la page ne l'est pas. (Du moins pas évident.) Ils sont généralement renvoyés comme des objets structurés parce que, vous savez, les structures hiérarchiques. Mais cela signifie également que nous devons créer toutes ces pages manuellement, contrairement aux balises et catégories qui génèrent automatiquement des archives. Création d'une page vide pour la lettre "A", qui est une sous-page de la page "Propriétés" - elle-même une sous-page d'Almanac - se sent trop stupide, juste pour avoir une position logique pour insérer des propriétés qui commencent par la lettre A. Cela doit être fait pour les propriétés et les sélecteurs.

Le vrai problème est que l'almanac est inadéquat. Nous voulons y publier un autre contenu CSS, tel que les fonctions et les règles @, mais Almanac a été conçu à l'origine pour afficher deux ensembles de contenu. C'est pourquoi nous n'avons jamais rien posté d'autre. C'est aussi pourquoi le sélecteur général et le sélecteur pseudo sont dans le même seau.

élargir l'espace pour accueillir davantage est la portée de mon travail et je sais que j'aurai l'occasion de styliser en cours de route.

une règle de modèle tout

c'est ce qu'il fait. L'approche initiale consistait à utiliser un modèle unique pour gérer l'indexation almanac et les pages alphabétiques qui répertorient les sélecteurs et les propriétés. C'est très intelligent. La page vérifie d'abord si la page actuelle est une page almanac située en haut de la hiérarchie de la page. S'il s'agit de cette page, le modèle sortira le résultat du sélecteur et de l'attribut en deux colonnes sur la même page.

Cette requête est très impressionnante.

<?php function letterOutput($letter, $selectorID, $propertyID) {
  $selector_query = new WP_Query(array(
    'post_type' => 'page',
    'post_status' => 'publish',
    'post_parent' => $selectorID,
    'posts_per_page' => -1,
    'orderby' => 'title',
    'order' => "ASC"
  ));

  $html = '<div>';
  $html .= '<div><a>' . $letter . '</a></div>';
  $html .= '<div>';

  while ($selector_query->have_posts()) : $selector_query->the_post();

    $html .= '<details><summary>';
    $html .= '<h2><code>';
    $html .= get_the_title();
    $html .= '</code></h2>';
    $html .= '</summary>';
    $html .= get_the_excerpt();
    $html .= '<code>';
    $html .= get_post_meta(get_the_id(), 'almanac_example_code', true);
    $html .= '</code>';
    $html .= '<a href="'%20.%20get_the_permalink()%20.%20'">Continue Reading</a>';
    $html .= '</details>';
  endwhile;

  $html .= "</div>";
  $html .= "</div>";

  return $html;
}

Ce n'est vraiment que la moitié de l'extrait de code. Notez qu'il n'est marqué que $selector_query. Il bouclera à nouveau $property_query.

De là, la fonction doit être appelée 26 fois: une fois par lettre dans l'alphabet. Il nécessite trois paramètres, à savoir la lettre (par exemple A) et l'ID de page de la page "A" (par exemple 14146, 13712), qui sont des sous-pages de sélecteurs et de propriétés.

<?php echo letterOutput("A", 14146, 13712);
  // B, C, D, E F, G, etc.
?>

Et si nous ne sommes pas actuellement sur la page d'index? Le modèle publie une liste de lettres pour les sous-pages de cette partie spécifique (telles que les propriétés). Un modèle est suffisant.

Sous-page de requête

Je peux modifier la fonction letterOutput() pour obtenir plus d'ID de page pour afficher les pages de lettres d'autres pièces. Mais honnêtement, je ne veux tout simplement pas faire ça. J'ai choisi de réduire la fonction à un paramètre ID de page au lieu de deux, puis de diviser le modèle: un pour l'index principal et un pour la "sous-partie" (le cas échéant). Oui, cela signifie qu'il y aura plus de modèles dans mon répertoire de thème WordPress, mais c'est principalement pour moi personnellement et cela ne me dérange pas. Je peux vérifier les sous-pages sur lesquelles je suis (l'index d'attribut, l'index du sélecteur, l'indice de règle, etc.) et obtenir séparément le contenu de ces sous-pages.

Quel est un autre problème avec la fonction

? Toutes les balises générées sont prises en sandwich dans la déclaration while(). Même si je veux analyser la requête par partielle pour préserver un schéma de modèle unique, ce n'est pas comme si je voulais placer une instruction if() n'importe où sans provoquer une erreur ou une notification Fatal PHP. Encore une fois, je ne suis pas intéressé à modifier complètement la fonction.

Archive de lettres

Publier des sous-pages vides pour toutes ces sections de lettres, puis les attacher à la page parent correcte est beaucoup de travail manuel. Je sais, parce que je l'ai fait. Bien sûr, il existe de meilleures façons de programmation, mais la conversion du contenu des pages en articles et de partir de cette perspective ne m'attiraient pas, et j'étais pressé à l'époque. Nous ne sommes pas toujours en mesure de trouver un moyen «idéal» de faire les choses.

Selon WordPress, appeler l'une de ces pages de lettres «Archives» est un terme impropre, mais c'est exactement ainsi que je regarde les sous-pages de différentes sections - si le contenu était construit comme des articles plutôt que des pages, ce serait le cas. Si j'ai une section de sélecteur pseudo, j'aurai besoin des pages individuelles de A à Z, qui à leur tour agissent comme les pages parentales de chaque sélecteur pseudo. Trois nouvelles sections, chacune avec 26 lettres, ce qui signifie que j'ai créé 78 nouvelles pages. merveilleux.

Vous pouvez accéder à la page de lettre en utilisant la chapelure de la page almanac (par exemple, cette page de la propriété aspect-ratio) ou en cliquant sur les lettres majuscules dans n'importe quelle section (par exemple, cette page de la propriété).

Nous n'avons jamais pris ces pages au sérieux. Ils existent pour la structure, mais peu de gens leur rendront visite. Ce sont essentiellement des espaces réservés. Utile, oui, mais toujours des espaces réservés. Nous sommes tellement sans scrupules à propos de ces pages que nous ne les avons jamais officiellement stylisés. Il s'agit d'un modèle d'héritage CSS qui vous indique quoi.

C'est là que j'ai profité de l'occasion pour le polir visuellement. Je fais face aux choses énormes et difficiles dans le design depuis que je suis retourné à ce travail il y a quelques mois. Par exemple, le titre surdimensionné et les ombres épaisses que vous voyez.

Ce n'est pas mon esthétique naturelle, mais je pense que cela correspond bien aux trimettes CSS… peut-être, juste peut-être, des larmes de joie verseront sur le visage de Chris Coyier. Peut être.

Navigation

Une autre amélioration a été ajoutée à la navigation affichée sur la page d'index principale. J'ai remplacé la navigation par lettre en haut avec une navigation qui vous amène à chaque section et maintenant nous pouvons modifier la page directement dans WordPress sans contourner le développement.

La seule chose me dérange, c'est que je l'ai codé en dur au lieu de faire un menu WordPress approprié que je peux gérer à partir de l'interface d'administration. [Ajoutez un too à sa liste de tâches. ]

Étant donné que j'ai libéré l'index Almanac de la liste des sélecteurs et des attributs entièrement affichés, je peux vraiment l'utiliser comme index pour le grand nombre de pièces que nous ajoutons.

Nous devrons peut-être rendre le contenu de la page principale moins redondant avec la navigation à un moment donné, mais je pense que c'est un bon début à partir duquel nous pouvons construire. En outre, en termes de titre, il est désormais plus cohérent avec les autres pages "supérieures" liées dans le menu principal du site Web, qui ne sera pas mauvais.

Oh, en passant, lorsque nous parlons de navigation, la nouvelle section a été ajoutée à la barre latérale gauche existante des pages d'almanac individuelles pour aider à passer à d'autres entrées dans aucune section sans retourner à l'index.

Référence rapide

La dernière amélioration que je vais mentionner est petite, mais je pense que cela a un impact positif. Si vous accédez à une sous-page de l'index, c'est-à-dire, des propriétés, des pseudo-classes, des fonctions, des règles - vous pouvez obtenir des extraits de code et des définitions avancées pour chaque entrée à tout moment sans sauter sur la page complète.

Nous avons toujours mis l'accent sur "l'exemple d'accès rapide" et je pense que cela a aidé cela dans une large mesure.

"Vous pouvez faire [x] ..."

Oui, il existe encore de nombreuses opportunités à améliorer. Mon seul objectif est de changer suffisamment les choses pour que ce que l'Almanac couvre est plus que de simples sélecteurs et propriétés, et peut-être un style ici et là. Je veux aussi faire beaucoup de choses, peut-être que nous le ferons, quoique étape par étape.

quel genre de chose? Eh bien, tout d'abord, cette navigation d'index du codé dur. Mais plus important encore, je veux continuer à pousser la page principale. Il jouait un rôle énorme et je l'ai presque essuyé. Ce serait bien de trouver un moyen d'énumérer toutes les entrées - pour toutes les sections - ce que nous avons fait lorsque nous n'avions que deux sections. C'est ce que je prévois d'étudier.

Oui, nous voulons y couvrir plus de contenu CSS, tels que des termes communs, des requêtes de préférence des médias et des utilisateurs, probablement des spécifications… vous l'obtenez. Almanac est une ressource pour notre équipe et tout comme pour vous, nous nous y référons tous les jours. Nous espérons qu'il est plein d'informations utiles.

c'est tout.

Vous pouvez maintenant arrêter de lire et aller directement à Almanac pour une promenade virtuelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!