CSSゴルフエクササイズ

コードゴルフは、できるだけ少ないバイトを使用してタスクを達成することを目標とする一種のプログラミングです。 CSSBattleは、CSSとHTMLを使用してターゲット画像を再現するためにプレイヤーが完了するコードゴルフバトルグラウンドです。

ルールはかなり単純です：

• 外部リソースはありません（申し訳ありません、）
• あなたのソリューションはクロムで正しくレンダリングする必要があります（スコアリングのためだけに）

これは、日々のフロントエンド作業からのかなり楽しい出発になる可能性があります。メンテナビリティ、セマンティクス、パフォーマンス、アクセシビリティなど、本当に小さく、まだ正しくレンダリングする以外に、心配する必要はありません。

12回の試行でゴルフソリューション

このタイプの思考は、私たちのほとんどが生産サイトのフロントエンドコードを書いていることからかなり劇的な逸脱です（私は願っています！）。したがって、私はGithubにすべてのソリューションを投稿して、知識を共有し、他の人から学ぶことができます。幸運な副作用として、それは私の提出物のかなり詳細な歴史があることを意味します。

これは、CSSBattleの7番目のターゲットの試みの最初からフィニッシュの説明です。これは次のようになります。

「ジャストセンターザダンのもの」メソッド

合理的な最初のアプローチは、単に要素をページの中央に貼り付け、ボックスシャドウとボーダーの半径を叩き、それを完了することです。私たちがこれを「本当の」と書いていたなら、それは次のようになるかもしれません：

 

  
    <style>
      体 {
        背景：＃0b2429;
        マージン：0;
      }

      .leaf {
        幅：150px;
        高さ：150px;
        ボーダーラジウス：67％0;
        背景：＃f3ac3c;
        マージン：75px 0 75px 175px;
        Box-Shadow：
          -50px 0＃998235、 
          -100px 0＃1A4341
      }
    </style>
  
  
    <div></div>
  

しかし、それは423バイトです！それはCSSゴルフではそうではないので、削除できるものを見てみましょう。

1：144バイトを試行します

<p style="マージン：75 167;高さ：150;幅：150;ボーダーラジウス：67％0; box-shadow：-50px 0＃998235、-100px 0＃1A4341,0 0 0 5IN＃0B2429;背景：＃F3AC3C"></p>

これがゴルフバージョンです。ここでは間違いなくいくつかの奇妙さがあります - no 、no 、no

、no nothin '。ブラウザはそれらを必要としません（実際、それらを挿入します）ので、それらを除外して多くのバイトを保存します。

の代わりに

を使用しています。短いため、タグをレンダリングする必要がないため、タグをまったく閉じません。

CSS自体は、身体要素の背景の代わりに巨大なボックスシャドウを使用したという事実を除いて、それほど違いはありません（「背景」は長い間、それを避けることができます）。また、a タグに追加のバイトがかかるため、要素にもインラリングされています。

最後のボックスシャドウのスプレッドに5インチを使用していることに気付いたかもしれません。奇妙なユニットで遊ぶことは、CSSゴルフの大きな部分です。この場合、400×300キャンバスをカバーするために影が必要であり、「5in」（480px）はどのピクセル値よりも短いです。

試行2：141バイト

<p box-shadow></p>

これにより、非常に重要なゴルフのトリックが導入されます。スペースをプラスサインに置き換えると、属性に関する引用符を削除し、数バイトを保存できます。なぜこれが機能するのか完全にはわかりません。誰かがそれがHTML仕様のこの部分に関連する可能性があることを示唆しました。あなたがより良い答えがあるなら、私に知らせてください！

この試みは、最後の試みからのいくつかの白人の間違いを一掃します。

試行3：126バイト

の代わりに

タグを使用することは、次のことを意味します。

• 段落に高さまたは幅を設定するバイトを使用しなくなりました
• BGColorにアクセスできます

BGColorは、CSSゴルフソリューションで頻繁に出てくる非推奨属性です。それはいくつかのタグ（

を含む）でのみ動作し、2つの素晴らしいことを行います。

• 「バックグラウンド」にバイトを費やすことから私たちを救います：」
• 16進数で＃を省略できるようにすることで、バイトを節約します。さらに、色が1つまたは2つのゼロで終了した場合、それらを削除できますが、それでも正しくレンダリングされます。たとえば、FFFF00はFFFFと同じです。

この反復にはゴルフの退行があります！見つけられますか？

「ボーダー」メソッド

この時点までに、私はこのターゲットをいじくり回すかなりの時間を費やし、かなり立ち往生していました。幸いなことに、CSSBattleには、手を貸す意思がある以上のスペクトルに関する友好的なコミュニティがあります。

当時、Praveenは、私が管理していたよりも2バイト少ない2バイトで1位のスポットを保持していたので、私はいくつかの助けを求めました。彼は、背景色の代わりに境界線を使用しながら、すべてを配置するために

と要素の両方を活用することを提案しました。

試行4：126バイト

