Output CSS before Javascript in the Joomla core templates too (important: template designers follow our example)

[Beat]

Sorry if this has already been discussed, didn't find a reference and
where to best post:

In Joomla 1.5, core templates output teir CSS files *after* the other
heads, including JS.

However, modern versions of JS libraries require CSS to be loaded
before JS.

Also, it allows for faster browser rendering, and removes flicker on
slow downloads.

Can this be changed in joomla 1.5 and 1.6 ?

Specifically:
- in joomla 1.5 output the CSS links in template before the heads

- allow template in joomla 1.6 to add their CSS files before other CSS
files (and inline CSS before other inline CSS) to the JDocument, and
then simply use the heads output method to also output the CSS.

Sounds reasonable ?

[Amy Stephen]

To add - this fits into the discussion of CSS/JS minification.

Today, a system plugin can retrieve extension CSS and JS files easily, consolidate those into a single file, reduce the file size, and replace existing statements with the new file. (CSS at top, and JS at bottom of page.)

It's not as easy to collect Template CSS statements.

When I created a minify plugin, I "invented" a new JDOC-like statement that allowed me to list Template CSS files by type in a required syntax. That predictable approach then provided a hook to identify those resources in a system plugin.

Would it make sense to address this challege with a JDOC type of approach, or another idea, so that plugins can more easily introduce performance improvements?

[Andrew Eddie]

I'll put that on my list to fix in 1.6 this week (if I can find my
list on the mess of a desk ... *sigh*).

Regards,
Andrew Eddie
http://www.theartofjoomla.com - the art of becoming a Joomla developer




2009/6/7 Beat <bea...@gmail.com>:

[Ian MacLennan]

Would the proper approach be to have the templates call JHtml::stylesheet?

I would think there are others who could handle this if you wanted to
keep going with more pressing things on your list, andrew.

Ian

--
Sent from my mobile device

[Ercan Özkaya]

Hrm. It makes sense to me and it would make it easier to concatenate
and zip the files together if needed.

On Jun 7, 4:58 am, Ian MacLennan <ianlen...@gmail.com> wrote:
> Would the proper approach be to have the templates call JHtml::stylesheet?
>
> I would think there are others who could handle this if you wanted to
> keep going with more pressing things on your list, andrew.
>
> Ian
>

> On 6/6/09, Andrew Eddie <mambob...@gmail.com> wrote:
>
>
>
>
>
> > I'll put that on my list to fix in 1.6 this week (if I can find my
> > list on the mess of a desk ... *sigh*).
>
> > Regards,
> > Andrew Eddie

> >http://www.theartofjoomla.com- the art of becoming a Joomla developer
>
> > 2009/6/7 Beat <beat...@gmail.com>:

[Beat]

Yes, JHtml::stylesheet can be called, makes sense, but keep in mind
that it needs to be slightly extended in following way:

- template is executed after component
- but it's CSS needs to be outputed BEFORE the component's, so the
component can override if needed.

So a param (or different call) is needed to specify that the CSSes
need to go at begining needs to be available to the template.

Actually same could apply to Joomla 1.5 core templates as well and
easily...showing template designers the way to go... ;-)

Appending/Compression/Minification v.s. browser caching for whole site
visits is another subject imho, that needs quite some thoughts, and
that should be treated in a separate thread. It doesn't make sense to
output different CSS and JS files at each page, because then you loose
browser caching benefit for them. So it's way more complex then the
simple improvement proposed here.

Regards,
Beat

On 7 June, 03:58, Ian MacLennan <ianlen...@gmail.com> wrote:
> Would the proper approach be to have the templates call JHtml::stylesheet?
>
> I would think there are others who could handle this if you wanted to
> keep going with more pressing things on your list, andrew.
>
> Ian
>

> On 6/6/09, Andrew Eddie <mambob...@gmail.com> wrote:
>
>
>
>
>
> > I'll put that on my list to fix in 1.6 this week (if I can find my
> > list on the mess of a desk ... *sigh*).
>
> > Regards,
> > Andrew Eddie

> >http://www.theartofjoomla.com- the art of becoming a Joomla developer
>
> > 2009/6/7 Beat <beat...@gmail.com>:

[Ian MacLennan]

On Sun, Jun 7, 2009 at 9:33 AM, Beat <bea...@gmail.com> wrote:

Yes, JHtml::stylesheet can be called, makes sense, but keep in mind
that it needs to be slightly extended in following way:

