External CSS Styles Cant Be Accessed in Google Chrome

CSS not working in Chrome

Comparing css links between the page you referenced and sub-pages, you have a "media" attribute in your link:

Problem:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px" />

Working:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" />

Try removing the "media" attribute and it should work fine.

More specifically, it does not appear that "only" is a valid operating for the media attribute. See this W3Schools page for details.

External CSS won't work in Chrome

There are a couple big things that are probably tripping up Chrome:

You have two closing tags for head and the first one is causing the title tag to be outside of the head.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link rel="stylesheet" href="default.css" />
</head>  <!--  REMOVE THIS CLOSING HEAD!! -->

<title>DCE</title>

</head>

In your UL and LI tags, you can't have text or elements outside of the li tags, your anchor tags "a" and the text ABC need to be changed.

    <ul>ABC <!-- REMOVE ABC -->
    <a href="pages\aboutus.html"><li>Z</li></a> <!-- anchor tags outside of the li tag -->
    <li><a href="pages\AAAA.html">Y</a></li> <!-- anchor tags INSIDE of li tag - this is the way to do it -->
</ul>

Like @cimmanon said, the slashes in your html links are back slashes and they should be forward slashes "pages/AAAA.html" instead of "pages\AAAA.html".

Those three changes will probably get your style sheet back up and running. I can tell you're learning/experimenting so I won't go overboard correcting the rest, keep learning and you'll get there :)

External CSS downloaded in chrome but not reflected

My guess so far is that the CSS file isn't being applied because it has a wrong HTTP header content-type whose value should be a mime-type with an encoding parameter (text/css; charset: UTF-8) but instead it is an unknown value (css).

It seems that Firefox overrides the wrong content-type header and sniffs (guesses) the info (since there is no x-content-type-options: nosniff it's allowed). And Chrome probably instead respects the header "if it's there it must be for a reason" and thus doesn't know what to do with a file of an unknown type.

To test this diagnostics, you should try and either:

• load another CSS file (hosted somewhere else if possible, since it's probably the server setting a wrong header). It doesn't have to be pretty, just to show whether it's applied.
• change the header if you can. Either fix content-type or remove it (and let the browser sniff the mime-type, not ideal for security, but will work).
• create the stylesheet in JS:
  

  fetch('your-css-file.css')
      .then(response => response.text())
      .then(styleString => {
          const style = document.createElement('style')
          style.textContent = styleString
          document.head.append(style)
      })
  

---

I tested myself the 3rd solution (fetch in JS and create a stylesheet with the text response) and it works. However, it then tries to download an image because of the following rule:

.logo { 
  background-image:  url(../logo/images6.1624696593222.jpg);

and, same as before, I got a wrong content-type header:

Request URL: https://greatone11.aroscop.org/logo/images6.1624696593222.jpg
content-type: text/html; charset=UTF-8
server: nginx/1.18.0
x-powered-by: Express

It seems that you have expressjs as your server and nginx as your reverse proxy. And one of these is messing with your headers. My bet would be on Express, since it's probably set up for angular, and you're trying to do some not-very-angular-things right here!

Cannot access cssRules from local css file in Chrome 64

TL;DR: As of Chrome 64 you'll need to use a local development server to test functionality that depends on the CSS Object Model.

Accessing CSS rules in a stylesheet loaded from the local filesystem violates a Cross-Origin Resource Sharing (CORS) policy - but Chrome didn't enforce this until recently, and other browsers don't seem to enforce it yet.

Chrome 64.0.3282.0 (released January 2018, full change list) includes a change to security rules for stylesheets. I couldn't find this change in any changelog less detailed than the full commit list.

Commit a4ebe08 in Chromium is described:

Update behavior of CSSStyleSheet to match spec for Security origin

Spec is here:
https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface

Updated: the following methods now throw a SecurityError if the
style sheet is not accessible:

• cssRules() / rules()
• insertRule()
• deleteRule()

This commit is a fix for the bug Security: Inconsistent CORS implementation regarding CSS and the link element. The linked W3C spec describes in detail where use of the CSS Object Model requires same-origin access.

This is a real security constraint and the solution you posted (online/localhost) is probably the most typical workaround. For more information check out MDN's How do you set up a local testing server? - it discusses why and how to use a local development server to avoid CORS issues.

That said, there's still some open issues and debate around this change.

• This comment on the original security bug complains that the only way now to detect that the stylesheet is not accessible from JavaScript is with a try/catch.
• A Chromium bug opened January 23rd (document.styleSheets.cssRules is null even with Access-Control-Allow-Origin: *) suggests there may be an implementation issue with the new security rule that breaks certain workarounds.
• The spec being implemented seems pretty stable, but it still has "Working Draft" status so who knows where it will land and what other browsers will implement.

Alternate stylesheets not working in Chrome

The answer turned out to be removing the "title" attribute AND removing the "alternate" part of the stylesheet definition. So the stylesheets are now linked like this:

<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/medium.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/dark.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/beige.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/green.css"/>" />

No idea why the original definitions didn't work but the new ones work and can be turned on and off with JS, which is what we needed.

html won't link to external style sheet on local system

Your link tag should not be inside a style tag.

Corrected HTML with style tag removed:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="limbo.css">
</head>
<body>

<div class=top> <h1>This is a heading</h1> </div>
<div class=left> <h3>Left Side</h3> </div>

<div class=main> 
    <p>This is a paragraph.</p><br>
    <a href="../css/Limbo.css">css</a>
    <form action="/polls/name-test.html" method="post">
        {% csrf_token %}
        {{ form }}
        <input type="submit" value="OK">
    </form>
    <br><p class=red>This is a second paragraph</p>
</div>
</body>
</html>

---

Related Topics