Latihan golf CSS

Kod Golf adalah sejenis pengaturcaraan di mana matlamatnya adalah untuk menyelesaikan tugas menggunakan sedikit bait yang mungkin. CSSBattle adalah kod medan perang golf di mana pemain lengkap untuk mencipta imej sasaran menggunakan CSS dan HTML.

Peraturannya agak mudah:

• Tiada sumber luaran (maaf, tidak )
• Penyelesaian anda mesti diberikan dengan betul dalam krom (hanya untuk tujuan pemarkahan)

Ini boleh menjadi pemergian yang sangat menyeronokkan dari kerja-kerja depan sehari-hari. Tidak perlu risau tentang mengekalkan, semantik, prestasi, kebolehcapaian, atau apa -apa selain membuat sesuatu benar -benar, benar -benar kecil dan masih diberikan dengan betul.

Penyelesaian golf dalam 12 percubaan

Pemikiran jenis ini adalah pemergian yang cukup dramatik dari bagaimana kebanyakan kita menulis kod depan untuk tapak pengeluaran (saya harap!), Jadi saya telah menyiarkan semua penyelesaian saya di GitHub dalam usaha untuk berkongsi pengetahuan dan belajar dari orang lain. Sebagai kesan sampingan yang bernasib baik, ia juga bermakna terdapat sejarah yang agak terperinci mengenai penyerahan saya.

Berikut adalah akaun permulaan percubaan saya ke-7, yang kelihatan seperti ini:

Kaedah "hanya memusatkan perkara dang"

Pendekatan pertama yang munasabah adalah dengan hanya melekatkan elemen di tengah -tengah halaman, menampar bayang -bayang kotak dan jejari sempadan di atasnya, dan memanggilnya. Jika kita menulis ini "untuk sebenar," mungkin kelihatan seperti ini:

 

  
    <yaya>
      badan {
        Latar Belakang: #0B2429;
        Margin: 0;
      }

      .leaf {
        lebar: 150px;
        Ketinggian: 150px;
        Radius sempadan: 67% 0;
        Latar Belakang: #F3AC3C;
        Margin: 75px 0 75px 175px;
        kotak bayang-bayang:
          -50px 0 #998235, 
          -100px 0 #1A4341
      }
    
  
  
    <div></div>
  
</yaya>

Tetapi itulah 423 bait! Itu tidak akan dilakukan untuk golf CSS, jadi mari kita lihat apa yang boleh kita keluarkan.

Percubaan 1: 144 bait

 <p style="margin: 75 167; ketinggian: 150; lebar: 150; radius sempadan: 67%0; box-shadow: -50px 0#998235, -100px 0#1a4341,0 0 0 5in#0b2429; Latar Belakang:#f3ac3c"></p>

Inilah versi golf. Sudah pasti ada kegilaan yang berlaku di sini - tidak , tidak , tidak

, tidak ada '. Penyemak imbas tidak memerlukannya (dan, sebenarnya, memasukkannya untuk kami), jadi kami menyimpan banyak bait dengan meninggalkan mereka. Kami menggunakan

bukannya

kerana ia lebih pendek, dan kami tidak menutup tag sama sekali kerana ia tidak diperlukan untuk membuat perkara.

CSS itu sendiri tidak jauh berbeza, selain dari fakta bahawa kami telah menggunakan bayang -bayang kotak yang besar dan bukannya latar belakang pada elemen badan ("latar belakang" yang panjang sehingga mengelakkannya dapat bermanfaat). Ia juga digariskan dalam elemen sejak tag tag kos tambahan.

Anda mungkin menyedari bahawa kami menggunakan 5in untuk penyebaran dalam bayang -bayang kotak terakhir kami. Bermain dengan unit pelik adalah sebahagian besar golf CSS. Dalam kes ini, kita hanya memerlukan bayangan untuk menutup kanvas 400 × 300 dan '5in' (480px) adalah lebih pendek daripada nilai piksel.

Percubaan 2: 141 bait

 <p style="margin:" ketinggian: lebar: radius sempadan: box-shadow: latar belakang:></p>

