- This topic is empty.
-
AuthorPosts
-
January 6, 2015 at 3:58 am #192356
serkai
ParticipantInline CSS styles override styles that are not critical, i.e. loaded asynchronously. Whereas it may be possible to add new styles to override inline styles (as seen in a previous article on CSS Tricks – see Override Inline Styles with CSS), this would be counter-productive as these styles worked fine before using critical inline styles.
Has anyone encountered this issue when creating critical inline styles? What was the best way you tackled this issue? Thanks.
January 6, 2015 at 4:02 am #192357Paulie_D
MemberHas anyone encountered this issue when creating critical inline styles?
This is the primary issue..you should not be using inline styles at all and certainly not critical ones.
Other than that, I’m not sure what it is you are asking.
January 6, 2015 at 4:07 am #192359serkai
ParticipantThanks for getting involved Paulie, have you read this article?
https://css-tricks.com/authoring-critical-fold-css/
I may be tackling this all wrong…
January 6, 2015 at 5:22 am #192374Paulie_D
MemberInterestingly, I saw a video recently (on here in another thread) that most people ignore the ‘fold’ (certainly) on moblie because they expect the ‘above the fold’ stuff to be
logo sitename nav banner/carousel
..so they automatically start scrolling before content has been fully loaded in the expectation that the stuff ‘above the fold’ is cruft.
January 6, 2015 at 5:27 am #192375Paulie_D
MemberOh…and I see what they are talking about but I think the term ‘inline’ is misleading…it’s more ‘headlining’ in a
style
tag.January 6, 2015 at 5:31 am #192376Paulie_D
MemberInline CSS styles override styles that are not critical, i.e. loaded asynchronously.
No…the ‘headline’ styles wouldn’t be overridden at all…that’s the point. There would be no need to do so since they’re already loaded for your ‘above the fold’ content.
The CSS is “critical” only in that it needs to be loaded first for speed purposes for above the fold content…CSS for anything below the fold is less ‘critical’ and so can be loaded asynchronously.
It’s the content that’s critical…not, as such, the CSS.
Whereas it may be possible to add new styles to override inline styles
See above, why would you need to?
January 6, 2015 at 5:55 am #192378serkai
ParticipantAh okay headline styles that’s what I meant thanks.
I’m not worried about the fold, more so the layout / structure, base styles, and the most basic classes.
I guess my problem lies mostly with reusable classes that appear in the headline styles, that would normally be overridden. For example my default button focus styles take priority over my ‘success’ or ‘info’ button styles.
I’ve began rethinking my approach and seem to be getting somewhere by removing reusable classes. I’m guessing most people use an automated approach? E.g. Critical by Addy Osmani.
January 6, 2015 at 7:21 am #192386Paulie_D
MemberI guess my problem lies mostly with reusable classes that appear in the headline styles, that would normally be overridden.
But they wouldn’t be overridden. They would be defined in the head…and nowhere else.
Why would they be overridden?
. For example my default button focus styles take priority over my ‘success’ or ‘info’ button styles.
I’m not sure you have grasped the concept here.
There should be no reason to define button styles in the
head
unless you desperately need a button to be styled immediately as soon as the first content is rendered (above the fold).“Critical” in the context we are speaking of here does not mean ‘base’ styles.
As I said, what makes it ‘critical’ is that it styles the above the fold content because that’s the first thing the user sees and you want it rendered as quickly as possible…and nothing else.
January 6, 2015 at 8:37 am #192393serkai
ParticipantThanks Paul this is making a lot more sense. Nothing seems to be causing an issue in my CSS now so I think I’m getting there.
January 6, 2015 at 8:37 am #192394Alen
Participant“Critical” in the context we are speaking of here does not mean “base” styles.
+100%
We are talking about Critical Rendering Path. As stated:
…goal is to prioritize and display the content that relates to the primary action the user wants to take on a page
July 9, 2015 at 9:39 pm #204866wladston
ParticipantI was having a very hard time to implement this in a simple, practical way. So I came up with my own code to do it:
https://github.com/wladston/postcss-split
This postcss plugin is super simple: any rules that have a “FOLD” comment will be separated for embedding in the HTML, and the other rules are separated to be loaded async (oh, and it will handle rules inside media-queries too :)
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.