I have 2x promo banners one for desktop (#usp-banner), one for mobile (#usp-banner2).
Each one should only be displaying to their respective sizes because of the use of the .css:
layout.min.css
#usp-banner2{display:none}html{padding-bottom:0!important}...
custom.css
#usp-banner2{display:none}
#media (max-width:767px){
#usp-banner{display:none!important}
#usp-banner2{display:inline}
}
Upon loading the page on Desktop or Mobile we see BOTH banners and their correct banner hides after about 1 sec. Source: https://www.ivyandfig.com
I am fairly new to Shopify, but am able to modify templates. I'm curious is this due to the way .css is loaded?
Anyone have suggestions on how to ensure the css is being loaded before the images display (as I am assuming this is part of what is happening)?
Most of the stylesheets and scripts on your site are being loaded via JavaScript. That JavaScript is triggered much later as compared to when the initial content is visible on your site.
As you have guessed, this is happening because CSS is loaded much later so for the time being both images are visible.
As that part is a Shopify section, a quick fix is to include the related CSS rules inside section. More of that is available on Shopify Documentation for Sections.
Another fix may be is to create a separate stylesheet with only rules like that CSS reset, hide and show content etc and include it via link tag in header.
You can also use some logic based on inline styles by hiding both initially and then display later via JavaScript.
Related
I have an active child theme called "Hello Elementor Child". Since other people have problems overriding Elementor and add !important to every css rule, I have done the same.
My problem is that nothing is overriding. When I "view source" and find a background image used on the home page, I can confirm that the link to that image is good. But, it's simply not showing up on the site.
I do not want to add all custom code to Elementor editor (or a css plugin) because (1) I don't have the pro version for this budget-conscious client and (2) I don't want a bunch of code in the head.
The style.css document
https://trimedia.co/hccpersonalcare/wp-content/themes/hello-theme-child-master/style.css?ver=1.0.0
Link to the background image so you know what it's supposed to look like: https://trimedia.co/hccpersonalcare/wp-content/themes/hello-theme-child-master/images/men-masked-personal-care-wide.jpg
Test location is https://trimedia.co/hccpersonalcare
If you shrink the viewport of your browser you will see a background image appear. The trouble is with your media queries, #media all and (max-width:600px) is missing a closing bracket. You have so many queries in there, I suggest chunking your code under a handful of common breakpoints so you can keep track of what overrides what better.
FOUT in SPAs using FEFs. That's a lot of odd acronyms. :)
But it's still an issue.
I have a dynamic component which loads a bunch of components which are meant to look in a very specific way. Each would have its own css, and critically, its own specific fonts.
The fonts are the issue here.
What ways are there to avoid this FOUT in this case?
This is my current research on the topic:
Browsers have a mechanism to hide text it detects is styled with a custom font until the font has loaded.
This does not work in vue, because the text isn't loaded yet either for the browser to detect, so when JS puts the text, this browser mechanism isn't triggered.
Might be fixable via SSR, static DOM - browser can now detect. Still might not want - FOIT (Flash of invisible text) arguably worse (no content vs bad content).
This does nothing for dynamic components
CSS is consolidated unless async component.
You do get all CSS imports, but not all fonts until they are used on the page. I.e. it makes a network request for the css import, but not the fonts, until something on the page gets styled with this font. At least it's... quic. :D
WebFontLoader?
A js library by google/typekit, companion to google web fonts.
Possibly can be used to delay component loading until the font has loaded using its events?
Requires things outside the component to know about the font.
No obvious way to reach down and pull out CSS.
Depending on how many fonts you're loading and the size there are a few things you could do.
Call the fonts in the base HTML file (separate from your other CSS) so the browser is aware of them. Then create a hidden div in the parent component with CSS calling the font for the child. This will cause the browser to request the font before the child component is loaded.
Load all fonts separately in the HTML with rel='preload' or rel='prefetch'. I would do this at the bottom of the HTML so you don't block other content.
Load your fonts in the created lifecycle hook using the CSS Font Loading API. I'm not sure how this will work with Google Fonts vs self-hosting.
Create CSS transitions when loading content like a half-second fade to mask the FOUT. This is obviously not a solution but never underestimate the power of smoke and mirrors to influence the way your app feels.
Also, you should try to make use of the font-display (docs) CSS property. This won't solve the problem but it will make the results more predictable.
I am currently creating a Bootstrap 3 website for mobile and desktop, taking the mobile first approach.
I have been following this webpage Creating a Mobile-First Responsive Web Design
It mentions using a style.css for mobile view and enhanced.css stylesheet for a desktop view.
I know this is possibly quite basic but I am slightly confused as I am currently using one stylesheet which holds the mobile styles as default and I am using media queries for the tablet and desktop views.
I want to know what styles should be added into the enhanced.css stylesheet for desktop view?
It really doesn't matter whether or not you separate it into multiple stylesheets or one stylesheet. It really is a matter of personal preference.
I personally use one style sheet for things that I want to be universal throughout the entire website (such as a universal font, or a universal font color). I call that sheet pageFormat.css.
Then I create a separate CSS file for each page I create if I plan on adding and adjusting things such as button sizes specific for that page.
Just be sure that whether you are including one stylesheet, or multiple, you are including the link reference so your HTML browser knows where to locate the CSS file that has all the data.
I have a script that has a jquery script controlling the css(init.js) and another noscript tag with the css files themselves. There are 3 css files for various screen dimensions
However i realise this approach causes the css to keep fluctuating. E.g refresh causes font size to change, refresh again page changes back. The font itself also changes.
Anyone could suggest what may be an issue?
Thanks!
I'm using jQuery mobile to create a list menu.
I use a 'slide' effect, when you click an element to show the next page.
I was using a css style sheet which had too many design elements.
So I went ahead and removed the stylesheet and instead added the required styling in the html document.
But now the slide effect doesn't work if I click the elements.
If I include the css style sheet, then it starts working again.
Here is the http://jsfiddle.net/r24XY/ code.
The whole reason why you see those cool looking animations is because of that CSS file.
You must have both JQuery Mobile .js and .css library files in order for things to move.
Ripping certain elements out of the library CSS files just to build your own is a bad idea, very bad idea. What if you miss something ? Even if you don't.. what if they release an update tomorrow? You're going to have to maintain a lot of code.
CSS animations (or transitions / transforms) are used in jQuery Mobile and other mobile web frameworks since these are hardware accelerated on certain devices (namely iOS). Thus, removing the CSS file of course removes the animations.