Highlighted

Css stylesheet links - where - opinions?

LEGEND ,
Apr 03, 2019

Copy link to clipboard

Copied

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

Views

897

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Css stylesheet links - where - opinions?

LEGEND ,
Apr 03, 2019

Copy link to clipboard

Copied

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

Views

898

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 03, 2019 0
Mentor ,
Apr 03, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
LEGEND ,
Apr 03, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
Adobe Community Professional ,
Apr 03, 2019

Copy link to clipboard

Copied

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>

  <!-- HTTP/2 push this resource, or inline it, whichever's faster -->

  <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>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 1
Adobe Community Professional ,
Apr 03, 2019

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
LEGEND ,
Apr 04, 2019

Copy link to clipboard

Copied

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>

  <!-- HTTP/2 push this resource, or inline it, whichever's faster -->

  <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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 1
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 0
LEGEND ,
Apr 04, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 0
LEGEND ,
Apr 04, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 0
LEGEND ,
Apr 04, 2019

Copy link to clipboard

Copied

pziecina  wrote

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

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 0
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 0
LEGEND ,
Apr 04, 2019

Copy link to clipboard

Copied

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 .

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 1
LEGEND ,
Apr 03, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 1
LEGEND ,
Apr 03, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
LEGEND ,
Apr 11, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 11, 2019 0
osgood_ LATEST
LEGEND ,
Apr 11, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 11, 2019 1