Search code examples
htmlcssseomedia-queries

Using iframe to apply CSS media queries to block elements

I was just sitting working on some web design and thinking "Hey, wouldn't it be nice if we could apply CSS media queries to block elements (ie. div, section, etc.)?"

Seriously, we could make some pretty stunning fluid layouts if we were able to have this functionality. In this post I'll use a simple social plugin that I would be able to implement into a sidebar onto any of my pages that would be able to be fluid based on it's parent div size. This is handy so I would be able to resize my widget whether it is implemented into a 500px column or a 300px column so I wouldn't have to program specific stylesheets per layout it's implemented in.

The Design

            >=500px                          <500px
 _______________________________       ____________________
|                               |     |                    |
 ____________________    ______               ______
|                    |  |      |             |      |
|  LIKE ON FACEBOOK  |  | ICON |             | ICON |
|____________________|  |______|             |______|
 ____________________    ______        ____________________  
|                    |  |      |      |                    |
|  FOLLOW ON TWITTER |  | ICON |      |  LIKE ON FACEBOOK  |
|____________________|  |______|      |____________________|

                                              ______
                                             |      |
                                             | ICON |
                                             |______|
                                       ____________________  
                                      |                    |
                                      |  FOLLOW ON TWITTER |
                                      |____________________|

The HTML Markup

<div class="widget clearfix">
  <div class="social">
    <div class="social-right">ICON</div>
    <div class="social-left">Like on Facebook</div>
  </div>
  <div class="social">
    <div class="social-right">ICON</div>
    <div class="social-left">Follow on Twitter</div>
  </div>
</div>

The CSS

Now for the css element media query part. This is NOT valid css, but is what I am wanting to achieve. Essentially just a css media query based on a parent element instead of the entire browser width:

.widget {clear:both;}
[class*=social-] {text-align:center;}
.widget(min-width:500px) {
  .social-left {overflow:hidden;}
  .social-right {float:right;}
}

This would have infinite benefits and would make creating page blocks to be implemented on multiple pages a breeze. Now that I've got you all up to speed on the problem, here comes my question:

Is implementing this through an iframe a plausible solution?

By plausible I mean:

  • semantically correct
  • not detrimental to SEO

An iframe is able to have it's own stylesheet and css media queries are based on the iframe dimensions, not the browser dimensions.

My Thoughts

Semantics

  • Since the iframe element is present in HTML5 and even has added attributes, I don't see the iframe tag becoming deprecated anytime soon.
  • The seamless tag would really help out in making this a viable solution since styles would be inherited from the parent document. For now we would need to re-include these styles (or inject them) into the page.
  • The iframe could also be reloaded without triggering a whole page reload which means auto-updating widgets would be quite easy without XHR.

SEO

  • I'm pretty sure that Google doesn't hate on people using iframes, but I could be wrong on that.
  • Since the actual page info would not be in an iframe and only these packaged blocks, I don't see them being a detriment to SEO since the content within them is not part of the actual page content.
  • Since the sidebar has no affect on overall page content, the iframe could be dynamically created at runtime. This may be the best way of implementing it, but I'd like to hear your thoughts.

Drawbacks

  • Javascript would be needed to resize the parent iframe to the page's content whenever a new layout is applied to the page.

Before answering, please know I have never been an advocate of using iframes for ANYTHING other than the uses some 3rd party apps use it for, but now looking at this, I don't see much of a reason not to use them. I know the use of css element media queries would be PERFECT, but I don't see that being implemented any time soon.

I hope to hear more from all of you since I am by no means an expert on SEO and do not often (actually, I never) use iframes.

Solution

  • CSS Container Queries (caniuse.com)

    Experimental media query to apply styles to specified container elements rather than the entire page. Currently implemented using the contain property and @container at-rule.

    Currently only available through chrome:flags on Canary.

    Container queries move us beyond considering only the viewport, and allow any component or element to respond to a defined container’s width. So while you may still use a responsive grid for overall page layout, a component within that grid can define its own changes in behavior by querying its container. Then, it can adjust its styles depending on whether it’s displayed in a narrow or wide container.