- template is executed after component
- but it's CSS needs to be outputed BEFORE the component's, so the
component can override if needed.

So a param (or different call) is needed to specify that the CSSes
need to go at begining needs to be available to the template.

Good point.

Actually same could apply to Joomla 1.5 core templates as well and
easily...showing template designers the way to go... ;-)

Absolutely.

Appending/Compression/Minification v.s. browser caching for whole site
visits is another subject imho, that needs quite some thoughts, and
that should be treated in a separate thread. It doesn't make sense to
output different CSS and JS files at each page, because then you loose
browser caching benefit for them. So it's way more complex then the
simple improvement proposed here.

I don't know if compression/minification was being proposed for the core.  The only point raised was that 3pd trying to implement this via a plugin currently have to do hackish things to deal with template stylesheets.  This would make everything consistent.


 

Ian

[Amy Stephen]

Ian -

I incorrectly assumed it was too late to use JHtml::stylesheet for Template CSS files. But, I tested your idea inside of the Template, and it works just fine. Joomla! loads those CSS files.

There is a problem, though. The CSS file sequence is different and the Template CSS files are no longer last. The implication is that Designers would be unable to override Extension styling, if necessary.

If the Template CSS can be loaded last, in the order specified within the Template, then, I think your suggestion is the exact right approach.

Thanks for sharing that idea.
Amy :)

[Amy Stephen]

On Sun, Jun 7, 2009 at 8:33 AM, Beat <bea...@gmail.com> wrote:

Yes, JHtml::stylesheet can be called, makes sense, but keep in mind
that it needs to be slightly extended in following way:

- template is executed after component
- but it's CSS needs to be outputed BEFORE the component's, so the
component can override if needed.

When you say "the Component" should be able to override the CSS, are you referring to the Template CSS as "the Component's CSS"?

If so, I agree.

Or, are you saying that the Component itself should be able to load additional CSS files that can then override the CSS defined in the Template?

If so, I see that as a problem since it limits the Designer.

I guess I am not certain what sequence you are advocating. Thanks, in advance, for clarifying.

Amy :)

[Schalk Versteeg]

Hi, 

Let's just quickly formalise the css loading sequence (Please change/add where necessary):

1. Core

2. Component

3. Template

Schalk

[Chris Davenport]

Hi Schalk,

I'm not sure what you mean by "core" here.  Did you mean "core components"?  I don't recall there being any CSS emanating from the framework itself.  If so then your 1 and 2 are actually the same thing.

I have a half-baked idea about using priority codes to decide on the order that the head renderer will output the CSS links.  Calls to addStylesheet could assign a default priority of, say, 10.  Then in the template you could something like

$doc->changeStylesheetPriority( $file, $priority);

which would look for $file in the list of CSS files and adjust the priority code associated with it.  The head renderer then outputs the CSS link statements in priority order.  Links with equal priority are output in no particular order.  That gives template designers complete control over the sequence.

Well, I did say it was half-baked!

Chris

2009/6/8 Schalk Versteeg <schalk....@gmail.com>

[Schalk Versteeg]

On Mon, Jun 8, 2009 at 11:26 AM, Chris Davenport <chris.d...@joomla.org> wrote:

Hi Schalk,

I'm not sure what you mean by "core" here.  Did you mean "core components"?  I don't recall there being any CSS emanating from the framework itself.  If so then your 1 and 2 are actually the same thing.

This would be the core components and Yes then it is the same thing, Though I thought of Core Components, 3pd Components and Template in my List.

The rationale being that some 3pd Components could overwrite core layout to help in extending the functionality.

 

I have a half-baked idea about using priority codes to decide on the order that the head renderer will output the CSS links.  Calls to addStylesheet could assign a default priority of, say, 10.  Then in the template you could something like

$doc->changeStylesheetPriority( $file, $priority);

which would look for $file in the list of CSS files and adjust the priority code associated with it.  The head renderer then outputs the CSS link statements in priority order.  Links with equal priority are output in no particular order.  That gives template designers complete control over the sequence.

An interesting idea. Maybe a bit off-topic, but the same concept could also be used for Javascript loading and can come in especially handy were the people who would like to use jQuery in compatibility mode or another js framework in there front end (Though not supported or advised by Joomla).

[Amy Stephen]

Chris -

The designer would not find that a useful tool, though, because the code would be in the Extensions. In fact, it really could create an environment where developers would try to make *their* extension CSS highest, which would cause all kinds of frustration for a designer as they tried to override the CSS.

