A webcomic about CSS. Coded in CSS.


2023 is CSS year

This year of 2023 has been fantastic for CSS development. It seemed like JavaScript got all the love in the past, while CSS was relegated to a secondary role, even when it is an essential part of the Web.

But 2023 has broken that tendency. We get a new feature definition or browser supporting a new (or old) property almost weekly. And it is incredible... until it won't happen. And it will happen that CSS retakes the back seat, and JavaScript gets back all the attention sooner rather than later.

Let's enjoy this time and hope that the tendency slows down progressively so we can keep getting more and more features—just my two cents.

Originally posted on the Patreon page.

Published on

Red Border

Mafalda was a comic by Argentinian cartoonist Quino that ran in the 1960s and 1970s, and that became incredibly popular in the 20th century, and well into the 21st century.

Quino and Mafalda are a great source of inspiration. I already did a cartoon inspired by Mafalda), and that was the case for today's comic, too! In the original, the little girl Mafalda looked at the sun amazed by how it's the same sun that inspired Pasteur, Bach, Shakespeare... and begs the sun to spread that same inspiration.

The idea is the same, but instead of a little girl being amazed by the sun, it's an undefined character/developer amazed by the typical red border that is used at times to debug in CSS (and that was part of this cartoon or this other cartoon). This could be the same red border that helped many other good developers learn and grow, so the character asks for inspiration to keep growing.

While a red border can be helpful to highlight some issues with CSS (using outline instead of border, so the border doesn't mess with the element's size), there are better ways to debug CSS. The Developer Tools on the browsers have advanced considerably in the past few years, and provide more tools to analyze each element individually. You inspect the element, and the browsers provide information about the rules that apply to each element, which one takes precendence (and why!), etc. Ahmad Shadeed wrote a book about how to debug CSS, and goes into details and code on the best ways to do it.

A fun fact: I used text-wrap: balance in a CSS art for the first time. It may sound like something silly, but it made it super convenient to balance the text in the panels in a more natural way.

Published on

If it looks like a duck...

The Duck Test implies that the simplest conclusion is most likely correct. It is commonly phrased as "If it looks like a duck, swims like a duck, and quacks like a duck... it probably is a duck."

This cartoon is half tongue-in-cheek, half serious. Whenever I post a CSS drawing or a comic from comiCSS online, someone says, "CSS should not be used for drawing!"

Which is technically correct, but how accurate is it? In reality, CSS is a styling language but, for not being a graphic design/graphic/drawing language, it sure does have many features that graphic/drawing languages have: filters, masks, gradients, blend modes, clippings, etc...

