Fermer

juin 24, 2019

4 conseils pour des scores plus élevés dans CSSBattle.dev –


Il y a un peu plus d'une semaine, vous nous avez peut-être vu lancer notre deuxième Code Challenge – un partenariat avec nos amis à CSSBattle.dev . Les batailles CSS sont un concept relativement nouveau – le site lancé en février – et leur mode de fonctionnement n'est pas toujours immédiatement évident.

Les panneaux de sortie et d'édition par défaut de CSSbattle

Les panneaux de sortie et d'édition par défaut de CSSbattle. [19659004] En termes simples:

  • Votre objectif est de créer une copie de l'image "cible" en utilisant uniquement le code HTML & CSS
  • Vous ne pouvez pas utiliser d'images externes
  • Vous ne pouvez pas utiliser SVG (même en ligne SVG) ou des caractères spéciaux
  • Toutes les solutions sont automatiquement classées pour leur précision et leur efficacité (nombre de personnages)
  • Le joueur qui recrée l’image cible avec le score le plus élevé gagne

Je dois admettre que j’ai vu l’idée pour la première fois, I était un peu incrédule. Comment diable quiconque aurait-il pu créer CES conceptions en utilisant moins qu’une «valeur de tweets» en HTML et en CSS? Sûrement, c’est impossible?

J’ai donc essayé et j’ai en grande partie échoué – mais j’ai aussi appris et commencé à comprendre petit à petit certaines astuces dont vous avez besoin. Si vous êtes curieux, je pense passer en revue 4 astuces pour vous aider à obtenir un score plus élevé.

Soyons clairs : Au moment où j'écris ce billet, je suis classé à la 24e position pour cela. tour de bataille. J’ai déjà rempli chaque objectif jusqu’à présent et au 26ème rang . Il ya donc sans doute au moins deux douzaines de joueurs avec des solutions bien meilleures que moi. Cependant, je suis heureux de partager ce que je sais – et de prendre conseil auprès de ceux qui ont de meilleures idées.

Conseil n ° 1: un panneau de sortie vide n'est jamais TRULY vide

lors du premier chargement toute cible, vous verrez quelque chose comme l'image ci-dessus. Votre éditeur est toujours pré-rempli avec des exemples HTML et CSS fournissant une position de départ rudimentaire. Cependant, même si vous supprimez chaque caractère dans votre éditeur, votre panneau de sortie ne sera toujours pas techniquement vide.

Pourquoi pas? Si vous inspectez la source du panneau de sortie (astuce: désactivez la fonction "Glisser et comparer" pour le moment), vous trouverez un contenant deux éléments invisibles – un élément et un élément .

Comme vous pouvez le voir dans l'image ci-dessous, vous pouvez voir qu'ils sont présents avec une ligne de CSS. Bien entendu, vous êtes parfaitement libre de mettre en forme ces deux éléments HTML sans passer aucun caractère à les créer.

Un écran contenant à la fois des éléments HTML et BODY avec un contour pointillé rouge.

Il existe toujours un code HTML et un objet BODY. élément prêt à être stylé.

Cela ne signifie pas que vous n'ajoutez jamais vos propres éléments HTML –

s,

s, s, etc. – mais essayez toujours d'utiliser le libre ' Les éléments intégrés 'en premier.

Conseil n ° 2: Choisissez soigneusement vos unités de mesure

Les cibles CSSBattle ont toujours une largeur de 400px et une hauteur de 300px, vous pouvez donc décrire correctement le point central à gauche: 200px (10 caractères) et en haut: 150 pixels (9 caractères). Cependant, vous pouvez tout aussi facilement décrire cette position exacte comme suit: à gauche: 50% (8 caractères) et en haut: 50% (7 caractères). C’est une sauvegarde pratique de 4 caractères.

Les pourcentages ne ne gagnent pas toujours . La position en haut: 100 pixels (9 caractères) se traduit par en haut: 33,33% (10 caractères) – un pas en arrière. Il ya pas mal d’essais et d’erreurs pour trouver le meilleur ajustement. Les unités de mesure potentiellement utiles incluent:

  • Pixels: px
  • Pourcentages: %
  • Rems: rem. ] Ems: em
  • Pouces: en
  • Millimètres: mm
  • Picas: pc
  • Points forts : pt
  • Unités de hauteur de fenêtre: v h
  • Largeur de la fenêtre unitaire: vw
  • Quart de millimètre: q

Ce dernier type d'unité - le "q" - est une unité relativement peu connue. Mais comme il s’agit d’un seul personnage, je le trouve exceptionnellement utile dans les batailles CSS. J'ai trouvé que 50px correspond à 53 q.