Right now, Joomla's CSS arrangement is very elegant and empowering. A designer can override extension CSS in the Template very easily since Joomla!'s file sequencing always enforces the designer's choice. From my perspective, we have a suitable, simple approach now.

The issue we are talking about is very small in scope. There is a challenge programmatically identifying CSS files in the Template. Ian's idea is to use existing methods within the template. Makes good sense.

Unfortunately, that throws Template CSS into the same group as Extension CSS and Joomla! can't output Template CSS in the sequence defined by the designer. If the developers can make sure Template CSS is loaded last, in the sequence specified in the Template, we can use Ian's idea to address the other challenge.

Otherwise, unless I am not aware of something, CSS sequencing works perfectly. It's a simple approach. And, designers have complete control.

Schalk -

I believe we have already formalized CSS loading - and, I believe it's as you suggest: Extensions first, then Template.

Thanks,
Amy :)

[Compass]

I'd like to further suggest that whatever the result, the template CSS
files absolutely have to be loaded last to ensure intended cascading.

For example, template designers will frequently load a specific
stylesheet to *override* the css of a 3rd party extension (like
community builder) to more easily skin it to match the template theme.

I'd also throw out there that template designers will frequently embed
CSS in the head based on parameters/counting modules etc etc.

Barrie North

[Ian MacLennan]

Could you do something as simple as checking for /templates/ at the beginning of the path to the CSS file and add it to a separate queue?  Then output the template filess after the other ones?

Ian

[Amy Stephen]

Ian -

The core is outputting the incorrect sequence. (Or, is that what you mean?) 

Amy

[Schalk Versteeg]

Amy,

Thanks for clarifying the output sequence.

Schalk

[Ian MacLennan]

No...

what I mean is, to solve the problem of prioritization when you are using JHtml::_('stylesheet'), you could just do a quick check in there to see if the stylesheet lives in the templates folder.  If it does, add it to a different buffer.

Then, when you render, output the template css files after.

Ian

[Chris Davenport]

Amy, I'm not sure I understand what you mean by saying that "the code would be in the Extensions".  The changeStylesheetPriority method would be called in the template, by the template designer.  It is possible for an extension designer to call it too, but why would they?

Of course, if you are right about "CSS sequencing works perfectly" then I'm trying to solve a problem that doesn't exist.  Although I haven't encountered any problems myself, I do recall others saying that they wanted more control over the cascade sequence.  Unfortunately, I can't recall exactly what issues they were having, but returning to the problem that Beat raised...

The core templates have hard-coded LINK statements after the jdoc head statement.  That causes component CSS files to be loaded before the template CSS but after the JS LINK statements, which can be a problem as Beat described.  Moving the hard-coded CSS LINK statements above the jdoc head would cause the CSS cascade to break.  So the solution would be for the template to load the CSS files using addStylesheet calls instead.  That ensures that component CSS is output first, then the template CSS, then the JS files.  The fly in the ointment is that if there is a module that uses addStylesheet to load a bit of CSS then it will come *after* the template CSS.  Having a changeStylesheetPriority call would allow the template designer to override the default sequence by allowing the template CSS to be assigned a higher priority.

Chris.

2009/6/8 Amy Stephen <amyst...@gmail.com>

[Compass]

"The core templates have hard-coded LINK statements after the jdoc
head
statement. "

Well, they are just there as that's where the template designer put
them.

<link rel="stylesheet" href="/1.5/templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="/1.5/templates/system/css/general.css"
type="text/css" />

For example, I dont think I can see them on joomla.org

[Beat]

Template-designers v.s. Components designers ... LOL

Ok, got your point, you win this time :)

So actually, nothing needs to be done for priority, as the template
will be adding its CSS files last to JHTML, so when template outputs
head items, its CSS should come out last too :)

Please correct me if i'm wrong, but adding CSS links to JHTML should
not be outputed in reverse order, right ?

[Amy Stephen]

Ok, Ian and I talked about this and did a bit of testing.

The sequence of CSS file inclusion is directly related to application flow.

We are going to play around with the code and think on this a bit.

[Chris Davenport]

That's right Barrie.  Let's see if I can explain the problem in more detail...

In Milky Way, for example, we have something like this (simplified for clarity):

<head>
<jdoc head>
<link stylesheet system.css>
<link stylesheet general.css>
</head>

Now, let's suppose I have a component which uses addStylesheet to load "component.css" and also loads some JS in the form of "component.js".  What gets rendered is:

