Mais c'est 423 octets! Cela ne fera pas besoin de Golf CSS, alors voyons ce que nous pouvons supprimer.<\/p>\n

Tentative 1: 144 octets<\/h4>\n

 
<\/p><\/pre>\n
 Voici une version golf. Il y a certainement une étrangeté qui se passe ici - pas , pas , pas de <\/p>, pas rien. Le navigateur n'en a pas besoin (et, en fait, les insère pour nous), nous économisons donc beaucoup d'octets en les laissant de c?té. Nous utilisons 
 au lieu de  car il est plus court, et nous ne fermons pas du tout la balise car il n'est pas nécessaire que les choses soient rendues.<\/v><\/p>\n
 Le CSS lui-même n'est pas très différent, à part le fait que nous avons utilisé une énorme ombre de bo?te au lieu d'un fond sur l'élément corporel (?fond? est long, donc éviter qu'il puisse être bénéfique). Il est également incorporé dans l'élément car une balise   co?te des octets supplémentaires.<\/ystyle><\/p>\n
 Vous avez peut-être remarqué que nous avons utilisé 5 pouces pour l'écart dans notre dernière ombre de bo?te. Jouer avec des unités étranges est une grande<\/em> partie du golf CSS. Dans ce cas, nous avons juste besoin de l'ombre pour couvrir la toile 400 × 300 et '5in' (480px) est plus courte que n'importe quelle valeur de pixel.<\/p>\n
 Tentative 2: 141 octets<\/h4>\n
 
<\/p><\/pre>\n
 Cela introduit une astuce de golf assez importante: le remplacement des espaces par des panneaux plus nous permet de supprimer les citations autour des attributs, en économisant quelques octets. Je ne sais pas totalement pourquoi cela fonctionne. Quelqu'un a suggéré qu'il peut être lié à cette partie de la spécification HTML. Si vous avez une meilleure réponse, faites-le moi savoir!<\/p>\n
 Cette tentative nettoie également quelques erreurs d'espace de la dernière tentative.<\/p>\n
 Tentative 3: 126 octets<\/h4>\n
 <\/pre>\n
 L'utilisation d'une balise <\/p> au lieu d'un 
 signifie que:<\/p>\n
\n
 Nous ne dépensons plus les octets en réglant la hauteur ou la largeur sur un paragraphe<\/li>\n
 Nous avons accès à Bgcolor<\/li>\n<\/ul>\n
 BGColor est un attribut obsolète qui appara?t souvent dans CSS Golf Solutions. Il ne fonctionne que sur quelques balises (<\/p> inclus), et fait deux grandes choses:
\n
 Nous évite de dépenser des octets en ?arrière-plan:?<\/li>\n
 Nous sauve un octet en nous permettant d'omettre # en couleurs hexadécimales. De plus, si une couleur se termine par un ou deux zéros, nous pouvons les retirer et il rendra toujours correctement. Par exemple, FFFF00 est le même que FFFF.<\/li>\n<\/ul>\n
 Il y a une régression de golf dans cette itération! Pouvez-vous le repérer?<\/p>\n
 La méthode ?frontière?<\/h3>\n
 à ce stade, j'avais passé pas mal d'heures à bricoler et à descendre avec cette cible et je me retrouvais assez coincé. Heureusement, CSSBattle a une communauté amicale sur Spectrum qui est plus que disposée à donner un coup de main.<\/p>\n
 à l'époque, Praveen a tenu la place n ° 1 avec deux octets de moins que ce que j'avais réussi, alors j'ai demandé de l'aide. Il a suggéré de tirer parti des éléments <\/p> et<\/em>  pour tout positionner tout en utilisant les bordures à la place d'une couleur d'arrière-plan.
 Tentative 4: 126 octets<\/h4>\n
 

 C'était difficile pour moi de Grok, mais Praveen a fait un diagramme qui explique assez bien les choses. Voici une version jolie:
 A et B sont la marge et la frontière sur , et C est la marge de 
