I am using the below code to fetch Google font. Despite of using media="print", lighthouse detects the font to be render-blocking. How do I make it non-blocking?
<link rel="stylesheet" media="print" onload='this.media="all",this.onload=null' href="https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500;700&display=swap">
If you can provide a test page that would be useful. I quickly created two tests to prove that it works correctly with Lighthouse
Render Blocking - media="all"
Non Render Blocking - media="print"
I use this...
<link rel="stylesheet" href="/stylesheet.css" media="print" onload="this.media='all'" />
I'm not sure what onload='this.media="all",this.onload=null' would do...
<link rel="stylesheet" media="print" onload='this.media="all",this.onload=null' href="https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500;700&display=swap">
Related
I'm working on a portfolio and it looks great in localhost, but when I try to commit it to Github (https://gabrielbrickle.github.io/) the CSS does't work.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/nivo-lightbox.css" rel="stylesheet" />
<link href="css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css" />
<link href="css/animations.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet">
<link href="color/default.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
try changing this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
to this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
If you open the developer console(right click inspect element), It says youre trying to load from http in a https
Use https:// for bootstrap css Link.If you right click , Inspect and look at the Console in Chrome you'd find the errors.
Github is loaded over HTTPS. Referencing external stylesheets will require the same protocol.
You can see the errors in DevTools.
You can either save Bootstrap locally and reference it, or load it with HyperText Transfer Protocol Secure (HTTPS).
I had a similar issue. I messed around and figured out that I had referred to one of the sources incorrectly. I used the wrong case for the first letter of a folder of a source. I had used ./Assets/css (incorrect one) instead of ./assets/css (correct one). Fixing the error fixed the CSS on the Github site as well!
I was handed a site to update at my job that utilizes one template file. I have made changes to both the template file and the index file as well as several CSS files. What happens when I launch the website live is that the sites contents appear without any styling/functionality. I believe I have linked to all the correct styling links in my head sections because in Dreamweaver the sites render perfectly fine in both Firefox and IE. I'm in a jam at my job. Any help is appreciated! Thanks
UPDATE: I selected the option from Dreamweaver's Modify menu: "Apply template to page" which corrected some of the CSS reference issues. The page renders perfectly now in IE 9 but still no styling whatsoever in Firefox. Any ideas from anyone? I'm completely stuck now. Thanks for all the answers so far!
Open Firefox developer tools, check the Network tab for any 404s, particularly on .css files. If there are any, that means it can't access the file.
The permissions on a directory could be wrong, the webserver (nginx/apache) might not be able to access it, or you may have linked it incorrectly (is your website in a subfolder or at the root of the domain? do your links need leading slashes?).
The path to the CSS files are incorrect, set them correctly (Absolute or Relative)
<link href="file://///hqdaa0n02731-06/wtc$/css/bs_paper/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen, min-device-width, resolution" />
<link href="file://///hqdaa0n02731-06/wtc$/js/plugins/css/bootstrap-accessibility_1.0.3.css" rel="stylesheet" type="text/css" />
<link href="file://///hqdaa0n02731-06/wtc$/css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="file://///hqdaa0n02731-06/wtc$/css/wtc_home_3box_pic_option.css" rel="stylesheet" type="text/css" />
<link href="file://///hqdaa0n02731-06/wtc$/css/yamm_2014.css" rel="stylesheet" type="text/css" />
Should be like this:
ABSOLUTE
<link href="http://www.wtc.army.mil/css/yamm_2014.css" rel="stylesheet" type="text/css" />
RELATIVE
<link href="/css/yamm_2014.css" rel="stylesheet" type="text/css" />
I'm stumped. Working on a site that isn't loading properly in FireFox. It loads great in Chrome and even IE, but for some reason the stylesheet isn't loading in FireFox.
The site: http://gregsonaccounting.com
I'm using html5 code and have used the basic resets and such from html5 Boiler Plate. Not sure if the problem is in my html or CSS.
Any insight is extremely helpful.
Many thanks.
Your problem comes from style.css which begins by #charset "IBM437"
Replace it with #charset "UTF-8"; and it will be better !
It seams this charset IBM437 is auto added by SASS:
CSS pseudo element ▼ becomes gibberish in IE
A stylesheet should be defined in the format;
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
You may also include media attribute, that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.
In your page, it is;
<link rel="stylesheet" href="stylesheets/style.css" rel="stylesheet" />//Here is the problem
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
So that line may be modified like;
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" />
Try changing:
<link rel="stylesheet" href="stylesheets/style.css" rel="stylesheet" />
to
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" />
My CSS code worked well on Chrome, but it kept crashing on IE and Firefox. Then i found out the problem was in a badly preprocessed CSS.
Just copy paste your CSS to http://csslint.net/ and if you get any error, just fix it and you are good :)
Worth trying!
insert this inside your html documents. I am not writing in code just giving u the key words so you know and can put it in.
link rel="stylesheet" type="text/css" href="stylesheet.css"
it works so make sure you have this correctly or else your html document will not load with your stylesheet. best of luck to you and keep working brah.
On my web page I have the following line in the <head> element:
<link type="text/css" href="C:/myApps/app1/images/css/12.02/main.css" rel="stylesheet" />
When I go to view that page in Firefox 11.0, it is obvious that the main.css is not being loaded. If I go to view page source, I see the <link> element (above) in the HTML, but when I click it I get the following error:
Firefox doesn't know how to open this address, because the protocol (c) isn't associated with any program.
How do I fix this?
try:
<link type="text/css" href="file:///C:/myApps/app1/images/css/12.02/main.css" rel="stylesheet" />
might work
Edit: as per the other answers, this is when you want to use a css file on your local machine, if the website will be hosted then you'll need to use a relative path.
<link type="text/css" href="images/css/12.02/main.css" rel="stylesheet" />
The above assumes that your html file with the link in is located in your "app1" folder.
Martyn
you need to insert an url/uri => file:///C:/myApps/app1/images/css/12.02/main.css
Hi you cas change your css path
<link type="text/css" href="C:/myApps/app1/images/css/12.02/main.css" rel="stylesheet" />
into
xxx.css replace into correct path
<link type="text/css" href="xxx.css" rel="stylesheet" />
I have a very new site I am trying to put together and it seems that my css file isn't being recognized.
The site is http://www.problemio.com and I have in my index.php a direction to pick up the css file like this:
<link rel="stylesheet" type="text/css" href="main.css"/>
and then a header div declaration like this where some of the initial styles are used:
<?php
include("divs/header.php");
?>
I am trying to go through the index.php file with firebug, but not sure how to tell if the css file is being recognized or something else is the problem.
Any ideas how to get the styles recognized?
You have to link to the CSS Reset before you link to your own styles.
The way you set it up now, the CSS Reset is resetting your styles.
Change this:
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
to this:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
Loaded CSS:
grids-min.css
main.css
menusystem.css
reset-min.css
Reset is loading after the others, which nullifies the majority of your settings.
This is probably because of the order you are loading the CSS files. You are loading your "main.css" file first, then the YUI reset CSS, which basically resets whatever your main.css file has set already. Try loading the reset first.
The stylesheet appears to be loading fine. You need to put it after the reset styles though, or the reset will get rid of most of yours.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
If the problem you think you are seeing is related to the sign-in links, note that they are set to color:#fff;, which happens to match the background...
Depending on your browser, Ctrl+Shift+I (Chrome), Ctrl+Alt+I (Safari), F12 (IE9), or Firebug (Firefox) can show you which resources are loaded... You should probably get comfortable with the developer modes for each.