I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the element itself. So if an element is 1,000 pixels wide with padding-top: 50%, …
Say you wanted to put the CSS-Tricks website in an <iframe></iframe>. You’d do that like this:
<iframe src="https://css-tricks.com"></iframe>Without any other styling, you’d get a rectangle that is 300×150 pixels in size. That’s not even in the User Agent …
A web page isn’t locked in stone just because it has rendered visually. Media assets, like images, can come in and cause the layout to shift based on their size, which typically isn’t known in fluid layouts until they do …
Say you have an image you’re using in an <img /> that is 800×600 pixels. Will it actually display as 800px wide on your site? It’s very likely that it will not. We tend to put images into flexible container …
Rachel Andrew says that the CSS Working Group designed an aspect ratio unit at a recent meeting. The idea is to find an elegant solution to those times when we want the height of an element to be calculated in …
Rachel hooks us up with what the CSS Working Group is talking about:
scrollbar-width and scrollbar-color. The best we have right now is proprietary WebKit stuff.
If you need an aspect-ratio sized <div></div> (or any element that can have children), you can do it. Perhaps the cleanest way is a custom-property-sized pseudo-element that pushes the correct minimum height through padding-based-on-width.
But media elements like <img …
I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn’t particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz’s Intrinsic …
The web is a fluid place. Different sized screens, yadda yadda yadda. Fortunately for us, the web is ready for it. Text wraps. CSS gives us control over how to size things. What we don’t get (easily, anyway) is a …
