Live data from Hacker News

Google recommends inlining small CSS

developers.google.com

61–70 of 143 posts

Re: Google recommends inlining small CSS

#62
post #24

var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'small.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); Seems like it's time for a defer attribute on .

Or, you know, put it at the bottom of the HTML since it will take 5ms between the moment where the browser receive and

It may take a lot longer than that, since the browser is parsing as it goes. A SCRIPT tag in the HEAD will run synchronously, blocking parsing of the page and delaying initial render. For a tiny script that defers work, this is not a problem. But you want to schedule the stylesheet to load ASAP, in case it is cached, so it's actually potentially a human-noticeable difference to get that function on the queue before the BODY begins parsing.

Re: Google recommends inlining small CSS

#63

Earlier quoted context omitted.

So, ... screw the minority? Seriously, one of the benefits of the web stack is that it makes it very easy to cater for a wide variety of capabilities, rather than resorting to "Best viewed with Internet Explorer 5"-type behaviour.

What browser doesn't support fonts? If web developers had to support every permutation of turning off cookies, fonts, images, JavaScript, stylesheets etc. you'd never get anything done.

laurent123456's doesn't. And I wouldn't be surprised if there weren't countless mobile phones, console browsers, etc. that didn't.

You don't need to support every permutation of each technology; provide base functionality, and enhance it using each, if it's available.

Re: Google recommends inlining small CSS

#64

Over time I've developed some opinions not shared by most. I only use a framework when under extreme duress. I use static pages wherever possible. I measure payload size. I'm also beginning to re-think CSS. I love CSS, but just like with OO, I'm thinking it may tempt us to think of structural considerations when we may just be wasting our time. I think the next app I write, I'm going to evolve my CSS, starting with i…

[deleted]

Re: Google recommends inlining small CSS

#65

Interesting. The sample code includes this bit: var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); I've never thought to use requestAnimationFrame like that. When exactly does it fire? Is that the preferred callback these days for loading code after the page is "done" in some fashion? I've g…

> I've gotten used to using jQuery's `$(document).ready(..)`

FYI `$(document).ready(foo)` is the same as `$(foo)`

https://api.jquery.com/jQuery/#jQuery3

Re: Google recommends inlining small CSS

#66

Interesting. The sample code includes this bit: var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); I've never thought to use requestAnimationFrame like that. When exactly does it fire? Is that the preferred callback these days for loading code after the page is "done" in some fashion? I've g…

> I've gotten used to using jQuery's `$(document).ready(..)` FYI `$(document).ready(foo)` is the same as `$(foo)` https://api.jquery.com/jQuery/#jQuery3

In my experience--not that I'm a prolific JavaScript developer or anything--people tend to write out $(document).ready anyway because it makes their intent clearer. Personally, I have to do a little mental work every time I trip over the shortcut and prefer seeing $(document).ready.

Re: Google recommends inlining small CSS

#67
This is the part that surprised me,

> Further, inline CSS on HTML elements is blocked by default with Content Security Policy (CSP).

I'm probably not up to date on this stuff, since I am not a web dev, but does this mean it's actually not possible to use `style=""` in your HTML elements any more? I thought it was not recommended, but more for organizational reasons, not security reasons. What is the reason?

Re: Google recommends inlining small CSS

#68

I remember a CSS class in some enterprise software I was working on several years ago: /* bold */ .bold { font-weight: bold !important; } It has became my favourite real-world example of CSS misusage :)

I agree with jdudek here. While I'd never use important, I usually have a lot of small utility classes like bold, italics, uppercase, truncated etc. I don't see what's wrong here - they come in handy when you need a one-time style alteration.

The intentions are baked into your class name, if you were to change the style later and favor underlining rather than bold text, it would require a change to the HTML (or some rather misleading code).

The same could be said for a mobile device, where italic could be hard to read, so, say a different font is used. Again this would require changes to the HTML and breaks the separation of style from markup.

It doesn't particularly offend me, but I though it would be worth pointing out why some people disagree with this style of class naming.

Re: Google recommends inlining small CSS

#69

I remember a CSS class in some enterprise software I was working on several years ago: /* bold */ .bold { font-weight: bold !important; } It has became my favourite real-world example of CSS misusage :)

I agree with jdudek here. While I'd never use important, I usually have a lot of small utility classes like bold, italics, uppercase, truncated etc. I don't see what's wrong here - they come in handy when you need a one-time style alteration.

[deleted]

Re: Google recommends inlining small CSS

#70
post #61

Offered example is missing this in the "you can inline" snippet: ..least whole point of this excercise is to make life a little bit more miserable for those pesky users who dare to disable js.

FTA: Note that the web platform will soon support loading stylesheets in a non-render-blocking manner, without having to resort to using JavaScript, using HTML Imports.

https://w3c.github.io/webcomponents/spec/imports/#link-type-...

All is not lost, it seems.

Post reply on HN