Ini memperkenalkan helah golf yang sangat penting: Menggantikan ruang dengan tanda -tanda plus membolehkan kita mengeluarkan petikan di sekitar atribut, menjimatkan bait pasangan. Saya tidak pasti mengapa ini berfungsi. Seseorang mencadangkan ia mungkin berkaitan dengan bahagian spesifikasi HTML ini. Sekiranya anda mempunyai jawapan yang lebih baik, sila beritahu saya!

Percubaan ini juga membersihkan beberapa kesilapan ruang putih dari percubaan terakhir.

Percubaan 3: 126 bait

Menggunakan tag

dan bukannya

bermaksud:

• Kami tidak lagi menghabiskan ketinggian atau lebar tetapan bait pada perenggan
• Kami mendapat akses ke BGColor

BGColor adalah atribut yang tidak disengajakan yang sering muncul dalam penyelesaian golf CSS. Ia hanya berfungsi pada beberapa tag (

termasuk), dan melakukan dua perkara hebat:

• Menyelamatkan kami daripada membelanjakan bait pada "latar belakang:"
• Menyelamatkan kami dengan membolehkan kami menghilangkan # dalam warna hex. Di samping itu, jika warna berakhir dalam satu atau dua sifar, kita boleh mengeluarkannya dan ia masih akan diberikan dengan betul. Sebagai contoh, FFFF00 adalah sama dengan FFFF.

Terdapat regresi golf dalam lelaran ini! Bolehkah anda melihatnya?

Kaedah "sempadan"

Pada ketika ini, saya telah menghabiskan beberapa jam untuk mengamalkan dan mematikan dengan sasaran ini dan semakin terperangkap. Nasib baik, CSSBattle mempunyai komuniti yang mesra mengenai spektrum yang lebih bersedia untuk meminjamkan tangan.

Pada masa itu, Praveen memegang tempat #1 dengan dua bait kurang daripada yang saya telah berjaya, jadi saya meminta bantuan. Beliau mencadangkan memanfaatkan kedua -dua unsur -unsur dan untuk meletakkan segala -galanya semasa menggunakan sempadan sebagai ganti warna latar belakang.

