..least whole point of this excercise is to make life a little bit more miserable for those pesky users who dare to disable js.Google recommends inlining small CSS
61–70 of 143 posts
Re: Google recommends inlining small CSS
#62var 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
Re: Google recommends inlining small CSS
#63Earlier 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.
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
#64Over 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…
Re: Google recommends inlining small CSS
#65Interesting. 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…
FYI `$(document).ready(foo)` is the same as `$(foo)`
Re: Google recommends inlining small CSS
#66Interesting. 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
#67> 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
#68I 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 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
#69I 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.
Re: Google recommends inlining small CSS
#70Offered 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.
https://w3c.github.io/webcomponents/spec/imports/#link-type-...
All is not lost, it seems.