Gunnar Bittersmann: Kniffliges zur Wochenmitte: CSS Battle

problematische Seite

Wenn ich sage „Kniffliges“, dann hat das diesmal(!) nichts mit Würfelspielen zu tun. 😉

Frei nach Bob Dylan: There’s a CSS Battle outside and it’s ragin’
It’ll soon shake your minds and rattle your skills
For the scores they are a-changin’

Warnung: Kann süchtig machen.

Ich hab noch nicht alle Targets durch. Bei denen, die ich gelöst habe, bin ich ein Stück vom Highscore entfernt. Meist ein gutes.

LLAP 🖖

--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  1. problematische Seite

    Lieber Gunnar,

    Warnung: Kann süchtig machen.

    Warnung: Benötigt eine Registrierung, die ausschließlich mit Konten bei Github, Twitter oder Google erfolgen kann. Wer das nicht hat oder will wird ausgeschlossen. Um es mit Gunnars deutlichen Worten zu sagen: Funktioniert nicht.

    Liebe Grüße,

    Felix Riesterer.

    1. problematische Seite

      Tach!

      Warnung: Benötigt eine Registrierung, die ausschließlich mit Konten bei Github, Twitter oder Google erfolgen kann. Wer das nicht hat oder will wird ausgeschlossen.

      Wenn man es absenden möchte. Ansonsten kann man das auch so für sich selbst versuchen und das Resultat mit dem Highscore vergleichen.

      dedlfix.

    2. problematische Seite

      @@Felix Riesterer

      Warnung: Benötigt eine Registrierung, die ausschließlich mit Konten bei Github, Twitter oder Google erfolgen kann. Wer das nicht hat oder will wird ausgeschlossen.

      Ja, Websites, die keinen eigenes Login implementiert haben, sondern nur Login über andere Dienste (die dann fleißig Daten sammeln), sind ein Ärgernis.

      Und damit dem Überwachungskapitalismus so richtig genüge getan wird: die CSSBattle verlangt Chrome als Browser. In anderen Browsern funktionieren manche Hacks nicht.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. problematische Seite

    Ich habe für alle Rätsel eine Lösung mit 53 bzw. 54 Zeichen, und dürfte damit wohl unbestritten in die Hall of Fame einziehen.

    <style>body{background:url('/targets/1.png')}</style>
    

    Der Bildpfad muss an das jeweilige Rätsel angepasst werden.

    Das Spiel mit gezinkten Karten gibt aber unverschämterweise keine Punkte.

    1. problematische Seite

      Hallo,

      Das Spiel mit gezinkten Karten gibt aber unverschämterweise keine Punkte.

      Since this is "CSS" battle, you are not allowed to use JavaScript or images in your code. In fact any external asset is not allowed. All code required to generate the target image has to be written in the given editor only.

      Gruß
      Kalk

    2. problematische Seite

      @@1unitedpower

      <style>body{background:url('/targets/1.png')}</style>
      

      Haha, das hatte mein Kollege auch gerade versucht.

      Das Spiel mit gezinkten Karten gibt aber unverschämterweise keine Punkte.

      Er hatte 1.4% Übereinstimmung. Keine Ahnung, wofür.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. problematische Seite

    Tach!

    Ich hab noch nicht alle Targets durch. Bei denen, die ich gelöst habe, bin ich ein Stück vom Highscore entfernt. Meist ein gutes.

    Der in diesem Fall wohl eher ein Lowscore ist. Wenn das Ziel ist, so wenig Zeichen wie möglich zu verwenden, kann nur Zeug rauskommen, bei dem man die B-Note nicht bewerten möchte und auch sonst nicht so genau hinschauen will. Da kann ja nur fehlerhafter Code rauskommen, den die Browser grad noch so wie gewünscht darstellen.

    Geht schon beim ersten gut los, dass man statt <div></div> lieber ein <p> mit weggelassenem Closing Tag nimmt, um Zeichen zu sparen. Ein Wettbewerb, bei dem man Mist-Code erzeugen muss, um zu gewinnen, reizt mich nicht.

    dedlfix.

    1. problematische Seite

      @@dedlfix

      Der in diesem Fall wohl eher ein Lowscore ist. Wenn das Ziel ist, so wenig Zeichen wie möglich zu verwenden, kann nur Zeug rauskommen, bei dem man die B-Note nicht bewerten möchte und auch sonst nicht so genau hinschauen will. Da kann ja nur fehlerhafter Code rauskommen, den die Browser grad noch so wie gewünscht darstellen.

      Ja, da hab ich auch ein paar Tricks gefunden, um ein paar Zeichen zu sparen, die ich produktiv nie verwenden würde.

      Geht schon beim ersten gut los, dass man statt <div></div> lieber ein <p> mit weggelassenem Closing Tag nimmt, um Zeichen zu sparen.

      Nein, lieber nicht.

      Ein Wettbewerb, bei dem man Mist-Code erzeugen muss, um zu gewinnen, reizt mich nicht.

      Das Reizvolle daran ist der Nicht-Mist-Code. Mit den oben erwähnten Tricks nochmal ca. 10 Zeichen zu sparen, kommt ganz zum Schluss.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. problematische Seite

        Tach!

        Geht schon beim ersten gut los, dass man statt <div></div> lieber ein <p> mit weggelassenem Closing Tag nimmt, um Zeichen zu sparen.

        Nein, lieber nicht.

        Nicht? Wie würdest du das lösen, um Zeichen zu sparen? Also zumindest unter der Annahme, dass einem nichts besseres einfällt, als mindestens ein HTML-Element für die Lösung zu benötigen.

        dedlfix.

        1. problematische Seite

          @@dedlfix

          Nicht? Wie würdest du das lösen, um Zeichen zu sparen? Also zumindest unter der Annahme, dass einem nichts besseres einfällt, als mindestens ein HTML-Element für die Lösung zu benötigen.

          Wie @at sagte: mit den schon vorhandenen Elementen.

          Na gut, die drei eingesparten Zeichen <p> gibt man beim Selektor html bzw. body wieder drauf (wenn man den 4 Zeichen langen Selektor denn wirklich braucht).

          Zu bedenken ist aber, dass p-Elemente per Browserdefault margin oben und unten haben, der evtl. stören könnte.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. problematische Seite

            Hallo Gunnar,

            sehe ich das richtig, dass eine Lösung dann die Voraussetzungen erfüllt, wenn das gewünschte Bild angezeigt wird und keine externen Ressourcen geladen werden?

            Dann komme ich bei simply square auf 92 Zeichen bei 100% Match, bei validem[1] Code, durch verziehenes Weglassen von Zeichen auf 82 => 783.08 (100% match). Maximalen Respekt für die 56 Zeichen von Jan. Keine Ahnung, mit welchem CSS Feature er das hinbekommen hat. Oder gibt es "undokumentierte" Kurznamen für CSS Eigenschaften?

            Wie schlecht ist das?

            Rolf

            --
            sumpsi - posui - clusi

            1. Valide im Sinne von: Die genutzten HTML Tags und CSS Klauseln sind syntaktisch vollständig und sauber beendet. ↩︎

            1. problematische Seite

              @@Rolf B

              tja, derzeit komme ich bei simply square auf 92 Zeichen bei 100% Match, bei validem Code, durch verziehenes Weglassen von Zeichen auf 82 => 783.08 (100% match).

              Ich bin bei 69 (807.23).

              Wie Jan auf 56 Zeichen gekommen sein will ist mir ein Rätsel.

              Mir auch.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. problematische Seite

                Hallo Gunnar,

                Ich biete 68 😝

                Was mich nervt, ist das Leaderboard. Alle Top-10 haben die 56-er Lösung gefunden :-/

                _Rolf

                --
                sumpsi - posui - clusi
                1. problematische Seite

                  Hallo Ingrid,

                  gefunden ist das richtige Wort: https://www.sarthakbatra.com/blog/getting-started-with-css-battle/

                  Zu wissen, dass 1in = 96px ist, 2in demzufolge 192px und die 8px Margin des Body dann genau nützlich sind, das ist schon raffiniert. Und möglicherweise ist es sogar ein Cheat - ich kann es gerade nicht ausprobieren, aber man kann die DPI des Bildschirms verstellen und ob dann 1in immer noch 96px sind?

                  Rolf

                  --
                  sumpsi - posui - clusi
                  1. problematische Seite

                    @@Rolf B

                    gefunden ist das richtige Wort: https://www.sarthakbatra.com/blog/getting-started-with-css-battle/

                    Und wenn du denkst, damit auch die Lösung für Target #2: Carrom gefunden zu haben – weit gefehlt! Ich komme mit 5 box-shadows auf 139 Zeichen; hatte vorher aber schon eine Lösung mit 103 (die noch meilenweit vom vom aktuellen Highscore (oder Lowscore, wie dedlfix sagen würde) von 79 entfernt ist).

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  2. problematische Seite

                    @@Rolf B

                    gefunden ist das richtige Wort: https://www.sarthakbatra.com/blog/getting-started-with-css-battle/

                    Mein bestes Ergebnis war Target #9 Tesseract: 147 Zeichen, 2 Zeichen länger als der Rekord – der damalige.

                    Inzwischen ist #9 mein schlechtestes: 27 Zeichen länger als der aktuelle Rekord von 120. Und ich stecke immer noch bei 147 fest …

                    Update: Es geht aufwärts! 146.

                    Dank Ilya Streltsyns Artikel Уроки CSSbattle konnte ich hier und da ein Zeichen einsparen. (Wer lesen kann, ist klar im Vorteil.)

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                2. problematische Seite

                  @@Rolf B

                  Ich biete 68 😝

                  Meh. Wie das?

                  Meine 69er: <style>html{background:#5d3a3a;border-top:50vw solid#b5e0ba;width:50%

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. problematische Seite

                    Hallo Gunnar,

                    ....:....1....:....2....:....3....:....4....:....5....:....6....:..8.
                    <style>*{background:#5d3a3a;margin:0 100 50 0}*>*{background:#b5e0ba
                    

                    Rolf

                    --
                    sumpsi - posui - clusi
          2. problematische Seite

            Tach!

            Nicht? Wie würdest du das lösen, um Zeichen zu sparen? Also zumindest unter der Annahme, dass einem nichts besseres einfällt, als mindestens ein HTML-Element für die Lösung zu benötigen.

            Wie @at sagte: mit den schon vorhandenen Elementen.

            Ja schon, es geht doch aber hier nicht darum, sinnvolle Elemente zu verwenden, sondern nur die optische Darstellung zu erreichen bei so wenig wie möglich Zeichen. Deswegen ist das ja ein für die Praxis ziemlich sinnfreies Unterfangen.

            Na gut, die drei eingesparten Zeichen <p> gibt man beim Selektor html bzw. body wieder drauf (wenn man den 4 Zeichen langen Selektor denn wirklich braucht).

            Hatte ich nicht verwendet. Für den Hintergrund hab ich einfach * genommen.

            Zu bedenken ist aber, dass p-Elemente per Browserdefault margin oben und unten haben, der evtl. stören könnte.

            Hatte es bei mir nicht gehabt, aber body hatte ein margin, das auf 0 gesetzt werden musste. Übers * erledigt, setzt es auch gleich ein eventuelles vom p passend.

            dedlfix.

            1. problematische Seite

              @@dedlfix

              Ja schon, es geht doch aber hier nicht darum, sinnvolle Elemente zu verwenden, sondern nur die optische Darstellung zu erreichen bei so wenig wie möglich Zeichen. Deswegen ist das ja ein für die Praxis ziemlich sinnfreies Unterfangen.

              Mit irgendwelchen Hacks 10 Zeichen zu sparen ist für die Praxis sinnfrei, ja. Aber bei der Rumspielerei kommt man vielleicht doch auf das Eine oder Andere, was sich in der Praxis einsetzen lässt.

              Hatte es bei mir nicht gehabt, aber body hatte ein margin, das auf 0 gesetzt werden musste.

              Der nervt mich auch ständig. margin:0 – 8 Zeichen.

              Bei der Gabel (#8) konnte ich den Abstand jetzt aber lassen. Bei anderen Werten hab ich dafür Dezimalpunkte; aber summa summarum 5 Zeichen gespart.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. problematische Seite

                @@Gunnar Bittersmann

                Aber bei der Rumspielerei kommt man vielleicht doch auf das Eine oder Andere, was sich in der Praxis einsetzen lässt.

                TIL z.B., dass man Gradienten mit color stops einfacher haben kann. Nehmen wir eine Trikolore – bspw. die Flagge von San Escobar:

                linear-gradient(navy, navy 33%, white 33%, white 67%, green 67%, green)
                

                Anfang und Ende kann man weglassen, klar:

                linear-gradient(navy 33%, white 33%, white 67%, green 67%)
                

                Die Wiederholung der Lage der color stops braucht man aber auch nicht:

                linear-gradient(navy 33%, white 0, white 67%, green 0)
                

                Und man braucht auch nicht die Wiederholung der Farbe:

                linear-gradient(navy 33%, 0, white 67%, green 0)
                

                oder

                linear-gradient(navy 33%, white 0, 67%, green 0)
                

                Codepen

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. problematische Seite

                  @@Gunnar Bittersmann

                  linear-gradient(navy 33%, 0, white 67%, green 0)
                  

                  oder

                  linear-gradient(navy 33%, white 0, 67%, green 0)
                  

                  TIL: Noch besser lesbar:

                  linear-gradient(navy 33%, white 0 67%, green 0)
                  

                  Im Codepen ergänzt.

                  Spart aber leider keine Zeichen.

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. problematische Seite

                    Hallo Gunnar Bittersmann,

                    linear-gradient(navy 33%, white 0 67%, green 0)
                    

                    Spart aber leider keine Zeichen.

                    linear-gradient(navy 33%, #fff 0 67%, green 0)
                    

                    Ein Zeichen weniger.

                    Bis demnächst
                    Matthias

                    --
                    Pantoffeltierchen haben keine Hobbys.
                    ¯\_(ツ)_/¯
                    1. problematische Seite

                      @@Matthias Apsel

                      [#fff] Ein Zeichen weniger.

                      Bei der CSSBattle haben sie die Farben so gewählt, dass sich bei den 6stelligen Hex-Werten (mit # 7 Zeichen) nichts sparen lässt.

                      LLAP 🖖

                      --
                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      1. problematische Seite

                        @@Gunnar Bittersmann

                        Bei der CSSBattle haben sie die Farben so gewählt, dass sich bei den 6stelligen Hex-Werten (mit # 7 Zeichen) nichts sparen lässt.

                        Den eingeklammerten Teil muss ich revidieren.

                        LLAP 🖖

                        --
                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. problematische Seite

                          @@Gunnar Bittersmann

                          Bei der CSSBattle haben sie die Farben so gewählt, dass sich bei den 6stelligen Hex-Werten (mit # 7 Zeichen) nichts sparen lässt.

                          Den eingeklammerten Teil muss ich revidieren.

                          Und den ausgeklammerten auch. Nachzulesen in https://css-tricks.com/a-css-golfing-exercise/

                          LLAP 🖖

                          --
                          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    2. problematische Seite

                      Hi,

                      linear-gradient(navy 33%, #fff 0 67%, green 0)
                      

                      Sind die Leerzeichen nach den Kommata nötig?

                      cu,
                      Andreas a/k/a MudGuard

                      1. problematische Seite

                        @@MudGuard

                        linear-gradient(navy 33%, #fff 0 67%, green 0)
                        

                        Sind die Leerzeichen nach den Kommata nötig?

                        Nein, beim Battlen fallen die natürlich weg. Wie übrigens auch die schließende Klammer.

                        LLAP 🖖

                        --
                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              2. problematische Seite

                @@Gunnar Bittersmann

                Aber bei der Rumspielerei kommt man vielleicht doch auf das Eine oder Andere, was sich in der Praxis einsetzen lässt.

                Und es löst Denkblockaden. Heute bei mir z.B., dass man <use href="#foo"/> ja schon einsetzen kann, bevor das Element mit der ID "foo" im Quelltext auftaucht.

                (Dass SVG bei einigen Targets Mittel der Wahl ist, sollte nun kein Geheimnis gewesen sein. Hier

                Bei der Gabel (#8) konnte ich den Abstand jetzt aber lassen. Bei anderen Werten hab ich dafür Dezimalpunkte

                war’s bei Werten von viewBox.)

                Die CSS Battle als „ein für die Praxis ziemlich sinnfreies Unterfangen“ abzutun wird der Sache in keinster Weise gerecht.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  4. problematische Seite

    Hallo Gunnar Bittersmann,

    Ich hab noch nicht alle Targets durch.

    „Perfektion ist nicht dann erreicht, wenn man nichts mehr hinzufügen kann, sondern wenn man nichts mehr weglassen kann.“ – Antoine de Saint-Exupéry

    😀

    Bis demnächst
    Matthias

    --
    Pantoffeltierchen haben keine Hobbys.
    ¯\_(ツ)_/¯