Percubaan 4: 126 bait

 <gaya>*{border-radius: 67% 0; sempadan: 75px pepejal#f3ac3c; margin: 0 50; box-shadow: -50px 0#998235, -100px 0#1a4341,0 0 0 5in#0b2429</gaya>

Ini adalah pemergian yang cukup besar dari strategi terakhir kami. Tag badan kami hilang dan kami menggunakan *{untuk mensasarkan tag dan yang dimasukkan penyemak imbas untuk kami. Gabungan margin dan sempadan menjatuhkan bentuk kami tepat di mana ia perlu, dan bayang-bayang kotak pada merangkumi semua perkara yang berlebihan yang anda lihat dari gaya pada .

Ini sukar bagi saya untuk Grok, tetapi Praveen membuat rajah yang menerangkan perkara dengan baik. Inilah versi yang tersembunyi:

A dan B adalah margin dan sempadan pada , dan c adalah margin pada

. Margin yang betul pada tidak melakukan apa -apa kerana tidak ada ruang untuk menolak ke kiri dan ia sudah mempunyai lebar sifar.

Sebaik sahaja bayang -bayang kotak kami digunakan, B ditutup dan semua yang tersisa adalah imej sasaran kami.

Masih terdapat beberapa pengoptimuman yang hilang di sini. Dorus van den Oord dapat mengambil kaedah sempadan ke bawah 121 bait, menawarkan sedikit nasihat ini:

Petunjuk kecil untuk sampai ke 121: Bagaimana jika anda boleh memindahkan elemen sebanyak seperempat ...?

Percubaan 5 dan 6: 122 bait

 <gaya>*{border-radius: 67% 0; sempadan: 75px pepejal#f3ac3c; margin: 0 50; box-shadow: -53q 0#998235, -25vw 0#1a4341,0 0 0 5in#0b2429</gaya>

Ternyata semua yang kami perlukan adalah satu unit yang tidak pernah didengar oleh sesiapa sahaja (Q) (dan VW yang rendah hati). Mempunyai menulis "PX" jarang betul dalam CSS Golf, jadi ia adalah sesuatu yang perlu dilihat. Di sini, kita boleh menggantikan 100px dengan 25VW dan 50px dengan 53Q.

A Q, atau suku milimeter, adalah betul-betul-1/4 dari milimeter, atau hanya di bawah piksel. Unit Q adalah ruji golf CSS sebagai salah satu daripada dua nilai (yang lain %) yang memerlukan hanya satu bait untuk menyatakan. Saya telah menggabungkan percubaan ke -5 dan ke -6 saya di sini kerana kedua -duanya hanya tweak unit. Kami masih byte dari 121 walaupun!

Percubaan 7: 121 bait

 <gaya>*{border-radius: 67%0; sempadan: 75px pepejal#f3ac3c; margin: 0 50; box-shadow: -53q 0#998235, -25vw 0#1a4341,0 0 0 5in#0b2429</gaya>

Kami akhirnya menetapkan regresi itu dari percubaan ketiga, terima kasih kepada permintaan tarik dari Praveen. Peratusan tidak memerlukan ruang di antaranya dan nilai-nilai berikutnya, jadi kita dapat menyelamatkan byte di radius sempadan kita. Ini adalah contoh hebat bagaimana kod perkongsian dapat membantu semua orang yang terlibat. Saya telah terjebak dengan ini untuk masa yang lama.

Kaedah "margin funky"

Sempadan bukan satu -satunya pendekatan, walaupun! Masukkan margin funky Rasmus Fløe:

Saya mendapat 123 chars di #7 dengan menggunakan box-shadow dan margin funky: 75 400 75-150 :)

Percubaan 8: 120 bait

Begini cara ini berfungsi, seperti yang dijelaskan oleh Rasmus:

Margin kanan positif menolaknya dari kanvas ke kiri - dan margin kiri negatif membentangkan elemen ke lebar yang dikehendaki :)

Di sini ia ditarik:

Margin yang betul (b) menolak elemen

sepanjang jalan ke kiri, runtuhnya ke lebar sifar. Margin kiri negatif (a) kemudian membentangkannya kembali ke 150px lebar (lebar bentuk daun), dan kemudian bayang -bayang kotak kami (C) cukup diimbangi untuk dilihat. Ini hebat kerana kita tidak lagi perlu berurusan dengan bayang -bayang kotak negatif untuk mendapatkan segala -galanya dengan betul.

Kami juga kembali ke Bgcolor dan dapat memanfaatkan warna latar belakang yang bagus: kerana tidak mempunyai warna latar belakang sendiri, ia mewarisi satu dari

.

Percubaan 9 dan 10: 118 bait

Dengan sedikit lebih banyak unit-wrangling kami dapat menyelamatkan diri saya dua lagi bait (props to Dorus, yang merupakan yang pertama untuk mengetahui pengoptimuman ini). Melaraskan margin menjimatkan digit (150 menjadi 90), dan, sebagai bonus manis, kita dapat menukar 86mm hingga 70mm, yang menjadi 7cm. Saya sekali lagi menggabungkan dua percubaan di sini yang merupakan pembetulan unit kecil. (Saya malu untuk mengatakan bahawa saya pada mulanya terlepas penukaran MM -cm.)

Percubaan 11: 117 bait

Romain Deltour adalah yang pertama mencari penyelesaian 117-bait ini. Menukar 340 hingga 85% bermakna kita dapat menghilangkan ruang selepas salah satu nilai kita (sama seperti yang kita lakukan dengan Radius Border), menjimatkan bait lain.

Percubaan 12: 115 bait

Dua minggu penuh selepas penyelesaian 117-bait Romain, Viacheslav Popov dapat Alpha Composite ke 115 bait melalui kod hex 4 digit.

Saya sangat suka ini kerana - bukan sahaja ia pandai pandai - tetapi banyak orang (termasuk saya) menganggap sasaran itu telah dioptimumkan sepenuhnya. Kegigihan Viacheslav kedua-duanya mencetuskan perbincangan pusingan baru dan menambah satu lagi CSS-Trick ™ ke senjata kami untuk sasaran masa depan.

Percubaan 13:

Ini seolah -olah sangat dekat dengan optimum kepada saya tetapi itu pastinya tidak bermakna ia tidak dapat ditewaskan - mengapa tidak memberikannya? Terdapat seni terdahulu untuk memulakan anda, banyak orang yang bersedia membantu, dan juga beberapa alat. Selamat Golf ⛳️

Atas ialah kandungan terperinci Latihan golf CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!