Css stylesheet links - where - opinions?

Report · Apr 03, 2019

I have been 'gifted' a widget which I need to include on a website I'm updating. It's a javascript link to an external resource which writes a link to a css stylesheet into the website to give position/presentation to the widget.

The link to the stylesheet is written at the foot of the page in a div containing other code relating to the widget. Is it now considered ok for a stylesheet link to be written anywhere within the html code these days?

I ask because I want to include my own css linked stylesheet to over-ride some stuff I don't much like about the widget. I was just going to include the over-ride css in in the global css file BUT if I can just start including css stylesheet file links all over the shop, should I bother?

Any opinons on this practice? I was under the impression that it was still best practice to link the stylesheets in the <head></head> of the page but maybe things have moved on and I've miss that information. Its difficult to keep up what is going on these days!

Cheers

Os

Report · Apr 03, 2019

You'll like get differing opinions, but I've always like to group CSS links in the head. Makes it easier to control and work with the cascade.

Report · Apr 03, 2019

ALsp wrote
You'll like get differing opinions, but I've always like to group CSS links in the head. Makes it easier to control and work with the cascade.

Al I'm sure I will. Only contemplating doing it, if its acceptable, as it's an external widget and I've only changed up a couple of the default selectors. The link can go in the widget include file.

I'm Googling for some confirmation - from the information I've pulled up it appears that a link is ok but a <style> tag block isn't.

Report · Apr 03, 2019

HTTP/2 allows for progressive loading of CSS scripts. The idea here is to defer loading non-essential scripts until they are actually needed by the web app or document. Also you need SSL./TLS server for this to work.

The Future of Loading CSS

<!doctype html>

<head>

</head>

<body>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 03, 2019

https://forums.adobe.com/people/Nancy+OShea wrote
HTTP/2 allows for progressive loading of CSS scripts. The idea here is to defer loading non-essential scripts until they are actually needed by the web app or document. Also you need SSL./TLS server for this to work.
The Future of Loading CSS

Finally someone who cares.

Wappler, the only real Dreamweaver alternative.

Report · Apr 04, 2019

https://forums.adobe.com/people/Nancy+OShea wrote
HTTP/2 allows for progressive loading of CSS scripts. The idea here is to defer loading non-essential scripts until they are actually needed by the web app or document. Also you need SSL./TLS server for this to work.
The Future of Loading CSS
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<link rel="stylesheet" href="/site-header.css">
<header>…</header>
<link rel="stylesheet" href="/article.css">
<main>…</main>
<link rel="stylesheet" href="/comment.css">
<section class="comments">…</section>
<link rel="stylesheet" href="/about-me.css">
<section class="about-me">…</section>
<link rel="stylesheet" href="/site-footer.css">
<footer>…</footer>
</body>
</html>

Humm....filling the html coding with yet more clutter to make maintanence an even bigger issue! We now have all that security garbage in the cdn <script></script> tags too, which I remove in production stage. I guess I could use a local link......soon the html code will be so bloated with inline css, js framework directives/expressions, stylesheet links etc it'll become just a nightmare to manage. My days are numbered but hey I feel a sense of relieve at leaving this all behind, the options and solutions have become so bloody obtuse now.

Just done some DTP brochure work using InDesign - that's kindergarten stuff, DTP has barely changed in 25 years

Report · Apr 04, 2019

osgood_ wrote
Just done some DTP brochure work using InDesign - that's kindergarten stuff, DTP has barely changed in 25 years

After all of these years, I've just started to realise that there is a lot of humour contained in what you say

Wappler, the only real Dreamweaver alternative.

Report · Apr 04, 2019

BenPleysier wrote
After all of these years, I've just started to realise that there is a lot of humour contained in what you say

Either that or early onset of senile dementia...........I have'nt quite worked that one out yet. I'm sure most of you have your own opnions which it is.

Report · Apr 04, 2019

osgood_ wrote
Either that or early onset of senile dementia...........I have'nt quite worked that one out yet. I'm sure most of you have your own opnions which it is.

Join the club, membership is free. You will have to answer a few questions like 'what day is today', 'how old are you' and 'what did you have for breakfast'. A 20% score or less will get you in.

Wappler, the only real Dreamweaver alternative.

Report · Apr 04, 2019

BenPleysier wrote
Join the club, membership is free. You will have to answer a few questions like 'what day is today', 'how old are you' and 'what did you have for breakfast'. A 20% score or less will get you in.

Easy questions to fail Ben.

The one you missed though is, "how old are you". Answering that one correctly is an immediate failure of membership .

Report · Apr 04, 2019

Hope you don't mind me hi-jacking the discussion Os?

Nancy OShea

I suggest you read the section in the link you reference titled, 'changes to chrome'. You will then see that what the author is suggesting is nothing new, or exclusive to http2.

What it has to do with is browser rendering, with Chrome moving to the IE model. Unfortunatly he gets it wrong, in that he assumes that once a section of html/css is parsed it is rendered, (displayed) it is not. The rendering of the page only occurres once all the html with the css is parsed.

It has nothing to do with http2 or anything else, IE has had this model of rendering since IE5.5 on the Mac. Long before http2.

Report · Apr 04, 2019

pziecina wrote
Hope you don't mind me hi-jacking the discussion Os?

Not at all. Feel free to gate-crash the party.

Report · Apr 03, 2019

The only things you have to think about are the cascade and rendering.

Most browsers upto ie11 (have not checked since) simply appended the style sheets to the css style rendering process as they are loaded. So a style sheet loaded at the bottom of the page, would be appended to the bottom of the list of previously loaded style sheets. Meening that anything in those styles would have a higher priority, (so overide previous styles), unless you use 'important' for the earlier css properties, (thats saying important is not used by the later properties).

Also you have the question of rendering of css, as that begins before javascript has finished loading. Which may then force the browser to re-render the page if css is applied via js.

Report · Apr 03, 2019

As I have no control over where the default widget css stylesheet is loaded I may as well add my own over-ride widget stylesheet in the same location. I'll give it a go and see if it has any detrimental effect on page loading. Tests at the moment suggest it doesnt.

Report · Apr 11, 2019

prerank28948274

Hi Preran,

I notice that you have marked Nancys answer as correct, surerly marking an answer correct in this case is for Osgood to decide?

Add to that my reply #9, is noting that Nancys answer has nothing to do with css parsing and rendering. Loading css by including links in each section, has NO benefit to the end user, as ALL css must be parsed before rendering can take place, (browsers are bumb, they have no idea if a css file is all that is required to render that section.).

Update. Bens idea about having a discussion about http2 may be helpfull to users, as there appears to be a misunderstanding about how http2 can improve file loading vs the actual rendering of a page.

Report · Apr 11, 2019

There's no correct answer here in my opinion, helpful ones, yes. That's why I didn't mark anything as singularly correct.

Adobe Community

Css stylesheet links - where - opinions?