使用iframe将CSS媒体查询应用于块元素 [英] Using iframe to apply CSS media queries to block elements
问题描述
我只是坐在一些网页设计和思考嘿，如果我们可以应用CSS媒体查询阻塞元素不会是好的（即 div ，部分等等）？
真的，如果我们能够做出一些令人惊叹的流体布局有这个功能。在这篇文章中，我将使用一个简单的社交插件，我将能够实现到任何我的页面上的侧边栏，这将是能够流动的基于它的父div大小。这很方便，所以我可以调整我的小部件的大小，无论是实现到一个500px列或300px列，所以我不必编写每个布局实现的特定样式表。
设计
> = 500px< 500px
_______________________________ ____________________
| | | |
____________________ ______ ______
| | | | | |
|喜欢脸书| | ICON | | ICON |
| ____________________ | | ______ | | ______ |
____________________ ______ ____________________
| | | | | |
|关注TWITTER | | ICON | |喜欢脸书|
| ____________________ | | ______ | | ____________________ |
______
| |
| ICON |
| ______ |
____________________
| |
|关注TWITTER |
| ____________________ |
HTML标记
<
< div class =widget clearfix>
< div class =social>
< div class =social-right> ICON< / div>
< div class =social-left>像在Facebook上< / div>
< / div>
< div class =social>
< div class =social-right> ICON< / div>
< div class =social-left>在Twitter上关注< / div>
< / div>
< / div>
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也可以在不触发整个页面重新加载的情况下重新加载，这意味着自动更新小部件
SEO
- 我确定Google不讨厌使用iframe的人，但我可能错了。
- 由于实际的网页信息不会在iframe中，这些打包的块，我不认为他们是对SEO的损害，因为它们内的内容不是实际页面内容的一部分。
- 由于边栏对整体页面内容没有影响，iframe可以在运行时动态创建。这可能是实施它的最佳方式，但我想听听你的想法。
缺点
- 在将新布局应用到页面时，需要使用Javascript将父级iframe调整为页面内容。
在回答之前，请注意，我从来没有使用iframe的任何用户，除了使用某些第三方应用程序使用它，但现在看看这个，我不看到很多不使用它们的原因。我知道使用CSS元素媒体查询将是完美的，但我不认为这是即将实施。
我希望听到更多的因为我绝对不是SEO的专家，并不经常（实际上，我从来没有）使用iframe。
当搜索引擎抓取您的网站时，iFrame的（及其来源）会被记录，但很可能他们不会与该网页一起抓取。如果您拥有绝对重要的内容，则归属于该特定网页，请将其保留在iFrame之外。
iFrame的内容仍会抓取，不会与搜寻器在网页上找到的信息集中;它将是它自己的实体。它还会将该内容归因于从中提供内容的网站或网页。
此外，不要让HTML5中引入的无缝属性愚弄你。它不会改变iFrame的工作原理，只是改变了它的演示方式。
它是什么？数据有多重要？如果你只是想使用iFrame来呈现社交媒体的链接，正如你的例子中所述，你应该能够使用iFrame而没有消极的影响。
但是，如果您将iFrame用于样式目的，并且需要的重要内容归入您所在的网页，我会找到另一种方式来呈现内容。
因此，在您的示例中，使用iFrame专门用于社交媒体链接，我会说使用iFrame以获得媒体查询的好处是可以接受的。
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.
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.
这篇关于使用iframe将CSS媒体查询应用于块元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
