nicht angemeldet
Gunnar Bittersmann
Felix Riesterer
dedlfix
Gunnar Bittersmann
dedlfix
Gunnar Bittersmann
Matthias Apsel
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 🖖
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.
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.
@@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 🖖
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.
Tabellenkalk
Rolf B
MudGuard<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.
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
@@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 🖖
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.
@@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.
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 🖖
Tach!
Geht schon beim ersten gut los, dass man statt
<div></div>lieber ein<p>mit weggelassenem Closing Tag nimmt, um Zeichen zu sparen.
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.
@@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 🖖
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
Valide im Sinne von: Die genutzten HTML Tags und CSS Klauseln sind syntaktisch vollständig und sauber beendet. ↩︎
@@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 🖖
Hallo Gunnar,
Ich biete 68 😝
Was mich nervt, ist das Leaderboard. Alle Top-10 haben die 56-er Lösung gefunden :-/
_Rolf
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
@@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 🖖
@@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 🖖
@@Rolf B
Ich biete 68 😝
Meh. Wie das?
Meine 69er: <style>html{background:#5d3a3a;border-top:50vw solid#b5e0ba;width:50%
LLAP 🖖
Hallo Gunnar,
....:....1....:....2....:....3....:....4....:....5....:....6....:..8.
<style>*{background:#5d3a3a;margin:0 100 50 0}*>*{background:#b5e0ba
Rolf
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 Selektorhtmlbzw.bodywieder 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 Browserdefaultmarginoben 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.
@@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 🖖
@@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 🖖
@@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 🖖
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
@@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 🖖
@@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 🖖
@@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 🖖
Hi,
linear-gradient(navy 33%, #fff 0 67%, green 0)
Sind die Leerzeichen nach den Kommata nötig?
cu,
Andreas a/k/a MudGuard
@@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 🖖
@@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 🖖
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