For a static site I load one of two stylesheets depending a prefers-color-scheme media query, as follows:
<link rel="stylesheet" href="/dark.css"
media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css"
media="not all and (prefers-color-scheme: dark)">
The downside to this approach is that for browsers that don't support the prefers-color-scheme media, neither stylesheet will be loaded (queries with unknown elements are always false), so the result is garbage-looking unstyled content.
In this case, I'd like to load light.css as a fallback. Is there a good way to do this without Javascript?
Just making one stylesheet unconditioinal like:
<link rel="stylesheet" href="/light.css">
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
... doesn't work because the dark scheme may not specify exactly the same attributes for every style as light. It's also not desirable from a performance perspective since now the light stylesheet is redundantly loaded and parsed even in dark mode.
Related
Following instructions from Mozilla.org I created this very simple example for CSS preloading but it just doesn't work.
Current Behavior: The Background is white
Expected Behavior: The Background should be red, and a weird message is displayed in the console.
cssPreloadTest3.html:
<html>
<head>
<meta charset="utf-8">
<title>CSS preload example</title>
<link rel="preload" href="cssPreloadTest2.css" as="style">
</head>
<body>
<h1>bouncing balls</h1>
</body>
</html>
cssPreloadTest2.css:
body {
background: red;
}
The weird message in the console says:
The resource at “https://..../cssPreloadTest2.css” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
Of course if you change the <link> to a standard css import like this it works fine:
<link rel="stylesheet" href="cssPreloadTest2.css">
¿How can I make this work?
Basically, preload means that the browser has to download a resource before it's gonna use by the browser for some purpose. When you preload CSS, it means that the browser will start downloading your resource ASAP and apply it when it found a suitable command for that for example when it finds <link> tag for the stylesheet it will apply it instantly and hence first contentful paint will be improved.
There is also a concept here. If you download your CSS as a non-critical resource then you don't need to include <link> tag.
Syntax:-
<link rel="preload" href="/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="/style.css">
</noscript>
But this thing is suitable only for deferring non-critical CSS. But for critical CSS you can include an internal stylesheet i.e. in <style>...</style> tags.
Read more about it here - https://web.dev/defer-non-critical-css/
Preload <links> are not meant to replace the standard <link rel="stylesheet">, they just tell the browser to preload the assets. So you you still have to include the styles in any of the normal ways (either <link rel="stylesheet"> or #include).
They should probably clarify that in the Mozilla website...
This question already has answers here:
Why does the <link> ‘title’ attribute cause browsers to ignore my styles?
(3 answers)
Closed 5 months ago.
I'm helping with an effort to upgrade a very old corporate intranet. Our users are on IE8 and IE9. Most of our sites are written to work in IE5 - IE9.
We're on the verge of upgrading everyone to IE11, and pilots are finding a ton of compatibility issues. There will be a great deal of remediation in the months ahead, as well as judicious use of Enterprise Mode, Compatibility Modes, X-UA tags, and so on.
But I've encountered one strange problem that doesn't make any sense. It seems like a bug, but:
It happens in IE11 edge mode, Chrome, and Firefox.
I've duplicated the problem on servers running IIS 6 and IIS 7.5, as
well as from my desktop.
Happens with .asp, .htm, and .aspx file types.
Here's the issue:
If you have a web page with two linked style sheets, and both tags have a title attribute, the styles defined in the 2nd style sheet are not applied unless either (a) The title attributes match exactly, or (b) one of the title attributes is empty.
For example:
Everything works fine if your <link> tags have identical title attributes:
<link REL="stylesheet" HREF="a.css" TYPE="text/css" TITLE="1">
<link REL="stylesheet" HREF="b.css" TYPE="text/css" TITLE="1">
Everything works fine if one of the title attributes is blank:
<link REL="stylesheet" HREF="a.css" TYPE="text/css" TITLE="1">
<link REL="stylesheet" HREF="b.css" TYPE="text/css" TITLE="">
And everything works fine if one of the tags has no TITLE attribute:
<link REL="stylesheet" HREF="a.css" TYPE="text/css" TITLE="1">
<link REL="stylesheet" HREF="b.css" TYPE="text/css">
But… if you have different values in the title attributes, the 2nd style sheet will not be applied.
<link REL="stylesheet" HREF="a.css" TYPE="text/css" TITLE="1">
<link REL="stylesheet" HREF="b.css" TYPE="text/css" TITLE="2">
I've resigned myself to the fact that we're going to have to scan every last page on our Intranet looking for pages with title attributes attached to <link> tags, but I really would like to understand why this is happening. What's most interesting is that this happens in every modern browser I've tried. If you force IE11 into Enterprise Mode or Compat View, the problem goes away.
Can anyone explain what's happening, or propose a solution besides removing title attributes from <link> tags?
This appears to be expected behavior. From, for example, the MDN docs
A preferred stylesheet [...] is one that has a value of stylesheet supplied for the rel attribute, and any value at all for the title attribute. Here are two examples:
<link type="text/css" rel="stylesheet" title="Basic styles" href="basic.css" />
<link type="text/css" rel="stylesheet" title="Fish and boats" href="ocean.css" />
According to the HTML 4.01 specification, only one of the preferred stylesheets can be used at a time. Therefore, given the above example, only one of the two preferred stylesheets will be applied to the document. The specification does not supply a procedure to decide which one should be used, so user agents are free to make whatever choice they like.
From the spec
The title attribute gives the title of the link. With one exception, it is purely advisory. The value is text. The exception is for style sheet links, where the title attribute defines alternative style sheet sets.
Browsers can (I don't know of any that do any more, but extensions are available) provide a UI to allow the user to switch between different stylesheets supplied by the author for a page.
The title attribute is used to group the stylesheets for selection (and provide the label for them).
The first stylesheet encountered will be used to determine which group is used by default.
Could someone provide meaningful examples of HTML <link> tag with different values of "rel" attribute?
Apart from the possible values explanation for the "rel" attribute, are there any practical uses for the different values (other than stylesheet value)?
To get a number of useful examples, I would recommend looking here: http://www.w3.org/TR/html4/struct/links.html.
This looks like a very concise, slightly easier to navigate version of w3: http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-alternate
There aren’t that many meaningful real-life examples of link elements, apart from rel=stylesheet. There are various lists of rel values that might be used, with definitions and ideas of how they might be used by browsers or search engines, but little actual evidence of such use. But some elements that have real effects in some cases are:
<link rel=icon ...> defines a shortcut icon for the page; widely recognized by browsers and user by authors
<link rel=alternate ...> is described in Google instructions, so Google presumably does something with it
<link rel=canonical ...> suggested in other Google instructions
<link rel=prefetch ...> causes the referenced page to be preloaded, in some browsers
I Only know 'icon' value, you can set pavicon of your HTML page that appear on browser tab, using:
<link rel="icon" type="icon" href="path/to/youricon.ico" />
hopely useful: http://www.w3schools.com/tags/att_link_rel.asp
examples:
<link rel="stylesheet" href="style.css">
<link rel="icon" href="image.png">
<link itemprop="URL" href="http://...">
<link rel="next" href="page3.php">
<link rel="author license" href="author_license.php">
<link rel="icon" href="favicon.png">
more examples: link element and rel attribute on link element
At https://www.sitepoint.com/rel-html-attribute/ they state
The "alternate" attribute value may also be used in the context of XML
feeds, namely RSS or Atom, which are indicated with the type
attribute
Also, site navigation with rel="first|last|prev|next" is supposed to make navigation easier and is e.g. used by a specific firefox extension (https://addons.mozilla.org/de/firefox/addon/site-navigation-bar/?src=search).
Given the following link tags:
<link rel="stylesheet" href="xlarge.css" media="max-width: 70em" />
<link rel="stylesheet" href="large.css" media="max-width: 60em" />
<link rel="stylesheet" href="medium.css" media="max-width: 50em" />
<link rel="stylesheet" href="small.css" media="max-width: 40em" />
<link rel="stylesheet" href="xsmall.css" media="max-width: 30em" />
<link rel="stylesheet" href="retina.css" media="(-webkit-min-device-pixel-ratio: 2)" />
On initial load, are all six of these stylesheets downloaded, or just those that media queries have resolved to true? For instance, if I was on a retina-capable browser that calculated out to the medium breakpoint, would it only result in four http requests?
All the stylesheets will get downloaded regardless of whether the media queries evaluate to true or false. Even the first five media queries you have, which are all invalid because of missing parentheses around the max-width expressions, won't prevent those stylesheets from being requested by the browser. (Invalid media queries simply resolve to false automatically.)
In CSS, media queries only control whether or not the CSS rules in those stylesheets are applied to your page, not whether or not the stylesheets themselves get requested.
What's the best method to include CSS in page and why?
for eg.:
<style type="text/css">
#import "style.css" screen, tv;
#import "print.css" print;
#import "iphone.css" iphone;
</style>
or
<LINK rel="stylesheet" media="screen" href="style.css" type="text/css" />
<LINK rel="stylesheet" media="print" href="print.css" type="text/css" />
<LINK rel="stylesheet" media="iphone" href="iphone.css" type="text/css" />
From what i know #import doesn't work in ancient browsers, this might be a advantage because these browsers will only show text instead of a unreadable CSS mess (when using link).
It has been discussed many times, you can read more here:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Difference between #import and link in CSS
http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
to mention some...
Personally I never use #import as for the performance impact.
Realistically both accomplish the same goal, but there are a few minor differences. Namely:
#import is not supported in IE6 and older and Netscape 4
#import allows multiple style sheets to be imported in a single link or style element, if desired
link allows specifying an alternate stylesheet, which browsers like FireFox, Safari, and Opera can allow users to switch to. IE also supports this if using a JavaScript switcher. This is most often used for accessibility.