CSS not publishing

  

Hello,

My css is simply not publishing properly to the environment. If I change the modules CSS, it does not change on the web page. This is an internal environment. Version: 10.0.825. This bug has been around for a little while and I have made do.

Code in OS: 

/* APP Title **************************/
.Application_Title {
    color: white;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: normal;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    white-space: nowrap;
}

Code on site: 

/* APP Title **************************/ .Application_Title {     color: white;     font-size: 16px;     letter-spacing: 1px;     line-height: 50px;     overflow: hidden;     padding-left: 10px;     padding-right: 10px;     text-decoration: none;     white-space: nowrap; }


This is comparing like for like with Chrome Dev tools in the most recently published version on the development environment. What is extremely odd is It seems that some changes are kept in the publish. (some comments and new things are kept) but adjustments in sizes and things such as that do not seem to be published. 


Thanks for any help or advice you can provide. 

Solution

Hello Dominic,

Not sure if it is the case, but let's see.

If you remember, the CSS defined in the property Style Sheet (of theme, page and web blocks) is put into a file to be downloaded by the browser.

In the header of the page html, it is put like this: 

<link href="/Module_Theme/Theme.Module_Theme.css?1907" type="text/css" rel="stylesheet">

Do you noticed here the "?1907"?

This is like a timestamp, or a version number. Every time you publish the module that contains the theme being changed, the file storing the CSS is just updated, and this "version" number is also updated.

Let's say that you made a change and now the version is 1909.

If you don't publish the consumers, they will use the old version number in the link (1907).
The browser will see this, and will find in its own cache a file that matches this name, and will use it instead of download the new file with the changes. You will not see any changes in your page, unless you refresh the page forcing the browser to download the new version from the server (the file is the same and no matter the version number it will be downloaded).

To guarantww that when a user enters a page it will see the most recent style, you need to publish your consumer modules, so that they become aware of the change in the version number and start to use this new number, forcing the browser to download the file, again, from server, instead of using the one in the cache.

At least, the behavior you described, more or less, is what happens when you don't publish the consumers after changing the style sheet in a producer module.

Cheers.

Solution

What I had found was a small quirk where there is a loop of producers and consumers meaning I needed to publish module A, then B and then A again to ensure all the changes were made. I realise this is not standard practice to have a consumer consuming a consumer, but unfortunately this can happen occasionally without realising it.

This is slightly more complicated than your answer, but at the core, you are totally right. As with a lot of things, publishing everything a lot of times tends to fix it.


Thanks for the help!

Dominic, 

What you're talking is called Cyclic Reference.It's really a bad practice.
But the platform can deal with it.

Put all the modules in a solution and publish the solution in the Service Center.
It will take care of this process for you, but can take some time to run,

It is always better to avoid this.

Cheers.