Safe to use // over https:// or http:// - html

On our website we have some secure and unsecure pages. Should we always link images, css etc using the full https:// or how safe is it to link everything using // ?
Example 1:
<link href="https://www.domain.com/style.css" rel="stylesheet" type="text/css" />
Example 2:
<link href="//www.domain.com/style.css" rel="stylesheet" type="text/css" />

To ensure all traffic is encrypted, use https just to be safe. It can't hurt; it can only make your traffic more secure.

Related

Links from HTML are going to root instead of the same folder? (LocalHost)

// THIS WORKS ('contact' is the folder we're in)
<link rel="stylesheet" type="text/css" href="../contact/local.css">
// THESE DO NOT WORK (they point to a 'local.css' in the root directory)
<link rel="stylesheet" type="text/css" href="./local.css">
<link rel="stylesheet" type="text/css" href="local.css">
This is only an issue on 'localhost'. It works perfectly well on the web-server I'm using but for testing it would be nice if I can use './'.
I'm using Phpstorm with PHP Built-in Web Server.
This is a known issue for PHP Built-in Webserver.
Currently, the webserver processes the path without trailing / as a file even if it's a directory.
To fix this, please make sure you have a trailing forward slash in your URL.
E.g. Instead of http://localhost/folder, use http://localhost/folder/

How can I reduce external webfonts lag time on page load?

We use cloud typography for a selection of web fonts chosen by a designer. The response time is creating a lag that people have begun to notice.
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
Is there a way, while still respecting CT's licencing model to bring these fonts in locally? Or do I switch to standard web fonts?
To sort of explain my answer/comment...
Say you have something like this for example..
<link type="text/css" rel="stylesheet" href="localfolder/main.css" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
<link type="text/css" rel="stylesheet" href="localfolder/other.css" />
<link type="text/css" rel="stylesheet" href="localfolder/again.css" />
<link type="text/css" rel="stylesheet" href="localfolder/some.css" />
<link type="text/css" rel="stylesheet" href="localfolder/thing.css" />
You can change this to something more like...
<link type="text/css" rel="stylesheet" href="localfolder/css.php" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
With the php file of css.php being like this
header("Content-type: text/css");
require "localfolder/main.css";
require "localfolder/other.css";
require "localfolder/again.css";
require "localfolder/some.css";
require "localfolder/thing.css";
exit;
Basically this will combine all of your local CSS into a single script, which you can then use a PHP cache control and gzip to ensure your local CSS is sent as quick as possible in a single http/file request
... And your second link for typography tag will start downloading straight away as well
As soon as your first link tag (the css.php) is finished being downloaded/checked.. It will continue with anything else in the head tag until they are all done.
This may work for you, it really does very per site/design.. Basically most browsers will download only so many files at once... refer to Max parallel http connections in a browser? for some more info on this...
--- Another possible option ---
You can load the page without the typography link/tag.. and then add it dynamically via javascript.. see something like this How to load up CSS files using Javascript? for an example..
The side effect here depending on how the site is designed, would be that you might see old/default fonts for a few seconds or something.. But you can hide this from the user with a re-design possibly or some form of loader..
Otherwise the only other option i can think of is to try finding the same font or similar with google fonts https://www.google.com/fonts as they do load quicker in general.. And the advantage of using a google hosted css/js/lib is that alot of users also already have them cached because they are common across alot of other sites.
Hopefully this can give you some idea's or possibly help with a solution, but it is a tricky question and a good one... This is how i would deal with it if i was in the same situation.

Stylesheets not linked with https

I have a standard page, with the following code on
<head>
<link href="http://path.to/stylsheet.css" rel="stylesheet">
</head>
However when I load the page via https and force https traffic through ReWrite conditions the stylsheet fails to load
Any Ideas?
Thank's in Advance
-C
Access your stylesheet over HTTPs as well.
<link href="https://path.to/stylsheet.css" rel="stylesheet">
All files in a site must be references as https if you intend to use it.
The syntax below allows your stylesheet to be loaded via whatever protocol your site is accessed through (assuming the stylesheet is accessible via http and https:
<link href="//path.to/stylsheet.css" rel="stylesheet" />

Does head>link[href]'s protocol matter for SSL?

I recently started loading stylesheets on my webpages using just // instead of fighting between http:// and https://. E.g.:
<link href="//example.com/styles.css" rel="stylesheet" type="text/css" />
Now I wonder if the same should be done for the link[rel="canonical"] tags. E.g.:
<link rel="canonical" href="//example.com/index.html" />
If you do it, the purpose of rel="canonical" is somewhat defeated, as the page now has two names (one for http:, one for https:). There's nothing prohibiting it, but it's probably not a good idea.
Pick one or the other and make that the canonical URL.

External CSS stylesheet link failure

I am having this issue here:
http://arflux-rpg.com/game/index.php
On line 5:
<link type="text/css" rel="stylesheet" href="/src/style.css">
The stylesheet exists (and is populated in correct syntax), I am linking correctly, and yet the styles fail to apply.
EDIT: Removed clickability of link as it's generating Google malware warning.
You actually mean to link to
<link type="text/css" rel="stylesheet" href="src/style.css">
Starting your url with / will treat it like an absolute path from your domain, without the slash it treats it as a relative path from the current directory.
Replace
<link type="text/css" rel="stylesheet" href="/src/style.css">
with
<link type="text/css" rel="stylesheet" href="../src/style.css"/>
Hope it helps
Your stylesheet may exist, but not under that path. Try to access it directly at http://arflux-rpg.com/style.css - you'll get a 404 Page Not Found error.
Check your path - you're specifying an absolute path with the leading /, so make sure the stylesheet is actually located in the "src" directory directly under your document root directory.