Yeah, I hear ya Philippe. No, not confusing with scripts.
I ended up having to in one of my projects. I used the visibility trick.
CSS in header..
<style type="text/css">
#main {visibility:hidden;}
</style>
Then at the end of the page, I toggle the opacity.
<style type="text/css">
... other styles ...
#main {visibility:visible;}
</style>
<script></script>
</body>
This resulted in my styles not being render blocking and no elements were
revealed un-styled. No FOUC.
Along with moving my scripts to the footer below the css, It helped get me a
100/100 score on google page speed.
My score when I started was 17/100.
This way you can also have a loader outside the container be visible
that disappears when the containers opacity is set to 1. However, in most cases
this is unnecessary.
If your images are compressed well and there isn't a boat load of animations
and elements on your page,
the page will load in seconds and you hardly notice the blank screen. The
loader is for the latter.
I admit it's not your most conventional way of loading css, but it did what it
was intended to do for me.
http://tpsautoshippers.com is the website if you'd like to see it in action.
Built in WordPress. Pretty content heavy. Loads fairly quickly too.
Haven't tested any screen readers. Not sure how to.
Is there any screen reader testing sites or applications?
My thoughts are screen readers will have an easier time now that the
scripts and styles are out of the way, technically.
Screen readers just look for the html correct?
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
> On Sep 20, 2017, at 6:08 PM, Philippe Wittenbergh <ph...@l-c-n.com> wrote:
>
>
>> On Sep 21, 2017, at 3:11 AM, Karl DeSaulniers <k...@designdrumm.com> wrote:
>>
>> Some put theirs in the footer to get a better page load score.
>
> That seems … weird. Unless you know that **nothing** in that stylesheet will
> be used before the page has fully loaded. Otherwise the page will start
> re-rendering aka all kind of FOUC. Are you confusing with scripts ?
>
> Philippe
> --
> Philippe Wittenbergh
> https://l-c-n.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
