To avoid path-relative style sheet import vulnerabilities should I attach css file on my page using full path e.g.
<link href="http://mywebsite/style.css" type="text/css" rel="stylesheet" />
instead of
<link href="style.css" type="text/css" rel="stylesheet" />
What do you think?
Just add a leading slash and make the path root-relative, rather than relative which this vulnerability relies on.
No need for the domain / scheme.
<link rel="stylesheet" href="/style.css">
Related
I don't want the render blocking of declaring a custom font using #font-face, so I've tried to copy how my google font CDN font is loaded for my custom server font, arriving at this:
<noscript id="deferred-styles">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" rel="stylesheet" type="text/css">
</noscript>
But it does not work.
I've tried changing href for src="../Bluu...
But that didn't work.
I've tried omitting the type, since woff2 isn't text/css.
It's important, I'm not willing to block my page load for a 35kb font file, and there's no CDN for BluuNext, so I need to find a performant way to make this work or I'll just be resigned to a beiger website.
RIGHT!
I've tried the answers below, possibly they work for other fonts but not BluuNext. Perhaps other fonts maybe come in configurations beyond bold, unlike BluuNext, so maybe that causes the issue.
It IS possible to load BluuNext font, but so far only with render blocking #font-face method, loading betwixt the tags.
Here's a minimum example including a few of the proposed solutions not working...
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Bluu Next test</title>
<link rel="preload" as="style" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold" />
<link rel="stylesheet" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" media="print" onload="this.media='all'">
<link rel="stylesheet" media="print" onload="this.media='all'" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold" type="text/css" />
<noscript id="deferred-styles">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold" type="text/css"/>
</noscript>
<script type="text/javascript">
// Load CSS
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
<style>
h2{font-family: bluuNext; font-size: 3em;}
</style>
</head><body>
<h2>Is this Bluu Next?</h2>
</body>
</html>
You can see some fancy javascript governing the loading of id="deferred-styles", that came at the suggestion of Google lighthouse and works well for Google's CDN fonts, not working for BluuNext so far.
Here's the link to download BluuNext, a lovely gothic, serif font. CLICK THE DOWNLOAD ARROW TOP RIGHT.
I'd love some ideas. I'd love to use this particular font, which is for some reason seemingly resistant to existing solutions.
You can not load a font directly in HTML, you need help of CSS for this. And if you open the google font link you will be able to see how it's done.
https://fonts.googleapis.com/css?family=Roboto:300,400,500
This url is a css file not a font file.
Open it and you will understand how google used #font-face to load the font.
Here is the documentation from mdn:
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
The modern approach to async-style <link rel="stylesheet" /> elements is to use media="print" with onload="this.media='all'".
The media="print" attribute means browsers should still download the stylesheet, but won't block the page's loading.
The onload="this.media='all'" event-handler causes the stylesheet to become enabled when and if it does load.
Because browsers might still not download print stylesheets at all, you should also add an explicit <link rel="preload" /> version (for the same stylesheet) as a strong hint that the browser should download it anyway.
However this still depends on browsers having JavaScript enabled in order for the onload="" handler to work.
...hence the need for the duplication of code in a <noscript> wrapper element.
Also, you really should be using root-relative (i.e. "/foo"-style) URIs in your <link href="" attributes, otherwise they wont' work if the user isn't accessing a page in your site's root.
I assume your BluuNext-master directory is located in your site's root.
So change your HTML to this:
<head>
<!-- onload+media trick to defer loading these stylesheets: -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="preload" as="style" href="/BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" />
<link rel="stylesheet" media="print" onload="this.media='all'" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css" />
<link rel="stylesheet" media="print" onload="this.media='all'" href="/BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" type="text/css" />
<!-- But if Javascript is used the <noscript> will ensure the browser will load it: -->
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css" />
<link rel="stylesheet" href="/BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" type="text/css" />
</noscript>
</head>
I do think it's silly that we need to basically repeat ourselves three times as a workaround for something that should just be a part of HTML already.
I am new to Laravel and was wondering where I should put each css files for my views. I want to keep them separate and don't to have my styles in one file. Also, how would I be able to access them in those views? I tried using
<link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" /> but nothing changed in my view. The path where I have my file is storage/public/css/style.css
If your link is <link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" /> change it to <link rel="stylesheet" type="text/css" href="/css/style.css" /> and put your style sheet in /public/css/style.css
<link rel="stylesheet" href="{{asset("css/style.css")}}">
used this code,here asset link to your public folder and put your style sheet in /public/css/style.css
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
If I use this .css file in my code, it will overlap the previous .css files which I wrote myself, how can i load my .css files first, if I can not find the css then turn to the bootstrap .css file?
i would guess that your css declaration looks like this
<link rel="stylesheet" type="text/css" href="yourcss.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
you should change them upside-down
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="yourcss.css" />
the reason is that any css that is closer to the body tag, will be considered the first priority. if items in yourcss.css has the SAME NAME with the items your bootstrap.css, the bootstrap.css's items will be OVERRIDDEN. if you didn't want to override these, make sure the item/class/id name is different for each in the yourcss.css. Make the best practice of giving each tag a different class name for your css.
You write your css files like this:
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/your-style.css" />
try this
<link rel="stylesheet" href="assets/css/bootstrap.css">
after your own css
<link rel="stylesheet" href="assets/css/YOURCSS.css">
You could load your own CSS with
<link rel="stylesheet" type="text/css" href="css/style.css" />
and then import bootstrap inside your own CSS file, that way your CSS will be on top of bootstrap and you will be able to override it.
#import url("bootstrap.css");
I know this is a simple question but for some reason I'm wondering if I'm doing something wrong here.
My understanding is that if you declare 2 CSS files
<script type="text/css" src="JQueryUI.css"></script>
<script type="text/css" src="Override.css"></script>
I want to use the "Override.css" to override some values, so if I type let's say ".ui-accordion" and put my own values, i would expect them to take priority over the original values located under that name on the JQuery.css file.
Mainly because the declaration states that Override.css comes AFTER JWuery.css.
For some reason this is NOT happening.
I tried switching the declaration of the 2 files
...but the Jquery.css seems to ALWAYS seems to take priority.
Any reason why ??
This is not working because you are not loading correctly the css files.
It should be:
<link rel="stylesheet" href="JQueryUI.css" type="text/css" media="all" />
<link rel="stylesheet" href="Override.css" type="text/css" media="all" />
I am agree with Zhihao about specificity of elements, but I have also noticed that your are using <script> to attach CSS files, use <link> tags instead, maybe that would load your css and it will override existing styles:
<link rel="stylesheet" type="text/css" href="JQueryUI.css" />
<link rel="stylesheet" type="text/css" href="Override.css" />
P.S. just posted my notice in the comment as an answer
I'm having some issue with importing a .css file in my jsp within the eclipse using this tag
<link rel="stylesheet" href="css/style.css" type="text.css">
The structure of my pages is so
WEB-INF
>jsp
>css(folder)
>style.css
>home.jsp
So basically home.jsp and the css folder are parallels, a relative url like the one i'm using should be fine according to most tutorial.
Do you see some problem?
Thank you
<link rel="stylesheet" href="css/style.css" type="text/css" />
Change it to a slash.
In your structure the css folder is style and in your link it is css
<link rel="stylesheet" href="style/style.css" type="text/css">