16 Jul

PSA: Yes, Serverless Still Involves Servers.

You clever dog. You've rooted it out! It turns out when you build things with serverless technology you're still using servers. Pardon the patronizing tone there, I've seen one-too-many hot takes at this point where someone points this fact out and trots away triumphantly.

And yes, because serverless still involves servers, the term might be a bit disingenuous to some. You could be forgiven for thinking that serverless meant technologies like web workers, which use the client to …

The post PSA: Yes, Serverless Still Involves Servers. appeared first on CSS-Tricks.

13 Jul

The div that looks different in every browser

It's not that Martijn Cuppens used User Agent sniffing, CSS hacks, or anything like that to make this quirk div. This is just a plain ol' <div> using the outline property a la:

div { inset 100px green; outline-offset: -125px; }

It looks different in different browsers because browsers literally render something differently in this strange situation.

I happened upon Reddit user spidermonk33's comment in which they animated the offset to understand it a bit more. I took that …

The post The div that looks different in every browser appeared first on CSS-Tricks.

13 Jul

Scrolling Gradient

If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that.

But, what if you don't want a perfectly vertical gradient? Like you want just the top left corner to change color? Mike Riethmuller, re-using his own technique from the CSS-only scroll indicator (A-grade CSS trickery), did this by overlapping two gradients. The "top" …

The post Scrolling Gradient appeared first on CSS-Tricks.

09 Jul

Little Tip: Draw Your Grid in ASCII in Your CSS Comments for Quick Reference

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.

02 Jul

Writing Good Support Requests

My take on trying to be helpful to a support staff.

One bit is just as relevant for learning development:

Writing out a ticket will help you figure out the problem.

Sometimes when you have to take a second to collect your thoughts and explain something, the problem will become clear and maybe even the solution. Oftentimes, a bug is a bug and just needs to be fixed — but sometimes your support ticket might actually be something you can …

The post Writing Good Support Requests appeared first on CSS-Tricks.

02 Jul

One-Offs

There is this sentiment that you don't design the homepage of a site first. For most sites, it's an anomaly. It's unlike any other page and not something to base the patterns you use for the rest of the site or help inform other pages.

You might call it a one-off.1

One-offs are OK! A world without one-offs is very boring. But a site chock-full of one-offs leads to familiar problems: inconsistency and non-reusable CSS that leads to …

The post One-Offs appeared first on CSS-Tricks.

29 Jun

Fitting Text to a Container

There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count the ways.

Magic Number it with viewport units

If you set type with vw (viewport width) units, you can find an exact number where the text pretty closely fits the container and doesn't break as you resize. I'd call this …

The post Fitting Text to a Container appeared first on CSS-Tricks.

28 Jun

How to create a logo that responds to its own aspect ratio

One of the cool things about <svg> is that it's literally its own document, so @media queries in CSS inside the SVG are based on its viewport rather than the HTML document that likely contains it.

This unique feature has let people play around for years. Tim Kadlec experimented with SVG formats and which ones respect the media queries most reliably. Sara Soueidan experimented with that a bunch more. Jake Archibald embedded a canvas inside and tested cross-browser compatibility that …

The post How to create a logo that responds to its own aspect ratio appeared first on CSS-Tricks.

28 Jun

How to create a logo that responds to its own aspect ratio

One of the cool things about <svg> is that it's literally its own document, so @media queries in CSS inside the SVG are based on its viewport rather than the HTML document that likely contains it.

This unique feature has let people play around for years. Tim Kadlec experimented with SVG formats and which ones respect the media queries most reliably. Sara Soueidan experimented with that a bunch more. Jake Archibald embedded a canvas inside and tested cross-browser compatibility that …

The post How to create a logo that responds to its own aspect ratio appeared first on CSS-Tricks.