I once drafted an article titled "Could CSS be the future of web imaging?" (which I never published as I never found the power to finish it). In the article, I compared CSS to SVG and Canvas. Many things have happened since I wrote it, and it has become partially outdated (things that happen when you don't finish the article when you should 😓)... maybe I'll finish it one day.

Going back to the "CSS should not be used for drawing," my answer is this new CSS drawing (I'm getting old and a bit stubborn).

Published on


This week's comic/cartoon is a "small" project that I had been planning for a while, and it took a little bit longer than expected to complete. It was inspired by a series of cartoons that I saw in Spanish satirical magazine El Jueves.

Some of the letters are interactive (like the "R for resize") and some are animated (like the "K for keyframes" or the "Q for quotes"). But that is not really shown on the static image version, so they may look a bit weird. You should check the live demo linked on the comic page.

miniature of today's comic with the ABCs of CSS
July 10's comic: ABCs of CSS

As always, it is coded in HTML and CSS (although this time I did it with SCSS instead of native nesting because I found some issues, then exported the compiled CSS). You can check the source code from the demo, and change the font-size of the article on line 27 to make the cartoon larger and easier to read. (If you make it too small, you may hit a bug with mix-blend-mode on Chrome.)

I had in mind do the "ABCs of CSS Art" and the "ABCs of HTML", but seeing how much this one took me, maybe I should chill on those a little (although I already started the CSS Art one). We'll see how that goes.

Published on

Coffee Styling Sheet: Coffee as a CSS Color

They say developers could work only for coffee. I don't think that's true (but maybe not too far either). So this week's cartoon will mix two of my favorite things: coffee and CSS. And in particular, I will focus on CSS colors and how different types of coffees can be represented similarly to CSS colors.

We all know about RGB, Hex (also RGB), and HSL (which, funny thing, is also RGB). And new color formats have popped up in the CSS standard: L*a*b*, LCH, CMYK, HWB, OKLCH... So many people have asked me, "Why do we need so many color formats in CSS?" And that is a fair question that I will try to answer with today's cartoon.

And I will do it with the help of an existing CSS color function: HWB. Although HWB stands for Hue-Whiteness-Blackness, I modified the letter meanings (just) a little to fit my purpose:

After this long introduction, finally, here's today's cartoon:

Cartoon titled 'Coffee Style Sheet' with different types of coffee described as CSS colors. Black coffee is hwb(0 0 100%), Americano is hwb(50% 0 50%), Lungo is hwb(50% 0 50%), cafe au lait is hwb(0 50% 50%), latte is hwb(0 66% 33%), macchiato is hwb(0 33% 66%), cappuccino is hwb(0 66% 33%), espresso is hwb(0 0 33%), and 'Need more coffee!' is hwb(0 0 0).
I probably should add a description at the top explaining what HWB stands for...

Note: I did a secondary version of this cartoon without the description (I find it cleaner).

While I like the idea, it is limited: how about if we want a mocha? Mochas have chocolate and hwb() does not have a way to represent chocolate. It's only water, milk, and coffee. With those three basic ingredients, we only get to create the coffees on the infographic and some more (cortado, café bombón, or galão, to name a few). Still, we are missing a ton more: Irish coffee, espresso romano, marochino, etc., and we cannot create them with just water, milk, and coffee.

Even for the ones in the cartoon, my newly created hwb() function is not enough. For example, check the cappuccino: it is 66% milk and 33% coffee. It seems misleading that it has the same composition as a latte, but they are not the same: in a cappuccino, the milk is half steamed and half foamed.

detail of the previous cartoon showing latte and cappuccino along with mocha

It would be nicer if we had a different way to express those details. And that's what happens with CSS colors too! We have been using RGB for a long time, but RGB is limited. The CSS Color Module Level 4 introduced new ways of writing colors that modernize the web and bring a world of possibilities: Lab, LCH, OKLCH, CMYK, the color() function... and those color spaces offer more options than the standard RGB.

In the case of a mocha, we are missing the chocolate (which is not an option in HWB)... so why not use LCH instead?

Now we could use that function to do lch(20% 40% 40%) and get a nice Mocha. And notice how some of the coffees in the chart can be defined with LCH (basically all except the Americano and Lungo.)

And same thing happens to the CSS colors: some color functions will allow you to create more vibrant colors than others, and some will be easier for the computer or more straightforward for humans. Some overlap is expected, and that's completely normal. Pick the best color format for your project needs, and enjoy. It is an exciting time to play with CSS colors.

If you want to read more about color functions, check directly the CSS Color Module 4 (and level 5 for some great new color functions!). They are surprisingly straightforward. You can also check an article I published a couple of years ago... but be warned that it is a bit outdated as the standard has changed continuously since I wrote it.

Published on

How is comiCSS drawn?

Some people have asked me: "How is comiCSS drawn?" comiCSS cartoons are coded in HTML and CSS, but how? Is it an AI generating the code? No... although it would be interesting to see the results. An opportunity for further testing. Is it premade things? No, although I must admit that sometimes I copy-paste from previous strips to save time, most of the cartoons and comics are coded from scratch.

I have shared some of the drawing processes on this YouTube playlist:

There are more videos on how the cartoon is drawn. You can see them linked at the bottom of the cartoon/comic. I could put the link in a more visible location so it is more apparent that there is a video with the recorded process.

I have to admit that this process is tedious and slow (each cartoon takes 30-60 minutes), and I've been toying with the idea of streamlining the process by working on a mini CSS utility-class library that would allow me to create characters with different expressions, just adding classes. The main issue: I still need to develop a fully defined style or set of characters. I could do it easily with the undefined character from the first comic (which is reappearing but not recurring enough to make it its own library?); or even with the Batman/Robin characters (but there are only so many gags that can be done with those two... without getting a cease-and-desist letter from DC.)

Creating that library will save me time in the long run and allow me to produce comics faster, but the characters may not be polished enough for it. So we'll see how it goes.

Published on


Rap battling (or battle rap) is a type of rap performance in which two or more rappers sing against each other (generally including some insults/attacks). Today's comic plays with the homophones Rap and Wrap to make a silly joke with Flexbox and the flex-wrap property.

A flex container will lay out the content in a single line by default. This may be Ok, but if the items' size exceeds the container, they will be squeezed or they will overflow. So instead, we may want to get the content into multiple lines. This is where flex-wrap comes into action.

This property defines if a flex container will be single-line or multi-line (depending on the amount and size of the flex items), and in the case of multi-line, it defines how the items will be stacked after wrapping.

flex-wrap has three main values:

The cross-start and cross-end part may sound complicated, but it is easier than what it sounds. It depends on the direction of the flex: if the direction is horizontal ("row"), then the wrapped elements will stack vertically (in rows); and if the direction is vertical ("column"), the wrapped elements will stack horizontally (in columns).

Let's check an example with a flex container with 5 items with a defined width. By default, the value of flex-wrap is "nowrap", so the flex items will overflow the container (I put it as an image to avoid the annoying horizontal overflow it would create):

a box with 5 numbered boxes inside, the last of them overflows the container

Now, if we change the code to set a value of "wrap" for flex-wrap, when the flex items would overflow the container, they wrap into a new row instead (live demo):

1 2 3 4 5

But if we set flex-wrap to "wrap-reverse", then the direction of the wrapping is the opposite: instead of getting into a new row, the wrapped elements push the others into a new row.

1 2 3 4 5

One last example with the flex-direction set to "column." In this case, the elements organize vertically in columns, so when they wrap, they do it in columns instead of rows:

1 2 3 4 5

I hope these examples were useful and that you enjoyed today's comic. Learn more about flex-wrap on the following sources:

Published on

An Apple A Day Alternative

They say an apple a day keeps the doctor away... But does that apply to web development and CSS, too? Today's cartoon tried to answer that question. I also coded an alternative version, a little bit more educational, highlighting the parts of the box model using the same drawing:

A man in the position of the lotus with his personal space marked with a dashed line, a doctor is far away unable to reach the person. The person is labelled 'content', the space between the person and the dashed line is labelled 'padding', the dashed line is labelled 'border', the space between the dashed line and the doctor is labelled 'margin'.
The box model explained with a cartoon?

Hopefully, it is clear. Although I must admit, the dashed line marking the personal space is a bit weird and it can be confusing (as it may seem like it's a force-field and the margin is actually between the person and the border).

Published on

CSS Christmas Carol

On the twelfth day of Christmas, my CSS sent to me...

Twelve image-renderings,
Eleven pixels padding,
Ten spans a-flexing,
Nine letter-spacing,
Eight divs with vmin,
Seven none font-kernings,
Six videos :playing,
Five :not() with :is()!
Four border-width,
Three place-self,
Two rules with :has(),
And a column in a red grid.

Published on

Keyboard Trap vs. Focus Trap

A keyboard trap is a bad UI pattern in which a user can get into a component or element of our application using the keyboard, but it is impossible getting out of it just by using the keyboard. Not to be confused with a focus trap, which is basically the same, but with a keyboard exit (it may be a close button, or pressing Esc, or something like that.)

As you may imagine, a keyboard trap is a HUGE accessibility issue. In contrast, a focus trap can be extremely helpful and positive for usability and accessibility (e.g., a modal in which the focus is trapped until the user presses a button.)

I've had the idea of drawing a trap for keyboards for a while, but I didn't know if it would be clear what it was. I'm still not 100% convinced about it. I like the idea, but I'm not 100% sold on this implementation. I settled for this text (which may remind of a previous comic strip), but before I considered another option about testing and trying to catch keyboards with a trap. I discarded that option because if felt too "technical" and not too good of an idea.

Published on

Image Format Decision Tree

I published a more serious article about today's cartoon. It still includes some tongue-in-cheek questions, but the idea was to make it less of a joke and more of an useful thing for people:

A decision tree titled 'What image format should you use in your project?'
A more serious version of the decision tree

The article also includes additional information on why some formats should or should not be used, when we should consider using a video instead of an animated image, and a love letter to BMP... well, not that last part. But I miss BMP.

Published on

The Pomodorito Technique

You may have heard about the Pomodoro Technique, a time management method that consists of repeating work and break intervals to help keep focus while getting some needed rest. It is pretty popular in the US among tech employees.

The origin of the name is funny: the method's creator used a tomato-shaped kitchen timer to control the work/break blocks (Pomodoro means tomato in Italian). So that is why each work block is called a "Pomodoro."

The method is simple. First, you pick a task and then:

  1. Work for 25 minutes.
  2. Take a 5—10 minute break.
  3. Repeat steps 1—2 four times.
  4. Take a more extended break of 20—30 minutes.

I find this a productive time management method. I follow it often and keep a couple of timers at my desk while I'm working (although they are not tomato-shaped.)

The Pomodorito Technique

Alternatively to the Pomodoro Technique, I introduce you to the tongue-in-cheek Pomodorito Technique (not Lay's affiliated):

  1. Eat Doritos for 25 minutes.
  2. Work for 5 minutes.
  3. Repeat steps 1—2 four times.
  4. Take a more extended break to go to the store and buy more Doritos (you probably ran out at this point).

Alternatively, if you have a big stash of Doritos at home, you may use step 4 to take a nap. All that eating is exhausting, and some nice sleep will make digestion easier.

Graphic comparing the pomodoro and pomodorito techniques side-by-side
Not Lay's affiliated

While the Pomodorito Technique is more of a joke, it may be a good burnout index. If you find yourself trying the Pomodoro Technique but quickly spiral into the Pomodorito Technique, it may be about time to take some vacation... or start looking for a new job!

Article originally published on

Published on

Four combinators walk into a bar...

Today's comic strip is about CSS combinators (and the universal selector). But, what are they? A CSS combinator is something that, combined with the selectors, gives them a relationship.

There are five CSS combinators (but one is at risk of not making the cut to the standard):

The universal selector (*) selects everything (and that's why everyone in the bar cheers when the next round is on the universal selector.)

This was just a simple introduction to the CSS combinators. For more information, check the following MDN resources:

Published on

Mafalda-inspired cartoon

There is a classic Mafalda comic strip (by Argentinian cartoonist Quino):

Cartoon showing a little girl (Mafalda) saying (in Spanish): 'La sopa es a la ninez lo que el comunismo es a la democracia' (translation: soup is to childhood what communism is to democracy)
Image copyright by Quino

"Soup is to Childhood what Communism is to Democracy!" is a political message (cartoons can/should be political at times) that could have different interpretations depending on the perspective.

Based on it, I drew something simple. And because it uses CSS variables (custom properties), it is easy to change the colors to something different:

Cartoon showing a man in front of a computer saying: 'My CSS code is to Web Development what Communism is to Democracy'
A little homage to Mafalda and Quino

But I liked the black-and-white version betters, so I published that one. Also, I added more details before publishing it on Monday (the table and t-shirt could use some extras).

Here is a video of how this cartoon was drawn from scratch to its (almost) final form:

Published on

Accent Color

Today's comicstrip is about accent-color, so let's talk about it on today's blog post.

As the comic strip indicates, accent-color has nothing to do with the ability to write colors in different languages. What it does, when supported —and it is widely supported now—, is allowing setting up the "primary color" for some HTML elements and form controls.

This CSS property allows for a little standardization of the styles. In the past, each browser would style the HTML elements differently (they still do); but now, developers have some control over how they will be displayed (at least, on the color.)

Browsers allow to set up an accent-color in the following HTML elements:

Published on

...So it begins

I've been doing CSS art for a while already. So it was a matter of time that I combined the CSS art hobby with something I also enjoy, like graphic novels, comic books, or comic strips.

This website is my first attempt at building a place to put all the CSS cartoons I came up with and create an actual series. Hopefully, the comic strips will come weekly, but that will depend on many factors.

I have to thank Temani Afif for the encouragement to put this site together... and for coming up with the name comiCSS. I probably would have delayed the creation of this website until I got a good name, and he came up with a great one in no time.

Let's begin. Ad astra!