<style>*{border-radius：67％0; border：75px solid＃f3ac3c; margin：0 50; box-shadow：-50px 0＃998235、-100px 0＃1A4341,0 0 0 5IN＃0B2429</style>

これは、私たちの最後の戦略からのかなり大きな逸脱です。私たちのボディータグはなくなり、

これは私がグローキングするのは大変でしたが、プラヴェンは物事をかなりよく説明する図を作成しました。これが見栄えの良いバージョンです：

AとBはのマージンと境界線であり、Cは

のマージンです。 の右マージンは何もしません。を左に押す余地がなく、すでに幅がゼロになっています。

ボックスの影が適用されると、Bがカバーされ、残っているのはターゲット画像だけです。

ただし、ここにはいくつかの最適化がありません。 Dorus van Den Oordは、Border Methodを無駄のない121バイトに引き下げることができ、この不可解なアドバイスを提供しました。

その121に到達するための小さなヒント：4分の1の…で要素を移動できるとしたらどうでしょうか？

5および6：122バイトを試みます

<style>*{border-radius：67％0; border：75px solid＃f3ac3c; margin：0 50; box-shadow：-53q 0＃998235、-25VW 0＃1A4341,0 0 0 5IN＃0B2429</style>

必要なのは、（Q）（および謙虚なVW）について聞いたことのないユニットだけでした。 CSSゴルフでは「PX」を書くことはめったに正しいことではないので、目を光らせておくべきことです。ここでは、100pxを25VWに、50pxを53Qで置き換えることができます。

Q、または四半期ミリメートルはまさにそれです - ミリメートルの1/4、またはピクセルのわずかです。 Qユニットは、Expressに1つのバイトだけを必要とする2つの値（もう1つは％）の1つとして、CSSゴルフの定番です。ここでは、5回目と6回目の試みを組み合わせました。私たちはまだ121からバイトオフです！

7：121バイトを試行します

<style>*{border-radius：67％0; border：75px solid＃f3ac3c; margin：0 50; box-shadow：-53q 0＃998235、-25VW 0＃1A4341,0 0 0 5IN＃0B2429</style>

Praveenからのプルリクエストのおかげで、最終的に3回目の試みからのその回帰を修正しました。パーセンテージでは、それと後続の値の間のスペースは必要ありません。そのため、国境帯にバイトを保存できます。これは、共有コードが関係者全員にどのように役立つかの素晴らしい例です。私はこれに長い間かなりdangしていました。

「ファンキーマージン」メソッド

ただし、ボーダーは唯一のアプローチではありません！ RasmusFløeのファンキーなマージンを入力してください：

私は＃7でボックスシャドウとファンキーなマージンを使用して123枚の請求を得ました：75 400 75-150 :)

試行8：120バイト

Rasmusが説明するように、これがどのように機能するかは次のとおりです。

正の右マージンはそれをキャンバスから左に押し出します - そして、負の左マージンは要素を指名手配幅に伸ばします:)

ここに引き出されます：

右マージン（b）は、

要素を左までずっと押し、幅がゼロになります。負の左マージン（a）は、幅150px（葉の形状の幅）に戻り、ボックスシャドウ（c）が視界にあるほどオフセットされます。これは素晴らしいことです。なぜなら、すべてを正しくレイヤーにするために、ネガティブなボックスシャドウに対処する必要がなくなったからです。

また、BGColorに戻り、背景色の素敵な癖を活用します。は独自の背景色を持っていないため、

から継承します。

9および10：118バイトを試みます

もう少しユニットを描くことで、私たちはさらに2バイト（この最適化を発見した最初のドーラスへの小道具）を節約することができます。マージンを調整すると数字（150は90になります）を節約し、甘いボーナスとして、86mmを70mmに変換することができます。これは7cmになります。ここでは、マイナーユニットの修正である2つの試みを再び組み合わせました。 （私は最初にMM – CM変換を逃したと言って恥ずかしいです。）

試行11：117バイト

Romain Deltourは、この117バイトのソリューションを最初に見つけました。 340から85％を変更するということは、私たちの価値の1つ（ボーダーラジウスと同じように）の後にスペースを省略し、別のバイトを保存することを意味します。

12：115バイトを試します

Romainの117バイトのソリューションの2週間後、Viacheslav Popovは4桁の16進コードを介して115バイトまでアルファを複合することができました。

私はこれを本当に気に入っています。なぜなら、それは賢いだけでなく、ターゲットがすでに完全に最適化されていると考えていた多くの人々（私自身も含めて）です。 Viacheslavの永続性は、新しいラウンドの議論を引き起こし、将来のターゲットのためにArsenalに別のCSS-Trick™を追加しました。

試行13：

これは私にとって非常に近いように見えますが、それは確かにそれが勝てないという意味ではありません - なぜそれを試してみませんか？あなたを始めるための以前の芸術、多くの人々が喜んで助け、さらにはいくつかのツールがあります。ハッピーゴルフ⛳️

以上がCSSゴルフエクササイズの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。