Yearly Archives: 2018

Over the past six months, I’ve become increasingly interested in the topic of web sustainability. The carbon footprint of the Internet was not something I used to give much thought to, which is surprising considering my interest in environmental issues and the fact that my profession is web-based.

The web in a warming world

As a brief recap, I attended MozFest in London last year. In between sessions, I was scanning a noticeboard to see what was coming up, and …

The post Delivering WordPress in 7KB appeared first on CSS-Tricks.

Mark this down as one of the strangest things I’ve seen in a good long while. Nicholas Jitkoff has made a tool called itty.bitty that creates websites with all of the assets being contained within their own link. You can create a website without any HTML or CSS resources at all because it’s all been base64 encoded into the URL itself.

Take this crazy looking URL, for example:

https://itty.bitty.site/#How_it_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

This link contains all of the HTML and CSS that makes …

The post itty.bitty appeared first on CSS-Tricks.

Say you declared a grid like this:

body {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content auto min-content;
}

This depends on content, for sure, but how it’s likely to play out is like this:

+---+-------------+
| | |
| | |
+-----------------+
| | |
| | |
| | |
| | |
| | |
| | |
+-----------------+
| | |
+---+-------------+

That’s really easy to draw out quick in ASCIIFlow Infinity.

Now you want …

The post Little Tip: Draw Your Grid in ASCII in Your CSS Comments for Quick Reference appeared first on CSS-Tricks.

The CSS Paint API is extremely exciting, not only for what it is, but what it represents, which is the beginning of a very exciting time for CSS. Let’s go over what it is, why we have it and how to start using it.

What is the CSS Paint API?

The API is just one part of a whole suite of new specifications all under the umbrella of what is known as CSS Houdini. Houdini, in essence, gives developers …

The post The CSS Paint API appeared first on CSS-Tricks.

This is the third and final part in a three-part series about using CSS grid safely in Internet Explorer 11 (IE11) without going insane.

In Part 1, I covered some of the common misconceptions that people have about IE11’s native CSS grid implementation. In Part 2, I showed the world how easy it actually is to write IE-friendly CSS grid code.

Today, I’m going step away from CSS grid for a moment to show you a flexbox technique …

The post CSS Grid in IE: Faking an Auto-Placement Grid with Gaps appeared first on CSS-Tricks.