html – 使用iframe将CSS媒体查询应用于块元素

我只是坐在一些网页设计上思考“嘿,如果我们可以将CSS媒体查询应用于块元素(即div,section等),那不是很好吗？”

说真的,如果我们能够拥有这个功能,我们可以制作一些非常令人惊叹的流畅布局.在这篇文章中,我将使用一个简单的社交插件,我可以将其实现到我的任何页面上的侧边栏中,这些页面可以基于它的父div大小而流畅.这很方便所以我可以调整我的小部件的大小,无论它是实现为500px列还是300px列,因此我不必为每个布局实现特定的样式表.

该设计

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

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

HTML标记

<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>

CSS

现在为css元素媒体查询部分.这不是有效的CSS,但是我想要实现的.基本上只是一个基于父元素而不是整个浏览器宽度的css媒体查询：

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

这将带来无限的好处,并且可以轻松创建在多个页面上实现的页面块.现在我已经让你们快速解决问题,我的问题就出现了：

通过iframe实现这个可行的解决方案吗？

合理的我的意思是：

>语义正确
>对SEO没有损害

iframe可以拥有自己的样式表,而css媒体查询则基于iframe维度,而不是浏览器维度.

我的想法

语义

>由于iframe元素存在于HTML5中,甚至添加了属性,因此我看不到iframe标记很快就会被弃用.
>无缝标签真的有助于使其成为可行的解决方案,因为样式将从父文档继承.现在我们需要将这些样式重新包含(或注入它们)到页面中.
>也可以重新加载iframe而不会触发整个页面重新加载,这意味着没有XHR,自动更新小部件将非常容易.

SEO

>我很确定Google并不讨厌使用iframe的人,但我可能错了.
>由于实际的页面信息不在iframe中,只有这些打包的块,我不认为它们对SEO有害,因为它们中的内容不是实际页面内容的一部分.
>由于侧边栏对整体页面内容没有影响,因此可以在运行时动态创建iframe.这可能是实现它的最佳方式,但我想听听你的想法.

缺点

>只要将新布局应用于页面,就需要Javascript将父iframe的大小调整为页面的内容.

在回答之前,请知道除了使用一些第三方应用程序使用iframe之外,我从来没有一直倡导使用iframe,但现在看看这个,我没有看到很多理由不使用它们.我知道使用css元素媒体查询是完美的,但我不认为它会很快实现.

我希望能听到你们所有人的更多信息,因为我不是SEO的专家,而且经常(实际上,我从来没有)使用过iframe.