<head>
<link stylesheet component.css>
<link javascript component.js>
<link stylesheet system.css>
<link stylesheet general.css>
</head>

Which is fine.  But suppose the JS needs all the CSS to be loaded first.  Well, I could alter the template to this:

<head>
<link stylesheet system.css>
<link stylesheet general.css>
<jdoc head>
</head>

But this gets rendered as:

<head>
<link stylesheet system.css>
<link stylesheet general.css>
<link stylesheet component.css>
<link javascript component.js>
</head>

so the CSS cascade is wrong.  So instead I could use addStylesheet like this:

<head>
<jdoc head>
</head>
<?php $this->addStylesheet( 'system.css' ); ?>
<?php $this->addStylesheet( 'general.css' );

which would be rendered as:

<head>
<link stylesheet component.css>
<link stylesheet system.css>
<link stylesheet general.css>
<link javascript component.js>
</head>

and everything is fine again.  But look what happens if I now install a module that loads "module.css":

<head>
<link stylesheet component.css>
<link stylesheet system.css>
<link stylesheet general.css>
<link stylesheet module.css>
<link javascript component.js>
</head>

The CSS cascade is such that the template designer cannot override the module CSS, unless you resort to something like this:

<head>
<jdoc head>
<link stylesheet module-overrides.css>
</head>
<?php $this->addStylesheet( 'system.css' ); ?>
<?php $this->addStylesheet( 'general.css' );

where "module-overrides.css" has been created to overcome the "faulty" cascade.  That's not a very satisfying way to solve the problem.  Instead, my suggestion would be to do this:

<head>
<jdoc head>
</head>
<?php $this->addStylesheet( 'system.css' ); ?>
<?php $this->addStylesheet( 'general.css' );
<?php $this->changeStylesheetPriority( 'system.css', 20 ); ?>
<?php $this->changeStylesheetPriority( 'general.css', 21 ); ?>

or even just this (ignoring other arguments to addStylesheet):

<head>
<jdoc head>
</head>
<?php $this->addStylesheet( 'system.css', 20 ); ?>
<?php $this->addStylesheet( 'general.css', 21 );

which would render like this (with the priorities in brackets, assuming a default priority of 10):

<head>
<link stylesheet component.css> (10)
<link stylesheet module.css> (10)
<link stylesheet system.css> (20)
<link stylesheet general.css> (21)
<link javascript component.js>
</head>

Okay, there's a lot of hypotheticals there and maybe nobody is encountering this sort of problem in practice.

The idea of using priorities could be extended to pretty much everything that is rendered by jdoc head.  For example, at the moment *all* addStylesheet calls are rendered before *all* addStyleDeclaration calls.  Is that a problem in practice?  I don't know, but there's nothing much that the template designer can do to fix it without hacking the components or modules that make those calls.  If all elements that are going to be rendered in the head were placed in a common priority pool then the template designer would have total control over the order of rendering all elements.

Am I seeing problems where none exist?

Chris.



2009/6/8 Compass <compass...@gmail.com>

[Amy Stephen]

One little correction, Chris. Module CSS does *not* load after Template CSS.

+++++

I want to drop back here to see if we agree on principles that will help ensure a predictable load sequence and simplicity.

1. The designer should have the final say without hacking code. After Joomla! has been installed and all necessary extensions are added, then, the designer can begin crafting the look of the Web site. The designer should have complete confidence the files they add - in the sequence they defined it - is how Joomla! will render the page.

2. In general, Extensions (including Core) should only provide layout CSS and Semantic markup, not visual CSS. But, if the developer wants to offer visual CSS, they should do so knowing the look they want can be overridden by the designer. If there is a compelling reason their visual CSS should be used, then the developer should communicate that intentionally to the designer and perhaps even offer a file the designer can include with their template CSS.

3. Joomla should follow best practices. Yahoo's principles on performance call for CSS to be loaded first, and JS to be loaded at the bottom of the page. For 1.6, it would be good to do that, if possible.

http://developer.yahoo.com/performance/rules.html

4. We have very limited scope problem. The Template CSS is not loaded into header arrays where it can be used to create minify processes. Ian's suggestion is sound - use the addStylesheet method. While doing so uses standards practices, it also introduces a new wrinkle. If we do that, we cannot ensure the Designer's CSS is "the final say" anymore. It gets mixed into the Extension "pile" and added before Module CSS. Unless we can resolve this problem, we should not use the addStylesheet method in the Template.

