TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

What CSS minifiers also leave behind

252 点作者 remy_luisant大约 8 年前

15 条评论

josephg大约 8 年前
The scientific notation one is a bug. Scientific notation isn&#x27;t part of the CSS spec[1], and its not supported in all browsers.<p>I learned this one the hard way a few months ago. We ran into a flexbox bug in one browser which we worked around by adding some-rule: 0.0000001px instead of 0px. However, our minifier collapsed that using scientific notation, which triggered a rendering issue in a <i>different</i> browser due to the out-of-spec CSS. The whole adventure left me feeling like I&#x27;d travelled back in time.<p>[1] <a href="https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;CSS21&#x2F;syndata.html#numbers" rel="nofollow">https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;CSS21&#x2F;syndata.html#numbers</a>
评论 #14040691 未加载
评论 #14041518 未加载
评论 #14040513 未加载
remy_luisant大约 8 年前
Author here.<p>Wow. #1 on HN. Wow.<p>I&#x27;d usually hang around a bit more, but I&#x27;m really tired. I posted this past my midnight. 00:51 now, and I&#x27;m fading fast.<p>Thanks for all the love, everyone. I&#x27;ll come over tomorrow (12 hours from now, or so) to answer any questions or to pick up any corrections.
评论 #14041383 未加载
cornedor大约 8 年前
&gt; I&#x27;m guessing that at nine nines that is pretty much a one anyway and it would not even change a single pixel on the screen.<p>There used to be a bug with flex-wrap: wrap; where an element would wrap to the next line while it should have fit. You could fix it by instead using width: 25%; use width: 24.999999%; so it would be 25% on the screen but it would fix the problem so it didn&#x27;t wrap to the next line. So you should look out with this.
评论 #14043459 未加载
评论 #14045475 未加载
pasta大约 8 年前
This looks like a fun project indeed!<p>Unfortunately every time I read something about minifiers I got the feeling that people are optimizing the wrong problem.<p>If you gzip data over the line it&#x27;s already compressed. So minifying your stuff will only help you a little.<p>The problem is on the client side. You can compress what you like but if the browser starts dropping frames because it has to compile&#x2F;handle a ton of Javascript and CSS then minifying doesn&#x27;t help the end user.
评论 #14041032 未加载
评论 #14040536 未加载
评论 #14040660 未加载
评论 #14040983 未加载
评论 #14040911 未加载
评论 #14040734 未加载
评论 #14040754 未加载
评论 #14040718 未加载
评论 #14042227 未加载
评论 #14040542 未加载
replete大约 8 年前
Don&#x27;t mean to squash any enthusiasm, but these types of 1byte optimization savings don&#x27;t really have real-world benefits due to over-the-wire compression like gzip and Brotli.<p>A more interesting problem to solve, I think, is that of optimising CSS rules for browser rendering.
评论 #14041342 未加载
评论 #14041337 未加载
评论 #14042987 未加载
Silhouette大约 8 年前
Here&#x27;s the same author&#x27;s earlier post on this subject, &quot;The missed chances: What minifiers leave behind&quot;, from last week:<p><a href="https:&#x2F;&#x2F;luisant.ca&#x2F;css-opts-survey" rel="nofollow">https:&#x2F;&#x2F;luisant.ca&#x2F;css-opts-survey</a>
评论 #14042118 未加载
ovao大约 8 年前
crass is doing some really wonderful stuff here -- I&#x27;m impressed!<p>It&#x27;s very interesting, however, that no one minifier is a consistent winner in these test cases, and that running CSS through multiple minifiers is actually, potentially, not all that crazy. (The very debatable <i>real</i> value in doing that notwithstanding.)
评论 #14040531 未加载
评论 #14042963 未加载
评论 #14040928 未加载
mercer大约 8 年前
I have a slightly-related question for those of you familiar with Webpack, css modules (css-loader&#x2F;style-loader), and perhaps React as well: is there any reason not to use the &#x27;default&#x27; approach where the styles for the components are simply inserted in a &lt;style&gt; (with unique, generated classnames)?<p>To be clear: I don&#x27;t mean philosophical reasons. I personally love letting javascript deal with the &#x27;cascading&#x27; part and I don&#x27;t have a problem with the idea of having styling embedded in the final page.<p>What I&#x27;m curious about is if this has any kind of negative impact on performance, bandwidth, etc. Because the CSS is loaded on the component level, and because Webpack 2 does tree shaking, the page will be guaranteed to only contain CSS for the components that are on the page. And if I&#x27;d &#x27;lazy-load&#x27; parts of the app, I&#x27;d get that benefit for my CSS as well with no extra effort.<p>On the other hand, any benefits of having a compiled (and hopefully cached) bundle.css are offset by the need for an extra request for the css file, as well as the very likely situation that there&#x27;ll be a bunch of unused css in that bundle.<p>Am I missing some drawback to the above-mentioned approach?
评论 #14043034 未加载
评论 #14042826 未加载
评论 #14041008 未加载
tambourine_man大约 8 年前
Didn&#x27;t know about all of those units. q, mm, cm… scientific notation?!<p>Also didn&#x27;t know one could use counters already. Browser support is great. I thought it was still under approval.<p>Amazing stuff, thanks
评论 #14043002 未加载
fleetfox大约 8 年前
Can someone provide some hard numbers from real projects as to is it really worth it assuming we can gzip&#x2F;brotili?
评论 #14040664 未加载
评论 #14045530 未加载
评论 #14043084 未加载
wyldfire大约 8 年前
If folks tend to use some higher level abstraction (isn&#x27;t that what SASS and LESS are?) maybe it makes sense to provide a new way to encode the information in CSS. Similar to how WASM is supposed to be easier to parse than JavaScript, right?
buster大约 8 年前
I liked the writing style, fun read AND very informative!
评论 #14045531 未加载
WhitneyLand大约 8 年前
Are there any good tools for deobfuscating css&#x2F;js if you want to study a technique used on some web page?
评论 #14043088 未加载
评论 #14041740 未加载
评论 #14042388 未加载
bgrohman大约 8 年前
I like your site design. Very clean and readable.
评论 #14045511 未加载
cperciva大约 8 年前
<i>I&#x27;m for hire now. Le Sigh. Email&#x27;s in the footer.</i><p>Remy: I&#x27;d suggest posting a CV and linking to it from this post. I looked and couldn&#x27;t find one anywhere on your site; you&#x27;ll get a lot more qualified interest if people can find out more about you than just a few blog posts.
评论 #14040489 未加载
评论 #14045830 未加载
评论 #14040923 未加载