. La marge droite sur  ne fait rien car il n'y a pas de place pour pousser le  vers la gauche et il a déjà une largeur nul.
 Une fois que nos ombres de bo?te sont appliquées, B est couvert et tout ce qui reste est notre image cible.
 Cependant, il manque encore des optimisations ici. Dorus van Den Oord a pu ramener la méthode de la frontière à un coup de 121 octets Lean, offrant ce conseil cryptique:
 Petit indice pour arriver à ce 121: Et si vous pouviez déplacer un élément par un quart de…?
 Tentatives 5 et 6: 122 octets
 <style> * {Border-Radius: 67% 0; bordure: 75px solide # f3ac3c; marge: 0 50; box-shadow: -53q 0 # 998235, -25vw 0 # 1A4341,0 0 0 5in # 0b2429</style>
 Il s'avère que tout ce dont nous avions besoin était une unité que personne n'a jamais entendu parler (Q) (et l'humble VW). Le fait de devoir écrire ?PX? est rarement correct dans le golf CSS, donc c'est quelque chose à rechercher. Ici, nous pouvons remplacer 100px par 25 VW et 50px par 53Q.
 Un Q, ou quart de millimètre, est exactement celui - 1 / 4ème de millimètre, ou tout à fait sous un pixel. L'unité Q est un incontournable du golf CSS comme l'une des deux valeurs (l'autre étant%) qui ne nécessitent qu'un octet pour exprimer. J'ai combiné mes 5e et 6e tentatives ici car les deux n'étaient que des ajustements unitaires. Nous sommes toujours un octet de 121!
 Tentative 7: 121 octets
 <style> * {Border-Radius: 67% 0; bordure: 75px solide # f3ac3c; marge: 0 50; box-shadow: -53q 0 # 998235, -25vw 0 # 1A4341,0 0 0 5in # 0b2429</style>
 Nous avons finalement corrigé cette régression de la troisième tentative, grace à une demande de traction de Praveen. Un pourcentage n'a pas besoin d'un espace entre celui-ci et des valeurs ultérieures, nous pouvons donc économiser un octet dans notre radius frontalier. Ceci est un excellent exemple de la fa?on dont le partage du code peut aider toutes les personnes impliquées. J'étais coincé là-dessus depuis longtemps.
 La méthode ?marge funky?
 Les frontières ne sont cependant pas la seule approche! Entrez la marge funky de Rasmus Fl?e:
 J'ai obtenu 123 caractères sur # 7 en utilisant Box-Shadow et une marge funky: 75 400 75-150 :)
 Tentative 8: 120 octets
 
 Voici comment cela fonctionne, comme l'explique Rasmus:
 La marge droite positive le pousse sur toile vers la gauche - et la marge gauche négative étend l'élément à la largeur recherchée :)
 Ici, il est tiré:
 La marge droite (b) pousse l'élément 
 jusqu'à la gauche, l'effondrement à la largeur zéro. La marge gauche négative (A) l'étire puis la remonte à 150px de large (la largeur de la forme de la feuille), puis notre ombre de bo?te (C) est suffisamment décalée pour être en vue. C'est génial car nous n'avons plus à faire face aux ombres de bo?te négatives afin de tout caler correctement.
 Nous sommes également de retour à Bgcolor et pouvons tirer parti d'une belle bizarrerie de couleurs d'arrière-plan: parce que  n'a pas sa propre couleur d'arrière-plan, il hérite de celui de 
.
 Tentatives 9 et 10: 118 octets
 <corps bgcolor="0b2429" style="border-radius:" marge: box-shadow: f3ac3c></corps>
 Avec un peu plus d'unité, nous pouvons nous sauver deux autres octets (accessoires à Dorus, qui a été le premier à découvrir cette optimisation). L'ajustement des marges économise un chiffre (150 devient 90) et, en bonus doux, nous pouvons convertir 86 mm en 70 mm, ce qui devient 7 cm. J'ai de nouveau combiné deux tentatives ici qui étaient des correctifs d'unité mineures. (Je suis gêné de dire que j'ai initialement raté la conversion MM - CM.)
 Tentative 11: 117 octets
 
 Romain Deltour a été le premier à trouver cette solution de 117 octets. Changer 340 à 85% signifie que nous arrivons à omettre un espace après l'une de nos valeurs (tout comme nous l'avons fait avec Border-Radius), sauvant un autre octet.
 Tentative de 12: 115 octets
 
 Deux semaines complètes après la solution de 117 octets de Romain, Viacheslav Popov a pu alpha composite son chemin à 115 octets via des codes hexadécimaux à 4 chiffres.
 J'aime vraiment cela parce que - non seulement c'est Dang Cntille - mais beaucoup de gens (moi y compris) pensaient que la cible avait déjà été pleinement optimisée. La persistance de Viacheslav a toutes deux déclenché une nouvelle série de discussions et a ajouté un autre CSS-Trick ? à notre arsenal pour de futures cibles.
 Tentative 13: 
 Cela me semble terriblement proche de l'optimal, mais cela ne signifie certainement pas qu'il ne peut pas être battu - pourquoi ne pas lui donner un coup? Il y a de l'art antérieur pour vous aider à démarrer, beaucoup de gens prêts à aider et même quelques outils. Happy Golfing ??
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!