CSSBattle Learn
Sign In / Sign Up

Frequently Asked Questions

Is this free to play?#

Yes, CSSBattle is a free to play platform. It only costs you your time 馃榾

Do I have to login to play?#

Yes. You can see any target and try replicating it with code. But to submit and get a score, you'll need to login first.

Who can play this?#

CSSBattle needs you to code in HTML (slightly) and CSS. If you have ever coded in these 2 web technologies, you are all set to play here.

Even if you don't have any experience with HTML and CSS, they are super easy to start with. Open this CSS Reference in another browser tab, and get ready to battle!

What is a Battle?#

A Battle is a collection of unique targets with its own separate leaderboard. Each Battle runs for a set amount of days/weeks and once it's finished, the Battle leaderboard is locked, and the winners are crowned.

The targets in a Battle remain playable even after a Battle is over and changes in target leaderboard rankings still occur. This also affects the rankings in the Global Leaderboard.

Note: Battle names do not hold any relation to any of the targets or the game itself. Any resemblance is mere coincidence. Do not over-think them. 馃槵

How to play?#

The objective of the game is to write HTML/CSS to replicate the given target image in the least code possible.

In the target page, start coding in the editor area on the left. As you start typing, the output area in the middle will start rendering your code. When you're confident that the output matches the target image, hit the Submit button to see your score.

Important points to Note:

  • What you write in the editor, renders as it is. We make no change. This means you don't even get the DOCTYPE
  • Since this is "CSS" battle, you are not allowed to use JavaScript, SVG 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.

We also have a growing list of tips and tricks for CSS code-golfing.

Now go and climb the leaderboards!

How are scores calculated?#

Our scoring algorithm takes into account 2 things: 1) How closely you have replicated the target image 2) Number of characters in the code. Based on these 2 factors, a score is calculated. Better the match and lesser the characters used, more the score.

Also, it's worth mentioning that when your visual match with the target image is low, reducing character count won't give too much jump in score. Initially focus more on getting the match to 100%. Once you are on 100% match, the points start increasing more rapidly with decreasing character count. This exponential scoring is done to make it more rewarding for those who sweat it all out to get to extreme character counts!

Can I see solutions of other people?#

Since this is a game where players can play against each other for better rank, you cannot see the solutions of other players. That said, if you want to learn how other solutions, there are many ways to do so:

  • First of all, learn the basic tricks of CSS code-golfing on our Tips & Tricks page.

  • There are a lot of players sharing their solutions on Github, Youtube and our community forum. Just search for "CSSBattle solutions".

  • There are some "open" targets in each battle (after battle #12) in which top solutions are open for everyone. Eg. Target #62 - Sunset.

What environment are solutions evaluated in?#

Submitted code solutions are rendered in a headless Chromium browser on a Ubuntu 18.04 server.

Your code is rendered as it is without any modification and the browser settings are all set on default.

There might be slight differences in how different browsers render your code in the game preview. Hence till the time we find a way a reliable way to normalize these differences, we recommend playing on Chrome, Chromium, Brave or Safari browser (these are the ones we have tested).

How do I make use of friends?#

With Friends, you can now choose who you want to see in the leaderboards and see your standings among them (alongside global players).

To add friends:

  • Visit your friend's profile and click on the "Add to Friends" button.
  • Go to any page with a leaderboard and check "Friends Only" at the top. Now all the leaderboards will show your standings among just your friends.

Note: Adding someone as a friend sends them a notification so they can add you back!

Still have a question? Don't hesitate to ask it on our Community forum or tweet out to @css_battle