5. If we apply those principles and understandings, then we leave the Designer in charge. They *might* have to add CSS to their Template because of some problem caused in the sequence of Extension CSS, but - they can remedy it - and I am not hearing any complaints about it and do not see a problem here.

I think we have 2 potential action items:

1. See if we can load the Template CSS using the normal addStylesheet method and get Joomla! to output it last. If we can, then, we pave the way for minify plugins.

2. Move the JS loads to the bottom of the page for 1.6.

Other than those two things, I don't see a problem. I am interested in hearing more from Beat about his initial request. It would take a very convincing argument for me to think it makes good sense to trump the Designer's authority using code. I see that as a unmanagable scenario and one that would add complexity in order to promote a bad practice.

Thanks,
Amy

[Chris Davenport]

See comments inline....

2009/6/8 Amy Stephen <amyst...@gmail.com>

One little correction, Chris. Module CSS does *not* load after Template CSS.

Are you sure?  I'm going on my memory of the execution sequence, which may well be faulty, but I think it goes like this:

1. Component gets executed, so any addStylesheets it calls will go into the buffer first.
2. All PHP code in the template gets executed, so any addStylesheets it calls go into the buffer next.
3. jdoc statements are executed (in reverse order).  Module code is not executed until this point, so any addStylesheets they call will go into the buffer last.
 

+++++

I want to drop back here to see if we agree on principles that will help ensure a predictable load sequence and simplicity.

1. The designer should have the final say without hacking code. After Joomla! has been installed and all necessary extensions are added, then, the designer can begin crafting the look of the Web site. The designer should have complete confidence the files they add - in the sequence they defined it - is how Joomla! will render the page.

Agreed.
 

2. In general, Extensions (including Core) should only provide layout CSS and Semantic markup, not visual CSS. But, if the developer wants to offer visual CSS, they should do so knowing the look they want can be overridden by the designer. If there is a compelling reason their visual CSS should be used, then the developer should communicate that intentionally to the designer and perhaps even offer a file the designer can include with their template CSS.

Agreed, although I think it's entirely reasonable for an extension designer to include default CSS that can be overridden by the template designer.
 

3. Joomla should follow best practices. Yahoo's principles on performance call for CSS to be loaded first, and JS to be loaded at the bottom of the page. For 1.6, it would be good to do that, if possible.

http://developer.yahoo.com/performance/rules.html

Yes, and perhaps we should introduce a jdoc tail to render JS at the bottom by default.  I seem to recall that some JS needs to be at the top (could be my faulty memory again), so perhaps addScript needs a flag to allow the default to be overridden.
 

4. We have very limited scope problem. The Template CSS is not loaded into header arrays where it can be used to create minify processes. Ian's suggestion is sound - use the addStylesheet method. While doing so uses standards practices, it also introduces a new wrinkle. If we do that, we cannot ensure the Designer's CSS is "the final say" anymore. It gets mixed into the Extension "pile" and added before Module CSS. Unless we can resolve this problem, we should not use the addStylesheet method in the Template.

Well, I always use addStylesheet in my templates.  Partly because I love to use the API whenever possible, but also because I can never remember the LINK syntax. ;-)
 

5. If we apply those principles and understandings, then we leave the Designer in charge. They *might* have to add CSS to their Template because of some problem caused in the sequence of Extension CSS, but - they can remedy it - and I am not hearing any complaints about it and do not see a problem here.

It would be nice to find out what problems template designers are having with CSS cascade sequence.  I can see some theoretical problems, but I really don't know if they are important enough to require attention.
 

I think we have 2 potential action items:

1. See if we can load the Template CSS using the normal addStylesheet method and get Joomla! to output it last. If we can, then, we pave the way for minify plugins.

You can if you assign priorities. :P  But maybe there's a better way.
 

2. Move the JS loads to the bottom of the page for 1.6.

jdoc:include type="tail" ?
 

Other than those two things, I don't see a problem. I am interested in hearing more from Beat about his initial request. It would take a very convincing argument for me to think it makes good sense to trump the Designer's authority using code. I see that as a unmanagable scenario and one that would add complexity in order to promote a bad practice.

I agree, the template designer should have the final say.

 

Thanks,
Amy

[Amy Stephen]

On Mon, Jun 8, 2009 at 2:09 PM, Chris Davenport <chris.d...@joomla.org> wrote:

See comments inline....