Notez également que certaines propriétés CSS supposent que vous entendez des pixels si vous ne déclarez pas explicitement un type d'unité. En d'autres termes, width: 80 est identique à width: 80px . La hauteur et la marge sont les mêmes. Sur le revers, box-shadow échoue complètement si vous ne déclarez pas d'une unité de mesure.

Astuce n ° 3: le CSS est une cascade - Profitez-en pleinement.

CSS est vraiment bon en 'héritage' et 'spécificité'. L'héritage permet aux éléments enfants d'obtenir leurs styles de leurs parents. "Spécificité" signifie que les règles générales sont remplacées par des règles plus prudentes ou récemment déclarées.

En CSS, la règle la plus large est le * qui signifie " s'applique à tous les éléments ". Ainsi, la règle suivante applique un fond # 222 à tout. Si nous n’ajoutons pas de code HTML supplémentaire, il s’agit d’un et d’un .

 * {background: # 222}

Si nous suivons ensuite avec une règle plus spécifique visant uniquement le [19659020]nous avons simplement appelé le sans avoir à le nommer directement - une sauvegarde de 3 caractères.

 * {background: # 222}
body {background: # F2994A}

Allons plus loin.

En CSS, l'opérateur '>' ne signifie ' que lorsque X est un parent de Y ' (c.-à-d. x > y {} ). Donc, si nous écrivons:

 *> * {...}

... nous disons " n'applique cette règle qu'à tout élément qui se trouve à l'intérieur d'un autre élément ", autrement dit , N'IMPORTE QUEL élément enfant.

L'élément HTML n'étant jamais un enfant, seul l'élément obtient cette deuxième règle. Nous sauvons un autre personnage.

Astuce # 4: Les navigateurs sont difficiles. Faites-les fonctionner.

Une fois que vous avez pris toutes les mesures à portée de main, il arrive un moment où le seul moyen pratique de couper des caractères est de supprimer le code techniquement requis mais non absolument essentiel au rendu final. Vous pourriez dire que les navigateurs modernes regarderont gentiment votre code court et légèrement mal élevé. Cela inclut, mais ne se limite pas à:

  • Suppression de la fermeture


      
  • Suppression des balises HTML de fermeture (c'est-à-dire

)
  

  • Suppression de la fermeture finale } de votre bloc de style
      
  • Suppression de la plupart des espaces et des retours à la ligne. Essai et erreur est votre ami ici.
      

    • Bien sûr, il n’a pas de sens d’utiliser ce type d’optimisation extrême en CSS de production. Vous compromettriez la fiabilité de votre code pour une économie négligeable. Mais CSSBattles vous en apprendra plus sur la façon dont les navigateurs pensent, ce qu’ils aiment et ce qu’ils n’aiment pas.

    Donc, CSSBattle encourage-t-il les mauvaises habitudes de codage?

    J’ai entendu quelques personnes le mentionner comme un inconvénient potentiel. En fait, le vieil homme d'État du CSS, Eric Meyer, a récemment soulevé la question dans CSSBattle.dev Spectrum feedback:

    Le fait de s'appuyer sur l'exploitation des rides de l'analyseur (en particulier en ce qui concerne les espaces de séparation) pour obtenir des scores bas intentionnels ou un effet indésirable? - Eric Meyer

    Je ne le pense pas. Pour moi, c'est un moyen de tester, d'expérimenter et finalement de mieux comprendre le CSS en écrivant un code de production normal et robuste.

    Vous pourriez faire une bonne comparaison entre la poésie haiku japonaise. Le haïku est un format basé sur des limites strictes - les limites arbitraires de 3 lignes et de 17 syllabes.

    Même les grands maîtres du haiku du monde ne s’attendent pas à parler ou écrire chaque jour dans un haiku soigneusement construit. Cependant, cela ne signifie pas que nous ne pouvons pas apprendre d'importantes leçons sur la sélection des mots, le rythme, l'équilibre et la beauté lorsque nous lisons (ou écrivons) le haïku.

    Écrire un bon 'code de bataille de CSS' n'est pas la même chose que d'écrire bon 'code de production' - mais il WILL vous apprendra des leçons que vous ne pourriez pas obtenir ailleurs.


    Alex fait des choses cruelles et inhabituelles à CSS depuis 2001. Il est le concepteur principal principal et dev pour Sitepoint et l'éditeur unique de DesignPoint et UX avec plus de 150 newsletters. Aujourd'hui, Alex participe à la planification, au développement, à la production et à la commercialisation d'une vaste gamme de produits et de références imprimés et en ligne. Et a conçu plus de 40+ des couvertures de livres de SitePoint.

    Le meilleur outil 2023 pour ta croissance Instagram !



    Source link