Le golf de code est un type de programmation où l'objectif est d'accomplir une tâche en utilisant le moins d'octets possible. CSSBattle est un champ de bataille de golf de code où les joueurs se terminent pour recréer des images cibles en utilisant CSS et HTML.
Les règles sont assez simples:
- Pas de ressources externes (désolé, non
) - Votre solution doit rendre correctement dans Chrome (juste à des fins de notation)
Cela peut être un départ assez amusant du travail frontal quotidien. Il n'est pas nécessaire de s'inquiéter de la maintenabilité, de la sémantique, des performances, de l'accessibilité ou autre chose que de faire une chose vraiment, vraiment petite et toujours correctement.
Une solution de golf en 12 tentatives
Ce type de pensée est un écart assez dramatique par rapport à la façon dont la plupart d'entre nous écrivent du code frontal pour les sites de production (j'espère!), J'ai donc publié toutes mes solutions sur Github dans le but de partager des connaissances et d'apprendre des autres. En tant qu'effet secondaire chanceux, cela signifie également qu'il y a une histoire assez détaillée de mes soumissions.
Voici un compte rendu de début à la fin de mes tentatives de la 7e cible de CSSBattle, qui ressemble à ceci:
La méthode «Just Center the Dang»
Une première approche raisonnable consiste à simplement coller un élément au milieu de la page, à gifler une ombre de boîte et un rayon de bordure dessus, et de l'appeler. Si nous écrivions ce «pour de vrai», cela pourrait ressembler à ceci:
<adal>
<style>
corps {
Contexte: # 0B2429;
marge: 0;
}
.feuille {
Largeur: 150px;
hauteur: 150px;
Border-Radius: 67% 0;
Contexte: # F3AC3C;
marge: 75px 0 75px 175px;
Box-shadow:
-50px 0 # 998235,
-100px 0 # 1A4341
}
</ style>
</ head>
<body>
<div />
</style></adal>
Mais c'est 423 octets! Cela ne fera pas besoin de Golf CSS, alors voyons ce que nous pouvons supprimer.
Tentative 1: 144 octets
<p style="margin: 75 167; hauteur: 150; largeur: 150; Border-Radius: 67% 0; box-shadow: -50px 0 # 998235, -100px 0 # 1A4341,0 0 0 5in # 0b2429; arrière-plan: # f3AC3C"></p>
Voici une version golf. Il y a certainement une étrangeté qui se passe ici - pas , pas , pas de
, 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
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
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 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.
Tentative 2: 141 octets
<p style="marge:" hauteur: largeur: border-radius: box-shadow: arri f3ac3c></p>
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!
Cette tentative nettoie également quelques erreurs d'espace de la dernière tentative.
Tentative 3: 126 octets
L'utilisation d'une balise
au lieu d'unsignifie que:
- Nous ne dépensons plus les octets en réglant la hauteur ou la largeur sur un paragraphe
- Nous avons accès à Bgcolor
BGColor est un attribut obsolète qui apparaît souvent dans CSS Golf Solutions. Il ne fonctionne que sur quelques balises (
inclus), et fait deux grandes choses:- Nous évite de dépenser des octets en «arrière-plan:«
- 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.
Il y a une régression de golf dans cette itération! Pouvez-vous le repérer?
La méthode «frontière»
À 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.
À 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
et pour tout positionner tout en utilisant les bordures à la place d'une couleur d'arrière-plan.Tentative 4: 126 octets
<style> * {Border-Radius: 67% 0; bordure: 75px solide # f3ac3c; marge: 0 50; box-shadow: -50px 0 # 998235, -100px 0 # 1A4341,0 0 0 5in # 0b2429</style>
C'est un écart assez énorme de notre dernière stratégie. Notre balise corporelle a disparu et nous utilisons
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, grâce à 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!
Style CSS de niveau supérieur pour les curseursApr 23, 2025 am 11:04 AMLes curseurs personnalisés avec CSS sont excellents, mais nous pouvons faire passer les choses au niveau supérieur avec JavaScript. À l'aide de JavaScript, nous pouvons passer entre les états du curseur, placer du texte dynamique dans le curseur, appliquer des animations complexes et appliquer des filtres.
Worlds Collide: Détection de collision de l'ordre clé à l'aide de requêtes de styleApr 23, 2025 am 10:42 AMLes animations CSS interactives avec des éléments se ricochent semblent plus plausibles en 2025. Bien qu'il soit inutile de mettre en œuvre Pong dans CSS, la flexibilité et la puissance croissantes de CSS renforcent le soupçon de Lee selon lequel un jour, ce sera un jour
Utilisation du filtre de fond CSS pour les effets d'interface utilisateurApr 23, 2025 am 10:20 AMConseils et astuces sur l'utilisation de la propriété CSS Back-Filter pour styliser les interfaces utilisateur. Vous apprendrez à superposer des filtres en toile de fond entre plusieurs éléments et à les intégrer à d'autres effets graphiques CSS pour créer des conceptions élaborées.
Smil sur?Apr 23, 2025 am 09:57 AMEh bien, il s'avère que les fonctionnalités d'animation intégrées de SVG n'ont jamais été obsolètes comme prévu. Bien sûr, CSS et JavaScript sont plus que capables de porter la charge, mais il est bon de savoir que Smil n'est pas mort dans l'eau comme précédemment
'Pretty' est dans l'œil du spectateurApr 23, 2025 am 09:40 AMYay, laissez-le saut pour le wat-wrap: joli atterrissage dans la technologie safari aperçu! Mais méfiez-vous qu'il est différent de la façon dont il fonctionne dans les navigateurs de chrome.
CSS-Tricks raconte xliiiApr 23, 2025 am 09:35 AMCette mise à jour de CSS-Tricks met en évidence des progrès significatifs dans l'Almanac, des apparitions de podcast récentes, un nouveau guide CSS Counter et l'ajout de plusieurs nouveaux auteurs contribuant un contenu précieux.
La fonctionnalité @Apply de Tailwind est meilleure qu'il n'y paraîtApr 23, 2025 am 09:23 AMLa plupart du temps, les gens présentent la fonctionnalité de Tailwind avec l'un des utilitaires à propriété unique de Tailwind (qui modifie une seule déclaration CSS). Lorsqu'il est présenté de cette façon, @Apply ne semble pas du tout prometteur. So évidence
Se sentir comme je n'ai pas de libération: un voyage vers les déploiements sainsApr 23, 2025 am 09:19 AMLe déploiement comme un idiot se résume à un décalage entre les outils que vous utilisez pour déployer et la récompense en complexité réduite par rapport à la complexité ajoutée.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Version Mac de WebStorm
Outils de développement JavaScript utiles
DVWA
Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel
SublimeText3 version anglaise
Recommandé : version Win, prend en charge les invites de code !
Version crackée d'EditPlus en chinois
Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