4. We have very limited scope problem. The Template CSS is not loaded into header arrays where it can be used to create minify processes. Ian's suggestion is sound - use the addStylesheet method. While doing so uses standards practices, it also introduces a new wrinkle. If we do that, we cannot ensure the Designer's CSS is "the final say" anymore. It gets mixed into the Extension "pile" and added before Module CSS. Unless we can resolve this problem, we should not use the addStylesheet method in the Template.

Well, I always use addStylesheet in my templates.  Partly because I love to use the API whenever possible, but also because I can never remember the LINK syntax. ;-)

Ah ha! I now understand why you see problems.

You are experiencing the problem Ian and I have been talking about and trying to solve.

The Template CSS should load last. Normally, it does. Except if you use addStylesheet

If the Template CSS were to load last for the addStylesheet, how would that possibly change your perspection for a priority assignment for each CSS file?

• What problems could it potentially solve?
• What problems could it potentially create for a designer?

Thank you!
Amy :)

[Chris Davenport]

Firstly, I don't think you can get module code to execute before code in the template.  The execution sequence is pretty fundamental to the template architecture.  You could flip a switch in addStylesheet just before the template code gets executed, then flip it back after, so that any addStylesheet calls in the template go into a separate buffer, which then gets rendered last when the head is rendered.  That would solve one class of sequence problems without priority codes.

What problems could it potentially solve?

Well, it would solve Beat's problem. ;-)  Beyond that, I really don't know how often CSS cascade problems are encountered.  No doubt some of the failure scenarios could be fixed if the template designer understood the execution sequence better.  On the other hand, I'd prefer to give designers a tool that would enable them to overcome any sequence problem very easily without having to understand how Joomla works internally.

I know that some people have encountered problems with not being able to control JavaScript load sequences and the priority code idea could very easily be extended to cover all items rendered by jdoc head.  If a designer wanted to mingle JS with the CSS or move meta tags to a different position in the head, that could be done quite simply.  Something like:

$this->setHeadPriority( <type>, <id>, <priority> );
where <type> = 'js', 'css', 'meta', or whatever.
<id> = filename or something else that identifies the head element in the buffer.
<priority> is a integer representing relative sequence of rendering.

Similarly, setTailPriority would affect jdoc tail sequence.

Maybe extend getHeadData to return an array containing all the priority information a designer might want for debugging.

If there aren't many people encountering these sorts of problems then it probably isn't worth fixing.  It's not a problem that I have personally come across, although I have been aware of the theoretical possibility since I started trying to document it. ;-)  But if there are enough people out there who could benefit then it would be a fairly minor feature to add.

Chris.

2009/6/8 Amy Stephen <amyst...@gmail.com>

[Andrew Eddie]

> 3. Joomla should follow best practices. Yahoo's principles on performance
> call for CSS to be loaded first, and JS to be loaded at the bottom of the
> page. For 1.6, it would be good to do that, if possible.
>
> http://developer.yahoo.com/performance/rules.html

That's not quite what it says ;) Scripts that do not affect the
actions on the page can be loaded last. A good example is Google
Analytics. However, if you have a dynamic menu, the code for that
must be loaded prior to the HTML that will be affected otherwise you
site will hang in a state of limbo until the JS loads (last).

If we had Chris's idea of <jdoc:include type="tail" /> then we could
add a 'defer' setting to JHtml::script, eg:

JHtml::script('can_wait.js', 'path/path', array('defer' => true);

where the third argument is whether it can be deferred.

(Note: there is already a third argument there for loading mootools -
I think I'd be inclined to break that argument and re-purpose it.
Mootools should be loaded by hand prior to the script if it's needed.
However, that could cause some unexpected backward compatibility
issues, although this argument is not used in the core code).

I think we could put some smarts in that if the tail jdoc was not
present, deferred scripts could go in the head.

Regards,
Andrew Eddie

[Andrew Eddie]

<jdoc:include type="head" order="script, css, style" />

That would be doable.

Regards,
Andrew Eddie
http://www.theartofjoomla.com - the art of becoming a Joomla developer


2009/6/9 Chris Davenport <chris.d...@joomla.org>:

[Amy Stephen]

On Mon, Jun 8, 2009 at 4:51 PM, Chris Davenport <chris.d...@joomla.org> wrote:

Firstly, I don't think you can get module code to execute before code in the template.

Chris -

I did not say the code *executed* first. I said the Template CSS files load after *all* of the Extension CSS files when you use a "normal" CSS statement.

You don't have to believe me - you can test it easily.

Give it a shot and see!
Amy :)

[Amy Stephen]

