I am a bit confused about the behavior of <link rel="alternate" ...> in browsers and i am looking for some clarification. Let's use the following code for illustration:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="a.css" type="text/css"
title="Main Stylesheet">
<link rel="alternate stylesheet" href="b.css" type="text/css"
title="Alternative Stylesheet">
<link rel="alternate" href="fr.pdf" hreflang="fr" type="application/pdf"
title="Alternative document in French">
</head>
<body>
</body>
</html>
When this code runs in a modern browser (e.g. Firefox v27.01), the browser parses the above HTML document and then downloads the stylesheets, a.css and b.css. The former is used to apply the style to the document. However, b.css is available through the 'View > Page Style' menu of the said browser. So, clearly the parser in Firefox is able to recognize the "alternative" stylesheet and in this case decided to download it.
One can read at W3C > HTML5 > 4.8.4.1 that the outcome of parsing those <link>s are basically hyperlinks referencing the respective document. In the case of stylesheet, the browser is smart enough to download it as well. But, for the other alternate document (fr.pdf) in our example, it looks like Firefox does not download it and if it links it, it is not visible anywhere. I tested in Chrome (v.33.0.1750.117), Opera (v.19.0.1326.63), IE (v.10.0.9200.16798) and could observe same thing (i.e. no visible artifact that the fr.pdf has been linked). So, as all those modern browsers behave like this, it looks like I have misunderstood the meaning of "alternate" relationships:) Would someone have an explanation for me of how they are intended to be used? My belief is that in a RESTful manner, user-agents should be able to (hyper)link all the <link>s in order to navigate that web.
Thanks in advance.
The <link> element does indeed identify external documents that are related to the current document. And the rel attribute specifies the nature of that relationship. In the specific case of rel="alternate stylesheet" (some) browsers can do something specific with the link. In particular, Firefox and Opera give the user a chance to select this "alternate" stylesheet from the application's menu. See, e.g., the screen shot
from this article.
In order to apply that style sheet, the browser needs to download it.
In the more general case of rel="alternate" (not a stylesheet), then the browser won't know anything useful to do with the related link. Therefore, as far as the browser is concerned, there's no need to download it.
Related
I'm trying to get my website compatible with internet explorer. It looks great in chrome, safari and firefox, but i's very wrong in IE.
Is there any way to make it compatible, without changing or creating another css ?
search for IE style sheet. You have to tweek it a little with the elements that you need to change for IE in the new stylesheet. Read up here about it
Put this within the <head> tag of your file
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Another that I like to use is javascript to use the same stylesheet but uses css selectors like. .ie .container for internet explorer
you can download it here it's called CSS Browser Selector
I looked at your code (before you edited out the link from the question), and the first thing that jumps out is that you've got two X-UA-Compatible tags, one saying IE=8 and the other saying IE=edge
You should only ever have one of these tags, and in most cases it should only ever be edge.
Get rid of the other one; it is causing problems.
I'm using html and css for the first time. On one computer the html refers to the css appropriately, but on another the css is not referred to at all. I think I'm linking to the css correctly in the html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
On both computers, I'm using the latest version of Firefox.
Any thoughts as to where I'm going wrong?
Thanks in advance.
Are you using your browser's developer tools?
Right click in Firefox and go to "Inspect".
Find the Web Console tab. There you will see if the reference to the css file is valid or if it returning a 404, not found.
Also, your reference should be href="/css/mystyle.css", to keep a clean root directory of the site.
Also, you might want to self close the tag:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css" />
And if that doesn't help, run your code through the w3c validator: http://validator.w3.org/
Here is my problem, I have 2 link rel tags in my html index header. One tag is for my stylesheet the other is a shortcut icon link rel to use a icon in my browser tab (fyi using FF19).
<link rel="shortcut icon" href="tophat2.ico"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
Each rel link works fine on its own. when I have them one after another though the one on the bottom (being parsed second) is the only one that is displayed however. They appear to be overriding eachother so I conclude I cannot have both a icon shortcut and a stylesheet each as a separate rel link but that is the only method I can find via Google so I am stuck.
See http://mathiasbynens.be/notes/rel-shortcut-icon. It says:
Most sites use the following HTML to specify a favicon:
<link rel="shortcut icon" href="/favicon.ico">
Looks okay, right? Guess what — it isn’t!
Today, I learned that shortcut is not a valid link relation. Indeed,
it doesn’t show up in section 4.12.5 of the HTML5 specification on
‘link types’. It is, in fact, proprietary to Internet Explorer.
Without IE, rel="icon" would suffice to specify a favicon.
Since you are using Firefox, that would explain why it isn't working. Try just this:
<link rel="icon" href="tophat2.ico"/>
But be aware that this may not work in IE 8 or below. Later on in that same post it says:
If the shortcut value is omitted from the rel attribute, Internet
Explorer ignores the declaration entirely, searches for a file called
favicon.ico in the site root, and uses that instead. In fact, almost
every browser does that when there’s no link rel="icon" specified.
Using rel="icon shortcut" won’t work in IE either, since it doesn’t
treat the rel attribute as a space-separated list.
Just make sure to always put the favicon in the root directory of your
site, and name it favicon.ico
OK I FIXED IT!!! I have no idea why the ** this worked but it did. I copied my rel link=icon
tag and pasted it as a duplicate above the 2 waring rel links. The duplicate being parsed first appears broken which doesn't matter but now the 2 below work so I have a working stylesheet and icon. Thanks for trying to help everybody. This one shall probably remain a mystery.
TL;DR
I've read through many questions on Stack Overflow on this issue and I've tried to follow the given advice. Still, my CSS stylesheet will not work in Chrome/Safari but it can work in Internet Explorer.
The only odd thing that I can see about my scenario is my server is returning all files as of type application/octet-stream. I cannot change this aspect of the server. Is there something I can do to interpret my CSS file as a stylesheet in Chrome/Safari and IE?
I have an embedded web server project that I am working on. I have very limited control of the server software and the ability to make page-level settings. All I can do is create static HTML, CSS, and image files that are compiled into the server application.
As such, all files that are returned from the embedded server are declared as application/octet-stream in the HTTP header. This produces warnings in Chrome but no errors.
Initially, I had a problem loading this style sheet in Chrome/Safari but it would work in IE. After reading through a couple questions on Stack Overflow, I found that I needed to change my stylesheet declaration from:
<link rel="stylesheet" href="/styles/index.css">
to:
<link rel="stylesheet" type="text/css" href="/styles/index.css">
When I made this change Chrome & Safari still failed to process the CSS file but IE also started to ignore the stylesheet.
Oddly, if I do not declare a DOCTYPE on my HTML document I can get linked stylesheets to work in all of my browsers. This is, however, not a desirable solution.
My guess is this issue has something to do with the HTTP header declaration and that it doesn't match the type declared in the link element.
What can I do to get this stylesheet to work in Chrome, Safari, and IE while following good web development codes-of-practice (i.e. using doctypes on my HTML files and not embedding the style code in the HTML headers?)
For clarity sake, the relevant CSS/HTML code is shown below.
index.css
html {height:100%}
body {margin:0;min-height:100%;position:relative}
iframe {width:100%;height:100%;border:none}
.hdr {min-width:765px;overflow:auto}
.logo1 {float:left;margin:4px}
.logo2 {float:right;margin:4px}
.menu {position:absolute;top:70px;left:0px;bottom:0px;width:175px}
.content {position:absolute;top:70px;left:175px;bottom:0px;right:0px;}
index.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="/styles/index.css"> <!-- Removed the type declaration so that this would at least work in IE9 //-->
</head>
<body lang="en-us">
<div class="hdr"><img class="logo1" src="/images/logo1.png" alt="Logo #1"><img class="logo2" src="/images/logo2.png" alt="Logo #2"></div>
<div class="menu"><iframe name="menu" src="/menu.shtm"></iframe></div>
<div class="content"><iframe name="main" src="/home.htm"></iframe></div>
</body>
FYI, this is a new project that is being developed from an existing one. The original project did not declare a DOCTYPE on the HTML files. Therefore, all page data was loaded and executed in the browser in quirks mode. Furthermore, the index.htm originally consisted of multiple frames within a frameset.
I am trying to update this application, using correct, and up to date methods for developing web pages. I can make this application work, but I feel that this would be at a sacrifice of future-browser compatibility if I have to rely on browser quirks mode and framesets.
I have tried to close the link tag but that doesn't help. Technically, this shouldn't be an issue since this document is declared as an HTML5 document, rather than XHTML.
It's certainly due to the application/octet-stream content type. I can re-create the issue on my end. Soon as the content type is set to text/css your HTML/CSS load fine.
As a workaround you can use <style> tags for you CSS if you can't get the server to send the correct content type.
I hate to have to answer my own question this way but the problem was most certainly with the fact that the server was returning a content type of application/octet-stream within the HTTP header.
After discussing the issue with management we had to update the code associated with the HTTP processor. This is code that is part of a third-party RTOS and we have been extremely hesitant to making any changes to this code.
However, in this case the need has out-weighed that desire. I've integrated the necessary changes to fix the HTTP header to return a content type of "text/css" for cascading style sheets. All is now right with the world.
I think I'll just chime in here. Not to answer the question, but to confirm the issue and perhaps help people with similar problems.
I had the same problem: an external css file was loaded alright, but it was not applied in Chrome. (Safari and FF were ok about it). So, same problem, slightly different cause.
It turned out that because of a bug in the webserver code the HTTP response contained two Content Types, 'text/html' and 'text/css'.
The solution was to remove the faulty 'text/html' line. It seems Chrome is pickier than other browsers about response headers. Which I suppose is legitimate, but a warning would have been nice.
btw, you can see all the http information for a loaded resource in Chrome, when you open Developer Tools, and select Network. Then click on the file that you want to investigate. (it took me a while to find that)
We had a problems with an iframe wich it's contents was updated by an external javascript routine, the CSS were loaded but were not applied. But updating the body HTML from a routine present in the iframe head worked as suposed to.
This same behaviour was not present in gecko and explorer, but happened the same at Safari browser (webkit)
Hope this could give some light in this curious case.
I would like to add one bit of information that may save some of you some time. It appeared that chrome was not recognizing my CSS either. After reading the above post I reviewed the files in the Developer Tools->Network. Turns out that Chrome was using a locally cached version of my CSS. As soon as I refreshed as opposed to accessing the URL again, it worked!
I'm no expert, but i've made this mistake before, it's rather simple.
You've written:
<link rel="stylesheet" href="/styles/index.css">
If this is a folder in the same directory as your index.html file, then you need to remove the first /. like so:
<link rel="stylesheet" href="styles/index.css">
EDIT: I think someone else mentioned this already, but it may have been overlooked.
Dolphin Browser and the Default Android Browser are reading the <noscript> section in the head of my page even though javascript is turned on in those browsers. This causes the content of those pages not to be rendered.
In the head I link to a a css stylesheet that sets display to none for anything inside a div on page when javascript is turned off in the browser. It does this by residing inside a nonscript element, so the stylesheet is only read if there is no javascript.
This works for all desktop/laptop browsers I tested (not tested on mac which I don't have access to). It works on Android with Firefox and Opera. I have cyanongenmod 7 only so no Google Chrome for me.
However when it comes to Dolphin and the default Android browsers, they read the css stylesheet that resides in the noscript section and pretty much the whole page/site is not rendered in these browsers.
I have proven that this is what is happening by deleting the stylesheet link from the head section and the page renders correctly in those browsers.
Is there some way to get these browsers to respect the noscript tags in the head section?
UPDATE: This is using HTML5 - noscript in the head is allowed: http://www.w3.org/TR/html5/the-noscript-element.html#the-noscript-element
<!DOCTYPE html>
<html>
<head>
<noscript>
<link href="${facesContext.externalContext.requestContextPath}/css/no_javascript.css" rel="stylesheet" type="text/css" />
<!-- this link is being read even if javascript in enabled in dolphin -->
</noscript>
</head>
<body>
<noscript>
stuff in this noscript element works correctly
</noscript>
<div class="no_javascript_disapear">
page full of stuff not being rendered because
dolphin browser is not respecting the noscript
tags in the head.
</div>
</body>
</html>
// css in the noscript tag:
.no_javascript_disapear {display:none;}
Maybe you can use javascript to remove that stylesheet?
Read this question for how to Access Contents of <noscript> with Javascript
Otherwise, you can add a title to your no-js stylesheet:
<link title="noJsStylesheet" href="....css" rel="stylesheet" type="text/css" />
And use this function to remove it:
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("title") == 'noJsStylesheet') a.disabled = true;
}
But i'm really not sure if it'll work on this specific Dolphin version.
According to HTML specifications issued as W3C recommendations, the noscript element is allowed inside body only. Browsers may allow it in the head too, but you can’t count on it. Just saying that you use HTML5 does not change this a bit; browsers do what they do, possibly implementing parts of HTML5 drafts at times.
The HTML5 draft generally recommends against using noscript at all: “The noscript element is a blunt instrument. Sometimes, scripts might be enabled, but for some reason the page's script might fail. For this reason, it's generally better to avoid using noscript, and to instead design the script to change the page from being a scriptless page to a scripted page on the fly” (followed by an example of this).
So the best approach would be progressive enhancements: Design the page first so that it works without scripting. Then, add scripting in a non-disruptive way. This could involve adding some CSS rules via scripting (which would be more natural than removing some).
But if you need a quick fix, you might consider adding, right after the link element that is now inside noscript, a script element that contains code for immediately removing that element from the document tree.
By the way, my good old Android 2.3.5 default browser seems to honor noscript inside head.