EPiServer 4.50 and later includes some changes in the Util/styles directory:

system.css has been replaced by system_template.css
linkeditor.css has been replaced by linkeditor_template.css

What is the reason for these changes?

EPiServer 4.50 introduced a feature called relocation that allows administrators to relocate virtual directories. For example, the previously hard-coded "edit" directory in EPiServer can now be changed to any location, such as "some/other/unkown/directory/4711". Relocation requires that all URLs are dynamic (the addresses are solved runtime), including URLs in CSS files. However, the CSS standard does not support dynamic content, so EPiServer uses a custom solution that does not break any standards to accomplish this. A part of the solution is to rename CSS files that have dynamic content to "_template.css".

Should I download system.css from somewhere?

No, the system_template.css is actually system.css, so you do not need a separate system.css.

What happens if there is a system.css and a system_template.css?

The system.css file is always loaded first, if it exists. This is to ensure backward compatibility. If no system.css can be found, system_template.css will be loaded.

What happens when the browser requests system.css?

The dynamic CSS technology in EPiServer is totally transparent to IIS and the browser; they are completely unaware of what is going on behind the scenes. When the browser makes a request for system.css, it is system.css that is returned, from the browser's point of view, even if it really was system_template.css that was loaded on the server.

Which one should I refer to in code, system.css or system_template.css?

Always refer to system.css. Never refer directly to system_template.css.

If you refer to system_template.css directly, IIS will load system_template.css and send the content unmodified back to the browser. EPiServer will not have a chance to intercept the request. Since _template.css files may contain dynamic content (which is not supported by the CSS standard), the page loading may crash in the browser. So, to avoid any problems, always refer to "/Util/styles/system.css".

Will it work if I rename system_template.css as system.css?

No. You will get into trouble, for the same reasons mentioned above.

The information below is only relevant for EPiServer 4.

How does the dynamic CSS technology work?

When the browser requests for a file and IIS looks for the file on the server, one of two things can happen; either IIS finds the requested file and sends it back to the browser or it finds nothing and the 404 HTTP error is raised. When the error occurs, EPiServer's SpiderSupport HTTP module analyzes the error. If it sees that a request for a "_template.css" file was made, it tries to load the CSS file. If the file is found, the 404 error is canceled, all dynamic content in the loaded file is replaced with runtime values and the content is sent back to the browser, disguised as the original CSS file that the browser requested.

Why do I get the HTTP error 404 - system.css cannot be found?

If you get this error, the custom error 404 in IIS is not configured correctly.
To fix the problem, see this article.

After I upgraded a site to EPiServer 4.50, it looks weird (see pic below). Why?

If you get this error, the custom error 404 in IIS is not configured correctly.
To fix the problem, see this article.

More information

For more information about Dynamic CSS, please see this article.