Skip to main content
CSS is fun and cool and I like it.
Article

Responsive Iframes

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 300x150 pixels in size. That's not even in the User Agent stylesheet, it's just some magical thing about iframes (and objects). That's almost certainly not what you want, so you'll often see width and height attributes right on the iframe itself (YouTube does this).

<iframe width="560"
  height="315"
  src="https://css-tricks.com"></iframe>

Those attributes are … Read article

Article

Native Lazy Loading

IntersectionObserver has made lazy loading a lot easier and more efficient than it used to be, but to do it really right you still gotta remove the src and such, which is cumbersome. It's definitely not as easy as:

<img src="celebration.jpg" loading="lazy" alt="..." />
Read article
Link

Introducing iframify

icon-link icon-logo-star icon-search icon-star