In an attempt to learn a little bit about Facebook and their coding techniques, I've viewed their source code. Here is one thing that I found:
<link rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yN/r/JUrfX0ucXVq.css" />
<link rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y2/r/gpxPzqCou0g.css" />
<link rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yD/r/OWwnO_yMqhK.css" />
My question is about how Facebook composes their directory structure & filenames. Obviously the css files weren't named for readability. Is there a reason behind these random filenames? Could someone provide any information about this? Thanks in advance.
The CSS files are given random filenames to prevent browsers from caching them.
When a browser caches a resource, it will download the file and keep it on the user's computer to prevent the same file from being downloaded multiple times. The problem is that if you change your CSS file and keep the filename the same, a browser will keep using the cached version of the file and won't download the updated version. By giving the CSS files unique names, browsers are forced to download them.
It's similar to doing this with your CSS files:
<link rel="stylesheet" href="style-v1.css" />
<link rel="stylesheet" href="style-v2.css" />
<link rel="stylesheet" href="style-v3.css" />
...
Related
This question already has answers here:
CSS doesn't work on HTTPS pages in Chrome and IE
(2 answers)
Closed 7 years ago.
My personal blog works when you connect via http but not with https. When you use https it doesn't load the CSS code. Any ideas? The certification is via Let's Encrypt program.
My site:
http://nicktehpro.xyz/
Broken Link:
https://nicktehpro.xyz/
At each place in the document where u have used:
href="http://nicktehpro.xyz/wp-content/themes/enigma/style.css"
Please change it to:
href="wp-content/themes/enigma/style.css"
or use a protocol relative uri:
href="//nicktehpro.xyz/wp-content/themes/enigma/style.css"
because your references are non-secure links they are avoided when using a secure connection
It looks as though there is an error accessing the stylesheets, images, and other objects you are linking to on the page. When you go to https://nicktehpro.xyz, it is trying to load other links from http://nicktehpro.com Its not allowing you to load insecure data onto a secure page. Make sure that you are either loading all from http or https not a mixture of both. you can fix this by using relative links, starting with
href="/wp-content/link-to-file"
or
src="/wp-content/link-to-file"
instead of
href="http://nicktehpro.xyz/wp-content/link-to-file"
all the links should start with https which is not the case for your css and js files , example :
<link rel="stylesheet" href="http://nicktehpro.xyz/wp-content/themes/enigma/style.css" type="text/css" media="screen" />
should be
<link rel="stylesheet" href="https://nicktehpro.xyz/wp-content/themes/enigma/style.css" type="text/css" media="screen" />
and the other links too
I went ahead and downloaded the theme you're using to further help you, navigate to Header.php and replace on
line 18
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
with <link rel="stylesheet" href="/wp-content/themes/enigma/style.css/" type="text/css" media="screen" />.
EDIT:
After looking into it' there's also a plugin which can achieve this for you for anything that may not be working because it displays as http and not https you should consider giving it a try here.
I am baffled by this and I am hoping someone can indicate at a highlevel where my thinking is faulty.
I have a simple PHP programme
- index.php includes a file /common/header.php
- header.php links to the stylesheet.
Issue 1 which I think has baffled other people but I have not seen a reply that answers the question directly.
If I put the style sheet in the root folder (in the same place as index.php), then I can link to the file without a path
<link rel="stylesheet" type="text/css" href= "style.css" />
The point is that the style sheet is relative to index.php NOT the the header.php when it is included in index.php. Is this correct?
Issue 2 is really odd. When i put the file in a folder I can link to it as
<link rel="stylesheet" type="text/css" href= "/common/style.css" />
or
<link rel="stylesheet" type="text/css" href= "common/style.css" />
or
<link rel="stylesheet" type="text/css" href= "styles/style.css" />
and so on.
BUT, this fails if I name the folder css. Anyone?
There is one other point which might be relevant. I am using WAMP and this website is set up with a virtual host.
That is, I have the host set up in the hosts file in Windows/System 32 and in the Apache httpd.vhosts.conf file.
That means that the index.php file is in the root directory and /common/style.css is functionally equivalent to common/style.css.
Any tips for understanding this would be much appreciated. thanks.
First of all, a relative link to a path in html is completely different from one that is in PHP.
in PHP your document root might be /var/www/example/ while in html this could be http://www.example.com/
the client browser that reads the HTML as no idea of where your html is echo'd location wise other then the entry script (in this case : http://www.example.com/index.php)
So if i just refer to
<link rel="stylesheet" type="text/css" href= "/css/style.css" />
and put the stylesheet in /var/www/example/css/style.css then it doens't matter what the location of header.php is and where it is echo'ed, as long as it is in relation the to entry script (index.php in this case)
Issue 1:
Your problem is not one of PHP, but rather of HTML. CSS is applied by the browser after it has received the HTML source. So when your index.php is the script that outputs the content, all resources your reference in your html will be relative to the path this file is in.
Issue 2:
the difference between
<link rel="stylesheet" type="text/css" href= "/common/style.css" /> and <link rel="stylesheet" type="text/css" href= "common/style.css" /> is that version 1 will only work as long as /common resides in the root of your web server. It's an absolute path (starting with /) while version 2 is relative and would also work if your file was /xyz/common/style.css.
I have no idea why this should not work with the name css though. You should probably retry this.
Thanks everyone. That was fast.
To sum up the include problem which I suspect many people have. The path to the stylesheet must be relative to index.php not header.php.
The other problem I have solved. Some files were inadvertently copied into C:/wamp/www, i.e., the normal root. I cleaned all those out and the odd problem of refusing to play with a folder call /css went away. So this is a two fold problem beginning with 1. mess and 2. being something to do with the virtual host not working properly. At least the fog has lifted. Thank you all.
And for DarkMukke, "Anyone?" is phatic. It is a social nicety most likely used by newbies to convey respect when they realise the problem is as much to do with their own fog as anything technical. Or in geek-speak, the newbie is tipping their hat to anyone who will give them 5 mintues to set them straight.
Thanks everyone.
I am stumped. I am using includes to import a style sheet. If I add a new style to the style sheet, generated pages will not display ANY of the new css. If I change an old css rule it WILL display the change. I thought it might be a cached file of some kind, but I have cleared the cache in all testing browsers and the problem persists.
At first I thought it was a WAMP issue, but the problem happens when I move it all live as well so now I am thinking I am doing something wrong with the includes....
<link rel="stylesheet" type="text/css" href="css/foundation.css">
<!-- Included Custom Overides -->
<link rel="stylesheet" type="text/css" href="css/Custon_Foundation_Overides.css">
<!-- Supersizer CSS -->
And this is simply my include...
<?php require("Includes/HEADER.php"); ?>
Again, all the old CSS works fine, just any new additions to any of the style sheets will not display.
Thanks
<link rel="stylesheet" type="text/css" href="css/Custon_Foundation_Overides.css">
Maybe "Custon_Foundation_Overides.css" is a typo and you meant "Custom_Foundation_Overrides.css" or maybe you have to upload the file with correct letters capitalization.
Sounds like a browser cache issue. A simple way to fix this while maintaining good caching practices would be to pass the file make time as a query var to the file.
<link rel="stylesheet" type="text/css" href="css/foundation.css?ver=<?php echo filemtime('css/foundation.css');?>">
This will generate a string like:
<link rel="stylesheet" type="text/css" href="css/foundation.css?ver=1382564850">
This way when you update the file your browser will think its a new file and cache that, but as long as the file remains unchanged it will have the same name and maintain the browser cache.
I have a big prob. We have a site that was working just fine but I was doing some fine tuning and somewhere along the line i messed things up. possibly in the .htaccess file.
My problem is that my css style sheet doesn't load nor do my images. ahh! They are all there.
I emptied my .htaccess file and deleted my robots.txt just to eliminate any blocking but that didn't fix it.
I validated my css file with The W3C CSS Validation Service and it said:
file not found: http://easybuildingproducts.ca/www.easybuildingproducts.ca/style.css
I feel like it has something to do with the fact that the URL is duplicated. It does that now when i click a link to any of my pages. It should be either or not both those links together. Is it possible a google cached my .htaccess or robots.txt when there was a potential redirect error? Is there a loop happening somewhere?
I was in the midst of making a custom 404 error page when this all went down.
www.easybuildingproducts.ca
Easy fix
<link href="www.easybuildingproducts.castyles/inside.css" rel="stylesheet" type="text/css">
That needs to be either one of the following
<link href="/styles/inside.css" rel="stylesheet" type="text/css">
or
<link href="http://www.easybuildingproducts.ca/styles/inside.css" rel="stylesheet" type="text/css">
I looked at the actual website source to find this example. there are quite a lot like it
Change the href to "/style.css" instead of writing your full domain out. Do the same kind of thing for all other resources that failed to load, too.
This will fix your problem, and it will also make your markup compatible if you decide to migrate to a different dsomain name in the future.
Your resources aren't being loaded (css, js, jquery, etc). Take a look at the screenshot taken from my Chrome Dev Tools > Sources tab:
This is because of your resources' file paths. It is definitely not a good idea to reference all of your resources with "www." in the file path.
Change
<link href="www.easybuildingproducts.castyle.css" rel="stylesheet" type="text/css" />
into
<link href="/castyle.css" rel="stylesheet" type="text/css" />
Is there a way to implement a LESS stylesheet in a codeigniter project without having to rely on sparks and Carabiner?
In the of my view in CI, I place the link to the LESS file, and the LESS.js file directly underneath, however when I view the site, CI doesn't recognize the .LESS file. I've tried using relative paths as well as hardcoding the the file directories directly, however nothing changes. Is there something I should try adding to my config file to load the LESS files properly?
My file structure for the CI project is as follows
application
controllers
views
system
js
less-1.2.2.min.js
plugins.js
css
style.css
style.less
As for my header, its based off of the html5 boilerplate, to save space I'll only include the relevant info.
application -> views -> layout.php
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet/less" type="text/css" media="screen" href="css/style.less">
<script src="js/less-1.2.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<!-- end CSS-->
Are you using mod_rewrite in httpd.conf? If so, you need to make sure that .less files are exempted.
RewriteCond %{REQUEST_URI} !(^alocalfarmCI/index\.php|\.png$|\.gif$|\.less$|\.js$|\.css$|/robots
One way to easily tell if this is your problem, type in a non-existent url within your site that ends in .less. If you see CI's error page, that means /index.php/ was inserted in the url.
If you're running with client-side (javascript) LESS, Codeigniter won't be involved in how LESS operates. Be sure that you've set the rel attribute appropriately when you're linking your LESS file in your views and that the less.js file is being loaded correctly.
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>