I have written a new website template. All works fine but there is one problem:
IE8 and lower don't load my stylesheet. I have no idea why.
I have tried it on multiple computers to eliminate the possibility of cache-problems or something like that.
The stylesheet is written with SASS (http://sass-lang.com/). But I think, this isn't the problem because I've made some other websites with SASS and everything works fine.
//EDIT:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>***</title>
<link rel="stylesheet" type="text/css" href="/styles/screen.css" />
</head>
<body>
</body>
</html>
You are using <section> elements that are new and IE8 doesn't know about by default. And because it doesn't know about them they are treated sort of like a span except you can't style them either using CSS.
The trick is to create the element before the page is is loaded and the browser can style them. The easiest way is to use something like html5shim. Just make sure to add the following code to your head section as it needs to run before the HTML starts rendering:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Some problem in your path I guess..
Possibility 1 :
<link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen" />
Possibility 2 :
<link rel="stylesheet" type="text/css" href="../styles/screen.css" media="screen" />
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.
Here is my root HTML file. As you can see, it has no problem getting styles from Bootstrap (this functionality is working just fine). When I open up index.html in the browser at localhost:8080 (running a server through a webpack command), It cannot find the stylesheet! This is something I don't understand. Please help. Thank you.
BTW.. stylesheet.css is at the same directory level as index.html AND index.js. How come the bootstrap stylesheet is getting picked up but not my stylesheet?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Meteor automatically loads all style sheets. I've seen it recommended to put them in the /client/stylesheets, or /imports/ui/css folder.
You don't have need to put <link rel="stylesheet" href="stylesheet.css" /> . Try removing that line and see if you can see your styles applied to your page.
The reason <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> is working for you is because it is loading from an external address. It is hard-coded on your html and not being managed by meteor. I don't recommend it, but if you wanted to do the same thing with your style sheet, you would put it in the /public folder, and use <link rel="stylesheet" href="/stylesheet.css" />. But Meteor is designed to manage all the style sheets for you, so best not to do this.
Lastly, if you want to control the order style sheets are imported, you can specify import '/client/stylesheet.css'; // import CSS from absolute path - see here for clarity: https://guide.meteor.com/structure.html#intro-to-import-export
I am starting out at writing my own website and following a few tutorials on HTML5 and CSS. I am using netbeans to create and edit my project.
Here is my index.html file
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="newcss" href="newcss.css" type="text/css">
</head>
<body>
<p>This is css</p>
</body>
</html>
Here is my css file, called newcss.css
p {
color: #FFF;
}
I have my css file in the root folder of the webpage, same as the index file. All I am trying to do is change the colour of the text so I can see my style sheet is working. I am sure it is something really simple but can't seem to see it at the moment.
Thanks in advance for any help,
Mash
From the validator (assuming you add an HTML 5 Doctype):
Error Line 7, Column 57: Bad value newcss for attribute rel on element
link: The string newcss is not a registered keyword.
<link rel="newcss" href="newcss.css" type="text/css">
To load a stylesheet you have to use the stylesheet relationship, not the newcss relationship (which doesn't exist).
Fix your rel attribute.
Try the below one
<link rel="stylesheet" href="newcss.css">
Change your rel="stylesheet"
Change link rel:
<link rel="newcss" href="newcss.css" type="text/css">
to:
<link rel="stylesheet" href="newcss.css" type="text/css">
I am new to CSS and I have just read the topic regarding the hierarchy of the various types of applying a style. More specifically I read that the embedded method overrides the external always but when I run some tests this wasn't always the case.
The declaration of an embedded style and an external is done in the head element of the web page and what I found was that the embedded style overrides the external only if is written after the external.
for example let's say that we have the following code snippet
<head>
<title>Testing CSS Hierarchy</title>
<style type="text/css">p {color:#fff;}</style>
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>
</head>
in the above example the external rule overrides the embedded!!!!
Did I understand something wrong or this is normal?
Thnak you in advance.
Try it with the embedded styles after the link to the external file:
<head>
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>
<style type="text/css">p {color:#fff;}</style>
</head>
The css that comes after overrides the css that comes before.
The rule is simple in this case the last is the one that is used. Try doing the reverse:
<head>
<title>Testing CSS Hierarchy</title>
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>
<style type="text/css">p {color:#fff;}</style>
</head>
I have an HTML page that uses CSS and JavaScript to center the content of the page in the middle of the browser when the browser window is resized.
When I use the standard HTML5 Doctype declaration, all browsers completely ignore my CSS files. I have no clue why. When I remove the HTML5 Doctype, then they work just fine again. The page displays the same (incorrectly) in both Chrome, FF and IE. All wrong.
Here is the beginning of the page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/stylesheet-mobile.jsp" >
<link rel="stylesheet" type="text/css" href="/stylesheet-mobile-frontpage.jsp" >
<meta name="viewport" content="width=device-width" />
<script src="/javascript/jquery/jquery-1.8.3.min.js"></script>
<script src="/javascript/resize-fit.jsp"></script>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
Any clues?
Are you sure you're sending the right content-type header for those files? I see you're using Java to generate the CSS. Without the proper content type the browser may not understand or honor them.
Content-type: text/css