Captializing S in stylesheet mentioned in rel attribute - css

After a deep search, there is something to be known by me which puts me to think a lot and couldn't get the idea of the purpose that it serves. Which is capitalizing the S in stylesheet for rel attribute value.
what is the difference between,
<link rel="stylesheet" href="/css/widgets/some.css">
and
<link rel="Stylesheet" href="/css/widgets/some.css">
what purpose does it serves? An on-shore 15years experienced web application head is insisting to do this. Please explain and make me understand.

There is no difference, as link types are case insensitive. I am guessing that your colleague prefers them that way for some reason.

Related

Three warnings for Font Awesome (in Chrome), namely "integrity mismatch", "appropriate `as` value" and " request credentials don't match"

As the title states, I am getting the following three warnings in Chrome (latest version):
1) A preload for 'https://use.fontawesome.com/releases/v5.8.2/css/all.css' is found, but is not used due to an integrity mismatch
2) The resource https://use.fontawesome.com/releases/v5.8.2/css/all.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally
3) A preload for 'https://use.fontawesome.com/releases/v5.8.2/css/all.css' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
While I understand that these are not errors, do they represent a bigger issue or can it be safely ignored? I recently switched to https but to be honest, it might have been showing this in the chrome inspect window before this (I only saw it because I was checking the SSL post installation.
I have Googled parts of these warnings but havn't found anything. I used the "pasted into your head" method of adding Font Awesome, like this:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
Would appreciate a little feedback, thanks in advance!
This is due to your use of crossorigin="anonymous", and you can safely ignore these warnings, but they will be visible to your users, so it is best to correct the problems.
To do so, you'll want to ensure that your font is preloaded with the rel preload (with rel="preload"), and an as attribute declaring it as a font (with as="font").
This would look like:
<link rel="preload" as="font" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

custom 404 sometimes missing stylesheet

I have a website hosted by siteground, and my custom 404 page is SOMETIMES missing it's stylesheet. I contacted support but they saw it working fine, assumed I just codded it wrong, and told me to get help form a professional web programmer... (of course I did test before contacting them to be sure it was not my fault)
Anyways, the way that siteground allowes you to create a custom 404 page is to add your html code to a form in your control panel, wich creates a 404.shtml in your main folder. The .shtml contains all your html. I have done the following test to narrow down the problem.
created a not404.html in my main folder with code copy pasted from my 404.shtml that is in the same folder. It loaded with my stylesheet applied no problem.
tried prompting a 404 page with both bad hyperlinks, and by typing pages that do not exist. When I am having the problem with my stylesheet missing, none of thease pages have css, but when I am not having the problem, they all have css applied.
What I think it is: I think that the 404.shtml is not really in my main folder, but just appears to be there, and sometimes that link breaks and the 404.shtml is actualy acessed somewere else on sitegrounds server, therefor the style link would not work properly. This would explain the intermittent css failor. But this is just logic, not understanding.
The only thing I can think of that would be wrong on my end is if there is more than one way to link stylesheets, and my way is a bit unstable. Here is the format I use.
<link type='text/css' rel='stylesheet' href='css/404.css'>
I know this might be a difficult question, but it would be pretty satisfying to figure this out and inform them of the problem with their site.
Change the href for the style tag to be absolute. So this:
<link type='text/css' rel='stylesheet' href='css/404.css'>
Becomes this:
<link type='text/css' rel='stylesheet' href='/path/to/css/404.css'>
css/404.css is a relative path. If the path is something like /path/to/nonextant/page it will try to load the stylesheet from /path/to/nonextant/page/css which does not exist.
Use an absolute path:
/css/404.css

Site hosted on dropbox not using CSS

I'm hosting a (very) small website on dropbox. I don't even have a domain name for it, I just need an easy way for my not so technology savvy teacher to access it and using an online service like wordpress or tumblr seemed like too much trouble and not as effective as I would like. I plan on putting it in my public folder and just sending her that link, something I've done in the past to show my friends websites I've made in class.
However, for some reason, CSS formatting isn't working. This is a problem I've noticed in the past but at the time wasn't important. I have it relatively linked in my head tag and it works when I pull up the files saved on my hard drive. Its only when I try to access it through dropbox do I notice this problem.
I've looked and it doesn't seem like anyone else has had this problem, I've only found multiple references to dropbox supporting CSS so I have no idea why this is happening.
This is the link in my code, and it's inside the head tag:
<link rel="stylesheet" type="text/css" href="css/format.css" />
Any help would be much appreciated. ^^
EDIT: Here's the page, there's not much on it yet but there's suppossed to be background formatting behind the navigation links in the top.
https://dl-web.dropbox.com/get/Public/EPortfolio/WritingAndForum.html?w=947f0aa1
To give an example expanding on Cfreak's comment, you would need to individually share the CSS file, then reference it in the HTML like this:
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/1234567/cssfile.css">
A much easier way (and more correct) is to put your stylesheet in a folder called css and then have a relative link to it with "./" It gets you out of the long url trouble.
<link rel="stylesheet" type="text/css" href="./css/styles.css">

accessing the CSS in browser using question mark (?) in end

can someone explain what is the difference in accessing CSS in browser by putting question mark ? in the end and why the new CSS is not making any affects on Website.
I have deployed a new CSS on web server but its not making any affect.
I tried to open the URL in browser as below:
www.mysite.com/styles/css/main.css
and it loads the older version of CSS.
Then I tried it as below and it loads the new version of CSS.
www.mysite.com/styles/css/main.css?
After doing all this. New CSS change does not affecting the website. Its still displaying the old design.
Kind Regards
You need to add something after the ? then change it when you change the CSS. What is happening is a browser will cache anything that doesn't change for a specific period, it does that by checking file names. so main.css? is still main.css? Anything after the question mark is a query string, generally it's used to pass data to a particular file. In this case it's just used to change the file string so the browser will update it every time it changes without affecting the file itself.
There are a couple of ways you can handle this, the first is manually changing the version, probably the easiest idea if you have a single header file, as in a template system that always loads the same head data.
<link rel="stylesheet" type="text/css" href="assets/css/main.css?ver1/>
Then on next change:
<link rel="stylesheet" type="text/css" href="assets/css/main.css?ver2/>
If you'd rather do it automatically you can add a bit of PHP script to the css line like this:
<link rel="stylesheet" type="text/css" href="assets/css/main.css?time=<?php echo filemtime('./assets/css/main.css');?>" />
This is essentially adding a value that changes every time you save the file and results in something like this, the next time I save the file that time= value will change:
<link rel="stylesheet" type="text/css" href="http://localhost/refficient/trunk/assets/css/main.css?time=1350305706" />
browser cache is the reason,Adding ? after css is not recommended.Open your hosting space and clear cache and thread pool as well.

Term usage URI or URL or another?

as I strive to come up with the best methods name in my designs I struggle on a simple question but still very confusing to me.
There are two ways I use for retrieving stylesheets or javascript files:
<link href="/myProject/public/styles/master.min.css?v=1274382274" media="screen" rel="stylesheet" type="text/css" />
<link href="http://mydomain.com/public/styles/master.min.css?v=1274382274" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/myProject/public/scripts/master.min.js?v=1274394222"></script>
<script type="text/javascript" src="http://mydomain.com/public/scripts/master.min.js?v=1274394222"></script>
I know that http://[...] can be called as an URI (as specified by the difference between URI and URL)
but an href or src that specifies a path according to the document root of the server such as /myProject/public is different.
So what would be the best term when speaking of those two different href|src value's?
/myProject/public/[...]
http://mydomain.com/[...]
An URI since it specifies a location and an identification?
An URL? Not sure why
A path? A definitive no IMO
Another term, please specify and explain
My design is independant of both the href and src, otherwise I would just have used the two terms href and src, of course. So in summary, I need the term that specifies the above while speaking about both about the href and src.
Thanks!
I believe the linked question perfectly answers your question. Nothing more to say. All URLs are URIs but not vice versa. Both of the examples you wrote all URLs (and consequently URIs too). The first is a relative URL and the second is an absolute URL. Both are URLs as they locate a resource. URNs are, for instance, URIs but not URLs. They identify a resource but provide no means to locate it.
What is hidden by a definitional approach (i.e. "every A is B") is that the "URI vs URL issue" is indeed historical.
The term "URL" was used in specifications only for a few years. However this was exactly the years where the Web became popular. So everybody learnt about "URLs", "sites", "pages", "addresses", and even if the W3C strived for erasing these questionable terms and concepts from people minds, the harm was done.

Resources