使用 Nth - CSS VS Jquery
是否有人会选择仅在 CSS 中使用第 n 个函数,而不是通过 jquery 应用它,因为它与 IE 更兼容。
它应该只是在 jquery 中完成并且从不在样式表中使用吗?
我希望这是有道理的,有人可以提供帮助。
干杯
Is there any reason why someone would choose to use the nth function within a CSS only rather than applying this through jquery where it's more compatible with IE.
Should it just be done within jquery to begin with and never used in a stylesheet?
I hope this makes sense and someone can help.
Cheers
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
不是。并非每个人都使用启用了 Javascript 的浏览器。此外,通过 Javascript 应用样式比 CSS 规则的速度慢,因为它需要运行脚本才能应用样式。
也就是说,使用 jQuery 为不支持它的浏览器提供 nth-child 兼容性可能是一个好主意。
No. Not everybody uses their browser with Javascript enabled. Also, applying styles via Javascript is slower than CSS ruled because it requires a script to run for the style to be applied.
That said, it could be a good idea to use jQuery to provide nth-child compatibility for browsers that don't support it.
您现在使用 jQuery/javascript 的原因是因为并非所有浏览器都支持
nth
css 选择器。例如,使用
:nth-child
... 没有 IE8 <= 支持:http://reference.sitepoint.com/css/pseudoclass-nthchild
但是,我会将其添加到 css 中以供将来使用,并在安装了一定数量的浏览器后删除脚本。
The reason why you would use jQuery/javascript now is because not all browsers support the
nth
css selector.For instance, with
:nth-child
... there is no IE8 <= support:http://reference.sitepoint.com/css/pseudoclass-nthchild
However, I would add it to the css for future use and get rid of the scripting once a certain # of browsers were on board.
当您不关心与旧版本 IE 的兼容性时,您可以仅在 CSS 中使用
:nth-child
。许多网站根本不需要在旧版 IE 中 100% 完美运行,尤其是当您考虑到
:nth-child
经常用于视觉效果,例如 斑马条纹 这并不重要。使用纯 CSS 比通过 jQuery 更快,尽管速度差异并不大:在不支持
:nth-child
的浏览器中,Sizzle 必须模拟它(速度很慢),而且没有办法做到这一点那。在支持:nth-child
的浏览器中,它会直接转到querySelectorAll
速度非常快。Selectivizr 是另一种选择 - 它仅在旧版本的 IE 中运行,并且使您无需手动编写实际的 jQuery 代码(
$('..:nth-child(2n)').addClass(..);
),所以当你开发的时候,需要写的就是CSS版本。You can use
:nth-child
in only your CSS when you simply don't care about compatibility with older versions of IE.Many sites simply do not need to work 100% perfectly in older versions of IE, especially when you consider
:nth-child
is often used for eye candy such as zebra striping which is not vital.Using plain CSS is faster than doing it through jQuery, although the speed difference is not huge: in browsers that do not support
:nth-child
, Sizzle must emulate it (slow) and there's no way around doing that. In browsers that do support:nth-child
, it goes straight toquerySelectorAll
which is very fast.Selectivizr is another choice - it runs in only older versions of IE, and saves you from having to manually write the actual jQuery code (
$('..:nth-child(2n)').addClass(..);
), so when you're developing, all that has to be written is the CSS version.CSS 对于这些操作来说速度更快。简而言之,它只是被解析并添加到元素中,但是如果您使用 jQuery 来实现此目的,则需要解析、执行额外的 JS、一些循环、函数调用...并不是说在小表上有任何明显的时间差异,但仍然。
使用 CSS 来实现它也方式要小。如果你确实需要支持IE,你可以随时检查使用的浏览器是否是IE(我认为jq支持这个?),然后回退到js。 (这消除了我的上述观点,但使用 css 仍然更好。)
CSS is faster for these operations. Put simply, it just gets parsed and added to the elements, but if you use jQuery for this, there is extra JS to be parsed, executed, some loops, function calls... Not that there's any noticeable time difference on small tables, but still.
It is way smaller to do it with CSS as well. If you really need to support IE, you could always check if the browser used is IE (I think jq has support for this?) and then fallback to js. (which eliminates my above point, but it's still better to use css.)
我可能会同时使用这两种方法 - 通过 CSS 规则(首选方式)和 jquery(选择性地用于不兼容的浏览器)应用它。希望随着标准合规性的提高,不再需要脚本解决方案。
I will probably use both - apply it via CSS rule (the preferred way) and also via jquery (selectively for non-compatible browser). Hopefully, with increasing standard compliance, the script solution will not be required.