Andrew -

1. I just want to identify the Template CSS files (without doing something hackish.) Can't do it when "normal" CSS statements are used. When we use the API, then Module CSS loads after the Template CSS - which create the problem Chris is noticing.

2. I believe it is a mistake to load the JS before the CSS. In some cases, the JS refers to a CSS file that has not yet been loaded. That creates a problem - and I think that is the problem Beat is having (need more info).

Now, we could add new parameters and train developers and designers to use these new flags, but,I think allowing a priority load sequence for CSS will create new problems for designers that they will only be able to fix if they hack code or remove extensions. Not good.

These are *bugs*.

1. Template CSS should always load last. That is the only way to ensure designers have control. I think we should try to fix that StyleSheet API call.

2. JS should load after CSS. I'm not the expert here, but I cannot think of any compelling reason to load JS before CSS. If we alter that sequence, problems in that area are resolved.

I do not believe any other issues have been identified. I do believe both of those issues are solvable without any additional parameters.

Thanks.

[Amy Stephen]

Let me clarify - I am NOT recommending the JS load at the bottom of the page if you prefer not, but I think it has to load after the CSS.

[Amy Stephen]

On Mon, Jun 8, 2009 at 4:57 PM, Andrew Eddie <mamb...@gmail.com> wrote:

> 3. Joomla should follow best practices. Yahoo's principles on performance
> call for CSS to be loaded first, and JS to be loaded at the bottom of the
> page. For 1.6, it would be good to do that, if possible.
>
> http://developer.yahoo.com/performance/rules.html

That's not quite what it says ;)  Scripts that do not affect the
actions on the page can be loaded last.  A good example is Google
Analytics.  However, if you have a dynamic menu, the code for that
must be loaded prior to the HTML that will be affected otherwise you
site will hang in a state of limbo until the JS loads (last).

 

Yes, Andrew, I re-read it and agree with your correction. Thank you!

[Chris Davenport]

Okay, I can see now that I misunderstood what you meant by "Template CSS".  You meant just the hard-coded LINK statements, right?  "Template CSS" for me implied all the CSS originating from the template, including any addStylesheet calls in the template itself, whereas I think you were thinking of anything that called addStylesheet as being "Extension CSS".

Chris.

2009/6/9 Amy Stephen <amyst...@gmail.com>

[Beat]

Imho, please correct if I'm wrong, but almost 100% sure that in Joomla
1.5, modules are rendered and buffered before the template is called
for rendering, so modules output the CSS headers before the template
is called... ?

EDIT: i'm 100% sure since modules can add to head fine.

In joomla 1.0 this was different since modules were executed and
rendered within the template rendering inclusions.

So no reason that modules would output after the template.

So no reasons for priorities.

<head>
<jdoc head>
</head>
<?php $this->addStylesheet( 'system.css' ); ?>
<?php $this->addStylesheet( 'general.css' );

