Using iframe to apply CSS media queries to block elements

Question

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.

Antitype

Answer 1

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.

Doublebank

Adding this as the new accepted answer. At the time, Michael Irigoyen's answer was the most helpful, but CSS container queries is the answer of the future. – Antitype

Answer 2

When it comes to SEO, content is king.

When search engines crawl your site, iFrame's (and their source) are noted, but it is likely they will not be crawled with the page. If you have content that is absolutely vital it be attributed to that specific page, keep it out of an iFrame.

An iFrame's content will still be crawled, but it's content won't be lumped in with the information the crawler finds on the page; It'll be it's own entity. It will also attribute that content to the site or page the content is being served from.

Also, don't let the seamless attribute introduced in HTML5 fool you. It doesn't change how an iFrame works, it just changes it's presentation.

What it boils down to is how important is the data? If you are simply wanting to use an iFrame for stylistic purposes to present links to social media, as you have outlined in your example, you should be able to get away with using an iFrame without a negative affect.

However, if you're using an iFrame for stylistic purposes and have important content that needs to be attributed to the page you're on, I would find another way to present the content.

Therefore, in your example, of using an iFrame specifically for social media links, I would say the usage of an iFrame to get the benefit of media queries would be acceptable.

Nammu

Answer 3

A much better solution that is unfortunately not yet validated would be to use media queries with scoped styles. Source: http://davidwalsh.name/scoped-css

Garald

After reading a bit on scoped css styles, it appears there still isn't a way to make the css media query apply based on parent width other than page width. It only allows for us to only apply that style to elements within the scope, but still based off the page width. – Antitype