URL versioning of images inside css for cache busting - css

I have a requirement in my project to version image files which are called from css. I have been researching on 'how to' and found our very own stackoverflow.com is versioning images. I found below code from http://cdn.sstatic.net/stackoverflow/all.css
background-image:url("../Img/sprite-herobox.png?v=d173774f3a9f")
Can somebody tell me how it is done?

CSS file is not probably a static file but a php/asp file, just with (.css) an extension and css code within

Related

Css file doesn't affect after editing in SharePoint Online

I has a css file named styles.css and it was loaded in masterPage of sharepoint .I change this css file but not working. I make sure this css file already loaded in html page.I also clear cache but I don't know why it doesn't affect when I edit. Please help me, thank you so much!
It is not recommended to modify the online master page directly.
Firstly, you need to check if the CSS file is really imported.
Secondly,if the file is not imported, classic page you could upload CSS here.
modern page we should upload CSS with SPFX,here is a tutorial: https://github.com/hugoabernier/react-application-injectcss.
If the file is imported, first check whether the content of the file is displayed normally (excluding problems caused by encoding), then you can add ‘! Important’ after the style.

How to alter CSS files inside aikau-1.0.101.10.jar in Alfresco

I was working on translating Alfresco share to Arabic i.e to RTL format.
Reading a comment from here I found out that the best way to proceed is to Create a custom extension pulling in an additional CSS file with the styling modifications.
Now coming to the question, I've encountered a problem while altering the css files to support RTL. The problem was that some css files were situated inside aikau-1.0.101.10.jar file. Can anyone help me on how to alter these css files ? or Can I override these files somehow ?
Some ways to do this:
You can create your own theme
Override LESS variable link
Fork Aikau and build your own jar link
Create an extension to include your own css file link

Firefox/Gecko loading css in another domain??what does it mean?

Following is an extract from Requirejs documentation :
Ideally RequireJS could load CSS files as dependencies. However, there are issues knowing when a CSS file has been loaded, particularly in Gecko/Firefox when the file is loaded from another domain. Some history can be found in this Dojo ticket.
Can anyone please explain what is happening in Gecko/Firefox??? it says they load files from another domain??what does it mean???
please help
thanks
I believe they are just referring to when sites use cdns to host static content. Using a different usually cookie less domain to host their css, images and js files. Not that Gecko/Firefox is doing something to all css, images and js files. I'm not sure why Gecko is different from other browsers during these conditions they describe however.

Mash css files and change relative paths

Until recently I was using Chirpy VS plugin for mashing css files. But I have found it doesn't change css url relative paths during mashing and it is a problem for me now (as I mash css files which access local images but are placed in different directories).
Is there any tool which mashes css files and changes urls relative paths accordingly?
You should check into the Yahoo tool for JS / CSS compression. There is a codeplex project which has Visual Studio post build support. I have tested it explicitly for the scenario you're asking about (relative paths) but it's worth exploring.
YUI Compressor for .NET
I have found this workitem which proves there is a bug in Chirpy.
Also it looks like CrusherModule will solve my problem.
Update. Finally I used CrushIt

ASP.NET themes and static contents

as you all know, ASP.NET includes each CSS stylesheet in the App_Themes's Theme folder inside the page. No discussion.
But now, I'm facing a little problem having lots of CSS files in a theme and willing to use a static content domain. I would like to load all the static content of my website from the static domain (not only CSS, but also icons, images, etc.), but let's now pay attention only to CSS.
My question is
Is it possible to override the behaviour of Page class, and for each CSS file found in Theme's folder, rewrite the <link> tag with the correct URL of the static content domain? I have nothing preventing me to deploy files into http://static.domain.com/App_Themes/Theme path, so at least adding a prefix to the tag is fine.
Thank you in advance.
Yes, you can. You can have a custom base page class write the CSS files it finds in the folder. Though, I'm not sure you can override the default behavior of the themes feature, so the easiest way is to move the CSS files outside of the default themes. Then, you can use the System.IO objects to read the directory, access the file, and generate the link.
HTH.
An alternate method is to write an http module. Have the module inspect the html being sent back to the client.
If it detects a style sheet reference, change the location that the style sheet is pulling from.
This works for the other items as well, such as images etc.

Resources