<?php $this->addStylesheet( 'templates/mytemplate/css/
template_css.css' );

This is what should come out with a module:

<head>
<link stylesheet component.css>
<link stylesheet module.css>

<link stylesheet system.css>
<link stylesheet general.css>

<link stylesheet templates/mytemplate/css/template_css.css>
<link javascript component.js>
</head>

Amy, I'm sure you will confirm this as well, so the CSS priority/
ordering debate would be closed, and only modification (as initially
proposed) would be that templates use addStyleSheet and addScript
calls like anybody else, and then simply let joomla output ALL the
headers.

Ok, hope that clarifies the CSS debate.


Regarding JS:

>> 2. Move the JS loads to the bottom of the page for 1.6.
>
> jdoc:include type="tail" ?

There are 2 types of JS files and you can't simply move all of them
out of the head to very bottom of page.
There are JS files which do modify the DOM or Stylesheet for
rendering, and those must stay at the top, to avoid flicker on
rendering, as a script within the body part interrupts the browser
internal buffering and makes most browsers start to render what's
above the script while loading the script file. You don't want that
even at the bottom of page if the script changes anything.

Also the "DOM ready" event needs to be in the header, to be able to
catch correctly that event.

What's utterly important is to never output script within the html
body as that generates flicker on the rendering and partial renderings/
redraws which slow down the page.

I saw same if including JS just before </body> tag.

So imho, it will make browser draw twice the page, and slow-down
reactivity with normally fast internet connections.

I could write another thread regarding more important JS improvements
which could be done, if that is of interest in here. I will just start
one. But if you wish, more could come.

Best Regards,
Beat

On 8 June, 21:09, Chris Davenport <chris.davenp...@joomla.org> wrote:
> See comments inline....
>

> 2009/6/8 Amy Stephen <amystep...@gmail.com>

[Amy Stephen]

Yes, I was misunderstanding you, as well. lol! I finally realized what you were talking about when you said you use addStylesheet. Thanks so much for your patience as we kept trying to find one another!

IMO, Chris, where "addStylesheet" is used inside of the Template - it should behave just like using LINK statements inside of the Template. I think it's a bug that it behaves differently. LINK statements in the Template cause Joomla! to place that CSS following *all* of the Extension CSS. That's a good position of empowerment for the designer.

[Amy Stephen]

On Tue, Jun 9, 2009 at 5:09 AM, Beat <bea...@gmail.com> wrote:

Amy, I'm sure you will confirm this as well, so the CSS priority/ ordering debate would be closed, and only modification (as initially proposed) would be that templates use addStyleSheet and addScript
calls like anybody else, and then simply let joomla output ALL the headers.

Ok, hope that clarifies the CSS debate.

Beat -

I agree, no reason for a priority system.

Now, to confirm, you are aware that there *is* a sequence problem when those API methods are used within the Template? In order to use those methods in the Template, Joomla! must return the Template CSS and JS last, like Joomla! does when you use the LINK statement. That is what needs to be resolved before the API methods can be safely used. Agree?

(Now, in case it wasn't clear, Chris currently uses that approach *now*, and, as a result, the Module CSS follows the Template CSS files. Naturally, he thought this happened to everyone and proposed a clever approach to taking care of what looked like a preference problem. We understand one another, now, but I wanted you to understand why there was confusion.)

So - if we are in agreement, when Ian and I were looking at this, we found there were at least four arrays in the head that could be impacted - one for the links for CSS and JS, and one for the embedded CSS and JS. 

We need someone to get a patch together so the Devs can consider this. To be honest, I have my hands full with a few other Joomla! assignments, Beat, would you *please* help out in this manner? It would be very helpful and much appreciated.

Thanks to everyone - bring on video email to enhance our ability to communicate!
Amy :)

[Amy Stephen]

On Tue, Jun 9, 2009 at 3:23 AM, Chris Davenport <chris.d...@joomla.org> wrote:

Okay, I can see now that I misunderstood what you meant by "Template CSS".  You meant just the hard-coded LINK statements, right?  "

Chris - I apologize for not being more articulate with my word choice. Had I done that, we would have understood one another much more quickly.

[Amy Stephen]

On 9 June, 05:09, Beat <beat...@gmail.com> wrote:
>
> I could write another thread regarding more important JS improvements
> which could be done, if that is of interest in here. I will just start
> one. But if you wish, more could come.
>
> Best Regards,
> Beat

Beat - I would be interested in hearing your perspectives on that.
Thank you!

[Louis Landry]

On Tue, Jun 9, 2009 at 5:09 AM, Beat <bea...@gmail.com> wrote:

Imho, please correct if I'm wrong, but almost 100% sure that in Joomla
1.5, modules are rendered and buffered before the template is called
for rendering, so modules output the CSS headers before the template
is called... ?

EDIT: i'm 100% sure since modules can add to head fine.

Not exactly Beat.  The template is executed and parsed before modules are rendered and added to the document buffers.  The reason that modules can add to the head fine is because the document isn't put all back together again until after the modules are rendered. There are two steps of the template processing, parse and display.  The module execution happens in between them.  Because of this, if you have a PHP statement in your template file that includes CSS or JavaScript files in the document head, they will appear BEFORE any CSS or JavaScript files that are included into the document head by modules.

--
Development Coordinator
Joomla! ... because open source matters.
http://www.joomla.org

[Chris Davenport]

No apologies necessary, Amy.  The English language is such a blunt instrument that such issues are only to be expected.

I now think you're right when you describe the behaviour of addStylesheet as a "bug".  Luckily it should be pretty easy to fix it.

Chris.

2009/6/9 Amy Stephen <amyst...@gmail.com>

[Beat]

On 9 June, 19:48, Louis Landry <louis.lan...@joomla.org> wrote:

As usual, Louis, you're fully right. Forgot about the post-parsing-
replacements of the output of the template.

So yes, a special case is needed for the template CSS links and CSS
style output so it comes really at last of CSS outputs, including of
modules, *but still before JS*.

Best Regards,
Beat